Design System
The design system this site runs on: tokens layered from raw palette to semantic roles, resolved at build time into a single preset, with intrinsic layout primitives and scroll-drawn annotations. Published on npm as @nicohaberkorn/design-system.
still catching up with the actual pages…
Why tokens, not styles
Every colour, typeface, size and gap on this site is a design token, and no component ever asks for a raw value. A card asks for "text on a surface" or "a pencil stroke", never for a hex code or a font name. That is what made this redesign possible without rewriting the pages: the whole new look is a new preset.
Explore everything, ship one thing
The source describes a large design space: 22 hues across two base palettes, four contrast modes, several typefaces, type scales and line-heights. A build step built on Style Dictionary resolves the one combination the site actually uses ahead of time, so a visitor downloads only its final values plus the light and dark variants. The full switchable space still exists as a development-only stylesheet I use to explore.
Marginalia
The current preset is called Marginalia: a monochrome editorial base (Bricolage Grotesque, Fraunces, Geist Mono) with a teal pencil that edits, circles, highlights and stamps, in Caveat. The pencil is simply the first accent. Every accent is a complete set of roles shaped like primary (the colour, what sits on it, a soft container, and a version for dark bands), so the marks can use any accent and the annotation layer works under any preset.
Layout and motion
Spacing derives from a single line-height unit, and layouts are intrinsic: sidebars, grids and clusters adapt to the space they are given rather than to viewport breakpoints. Motion is tokenised too. Durations and easings are shared between CSS and JavaScript and collapse to zero for readers who prefer reduced motion. The marks you see drawn as you scroll come from the same package.
The whole thing is published as @nicohaberkorn/design-system on npm, and the tokens further down this page are rendered live from it.
Explore the system
Each page covers one part of the system, with the real tokens rendered live. The docs follow the preset you choose in the footer.
- FoundationsThe principles behind every decision
- TokensName space, levels and how a value resolves
- ColourRoles, surfaces and accent sets
- TypographyVoices and the fluid scale
- LayoutSpacing, primitives and intrinsic design
- MotionDurations and the drawn annotation marks
- PresetsFour looks from one set of names
Use it
The package ships resolved CSS for each preset, so a site imports one preset and never sees the palette or reference levels.
npm i @nicohaberkorn/sinn
/* app/globals.css */
@import "@nicohaberkorn/sinn/foundation.css";
@import "@nicohaberkorn/sinn/primitives.css";
@import "@nicohaberkorn/sinn/presets/marginalia/root.css";
@import "@nicohaberkorn/sinn/presets/marginalia/dark.css";
@import "@nicohaberkorn/sinn/motion.css";Set data-theme to light or dark on <html>. Package on npm.