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.
Brand — Aceve green
Sparingly applied — primary actions, active state, links.
Danger
Destructive actions, error states, and marketing accents only — never primary UI.
Info
Informational links, badges, and selection rings. The 600 step is our focus-info accent.
Success
Positive states, confirmations, and growth indicators.
Warning
Caution states, stale data, and time-sensitive alerts.
Link
Purple palette for hyperlinks and navigation emphasis.
Neutrals
Twelve steps from #000 to #FFF. The data grid relies on hairlines at --ink-100.
Semantic
Use sparingly. Info for selection rings, danger for destructive actions, grid-active for the cell highlight.
Pairings & contrast
Tested against WCAG AA at 4.5:1.