DocsArchitectureDesign Tokens
Token Contract
Design Tokens
The semantic token contract bridging component logic and swappable visual themes.
The Mandatory Pairing Rule
Accessibility contrast issues happen when a component sets a background color without explicitly pairing a corresponding foreground color.
Pairing Contract Requirement
Every background token in Lemmo UI has a mandatory paired foreground token:--primary is paired with --primary-foreground, and --card is paired with --card-foreground. A theme author must always define both in tandem.
Semantic Token Specification
Click on any token to copy its CSS variable name.
Token NameSemantic RolePairing Rule
Live Active Token Inspector
Showing real-time token properties for the current theme (neon).
--primary
Active CTA
--card
Surface
--radius0.75rem (12px)
--border
Calibrated
Lemmo Official Design System
Explore the complete palette, surfaces, typography scales, and shadows in our visual hub.