Revenue
£48,200+3.4%
One system for every web app.
Tokens first, components second. Everything below is built from the same layered CSS
tokens, works in light and dark, and re-skins from a single theme.css.
Start every new project here.
Colour
Neutral by default so any brand can sit on top. Components read only these semantic tokens — never raw values.
Surfaces & borders
Background--bg
Page canvas
Page canvas
Surface--surface
Cards, panels
Cards, panels
Surface raised--surface-raised
Inputs, active rows
Inputs, active rows
Surface hover--surface-hover
Hover state
Hover state
Border--border
Default outline
Default outline
Border hover--border-hover
Hover / focus outline
Hover / focus outline
Border subtle--border-subtle
Dividers
Dividers
Text & accent
Text primary--text-primary
Headings, body
Headings, body
Text secondary--text-secondary
Supporting copy
Supporting copy
Text muted--text-muted
Labels, meta
Labels, meta
Text subtle--text-subtle
Decorative / disabled
Decorative / disabled
Accent--accent
Primary action
Primary action
On accent--on-accent
Text on accent
Text on accent
Accent subtle--accent-subtle
Hover wash
Hover wash
Focus ring--focus-ring
Keyboard focus
Keyboard focus
Status — used sparingly (dots, chips, small icons)
Success--success
Positive / active
Positive / active
Warning--warning
Pending / caution
Pending / caution
Danger--danger
Error / destructive
Error / destructive
Info--info
Neutral highlight
Neutral highlight
Violet--violet
Categorical
Categorical
Each status colour also yields --*-subtle and --*-border tints for fills and outlines, derived with color-mix().
Typography
Geist for interface text, JetBrains Mono for eyebrows, numbers, code and metadata. Both are self-hosted variable fonts.
--text-2xs
Caption · 10
--text-xs
Meta · 11
--text-sm
Small · 12
--text-base
Base · 13
--text-md
Body · 14
--text-lg
Lead · 16
--text-xl
Title · 18
--text-2xl
H3 · 20
--text-3xl
H2 · 24
--text-4xl
H1 · 32
--text-5xl
Display · 40
Eyebrow
Mono · uppercase · tracked
Spacing
Every gap and padding is a multiple of --space-unit (4px). Change the unit to make the whole app denser or roomier.
--space-1
--space-2
--space-3
--space-4
--space-6
--space-8
--space-12
--space-16
Radius & shadow
Semantic aliases decide where each radius is used: controls, cards, overlays, badges.
Radius scale
2xs
xs
sm
md
lg
xl
2xl
3xl
full
Elevation
subtle
elevated
glow
modal
dock
Motion
Short and soft. Hover a track to preview the duration. All motion collapses under prefers-reduced-motion.
--duration-instant · .1s
--duration-fast · .15s
--duration-base · .2s
--duration-slow · .3s
Layout
A fixed-chrome shell: topbar, collapsible navigation, scrolling content, optional inspector, slim footer. On mobile the panels become drawers behind a bottom tab bar.
Tuning
Three global knobs re-scale the entire system at once. Try them — every component on this page responds.
Density
--space-unit: 4pxRoundness
--radius-scale: 1Text size
--type-scale: 1Buttons
One primary action per view. Use ghost for toolbars and icon buttons for dense chrome.
Variants
Sizes, icons & states
Forms
Inputs sit on the raised surface with a soft focus halo. Always pair with a visible label.
Shown to teammates.
Enter a valid email address.
⌘K
Selection
Badges & avatars
Chips carry status and counts. Colour is never the only signal — pair it with a label or dot.
Chips
DefaultAccentOutline
Active
Pending
Error
NewBeta
⌘K
Avatars
FM
AKMR
FMAKJD+4
Data display
Cards group related content; tables carry dense records with mono numerals.
Churn
2.1%−0.4%
Card title
Supporting description
Body content sits on the surface token.
Table
| Item | Owner | Status | Value |
|---|---|---|---|
| Item #0041 | Farhan M. | Active | £48,200 |
| Item #0042 | Aisha K. | Pending | £12,950 |
| Item #0043 | Marcus R. | Error | £3,400 |
Feedback
Tell people what happened, what is loading, and what to do when there is nothing to show.
Heads up
A new version is available.
Saved
Your changes are live.
Almost full
You have used 90% of your plan.
Sync failed
Check your connection and retry.
Progress, spinner & skeleton
Empty state & toast
No items yet
Create your first item to see it here.
Overlays
Dialogs use the native <dialog> element — Escape and focus trapping come free.
Theming a new project
Copy css/ and fonts/ into the new project, then override only what the brand needs in css/theme.css — it loads last and un-layered, so it always wins.
:root { --radius-scale: .75; --space-unit: 3.5px; }
[data-theme="dark"] { --accent: #7dd3fc; --on-accent: #0b1220; }
[data-theme="light"] { --accent: #0369a1; --on-accent: #ffffff; }Full guide in THEMING.md. Rules: components use semantic tokens only; no raw colours outside the theme files; light and dark ship together from day one.