Design system
Every token in @keel/design, rendered. Three bands: the raw palette, the semantic contract aliased onto it, and everything that is not a colour.
Band 1 — raw palette
Literal ramps. Only band 2 may reference these; components never do.
neutral
neutral-0
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950
neutral-1000
brand
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
brand-950
accent
accent-50
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
accent-950
danger
danger-50
danger-100
danger-200
danger-300
danger-400
danger-500
danger-600
danger-700
danger-800
danger-900
danger-950
success
success-50
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
success-950
Band 2 — semantic contract
The shadcn names, aliased onto band 1. These are what components use, and what re-themes in dark mode.
background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
destructive
destructive-foreground
border
input
ring
success
success-foreground
warning
warning-foreground
chart-1
chart-2
chart-3
chart-4
chart-5
sidebar
sidebar-foreground
sidebar-primary
sidebar-primary-foreground
sidebar-accent
sidebar-accent-foreground
sidebar-border
sidebar-ring
Band 3 — spacing
Named steps, plus the density base every p-* and gap-* utility scales from.
3xs
0.125rem
2xs
0.25rem
xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2rem
2xl
3rem
3xl
4rem
Band 3 — radius
Corner scale. --radius is pinned to lg.
none
0px
sm
0.25rem
md
0.375rem
lg
0.625rem
xl
0.875rem
2xl
1.25rem
full
9999px
Band 3 — elevation
Six steps. Add a level here rather than a bespoke shadow at a call site.
elevation-0
elevation-1
elevation-2
elevation-3
elevation-4
elevation-5
Band 3 — type
Heading levels, body sizes and the tracking scale.
Heading level 1
Heading level 2
Heading level 3
Body large — the quick brown fox jumps over the lazy dog.
Body medium — the quick brown fox jumps over the lazy dog.
Body small — the quick brown fox jumps over the lazy dog.
Monospace 0123456789 — tabular figures line up in tables.
tracking tighter (-0.05em) — the quick brown fox
tracking tight (-0.025em) — the quick brown fox
tracking normal (0em) — the quick brown fox
tracking wide (0.025em) — the quick brown fox
tracking wider (0.05em) — the quick brown fox
Primitives — buttons
Every variant at every size, plus the disabled state: one muted treatment for all of them.
default
secondary
outline
ghost
destructive
link
Primitives — badges
Tinted status chips, each tone with and without its leading dot.
Primitives — fields
Field hands its control the id, description and invalid state through a render prop.
Primitives — table
Scrolls inside itself, never the page. Rows read the row-height token.
| Token group | Entries | Band |
|---|---|---|
color | 57 | 1 |
semantic | 58 | 2 |
space | 9 | 3 |
Band 3 — type scale
The named steps UI copy is set in: text-caption, text-body and text-h1…h3, each a size with its own line height.
text-caption
0.75rem / 1.125rem
The quick brown fox jumps over the lazy dog.
text-body
0.875rem / 1.375rem
The quick brown fox jumps over the lazy dog.
text-h3
1.125rem / 1.625rem
The quick brown fox jumps over the lazy dog.
text-h2
1.375rem / 1.875rem
The quick brown fox jumps over the lazy dog.
text-h1
1.75rem / 2.25rem
The quick brown fox jumps over the lazy dog.
bg-surface
Body copy on the surface layer — the default size for UI text.
Caption on the surface layer — metadata and helper text.
bg-canvas
Body copy on the canvas layer — the default size for UI text.
Caption on the canvas layer — metadata and helper text.
Band 3 — motion
Loading placeholders sweep with animate-shimmer, timed by --ds-duration-shimmer.
Under prefers-reduced-motion: reduce the sweep stops and the placeholder stays put: animate-shimmer sets animation: none for that query.
Primitives — tooltip
Held open on every side. The arrow points back at its trigger from each one.
AI — tool values
Decoded tool input and output, rendered as terms and lists rather than a JSON dump.
Parameters
- query
- quarterly revenue
- limit
- 1,000
Result
- revenue
- 1,234,567.89
- active
- True
- archived
- False
- owner
- None
- region
- name
- North
- stores
- 42
- growth
- -0.035
- tags
- priority
- priority
- review
Bands 2 and 3 — chrome, data and density
Text grades, the emphasis surface, the heat ramp, avatar swatches, layout chrome, the extended type steps, and the compact density override.
text-foreground-strong
text-foreground-subtle
border-border-strong
heat-1
heat-2
heat-3
heat-4
AB
CD
EF
GH
IJ
KL
MN
text-eyebrow
0.6875rem / 0.875rem
The quick brown fox
text-mono
0.8125rem / 1.25rem
The quick brown fox
text-body-lg
1rem / 1.5rem
The quick brown fox
text-display-md
2rem / 2.5rem
1,284
text-display-lg
2.75rem / 3.25rem
1,284
text-display-xl
3.5rem / 4rem
1,284
tracking-caption
0.03em
Assets under management
tracking-eyebrow
0.16em
Assets under management
tracking-eyebrow-tight
0.05em
Assets under management
--ds-layout-sidebar-width
15rem
--ds-layout-sidebar-width-collapsed
3.5rem
--ds-layout-page-inset
2rem
--ds-layout-page-width-md
80rem
--ds-layout-page-width-lg
90rem
--ds-layout-page-width-xl
100rem
comfortable
A table row
compact
A table row
A subtree with data-density="compact" shortens every control and row inside it.
Primitives — controls
Typography roles, numeric figures, progress, separators, alerts, an interactive card and a form panel.
Display, medium
Caption — metadata and helper text.Interactive card
Hover raises the border and the shadow.
App shell and navigation
The fixed chrome at both densities, breadcrumbs, tabs, avatars and resizable panels.
span 8
span 4
span 6
span 6
span 3
span 3
span 3
span 3
History
Conversation
Primitives — files
A dropzone that states its limits, then the list: stored, uploading, queued and failed rows.
resting
error
disabled
4 files · 18 MB
- UploadedDownload Q3 ledger.csvQ3 ledger.csv47 KB
- UploadingBoard deck.pdf3.1 MB
- QueuedOperating model.xlsx891 KB
- FailedSigned scan.tiff14 MBSigned scan.tiff is 14 MB, over the 10 MB limit.
Primitives — overlays and disclosure
Accordion, collapsible, empty state, a menu and a popover held open, and a dialog in a frame.
The page behind the dialog.
Data — figures, statuses and meters
KPI tiles and deltas coloured by the metric's direction, every status pill, and meters in each tone, including one past its ceiling.
Data — sparklines and trend chart
Sparklines toned by polarity, with an area fill and a plan reference; a three-series trend chart with a target line and a selected period.
- Actual
- Plan
- Prior year
| Period | Actual | Plan | Prior year |
|---|---|---|---|
| Jan | $412K | $400K | $380K |
| Feb | $398K | $410K | $372K |
| Mar | $431K | $420K | $390K |
| Apr | $455K | $430K | $401K |
| May | $447K | $440K | $399K |
| Jun | $480K | $450K | $415K |
Data — matrix heatmap and record diff
One risk register shaded by count on the heat ramp and by risk on the status tones, and two snapshots of one record compared field by field.
| Severity / Likelihood | Rare | Unlikely | Likely | Almost certain |
|---|---|---|---|---|
| Critical | ||||
| High | ||||
| Medium | ||||
| Low |
- Low
- Medium
- High
- Critical
| Severity / Likelihood | Rare | Unlikely | Likely | Almost certain |
|---|---|---|---|---|
| Critical | ||||
| High | ||||
| Medium | ||||
| Low |
| Field | March | April | Change |
|---|---|---|---|
| Revenue | 4,200,000 | 4,620,000 | up 10.0%, improving |
| EBITDA margin | 12.5 | 13.1 | up 0.6pp, improving |
| Churn Rate | 6.2 | 5.4 | down 12.9%, improving |
| Owner | A. Rivera | not set | Removed |
| Closed | not set | 2026-04-30 | Added |
| Segment | not set | Industrial | Added |
Primitives — date & time
Pickers that read back their value, a period stepper, and the calendar grid they open: single, range and Monday-first.
date, set
date, empty
range, preset
range, empty
period
single, from Mar 2
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
range
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
week starts Monday
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday |
|---|---|---|---|---|---|---|
AI — reasoning
A model's reasoning stays open while it streams and collapses when the turn completes.
Primitives — forms & selection
A form of selection controls, the toggle group in both sizes, and an inline command list.
toggle group
command
Primitives — data grid
A toolbar, the columns and density menus, a filter bar narrowing the rows, a sorted grid with a selected, an expanded and a totals row, and the pager.
| Expand row | ||||||
|---|---|---|---|---|---|---|
| Delta Foods | Consumer | Hold | $57.9M | −$1.3M | ||
| Atlas Freight | Logistics | Hold | $48.2M | $6.1M | ||
Atlas Freight: Logistics, hold stage. | ||||||
| Beacon Health | Healthcare | Growth | $31.8M | $4.3M | ||
| 3 holdings | $137.9M | |||||