Colour
Ten tokens. Monochrome base, one flat accent, used only on active and progress state.
Page
#0A0A0A
Raised
#0D0D0D
Glass
rgba(13,13,13,.8)
Tint
rgba(20,20,20,.5)
Wash
rgba(255,255,255,.02)
Hairline
rgba(255,255,255,.1)
Ink
#F5F5F8
Ink Soft
rgba(245,245,247,.7)
Ink Muted
#ABABAB
Accent
rgb(146,232,42)
Move
#FA114F
Stand
#1EEAEF
Type
Satoshi at one weight. Hierarchy comes from size and colour, never from weight. Instrument Serif appears only as an interruption.
Display · 72/79.2 · −0.04em
Programming you can actually follow.
Heading · 42/46.2 · −0.04em
What makes this different?
Title · 24/21.6 · −0.04em
Week 4 · Upper
Lead · 18/27 · −0.02em
Ten weeks, four sessions a week, written the way I coach it.
Body · 16/24 · −0.02em
Every set is prescribed with load, reps, RPE and rest. Nothing is left to guess.
Small · 14/19.6 · −0.02em
Gym · Intermediate · 45–60 min
Caption · 12/16.8 · −0.02em
Based on 136 reviews
Micro · 10/14 · −0.02em
Consent on file · 12 Feb 2026
Numeric · 14 · tabular
4×5 @8 RPE · 180s · 30X1
Numeric Display · 42 · tabular
$129
Data · 12 · tabular
density-w1-lower
Serif Mark · Instrument Serif 36/32.4
Setpoint
The interruption
One or two words per headline switch to Instrument Serif italic at the same size and line height, with letter-spacing reset. Never a whole heading.
What makes this different?
Radius
One policy, concentric. A 48px card holds a 12px plate holds a 999px pill.
48px
Card / section shell
12px
Inner plate / input
999px
Pill / button / chip
Buttons
Two variants. Hover is a tint or a ring, never a scale.
Motion
Two curves, one ladder. Every entrance pairs opacity with translateY on the same declaration; duration scales with the element, not the page.
Rise
Appear on scroll
opacity 0 → 1, y 60–80 → 0 · tween 0.4,0,0.6,1 · 0.24s large / 0.22s mid / 0.18s small · no stagger · hero only: 0.6s on 0.26,0.67,0.48,0.91
Ring
Hover on any card
hairline ring rgba(255,255,255,0) → rgba(255,255,255,0.1) · tween 0.3s
Tint
Hover on any control
surface fill → Wash · tween 0.3s