Foundations
160+ variables across 6 collections. Everything else in this system is built on top of these — components never hardcode a raw value.
Primitive
132 variablesRaw values — color scales, spacing, radius, shadow, duration, easing, breakpoints. Never referenced directly by components.
Semantic
25 variablesPurpose-based tokens aliased to Primitive — background, surface, text, border, action, feedback, icon.
Component
1 variablesControlled exceptions for specific components. Mostly still a placeholder.
Brand
1 variablesBrand-level overrides on top of Semantic. Electric Violet (#6C4CF2) is the confirmed brand color.
Shape
2 variablesMode-per-personality radius tokens — component/radius/control and component/radius/container — proving real shape-switching across the library.
Surface
4 variablesMode-per-personality fill/border/blur/content tokens — validated on Button, Card, and Text Input.
Example resolution chain
A component never points at a hex code. It points at a Semantic token, which points at a Primitive: