the tree
The site's own routes as a file tree, with counts that come from the real sources.
Components
The tokens this site is drawn from, and the components built out of them. Every card here is the real thing running, in each state it can actually be in. That includes the states you only see when something has gone wrong.
home/
5 componentsthe stack
Every tool, grouped by layer, as a branch list that opens one branch at a time.
me, as a playlist
A record half out of its sleeve, turning while it plays.
the mini piano
Two octaves that play themselves, and a link to the one you can actually play.
wristkit
Apple Watch rings from a Shortcut that posts into Postgres. Five states, and the card this whole contract came from.
about/
1 componentthe stack graph
The same stack as a React Flow canvas, loaded only at the width it is meant for.
Every value below is read off this page as you look at it. Change the theme or the mode with the switcher in the corner and the swatches follow, along with the numbers under them. Nothing here is a screenshot. 6 themes × 2 modes, 7 groups.
00 / surface
6 tokens// What things sit on. Four steps, and the gap between them is deliberately small.
--bg-canvas
—
the page itself
--bg-card
—
the bento surface: a hair above the canvas, defined by its border
--bg-surface
—
things that sit above a card: dropdowns, code blocks, tooltips
--bg-overlay
—
dialogs and the command palette
--bg-surface-elevated
—
translucent, for skeletons and inset wells
--bg-surface-brand
—
the brand tint under an active pill or badge
01 / ink
6 tokens// Ratios are computed live against what each one actually sits on, for the theme and mode you have selected right now.
Aa
--fg-primary
—
headings, card titles
Aa
--fg-secondary
—
body copy
Aa
--fg-muted
—
labels and meta, lightened from zinc-500 to clear AA
Aa
--fg-brand
—
the accent. The only token a theme changes
Aa
--fg-on-brand
—
text on a solid brand fill. Cannot be derived: a fixed near-white fails 7 of 12 combinations
Aa
--fg-brand-on-tint
—
brand text on the brand tint. --fg-brand itself fails 8 of the 12
02 / line
4 tokens// Borders and rules. The brand-derived ones are color-mix() against --fg-brand, so they follow the theme without being redefined per theme.
--border-subtle
—
card borders, dividers, dashed rules
--border-strong
—
inputs, and anything asking to be noticed
--border-brand
—
derived. A brand edge at 35%
--border-brand-strong
—
derived. The hover edge on a linked card
03 / type
10 tokens// Ten steps and no eleventh. A token sets size and leading, never family. font-serif / font-sans / font-mono stays at the call site, because mono is the default here and prose is the exception.
--text-display-xl—the one hero on a page, serif
--text-display-lg—page titles, serif
--text-display-md—page titles at narrow widths, admin h1, MDX h1
--text-heading-lg—card titles, MDX h2, card figures
--text-heading-md—MDX h3, entry titles in dense cards
--text-body-lg—prose: posts, bios, page intros
--text-body-md—secondary prose: blurbs, captions
--text-mono-md—mono body: inputs, palette items, code
--text-mono-sm—the default UI label: card heads, badges, meta
--text-mono-xs—the smallest label: field labels, group headings
04 / space
9 tokens// A 4px base, thinning out as it grows. The steps people actually reach for, not every multiple.
--space-1—4
--space-2—8
--space-3—12
--space-4—16
--space-6—24. The card's own padding
--space-8—32
--space-12—48
--space-16—64
--space-24—96. Between page sections
05 / radius
5 tokens--radius-sm—badges, chips, small buttons
--radius-md—inputs, dropdowns, tooltips
--radius-lg—cards
--radius-xl—dialogs
--radius-full—pills and avatars
06 / motion
5 tokens// Three durations and two curves. Everything animated through JS asks useReducedMotion() itself. The global reset only reaches CSS.
--motion-fast—colour and opacity on hover
--motion-base—the default: transforms, expands
--motion-slow—entrances, and anything crossing the viewport
--ease-out—arrivals. The site's default curve
--ease-in-out—things that leave and come back
07 / rules
each one paid for- Derive brand accents from --fg-brand with color-mix()// not: Hardcode the violet. It stops reacting the moment someone picks another theme
- Use --fg-on-brand for text on a brand fill// not: Reach for a fixed near-white: it fails contrast in 7 of the 12 theme × mode pairs
- Trigger entrances with whileInView and once, everywhere// not: Use animate for things above the fold. One trigger means no judgement call to get wrong
- Put the trigger on an ancestor with a real box// not: Observe an element that starts at scaleX(0). No area means the observer never fires
- Ask useReducedMotion() in anything animated through JS// not: Assume the global CSS reset caught it. Motion walks straight past that block
- Keep the size scale to its ten steps// not: Write text-[13px] or reach for Tailwind's own steps. A test fails on both
- Decide what a justify-between row does when its two halves stop fitting// not: Answer 'it fits'. .bento-card clips, so overflow looks like missing data