Design system
Every token and component, rendered live with the active brand theme and color mode. Switch them here to preview; sites set their brand once in site.config.ts.
Semantic colors
Roles, not values. Components only use these; brand themes re-point them at different primitives. Values below are resolved live for the current theme and mode.
Surfaces
Backgrounds that hold content. Each has a matching foreground for text on it.
- Aa
--background--foregroundThe page.
…
- Aa
--card--card-foregroundRaised containers: cards, list rows.
…
- Aa
--popover--popover-foregroundFloating layers: menus, selects, dialogs, toasts.
…
- Aa
--muted--muted-foregroundQuiet fills: tab lists, table footers, empty states.
…
Actions
Things people press. Primary is the one main action per view.
- Aa
--primary--primary-foregroundMain buttons, checked controls, links, progress.
…
- Aa
--secondary--secondary-foregroundSecondary buttons and less prominent fills.
…
- Aa
--accent--accent-foregroundHover and highlight states for ghost/outline items.
…
Feedback
Meaning, always paired with an icon or text, never color alone.
- Aa
--destructive--destructive-foregroundErrors and irreversible actions.
…
- Aa
--success--success-foregroundCompleted or valid states.
…
Lines & focus
Structure and keyboard focus.
--borderDecorative dividers and container edges.
…
--inputForm control edges (3:1 against the page).
…
--ringFocus indicator (3:1 against the page).
…
--overlayScrim behind dialogs.
…
Charts
Series colors meet 3:1 against cards and the page. Lines also differ by dash and marker.
--chart-1Series 1
…
--chart-2Series 2
…
--chart-3Series 3
…
--chart-4Series 4
…
--chart-5Series 5
…
--chart-gridGrid lines and axis lines.
…
--chart-axisAxis labels (text contrast).
…
- Aa
--chart-tooltip--chart-tooltip-foregroundTooltip surface.
…
Status
Project lifecycle states used by StatusBadge.
- Aa
--status-idea--status-idea-foregroundIdea
…
- Aa
--status-building--status-building-foregroundBuilding
…
- Aa
--status-testing--status-testing-foregroundTesting
…
- Aa
--status-retired--status-retired-foregroundRetired
…
Contrast
Every text and UI pair, checked against WCAG AA (4.5:1 for text, 3:1 for focus rings, control edges and chart marks) for the active theme and mode. npm run lint runs the same check for every theme in both modes and fails on any miss.
Calculating contrast…
Primitive palette
Raw colors with generic names (--palette-hue-step). Never used directly by components; brand themes may add their own primitives in their theme file.
neutralredorangeambergreentealbluevioletpinkTypography
Font roles and the type scale, in rem.
font-sans · --font-bodySphinx of black quartz, judge my vow
Body copy and UI.
font-heading · --font-displaySphinx of black quartz, judge my vow
Headings (with --heading-weight and --heading-tracking).
font-mono · --font-codeSphinx of black quartz, judge my vow
Code, numbers in tables.
text-xs · --type-size-xsThe quick brown fox
text-sm · --type-size-smThe quick brown fox
text-base · --type-size-baseThe quick brown fox
text-lg · --type-size-lgThe quick brown fox
text-xl · --type-size-xlThe quick brown fox
text-2xl · --type-size-2xlThe quick brown fox
text-3xl · --type-size-3xlThe quick brown fox
text-4xl · --type-size-4xlThe quick brown fox
text-5xl · --type-size-5xlThe quick brown fox
Spacing
One base unit (--space-unit); every spacing utility is a multiple. Controls use --control-height, at least the 44 × 44 tap target.
1 × --space-unit2 × --space-unit3 × --space-unit4 × --space-unit6 × --space-unit8 × --space-unit12 × --space-unit16 × --space-unittap · --space-tap-target
Shape & elevation
The rounded-* scale derives from a single --radius; themes can set it to 0 for square corners.
rounded-xs--radius × 0.25rounded-sm--radius × 0.5rounded-md--radiusrounded-lg--radius × 1.5rounded-xl--radius × 2rounded-control--shape-controlrounded-surface--shape-surfacerounded-pill--shape-pill
shadow-control--elevation-controlButtons and inputs.
shadow-raised--elevation-raisedCards.
shadow-overlay--elevation-overlayDialogs, menus, toasts.
Motion
--motion-fastSmall state changes: hover, press.--motion-baseDefault for transitions.--motion-slowLarger movements: panels, dialogs.
Every transition uses --motion-base and --motion-easing by default. With prefers-reduced-motion: reduce, motion tokens collapse to 0ms and animations are switched off globally. Charts read the same preference in JavaScript.
Components
shadcn/ui components restyled entirely through tokens, plus SegmentedControl, StatusBadge and FileDropzone.
Button
Default and large sizes meet the 44 × 44 tap target. Use small only in dense, pointer-first layouts.
Input, Textarea, Label
Enter an email address like name@example.com.
Checkbox, Radio group, Switch, Select
Tabs
Segmented control
A radio group: Tab enters it, arrow keys choose. The chosen segment is raised with a border, shadow and bold text, not just a different color.
Slider
Drag, tap the track, or use the arrow keys. The thumb's hit area is 44 × 44.
Card
Dialog and Toast
Badge and StatusBadge
Status names are fixed and generic (idea, building, testing, retired). Themes restyle them through the --status-* tokens; each state also has its own icon.
FileDropzone
Upload files
Drag files here or choose them.
PNG, JPG or PDF · up to 5.0 MB each · max 3 files
UI only: uploads here are simulated. Files over 2 MB fail part-way to show the error state; wrong types and files over 5 MB are rejected before upload.
Charts
Recharts via shadcn's chart component, colored with the chart tokens. Each chart has a written summary and a data table, and series differ by pattern as well as color.