Documentation
Guides
Framework v3 guides for color system, migration, enhancement workflows, and TRMNL X compatibility.
V3 Overview
What's new in Framework v3: color palette, semantic colors, extended grayscale, and CSS variable architecture
V3 Upgrade Guide
Steps to upgrade your plugins from Framework v2 to v3
V3 Enhancement Guide
Use chromatic colors, semantic roles, and label variants in your plugins
TRMNL X Guide
Framework changes for TRMNL X compatibility
Foundation
The structural hierarchy of Screen, View, Layout, Title Bar, Columns, and Mashup - the fixed scaffolding for plugin content.
Arrangement
Control dimensions, spacing, and arrangement of elements. Size, spacing, gap, flex, grid, and aspect ratio - the building blocks for structure.
Responsive Utilities
Breakpoints, bit-depth variants, and visibility controls - building blocks for adaptive layouts.
Styling
Control appearance and visual effects. Background, border, image, and scale - the building blocks for custom interfaces.
Typography
Text color, alignment, and stroke utilities for controlling how text appears across devices and orientations.
Modulations
Engines and systems that adapt content at render time: overflow, clamping, value formatting, pixel-perfect text, and the Framework Runtime.
Elements
Atomic text and separator elements: Title, Value, Label, Description, and Divider. Use these for consistent typography and visual structure.