Design system
The tokens and components this site is built with, rendered live from the same CSS. Switch the accent palette or the theme and everything below — and the rest of the site — follows.
Accent palettes
One accent per palette, with a darker ink variant for text in light mode and a lighter one in dark mode. Your choice is saved in this browser.
Color tokens
Warm neutrals in OKLCH. Values update with the 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
Typography
Newsreader for display and reading, Hanken Grotesk for interface text. Both self-hosted as trimmed variable fonts.
Display — Newsreader 400Rodrigo
Section title — Newsreader 400Typography
Heading — Newsreader 500Hangar Design System
Body — Hanken Grotesk 400, 17px
Frontend systems that scale across teams: shared tokens, accessible components and the pipelines that ship them.
Label — Hanken Grotesk 600, uppercaseStaff Frontend Engineer
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 case studies