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

0.72rem · Ribbon / badge label

FEATURED

0.78rem · Eyebrow

OHYESCSS

0.9rem · Nav link / small body

All demos

1rem · Body text

A small collection of interactive demos.

1.2rem · Card / section title

Native CSS Scoping

2rem · Page title (clamps to 3rem)

Design System

2.4rem · Hero title (clamps to 4.4rem)

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.

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