DESIGN SYSTEM · TOKEN LAYER

Design Tokens

I built this portfolio as a system. Every visual decision — color, type, depth, shape — lives as a named token. Components are the composition of primitives. The page you came from is the composition of components. This is what's underneath.

01 · Colors

Click any swatch to copy its token to your clipboard.

Surfaces

Text

Accent & Status

02 · Typography

Click into any specimen and start typing. Reset to restore the default.

Display · Syne 800 / 84px

Heading 1 · Syne 700 / 48px

Section · Syne 700 / 32px

Heading 2 · Syne 700 / 24px

Bio · DM Sans / 22px

Body · Inter Tight / 17px

Lead · DM Sans / 16px

Mono / Heading 3 · Space Mono 15px

Timeline desc · DM Sans / 13px

Kicker · Space Mono 10px · UPPER

SHAPE

Radius Primitives

None

0px

Small

2px

Medium

6px

Large

12px

20px

Full

50%

DEPTH

Shadow & Glow

Cast shadows need a lighter surface to land on — they vanish on near-black. The four tokens below sit inside an elevated panel so they read correctly. Pair shadow tokens with the elev-1 surface; reach for outline depth when a tile sits directly on bg.

shadow-sm

Subtle lift

shadow-md

Card elevation

shadow-lg

Modal / overlay

glow

Brand accent halo

Glow works directly on bg too — it's additive, not subtractive. Use it sparingly, on focused or selected elements where the brand color should bleed beyond the edge.

PATTERNS

Component Cookbook

A live, interactive index of the patterns this site is built from. Pick an example to see its rendered preview alongside the code that produces it. Each pattern lists the tokens it consumes.

Component Cookbook

Patterns from this site, with the code

1 / 8

Hollow Timeline Dot

Faking a hollow border without using border. Outer fill is the ring color; inner fill matches the page bg.

Code

// Two nested fills make a 'hollow' dot.

<div style={{
  width: 12, height: 12,
  borderRadius: '50%',
  background: 'var(--fg-3)',
  display: 'grid',
  placeItems: 'center',
}}>
  <div style={{
    width: 8, height: 8,
    borderRadius: '50%',
    background: 'var(--bg)',
  }} />
</div>

Preview

Tokens used--fg-3--bg

TOKENS ARE THE SOURCE OF TRUTH · COMPONENTS ARE THE COMPOSITION OF PRIMITIVES · PAGES ARE THE DELIVERY