One system from canvas to code.
Design and implementation share one semantic language. Explore variables, component variants, and handoff patterns that map directly to Lumen code.
brandPrimary interaction
surfaceRaised content
successPositive state
- Color tokens
- 15
- Modes
- 2
- Code targets
- 3
Inside the file
Built for useful handoff
The library is intentionally compact: foundations establish the contract, components demonstrate it, and the codebase remains the source of truth for behavior.
Variables
Color includes 15 semantic tokens with Light and Dark modes. Radius includes sm, md, and lg values.
Library pages
Cover, Foundations, and Components keep the design file easy to scan during handoff.
Component variants
Core variants mirror code props where possible, so review language remains consistent.
Code workflow
Use the file for variable references, component review, and future Code Connect mappings.
Recommended flow
Design with the contract
A short loop keeps visual decisions traceable from the first frame through production.
- 01
Start with semantics
Choose canvas, surface, ink, brand, and state tokens before reaching for raw color values.
- 02
Compose with variants
Use library components and their variants to keep behavior and naming close to production.
- 03
Hand off by contract
Reference component names, props, and semantic tokens—the same vocabulary engineers use in code.
Lumen UI Library
Open the shared file for token references, component variants, and design-to-code review.
File key: luQW2pTQ3jGGxSFPAAsfa9Open library