Foundations

Color

Zetta is built around a three-role palette — Brand (identity), Primary (interaction) and AI (automation) — plus a status-only semantic set and a disciplined neutral ramp. Colour never carries meaning on its own; pair it with text, icon and border.

The three-role palette

Brand (lime) is identity only; Primary (indigo) is every interaction; AI (purple) marks automation, premium and discovery. Each role also carries -hover, -active, -text and a -bg tint. v1.5 collapsed this from five roles: secondary and quaternary were deleted and tertiary was renamed ai — informational contexts now use semantic info, urgency uses warning, and links use primary.

brand

#b6d600

primary

#5155C6

#9d46e5

Semantic — status only

Used for state, never for interaction (the one exception is destructive danger buttons). Fill and text tokens are distinct and must not be swapped.

success

#10b981

warning

#f59e0b

danger

#ef4444

info

#3b82f6

Neutrals & surfaces

canvas

#f8fafc

surface-card

#ffffff

surface-sidebar

#f8fafc

ink

#0a0a0a

body

#111827

muted

#374151

hairline

#e5e7eb

border-strong

#d0d5dd

The rules

1Brand lime is identity only — logo, focus ring, spinner. Never a button, link or active state.
2Primary indigo is every CTA and interactive state; text on it is primary-text.
3The three roles aren't interchangeable — Brand is identity, Primary is interaction, AI is automation. Use base colours for actions and accents, never large fills; reach for -bg instead.
4Semantic = status only; fill vs text tokens are distinct and must not be swapped.
6brand-text (#0a0a31) is text-only — never a background.

See every color token with all three theme values on the Color tokens page.