Design System
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
Base
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
Text
Control text color, alignment and formatting
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
Clamp
Manage text overflow with single and multi-line truncation
Text Stroke
Legible text when displayed on shaded backgrounds
Image
Optimize images using dithering techniques for 1-bit rendering
Image Stroke
Legible images when displayed on shaded backgrounds
Components
Modulations
Overflow
Handle content overflow in fixed-size containers
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