Internal reference

One system.Every surface.

Every color, type step, spacing unit, radius, z-index, and motion value used across this site, pulled straight from globals.css. Hover a swatch to inspect it, click to copy its CSS variable.

01 // Color

Seven ramps, eleven stops each, resolved from raw HSL. Semantic roles map onto the ramp so components never touch a raw stop by accident.

Swipe to see every stop →

grey

50

100

200

300

400

500

600

700

800

900

950

primary

50

100

200

300

400

500

600

700

800

900

950

secondary

50

100

200

300

400

500

600

700

800

900

950

accent

50

100

200

300

400

500

600

700

800

900

950

success

50

100

200

300

400

500

600

700

800

900

950

caution

50

100

200

300

400

500

600

700

800

900

950

info

50

100

200

300

400

500

600

700

800

900

950

error

50

100

200

300

400

500

600

700

800

900

950

Hover a swatch to inspect · click to copy the CSS variable

/ Semantic roles

--color-bgvar(--color-grey-50)page background

--color-surfacevar(--color-grey-200)muted panels

--color-surface-raisedvar(--color-grey-400)cards / elevated

--color-textvar(--color-grey-950)primary ink

--color-text-mutedvar(--color-grey-800)secondary text

--color-text-subtlevar(--color-grey-700)captions

--color-text-inversevar(--color-grey-50)text on dark fills

--color-borderhsl(var(--color-grey-700-base)/0.3)hairline rules

--color-border-strongvar(--color-grey-700)solid borders

--color-focusvar(--color-accent-500)focus ring

02 // Typography

Five families, each with one job. Only the --fs-* UI scale is live; the display tier is reserved for the homepage hero.

Display

Aa

Anton · 400

homepage hero only

Sans

Aa

Epilogue · 500

body / UI workhorse

Mono

Aa

JetBrains Mono · 500

labels, dates, section numbers

Serif

Aa

Newsreader · 400 italic

editorial / pull-quote emphasis

Cursive

Aa

Reenie Beanie · 400

hand-written accent touch

/ UI scale

4XS--fs-4xs0.75rem

The quick brown fox jumps over the lazy dog

3XS--fs-3xs0.875rem

The quick brown fox jumps over the lazy dog

2XS--fs-2xs1rem

The quick brown fox jumps over the lazy dog

1XS--fs-1xs1.125rem

The quick brown fox jumps over the lazy dog

S--fs-s1.25rem

The quick brown fox jumps over the lazy dog

M--fs-m1.5rem

The quick brown fox jumps over the lazy dog

L--fs-l1.875rem

The quick brown fox jumps over the lazy dog

1XL--fs-1xl2.25rem

The quick brown fox jumps over the lazy dog

2XL--fs-2xl2.75rem

The quick brown fox jumps over the lazy dog

3XL--fs-3xl3.25rem

The quick brown fox jumps over the lazy dog

4XL--fs-4xl3.75rem

The quick brown fox jumps over the lazy dog

/ Display tier — reserved, do not use outside the hero

Display section--fs-display-sectionclamp(2.5rem, 8vw, 9rem)

Display hero--fs-display-heroclamp(3rem, 14vw, 16rem)

03 // Spacing

Tailwind's default scale drives internal rhythm; these are the raw steps it's built from.

--space-1

0.25rem

--space-2

0.5rem

--space-3

0.75rem

--space-4

1rem

--space-6

1.5rem

--space-8

2rem

--space-12

3rem

--space-16

4rem

--space-24

6rem

--space-32

8rem

04 // Shape & elevation

Flat and structural: depth comes from borders and tone, never shadows. Radius is tokenized, not zero everywhere.

/ Radii

--radius-none0px

--radius-sm2px

--radius-pill9999px

/ Borders

--border-hairline1px

--border-strong2px

05 // Motion & layering

CSS transitions only, no animation library. The z-index ladder is a fixed vocabulary, never an arbitrary number.

/ Motion

--dur-fast0.2s

--dur-base0.3s

--dur-slow0.5s

--dur-reveal0.7s

--ease-outcubic-bezier(0.16, 1, 0.3, 1)

--ease-inoutcubic-bezier(0.65, 0, 0.35, 1)

/ Z-index

--z-grid0

--z-content10

--z-overlay40

--z-nav50

--z-wipe9998

--z-cursor9999

06 // Layout

FullWidthWrapper and Tailwind's spacing utilities do the real work; these tokens are the ceiling they're built against.

--container-max1800px

--content-max1400px

--gutterclamp(1.5rem, 4vw, 3rem)

--section-pad-yclamp(6rem, 12vw, 12rem)

--leading-display0.8

--tracking-display-0.02em

07 // Source

For anyone who'd rather read it than click through it.

Take the source.

The full DESIGN.md that this page renders: brand voice, color and type rationale, spacing and motion principles, written for anyone extending the system without guessing.

Download DESIGN.md

Read the system in the wild.

Every token here backs the case studies, the about page, and this one. See it composed, or start a project of your own.

See the case studies Start a project