/design-system

Design System

Live reference for every token and component in the product. Built on shadcn/ui (base-nova style) + Tailwind v4. Never hardcode a color or roll a one-off component — extend what's here.

Color

Base UI tokens (neutral) plus the brand primary and semantic status scale, defined in app/globals.css for both light and dark.

Base

background--background

foreground--foreground

card--card

popover--popover

primary--primary

secondary--secondary

muted--muted

accent--accent

destructive--destructive

border--border

Semantic status — success / warning / danger / info

success--success

success-muted--success-muted

warning--warning

warning-muted--warning-muted

danger--danger

danger-muted--danger-muted

info--info

info-muted--info-muted

Chart series

chart-1--chart-1

chart-2--chart-2

chart-3--chart-3

chart-4--chart-4

chart-5--chart-5

Typography

Geist Sans (default) and Geist Mono (code, SHAs, branch names, trace output).

Heading / text-3xl

Heading / text-2xl

Heading / text-xl

Heading / text-lg

Body / text-base — the quick brown fox jumps over the lazy dog.

Body muted / text-sm — used for descriptions and secondary text.

font-mono / text-sm — a1c93f2 feat/checkout-validation

Radius

Derived from --radius (0.625rem). Badges/pills use full/4xl, cards and inputs use lg.

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-4xl

Buttons

components/ui/button.tsx — variant × size.

Badges & status

Plain Badge for labels/counts. StatusBadge (custom, components/ui/status-badge.tsx) for pass/fail/risk states — always go through runStatusMap / riskLevelMap, never a raw color class.

DefaultSecondaryOutlineDestructive

passedfailedrunningqueuedsupersededflakyskippedlow riskmedium riskhigh risk

Cards

components/ui/card.tsx

Run summary

feat/checkout-validation @ a1c93f2

failedhigh risk

Sandbox

Docker · us-east-1

Forms

components/ui/input.tsx, label.tsx

Branch

Disabled

Tabs

components/ui/tabs.tsx

1 flow regressed: checkout form validation.

Table

components/ui/table.tsx

Branch	SHA	Risk	Result
feat/checkout-validation	a1c93f2	high	failed
fix/nav-scroll-region	9e02b17	low	passed
chore/upgrade-deps	44f7c0a	medium	flaky
feat/onboarding-flow	0d5e881	low	skipped

Overlays

components/ui/dialog.tsx, dropdown-menu.tsx, tooltip.tsx

Avatar

components/ui/avatar.tsx

HPJDAK

Loading

components/ui/skeleton.tsx

Full written reference: web/DESIGN_SYSTEM.md