/styleguide · rendered from tokens.css

Design system

Color

--bg

--bg-2

--ink

--ink-2

--ink-3

--line

--line-2

--accent

--accent-2

--plate

Type

Hero — The quick brown fox--fs-hero

H1 — The quick brown fox--fs-h1

H2 — The quick brown fox--fs-h2

H3 — The quick brown fox--fs-h3

Lead — The quick brown fox--fs-lg

Body — The quick brown fox--fs-base

Small — The quick brown fox--fs-sm

Mono label — The quick brown fox--fs-mono

The aside voice — --font-aside, italic.

Mono labels · --font-mono · tracked and uppercase

Motif · the frame

Card with frame

Labels + status

ClientSpec · Not affiliatedInvented brandLiveIn progressPlannedNow booking · Q4 2026Button

Metrics

20 yrs

Leadership

1,240

Count-up demo

[N]

Placeholder

Receipt / ledger

How it was made

Models: Seedance 2.5
Pipeline: ffmpeg · canvas
Hero still ×1: 20 cr
Total credits: 580
Total hours: [N]
Hand-built: Site, motion, type, copy

Demo · 2026-09-16

Motion

Reveals: data-reveal / data-reveal-group. Split headlines: data-split. Count-up: data-count. Scroll-scrub: data-scrub. Viewfinder cursor: data-cursor="view". All gated by prefers-reduced-motion.

--d-fast 180ms--d-base 420ms--d-slow 900ms--scrub-lag 0.6