Elementary Design System

Elementary is a design system comprised of three independent, orthogonal layers:

Layer 1: Token Naming System

• Standardized names (--c-primary, --s-4, ...)
• The unchanging contract
• Used across ALL themes

Layer 2: Theme Implementations

• Different VALUES for the same names
• Currently: polished, sketch
• Future: custom themes, brand themes

Layer 3: Component Classes

• Optional pre-built patterns
• Uses Layer 1 token names
• Works with ANY Layer 2 theme