Colors

Foundation

All colors are semantic tokens. Never use Tailwind primitive colors (e.g. bg-zinc-900) directly in components.

src/app/globals.css

The rule

Always

bg-background

text-foreground

bg-card

bg-status-open-bg

text-priority-critical

Never

bg-zinc-950

text-emerald-400

border-amber-800

#09090B

bg-muted/40 (static)

Semantic tokens

background

Page / root background

card

Card, panel, drawer

muted

Subtle areas, tags, toolbar

primary

Primary buttons, CTA

secondary

Secondary buttons

accent

Hover states

destructive

Errors, delete actions

border

Borders, dividers

sidebar

Sidebar background

popover

Dropdown, tooltip, popover

Backgrounds

UI element	Token	Class	Swatch
Page / root	`background`	`bg-background`	Aa
Card, panel, drawer	`card`	`bg-card`	Aa
Sidebar	`sidebar`	`bg-sidebar`	Aa
Popover, dropdown, tooltip	`popover`	`bg-popover`	Aa
Subtle section, code block, tag	`muted`	`bg-muted`	Aa
Hover state on any element	`accent`	`bg-accent`	Aa
Primary button	`primary`	`bg-primary`	Aa
Secondary button	`secondary`	`bg-secondary`	Aa

Text

Context	Token	Class	Sample
All default text	`foreground`	`text-foreground`	Aa
Secondary / helper text	`muted-foreground`	`text-muted-foreground`	Aa
Text on a card	`card-foreground`	`text-card-foreground`	Aa
Text in the sidebar	`sidebar-foreground`	`text-sidebar-foreground`	Aa
Text on primary button	`primary-foreground`	`text-primary-foreground`	Aa
Text on secondary button	`secondary-foreground`	`text-secondary-foreground`	Aa
Text on hover state	`accent-foreground`	`text-accent-foreground`	Aa
Destructive / error	`destructive`	`text-destructive`	Aa

Borders

Context	Token	Class
Default border (everything)	`border`	`border-border`
Input border	`input`	`border-input`
Sidebar border	`sidebar-border`	`border-sidebar-border`

Interactive states

State	Token combination	Classes	Sample
Hover (nav, row)	`accent + accent-foreground`	`hover:bg-accent hover:text-accent-foreground`	Aa
Subtle hover	`accent + opacity`	`hover:bg-accent/60 hover:text-foreground`	Aa
Active / selected	`primary + primary-foreground`	`bg-primary text-primary-foreground`	Aa
Hover on primary	`primary + opacity`	`hover:bg-primary/90`	Aa
Disabled	`muted + muted-foreground`	`bg-muted text-muted-foreground opacity-50`	Aa
Focus ring	`ring`	`focus-visible:ring-2 ring-ring`	Aa
Destructive / error	`destructive`	`bg-destructive text-destructive-foreground`	Aa

Status tokens

Open

bg-status-open-bgtext-status-open-fgbg-status-open

In Progress

bg-status-in-progress-bgtext-status-in-progress-fgbg-status-in-progress

In Review

bg-status-in-review-bgtext-status-in-review-fgbg-status-in-review

Testing

bg-status-in-progress-bgtext-status-in-progress-fgbg-status-in-progress

Closed

bg-status-closed-bgtext-status-closed-fgbg-status-closed

Blocked

bg-status-blocked-bgtext-status-blocked-fgbg-status-blocked

Done

bg-status-done-bgtext-status-done-fgbg-status-done

Priority tokens

Criticalbg-priority-criticaltext-priority-critical

Highbg-priority-hightext-priority-high

Normalbg-priority-normaltext-priority-normal

Lowbg-priority-lowtext-priority-low

On this page