Design System ·
Ink on paper. The portfolio runs on one editorial system: a cream desk, lighter sheets framed in ink, a pen-red accent mixed in three temperatures, and a dark inkwell to close. This page documents it, built with the very system it describes.
Ink on paper
The metaphor drives every decision. The page is a cream desk; each project is a lighter sheet of paper framed with an ink border and a printer's double rule; emphasis is drawn by hand in pen red; and the site ends by lifting the paper to reveal the inkwell: a dark final act where the contact lives. Three colors run the whole shell: cream, ink, and one red. The rest is scale, the serif at 8vw against 15.5px of body.
The shell holds four self-contained product systems on purpose: Fika ships its SaaS blue, Pack its warm rust, Eventbrite its signal red, and Gran DT goes furthest — a night-pitch dark world with its own typefaces, because it is the one that shipped. Every product feels like itself instead of like the portfolio: one desk, four distinct objects on it.
Tokens
Every color is a CSS custom property with a semantic role. Three surfaces tell the whole story: desk, sheet, inkwell. The accent is one red mixed three times, because a single red cannot pass WCAG AA on cream and on ink at once.
Surfaces
Ink ramp
One red, three temperatures
Per-project palettes — four self-contained systems
Five voices
Three families, five fixed roles. Source Serif 4 carries display (900) and the editorial register (400); Hanken Grotesk speaks statements and body; JetBrains Mono only ever appears between brackets.
Recurring gestures
The identity lives in a handful of repeated gestures. Each one appears at least twice across the site, so nothing reads as a one-off effect.
Layout specs
Full-bleed scenes with one shared edge rhythm; the shell keeps radii and shadows to a short, deliberate scale.
| Spec | Value | Where |
|---|---|---|
| Edge gutter | clamp(24px, 4vw, 72px) | Project plates, inkwell spread |
| Scene height | min-height: calc(100svh - 112px) | Each project is a near-viewport scene |
| Radii scale | 4 / 12 / 16 / 44 / 999 | Plate / browser / phone screens / lifting sheet / pills. Device chassis and product mockups carry their own radii. |
| Shadows | rgba(33,33,29, …) — warm ink, never blue-black | Devices, lifting sheet |
| Final act | sticky bottom · 100svh - ~120px | The inkwell stays pinned; ~120px of paper stays visible at rest |
| Type scale jump | display ≥ 8vw vs body 15.5px | Monument or servant — no middle sizes |
Accessible by design
The system ships its constraints: every decorative flourish has a functional fallback.
--pen-text hits 4.5:1+ on light, --pen-night ~5:1 on dark.h1 (screen-reader only above the decorative rivers), landmarks for header/main/footer, skip link, focus-visible everywhere.content: "001" / ""; mockups are aria-hidden.