Read from index.html --shadow-*, border-radius, --ease
Radius — low and deliberate
8px is the card, 4px is the control, 2–3px is data. Two shapes are asymmetric on purpose:
the filing tab squares its top-left corner so the tab can sit flush, and the callout rule rounds only
its right side so the 3px accent border reads as a hard margin mark.
--r-card8px · cards, panels, standards box
--r-ctrl4px · buttons, swatches, drawer
--r-bar3px · split bar, stamps
--r-cell2px · record-field square, highlighter
--r-tab0 8px 8px 8px · filing-tab card
--r-inset0 6px 6px 0 · callout rule
--r-pill999px · register legend chips only
Elevation — green-tinted, two-layer
Shadows are rgba(18,36,26,…), an alpha of --fg —
never neutral black. Each is a tight contact shadow plus a wide ambient one, so cards feel like paper
lifted off paper rather than glass floating in space.
--shadow-sm0 1px 2px /.05
Resting issue card, solid button
--shadow0 2px 4px /.04 0 12px 28px /.07
Hover: card and button lift
--shadow-lg0 4px 10px /.06 0 24px 48px /.10
The filing-card panel — the one floating object
--shadow-ininset 0 3px 10px /.22
:active press. State change is depth, not color.
Motion — one curve, four speeds
Everything eases on cubic-bezier(.2,.7,.2,1). Press
Replay to run the timing at true speed.
Buttons, chips, rows --d-fast
.18s
Record-field isolate --d-mid
.25s
Scroll reveal .rv --d-reveal · 14px rise
.65s
Highlighter swipe --d-hl · .3s delay
.95s
Count-up --d-count · cubic ease-out
1.0s
Split-bar fill --d-bar · 200ms after reveal
1.1s
Reduced motion is a
first-class path.prefers-reduced-motion:reduce zeroes every duration,
forces .rv visible and the highlighter lit, and the script prints final count
values instantly. The live dot pulses three times and stops — no looping attention
animation exists in this system. Never ship a state reachable only through motion.