The primary CTA is a Rive animation rendered to canvas, not a styled element — its exact fill, border and glow are not captured, and the version above is an approximation built from the captured amber. Hover and focus states are likewise not captured, because they are driven by the Rive state machine rather than CSS; the only declared transition on the page is a generic all. Inputs were not captured either: the newsletter field sits inside a Framer form component that did not expose computed styles, so no fill, height, radius, placeholder colour or focus ring could be read from the live DOM. The pair above is therefore composed rather than measured — the shell reuses the captured secondary-button recipe (#1d1d1d at 45px / 8px) with an uppercase Tomorrow 12/14.4 +0.84px placeholder in #999999, and the focus state simply steps the surface ladder to #262626 and makes the page's one captured shadow recipe, the otherwise transparent 0 0 0 1px inset ring, visible in #ffa41c. Treat both states as a placeholder for a real capture, not as measured values.
Nav link · Tomorrow · 12/14.4 · 500 · normal · UPPERProducts · Community · Learn
Body paragraph · Inter · 16/25.6 · 400 · normal · sentencePowering Spotify Wrapped, Duolingo, and products reaching 2 billion users.
Palette
Monochrome chrome, one accent
Text
text#ffffff
text-heading#f1f1f1
text-heading-2#f2f0f0
muted-2#aaaaaa
muted#999999
paragraphrgba(255,255,255,.60)
on-light#000000
Surfaces — the near-black ladder
canvas#000000
surface-4#111111
surface#121212
surface-2#1d1d1d
surface-3#262626
white-90rgba(255,255,255,.90)
white-10rgba(255,255,255,.10)
light#ebebeb
Accent — eyebrows only, never a fill
amber#ffa41c
Spectrum sweep — the one gradient (90deg in oklch)
white#ffffff
blue#3084ff
cyan#19f2ff
amber#ffa41c
magenta#f30058
red#ff483c
black#000000
Depth & motion
No shadows, only steps
4px
5px
8px control
20px
% tile radius
#000000
#111111
#121212
#1d1d1d
#262626
rgba(0,0,0,0) 0 0 0 1px inset — the only recipe
Depth is the surface ladder alone — no borders, no backdrop-filter, and the single box-shadow on the page is a fully transparent inset ring. Motion is delegated to the Rive runtime: five live canvases (hero 500×500, nav 270×150, CTA 32×32, two 19×19 glyphs) and ten videos carry the movement, while the only declared CSS transition is a generic all.