Framework v2 Overview

• New responsive model (not present in v1): size breakpoints (sm, md, lg, xl), orientation prefixes (portrait:, landscape:), and bit‑depth variants (1bit:, 2bit:, 4bit:).
• Automatic bit‑depth adaptation for Background Background Grayscale dithered patterns optimized for 1-bit rendering The Background system creates the illusion of grayscale through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels. , Border Border Apply border patterns that create the illusion of different border intensities The Border system creates the illusion of grayscale borders through carefully designed dither patterns. When rendered on 1-bit displays, these patterns create varying border intensities using alternating black and white pixels. , and Text Text Control text color, alignment and formatting The Text Color system creates the illusion of grayscale text through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels. (single tokens render appropriately on 1‑, 2‑, and 4‑bit displays).
• Expanded Background/Text palette to 16 shades (gray-10 … gray-75), with legacy gray-1..7 still supported (deprecated).
• New utilities: Aspect Ratio Aspect Ratio Maintain consistent proportions for elements regardless of their content The Aspect Ratio utility uses the native CSS aspect-ratio property to maintain consistent proportions for elements. Perfect for images, videos, and containers that need to maintain specific width-to-height ratios across different screen sizes. , Scale Scale Scale interface to affect content density and readability The Scale system provides utility classes to scale the entire interface by adjusting the UI scale factor. This is useful for adapting content density for different viewing distances or user preferences. , Visibility Visibility Control element visibility based on display bit depth The visibility and display utilities provide comprehensive control over element visibility and display types across devices. They include hidden/visible controls and display helpers like flex, grid, and inline, with responsive and bit-depth variants for device-specific layouts. .
• New elements/components: Progress Progress Display progress bars in different styles The Progress component provides visual indicators for completion status and step-based processes. Optimized for e-ink displays with bitmap patterns for 1-bit displays and solid colors for 4-bit+ displays. (component), Divider Divider Create horizontal or vertical dividers between elements The Divider element provides a simple, standalone way to create visual separations in your layouts. Dividers automatically adapt to their background color for optimal visibility across four background types: white, light, dark, and black. (element).

• New responsive model: v1 had no responsive prefixes. v2 adds size, orientation, and bit‑depth variants.
• Border utility Border Border Apply border patterns that create the illusion of different border intensities The Border system creates the illusion of grayscale borders through carefully designed dither patterns. When rendered on 1-bit displays, these patterns create varying border intensities using alternating black and white pixels. : only non‑backward compatible change. New 1–7 full‑spectrum scale that works on any surface shade. In v1, borders created faux grayscale only on white surfaces and appeared black/invisible on black surfaces.
• Background/Text: expanded shade palette and bit‑depth responsiveness; legacy gray-1..7 tokens still render but are deprecated.

See Border Border Apply border patterns that create the illusion of different border intensities The Border system creates the illusion of grayscale borders through carefully designed dither patterns. When rendered on 1-bit displays, these patterns create varying border intensities using alternating black and white pixels. , Background Background Grayscale dithered patterns optimized for 1-bit rendering The Background system creates the illusion of grayscale through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels. , and Text Text Control text color, alignment and formatting The Text Color system creates the illusion of grayscale text through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels. docs for details.

• Upgrade Guide Upgrade Guide Steps to upgrade your plugins to Framework v2 This short guide helps you upgrade from Framework v1 to v2. The new framework stays backward compatible, with the exception of the Border utility. : concise steps to move from v1 to v2 (calls out the Border change).
• Enhancement Guide Enhancement Guide How to enhance your plugins with device-aware, bit-depth-aware, and orientation-responsive patterns This guide explains how to enhance plugins with Framework v2.0’s expanded responsive capabilities. For a quick migration checklist, see the Upgrade Guide. : deep dive on new responsive capabilities and how to enhance your plugins.