Experiment #8 · Design system
Everything on this site grows from one small set of decisions — four colors, two typefaces, an 8-point rhythm, and a few carefully chosen curves. This page is a living tour of those decisions, built entirely from the tokens it documents. Hover things. Click the swatches. Move your cursor and stop.
The whole page re-keys to the chosen section color — exactly how the live site shifts as you scroll. The cursor ripple follows along.
01 · Foundations
One color per section — coral is the spine that ties it all together. Never more than two section colors in a single view. Click any swatch to copy it.
Surfaces & ink
Ripple pairings: coral→teal · amber→coral · teal→amber · blue→teal.
02 · Foundations
Two families only. Fraunces (variable serif, optical-size axis) carries display and emphasis; Syne carries everything you read. Italic Fraunces is reserved for emphasis — a few words, almost always in the accent color.
Long-form prose — the .prose body
This is how rendered Markdown reads in an article. Body copy sits at 17px with generous line-height, and the accent color shifts with the section — switch it above and watch the emphasis and links follow.
Links carry a soft underline that fills in on hover. Inline code always reads blue, no matter the section — code is technical, so it stays consistent.
The blockquote is upright Fraunces with a section-colored rule — quiet, set apart, distinct from emphasis.
Headings step down in optical size; the smallest become tracked uppercase labels — the same "third voice" used for tags and meta.
const tone = 'warm, curious, direct';
// never corporate, never over-explainedPull quote
Technology doesn't tell the story. It takes you somewhere the story couldn't go on its own.
03 · Foundations
An 8-point rhythm, no off-grid values, ever. Layout rides a 12-column grid with a 24px gutter inside a 1400px container.
Spacing scale (multiples of 8)
12-column grid
Common splits: hero 8/12 · feed 4/4/4 · about 5/7 · experiments 6/6.
04 · Behavior
Three easing curves do almost all the work, paired with four timing tokens. Hover a card to watch its curve run.
Timing tokens
180ms
--mid 380ms
--slow 600ms
--page 1000ms
Scroll entrances (the fade-and-rise you're seeing): opacity 0→1 + translateY 40px→0, 1000ms ease-out, 80ms stagger. The cursor ripple fires 600ms after you stop moving.
05 · Library
All built from the tokens above. Everything here is live — hover, focus, and toggle to feel the choreography.
Buttons
Cards — the three-speed hover
25 years at the intersection of technology and human experience.
A short sketch in room tones and slow decay.
Variable fonts driven by an idle loop.
Accent line draws (600ms) · label dot pulses (380ms spring) · arrow nudges + grows + colors (380ms spring). The locked card shows the gated-experiment overlay.
Tags
Form & toggles
Focus to see the accent border.
Audio player
Persistent bottom bar, keyed teal to Sounds. On mobile it sits above the dot-nav.
Mobile dot-nav
Four section dots in a 56px bottom bar. Swipe right = forward through sections, left = back; on an article, any swipe goes back.
Dividers
06 · Library
All SVG, never glyphs — stroke="currentColor", 1.5 weight, round caps, so they inherit color and scale crisply.