Style Guide
Design tokens and visual language for mat-m.com.
Colors
Typography — Name
Jersey 10 · 400 · Hero name only · clamp(2.75rem, 7vw, 4.5rem)
Mat Mars
Typography — Display
Cabinet Grotesk · 700 · h1 · clamp(2.75rem, 7vw, 4.5rem)
The quick fox
Cabinet Grotesk · 600 · h2 · 1.625rem
Jumps over the dog
Cabinet Grotesk · 600 · h3 · 1.1rem
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0–9
Cabinet Grotesk · 500 · essay titles / nav items · 1.05rem
Good Design and Elegant Systems
Typography — Body
Plus Jakarta Sans · 400 · Body · 17px base / 1.05rem paragraphs
I'm a Designer with a mechatronics background who loves Good Design and Elegant Systems. Precision and sensibility, structure and freedom.
Plus Jakarta Sans · 600 · Labels / Meta · 0.68–0.72rem · uppercase · tracked
Designer · April 2026
Plus Jakarta Sans · 400 · Nav links · 0.875rem · color: ink-soft
Essays · Style Guide
IBM Plex Mono · 400 · Code + engineering annotations
x:0 · y:88px · Jersey 10 · 4.5rem · #313233
Spacing — Main scale (geometric ×2)
Spacing — Optional variant (×2 from 12)
Border Radius
Buttons
Primary — #313233 fill · #fafafa text · 75% opacity on hover
Secondary — transparent fill · 1.5px ink border · 55% opacity on hover
Tertiary — 15% ink fill · no border · darkens on hover
All buttons: Plus Jakarta Sans 500 · 0.875rem · 12×24px padding (variant scale) · 12px radius
Links
Default link — underline at 15% ink, offset 3px, 1px thick
Hover state — 50% opacity
Nav: Essays — no underline, ink-soft, full ink on hover
Info row: hoop.dev — no underline, underlines + dims on hover
Hero Animation
Dot grid — radial-gradient 24×24px · 20% ink · fades in at 0ms, persists
Registration marks — 4 corner brackets · 40% ink · appear 150ms, dissolve 1300ms
Name characters — stagger 75ms/char · 8 chars · starts 250ms · hero-char-in
Scan line — sweeps 360px · starts 850ms · 500ms · linear
Coord label — appears 700ms, fades 1500ms · IBM Plex Mono 0.6rem
Engineering layer dissolves — 1300ms → 1550ms