The source of truth is always the Framework Design Documentation.
An overview of elements in Framework.
Utilities
Size: Define exact width and height dimensions for elements
Spacing: Control element spacing with fixed margin and padding values
Gap: Set precise spacing between elements with predefined gap values
Flex: Arrange elements with flexible layouts and alignment options
Grid: Create grid layouts with predefined column structures
Background: Grayscale dithered patterns optimized for 1-bit rendering
Border: Apply border patterns that create the illusion of different border intensities
Rounded: Control element rounding with predefined values
Visibility: Control element visibility based on display bit depth
Responsive: Adapt styles based on screen width using breakpoint prefixes
Responsive Test: Test responsive utilities and compare SCSS mixins with CSS classes
Text: Control text color, alignment and formatting
Image: Optimize images using dithering techniques for 1-bit rendering
Image Stroke: Legible images when displayed on shaded backgrounds
Text Stroke: Legible text when displayed on shaded backgrounds
Scale: Scale interface to affect content density and readability
Aspect Ratio: Maintain consistent proportions for elements regardless of their content
Modulations
Overflow: Handle column items overflow
Table Overflow: Handle table rows overflow
Clamp: Manage text overflow with single and multi-line truncation
Format Value: Format numbers and values with consistent styling
Fit Value: Automatically resize numbers and values to fit within their containers
Content Limiter: Change font size when content overflows to fit within the container
Pixel Perfect: Ensure text renders with crisp edges by aligning to the pixel grid
Framework Runtime: How the runtime applies layout, clamping, overflow, and presentation adjustments at render time
Base
Screen: Device screen dimensions, orientation, and display properties
View: Show your plugin in different sizes with Mashup view containers
Layout: Primary container for organizing plugin content
Title Bar: Standardized title bar with plugin information and instance details
Columns: Implement zero-config column layouts for content organization
Mashup: Assemble multiple plugin views into a single interface
Elements
Title: Style headings with consistent typography
Value: Display data values with consistent formatting
Label: Create clear labels for unified content identification
Description: Format descriptive text with standardized styles
Divider: Create horizontal or vertical dividers between elements
Components
Rich Text: Display formatted paragraphs with alignment and size variants
Item: Build standardized list items and content blocks
Table: Create data tables optimized for 1-bit rendering
Chart: Visualize data optimized for 1-bit rendering
Progress: Display progress bars in different styles
Fonts
See our fonts article.