Internal / unlisted

Design System

The typography, colour, spacing, and component tokens this site is built from, pulled from globals.css and rendered live so this page always reflects the current theme.

Colour

Toggle the theme switcher in the nav to see every swatch below update, except the “theme-invariant” group, which is fixed on purpose.

Surface & text

--bg

page background

--bg-alt

secondary background

--surface

card background

--surface-subtle

faint card fill

--text

body text

--text-secondary

muted text

--border

hairline borders

Brand

--accent

primary background/border

--accent-text

accent as text/icon colour

--accent-vivid

accent-text, boosted for legibility

--on-accent

text/icons drawn on --accent

Semantic

--success

success background/border

--success-text

success as text

--danger

danger background/border

--danger-text

danger as text

Code blocks

--code-bg

inline & block code fill

--code-border

code block border

--code-text

inline code text

Nav (theme-invariant)

--nav-fixed-bg

always dark teal

--nav-fixed-text

always cream

--nav-fixed-accent

always gold

--nav-fixed-toggle-bg

theme-toggle chip

Typography

--font-display: Space Grotesk

Aa Bb Cc 123

--font-body: Inter

Aa Bb Cc 123

--font-mono: SF Mono

Aa Bb Cc 123

--text-badge · Badge and pill labels

FEATURED

--text-caption · Mono hints under a demo

hover the star

--text-label · Form labels, chips, code tags

anchor-name

--text-meta · Secondary UI text

Everywhere

--text-ui · Nav links, buttons, filters

All demos

--text-body-sm · Card descriptions

A component that reflows to its container.

--text-body · Body copy inside components

Every demo runs on plain CSS.

--text-body-lg · Roomier body copy

Every demo runs on plain CSS.

--text-base · Primary buttons, full-size body

Get in touch

--text-lead · Page intros

New CSS, explained by playing with it.

--text-title-sm · Card and panel titles

Native CSS Scoping

--text-title-md · Explainer headings

How it works

--text-title · Section titles

Design System

--text-display · Page h1 (clamps with the viewport)

New CSS features

Spacing

Common increments used across padding, gaps, and margins site-wide.

0.25rem

0.5rem

0.75rem

1rem

1.5rem

2rem

3rem

4rem

6rem

Buttons & radii

PrimaryOutlineDisabled

3px

4px

6px

8px

Code block

Shiki, dual-themed via github-light-high-contrast / github-dark-high-contrast.

Copied

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 4px;
}