Skip to content
magnus.mägi
Design systems

The system behind the site

A living spec of the tokens and primitives that hold magnusmagi.com together. Built in Tailwind v4 with CSS variables — light and dark side by side.

Everything on this site is built from a small set of tokens. Below they're laid bare so you can copy, fork, or just see how the pieces fit.

Foundations

Colors

Six tokens drive the entire palette. Each maps to a CSS custom property and flips automatically with the OS color scheme.

  • Background--background
  • Foreground--foreground
  • Muted--muted
  • Subtle--subtle
  • Border--border
  • Accent--accent

Typography

Nunito for body, Geist Mono for metadata. Tracking is wide on uppercase mono, tight on display headings.

H1 · 4xl–6xl · 600

Display heading

H2 · 2xl–3xl · 600

Section heading

Subhead · base · muted

Subhead — the tagline that follows a heading.

Body · sm/base · 1.7

Body copy — used for paragraphs, prose, and long reads.

Mono · xs · 0.18em

MONO · METADATA · 0.18EM

Spacing scale

Tailwind's default 4px scale. Layouts breathe at 24/40/64. Sections stack with 80–120 vertical rhythm.

  • 14px
  • 28px
  • 312px
  • 416px
  • 624px
  • 832px
  • 1040px
  • 1664px
  • 2080px

Radius

Soft on cards, sharp on chips. Buttons borrow the card radius.

  • sm
  • md
  • lg
  • xl
  • 2xl
  • full

Motion

Subtle easing, short durations. All motion respects prefers-reduced-motion.

  • duration · 180ms

    tile pop, hover

  • duration · 200ms

    link underline

  • easing · ease-out

    all transitions

Elements

Buttons

Links

Inline link — inline within prose.

Mono link ↗ — used in metadata strips.

Chips & tags

estoniafounderstooling

Cards

META · LABEL

Card title

Cards group related content with a single border and generous padding. Hover lifts the accent.

META · LABEL

Card title

Cards group related content with a single border and generous padding. Hover lifts the accent.

Form fields

Patterns

Section heading
Design systems

Section heading

Subhead — the tagline that follows a heading.

Mono metadata
  • 2026 · TALLINN
  • FOUNDER · ENGINEER
  • EN · ET

Principles

  • 01

    Constraint over choice

    One typeface family, one accent, one rhythm. Limits make decisions easy and the surface coherent.

  • 02

    Reads like prose

    Tight measure, generous leading, wide tracking on metadata. The page should be quiet.

  • 03

    Honest in two themes

    Light and dark are not skins — they share contrast ratios, accent intensity, and shadows. Both are first-class.

  • 04

    Motion as punctuation

    Animation only where it carries meaning — a tap, a reveal, a state change. Never decorative.