Foundations
Color.
One brand colour, a deep neutral ramp, four semantic accents — and a notorious lime-green grid highlight. Every value here is reachable as a CSS variable so components stay theme-agnostic.
Semantic color tokens
Final usage tokens, applied in Figma and exported to developers.
Every family below carries the same shape — a surface, its text colour, a low-emphasis container tint, and the states a component needs when it's hovered, pressed, selected or disabled. Build against these, not the raw palette steps in All colours.
Aceve green
Sparingly applied — primary actions, active state, links.
Containers
States
Data
Common colors
Neutral ink and the four semantic accents — the shared containers, layers and states used across every screen.
Containers
Layers
States