[ PORTFOLIO · DESIGN LANGUAGE ]
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.
[ 01 · THE SYSTEM ]
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. Type does the shouting (a black serif at river scale), color stays almost silent: cream, ink, and one red.
The shell holds three self-contained product systems on purpose: Fika ships its SaaS blue, Pack its warm rust, Eventbrite its signal red. Every product feels like itself instead of like the portfolio — one desk, three distinct objects on it.
[ 02 · COLOR ]
Tokens
Every color is a CSS custom property with a semantic role. Three surfaces tell the whole story — desk, sheet, inkwell — and the single accent ships in three temperatures, each mixed for its background and checked against WCAG AA.
Surfaces
Ink ramp
One red, three temperatures
Per-project palettes — three self-contained systems
[ 03 · TYPOGRAPHY ]
Five voices
Three families, five fixed roles. Nothing in between: text is either a monument or it serves one. Source Serif 4 carries display (900) and the editorial register (400); Hanken Grotesk speaks statements and body; JetBrains Mono only ever appears between brackets.
[ 04 · MOTIFS ]
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.
[ 05 · SPACE & SHAPE ]
Layout specs
Full-bleed scenes with one shared edge rhythm; radii and shadows kept 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 |
| 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 |
[ 06 · ACCESSIBILITY ]
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. Assistive tech hears only meaning.