Foundations
Brand & principles
Zetta's signature is a single electric lime — but it leads with restraint. The lime is reserved for identity (logo, focus ring, spinner), while Indigo Primary drives every interaction. Around the three-role palette sit four principles that explain why the rest of the system looks the way it does.
The three-role palette
Each role has a job. Brand is identity; Primary is interaction; AI marks automation, premium and
discovery. Each carries -hover, -active, -text and a pale
-bg tint. This is guardrail 3.
#b6d600 #5155C6 #9d46e5 Brand — Identity only — logo, focus ring, spinner.
Primary — Every CTA and interactive state.
AI — AI, automation and premium moments.
Brand is identity only
Lime #b6d600 appears on the logo, the focus ring, the spinner and a few identity
icons — and nowhere else. It is never a button, link, active state, badge or chart colour
(guardrail 1). brand-bg is a pale tint for
celebration call-outs; brand-text (#0a0a31) is text-only on a lime fill.
Principles
Neutrals first
Gray surfaces, gray text, gray borders carry ~90% of the UI. Palette colours signal hierarchy and state, never decoration.
Three real themes
Light, Dark and a high-contrast Accessibility theme share one foundation and only re-map colour and shadow. Accessibility is first-class, never 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
Seventeen rules are enforced mechanically at build time, so the system stays coherent no matter who (or what AI) is generating the UI.
See every token on Color, and how the themes are wired on Theming.