Foundations

Color

Zetta is built around a single brand lime, a status-only semantic set, and a disciplined neutral ramp. Color never carries meaning on its own — pair it with text, icon and border.

Brand

The brand is #b6d600. It never shifts hue — hover and active are opacity variants only.

brand

#b6d600

brand-hover

rgba(182, 214, 0, 0.85)

brand-bg

#f0fcd4

brand-text

#0a0a31

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

#ffffff

surface-card

#ffffff

surface-sidebar

#fafafa

ink

#0a0a0a

body

#18181b

muted

#4b4b4b

hairline

#e5e5e5

border-strong

#d0d5dd

The rules

1Brand never shifts hue — hover/active are opacity variants of #b6d600.
2Danger is the only variant that shifts color on interaction.
3brand-text is text-only — never a background.
8Semantic = status only; fill vs text tokens are distinct; charts use the dedicated chart-1…5 ramp.

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