120+ named values covering every primitive of the Lumino surface. Click any value to copy the variable name.
Colors are grouped into surface, text, border, accent, semantic, brand, and category roles. In light mode the surface and text scales invert; accent stays warm.
Curriculum-category colors used for tags, pills, and icons in the Lumino portal. Swap per theme.
Four families: Inter Tight (sans body), Fraunces (display), JetBrains Mono (code), Nunito (rounded — used in Playful). Heading/body families swap per theme.
A 12-step spacing scale. The --space-* tokens are the semantic names; --s-* are legacy aliases from the portal. Density modifier (data-density) adjusts 3–8.
Seven steps from 4px (--radius-xs) to fully rounded (--radius-pill). Themes remap the semantic --radius-card / --radius-button aliases — Pro is precise, Playful fully rounds everything.
Three elevation shadows for dark mode (warm-shifted in light mode), plus a focus ring using the accent glow.
Two easing curves, three durations. Hover each tile to see the motion.
A structured elevation scale so overlays stack predictably. Never use arbitrary numbers.
Nav widths and weights parameterized via tokens so layouts don't hard-code pixels.
| Token | Value | Purpose |
|---|---|---|
| --nav-w | 248px | Expanded left nav |
| --nav-w-collapsed | 68px | Collapsed icon-only rail |
| --hero-weight | 500 (Pro) / 400 (Studio) / 800 (Playful) | Hero headline font-weight per theme |