Lo Studio token system
Four collections, strictly one-directional: Mapped aliases Alias, Alias aliases Brand. Dark is canonical — every surface below is the real value a component resolves to on the live site.
Brand
Raw primitives, one mode. Colour groups are named by hue, never by role — role assignment lives one layer up. Grey carries a 4% lime tint so neutrals sit on the same axis as the accent.
Alias
One mode: Lime Theme. Named after the hue rather than "Default" so a second brand theme can be added later without restructuring. Only the Primary row varies per mode.
Mapped
The UI-facing layer, Dark and Light. Every token points at an Alias token, never at Brand. Icon mirrors Text 1:1, which is why it has no table of its own.
Responsive
Desktop 1440 · Tablet 1024 · Phone 393. Jumper aliases Brand/Spacing; Typescale aliases Brand/Size. Nothing here is a raw number.
Typography
The static scale, separate from the breakpoint variables. Title uses pixel line-heights bound to Brand/Size; Label, Body and Caption sit at 160%, a ratio set directly. Heading is deliberately absent — the source never exposed its values, and inventing them would be worse than leaving the gap visible.
Elevation
Six levels, one shadow colour bound to Alias/Neutral/950. Deliberate deviation: on a #141414 canvas a black shadow is invisible, so dark mode substitutes a Border/secondary hairline plus a raised surface step. Shown on a light panel where the shadow reads.
Logo
One wordmark, three fills — each bound to an Alias token rather than a loose hex. Vector only: the mark is set in outlines, so it scales from favicon to billboard without a raster fallback.
Components
Ten families, dark mode. Each one resolves through Mapped only — no component reaches past it.
