Colors
Three-layer token architecture: raw hex values → semantic roles → component-specific assignments. Light background with green primary (#2ECE78) and teal accent (#00B4AE).
Primitive
Layer 1 · raw hex · never used directly in components
- Layer
- 1 · Primitive
- Count
- 15 raw values
- Format
- Hex (sRGB)
- Defined in
- tokens.css :root
Semantic
Layer 2 · meaning aliases · use these in layouts
- Layer
- 2 · Semantic
- Count
- 10 aliases
- Format
- var(--color-*)
- Dark mode
- Flips at this layer
Component
Layer 3 · role-based · used inside component styles
- Layer
- 3 · Component
- Count
- 6 tokens
- Format
- var(--color-*)
- Includes
- Brand fills, feedback states
Translucent Tints
Layer 3 · kiosk-specific · semi-transparent
Numpad
On-dark surfaces
Recess & shadow tints
Success tints
Accent tints
Feedback tints
- Layer
- 3 · Kiosk-specific
- Count
- 31 tokens · 6 families
- Naming
- By intent, not by alpha number
- Reference
- The Semantic-Alpha Rule (DESIGN.md)