04 — Hi-Fi UI
The visual language.
Twelve components, twelve screens, eight motion patterns. Every token in lib/tokens.ts maps to a CSS variable that maps to a Tailwind utility — one source of truth, one visual system.
01Visual language
Color
--bg-0
#07080B
--bg-1
#0C0E13
--bg-2
#12151C
--bg-3
#1A1E27
--text-0
#F5F6F8
--text-1
#B8BCC8
--text-2
#6E7382
--violet
#7C5CFF
--violet-soft
#A48CFF
--cyan
#4CE0F2
--amber
#F5B547
--green
#5CE3A1
--red
#FF5C7A
--silver
#D8DCE6
Type scale
Aa
display-xl
88/92 · -0.04em
Aa
display-l
64/68 · -0.035em
Aa
display-m
44/50 · -0.03em
Aa
title-l
28/34 · -0.02em
Aa
title-m
20/26 · -0.015em
Aa
body-l
18/28 · 0
Aa
body-m
15/24 · 0
Aa
body-s
13/20 · 0
Aa
mono-s
12/18 · 0.08em
Spacing & radius
4
8
12
16
24
32
48
64
96
128
192
sm
md
lg
xl
2xl
full
02Component library
Button · primary
try the press
Button · ghost
Pill · status
shipping
Pill · warning
P1
Pill · info
n=18
Pill · danger
P0
Toast
Digest sent to #product-leadership
Tooltip
hover me
Input · focus
Tabs
Slider
67%
Card
03Final walkthrough · 12 screens
Screen 01 / 12
Connect Slack, Linear, GitHub. Background indexing — never blocking.
04Motion atlas
Motion · 01
Hero intro
2.4s GSAP timeline · 4 staged reveals
Motion · 02
Card lift + ring
1.6s conic border sweep on hover
Motion · 03
CTA burst
480ms radial pulse + 280ms backdrop blur
Motion · 04
Sidebar rail
spring-tracked active section indicator
Motion · 05
Reveal · fade-blur
IntersectionObserver, 80ms stagger
Motion · 06
Marquee
CSS keyframe, 50s linear infinite
Motion · 07
Mask wipe
600ms cubic-bezier section transition
Motion · 08
Particles
80-node canvas, paused on document.hidden
05Before / After · Pulse Map
Before · Wireframe
Hi-Fi · After
⇆
The wireframe got the layout right. The hi-fi got the *weight* right — every node now carries enough density that you can read momentum from across the room.