Foundations
Brand & principles
Zetta's signature is a single electric lime. It anchors every interface and never wavers — no tints, no derivatives, no hue shifts. Around it sit four principles that explain why the rest of the system looks the way it does.
The brand lime
#b6d600 is the brand. Hover and active states are opacity steps of the same
lime (85% / 70%) — never a new colour. Focus adds a ring; the fill stays brand. This is
guardrail 1.
#b6d60085%70%tint
The only other lime is brand-bg — a pale tint for the active sidebar item and
announcement accents. brand-text (#0a0a31) is text-only and never a fill.
Principles
Token-first
Every colour, size, radius and duration is a named token. Components reference tokens, never raw values — so one foundation change ripples everywhere, and nothing drifts.
Three real themes
Light, Dark and a high-contrast Accessibility theme share one foundation and only re-map colour and shadow. Accessibility is a first-class theme, never an afterthought or an auto-flip.
Accessibility-first
Meaning is carried by label, icon and border — never colour alone. The Accessibility theme raises hit targets to 44px, drops every shadow, and turns the ramp greyscale.
Strict guardrails
Thirteen rules are enforced mechanically at build time, so the system stays coherent no matter who (or what AI) is generating the UI.
See the full palette on Color, and how the themes are wired on Theming.