Colors

Cool-neutral greys, a deep-ink primary, one electric accent, and four status hues used sparingly.

Every colour is a CSS variable in oklch and is exposed as a Tailwind utility (bg-card, text-muted-foreground, border-border). Toggle the theme in the header to see the dark values.

Surfaces

--background

Page

--surface

Inset areas, code

--card

Cards, sheets

--popover

Menus, popovers

--sidebar

App sidebars

Ink

--foreground

Primary text

--muted-foreground

Secondary text

--primary

Primary action

--brand

Accent: focus, links, highlights

--secondary

Secondary action

--accent

Hover / selected

Status

--success

Completed

--warning

Pending

--info

Informational

--review

Under review

--destructive

Errors, removal

Lines

--border

Hairlines

--input

Form control borders

--ring

Focus rings

Usage

<div className="bg-card text-card-foreground border-border/60 shadow-soft">…</div>
<Badge variant="success">Completed</Badge>
<p className="text-muted-foreground">Secondary copy</p>