Design system
The tokens and components this site is built with, rendered live from the same CSS. Switch the base style, the accent palette or the theme and everything below — and the rest of the site — follows.
Base style
Each style sets its own neutrals and accent palettes. Cosmos: cool indigo with saturated accents. Paper: warm paper with earthy accents, the original look.
Accent palettes
One accent per palette, with a darker ink variant for text in light mode and a lighter one in dark mode, plus two companion hues (the small dots) for illustrations. The palettes change with the base style; your choice is saved in this browser.
Color tokens
Neutrals of the current base style, in OKLCH. Values update with the style and theme.
--paperPage background--paper-2Raised surfaces--cardCards and chips--inkPrimary text--ink-softBody copy--mutedSecondary text--faintDecoration--lineBorders--line-softDividers--accentAccent--accent-inkAccent text--accent-softAccent tint--accent-2Illustration amber--accent-3Illustration teal
Typography
Newsreader for display and reading, Hanken Grotesk for interface text. Both self-hosted as trimmed variable fonts.
Frontend systems that scale across teams: shared tokens, accessible components and the pipelines that ship them.
Layout
--maxw1080pxContent width--padclamp(20px, 5vw, 64px)Page gutterradius6px · 7px · 999pxChips and cards · images · pills and buttons
Components
Motion
Every animation sits behind prefers-reduced-motion: no-preference and degrades to the static layout.
- Hover
0.2s easeColor, opacity, arrow nudges- Reveal
0.7s cubic-bezier(0.2, 0.7, 0.2, 1)Sections fading up on scroll- Cascade
35–120ms stepsChips, hero intro, stat counters- Scroll-driven
animation-timeline: view()Experience timeline rail- Page
View transitionsShared titles between /work and its entries