A two-act developer dossier that animates itself. Act one is a full-bleed acid-yellow #fbd509 band carrying the nav in black #080b08 ink and a live black motion-demo block rather than a static headline; act two drops into a green-tinted near-black body #0d1111 with #ededec text, #13181a layer panels and #1e2427 hairlines. Everything is strictly SQUARE — 0px radius on buttons, cards and chips. Type is two-voiced with nothing between: TASA Orbiter at weight 700 for all display (44px hero at -0.04em, 40px sections) and Geist Mono UPPERCASE with .1–.18em tracking for every kicker, nav item, button and code line. Buttons are 48px mono-uppercase: black #080b08 primary or the yellow #fbd509 pop. Saturated colour is confined to a tier-grade chip system (S #ffd60a, A #34d399, B #60a5fa, C #a78bfa, D #e879f9, F #f43f5e) plus syntax, and depth is surface-colour steps, a 119deg diagonal dossier stripe and hairlines rather than any drop shadow.
Browse Motion in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: motion.dev homepage (live DOM, computed styles + published --* tokens), 2026-07-22 at desktop 1512px. Coverage: full homepage (yellow hero band → dark feature dossier → code sections → showcase → footer). App: n/a (library + docs). Responsive: breakpoints from stylesheets only; mobile not verified.
A two-act "developer dossier": the page opens on a full-bleed acid-yellow #fbd509 hero band carrying the nav in black ink and a live black motion-demo block, then drops into a green-tinted near-black body (#0d1111) for the rest of the page. The library animates its own marketing — headlines, blocks and cards demonstrate spring physics, layout and scroll animation in place. Everything is strictly square (0px radius everywhere) and typographically split in two voices: TASA Orbiter carries display at weight 700 with tight tracking, while Geist Mono handles ALL chrome — nav, kickers, buttons, code — in uppercase with wide letter-spacing. A signature tier-grade colour system (S/A/B/C/D/F) supplies the only saturated hues, as small labelled chips. Feels: technical, precise, kinetic, dossier-like.
| Token | Hex | Role / usage |
|---|---|---|
| hero yellow | #fbd509 | Nav + hero band background (bright variant #ffdb2a) |
| hero ink | #080b08 | Black text / demo blocks on yellow |
| Token | Hex | Role / usage |
|---|---|---|
| background | #0d1111 / #0e1312 | Page canvas (green-tinted near-black) |
| layer | #13181a / #141a18 | Raised panels, cards |
| surface-deep | #060607 | Deepest insets |
| deepest black | #080b08 | Black demo blocks, primary button |
| border | #1e2427 | Hairlines |
| code-bg | #111112 | Code panels (border #1e1e20) |
| Token | Hex | Role / usage |
|---|---|---|
| foreground | #ededec / #edebe5 | Primary text on dark |
| foreground-feint | #7a8180 | Muted / secondary |
| Token | Hex | Role / usage |
|---|---|---|
| accent | #e8eeee | Default near-white accent |
| accent-2 | #8df0cc | Mint highlight |
| accent-3 | #a5b4fc | Periwinkle highlight |
| tier-S | #ffd60a | Grade chip S (also #fbd509 brand yellow) |
| tier-A | #34d399 | Grade chip A (green) |
| tier-B | #60a5fa | Grade chip B (blue) |
| tier-C | #a78bfa | Grade chip C (violet) |
| tier-D | #e879f9 | Grade chip D (fuchsia) |
| tier-F | #f43f5e | Grade chip F (rose) |
Rule: yellow owns the hero act only; the dark body reserves saturated colour for tier-grade chips and syntax. Tier chips pair each hue with an 18-alpha ground (e.g. #34d39918).
"TASA Orbiter", "Inter", sans-serif — display always weight 700."Geist Mono", ui-monospace, monospace — every kicker, nav item, button and code line, UPPERCASE, tracking .1em–.18em (--kicker-tracking).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 44 / 46.2 | 700 | -1.76px (-0.04em), TASA |
| Section (h2) | 40 | 700 | -1.4px, TASA |
| Feature title | 23 | 700 | 0, TASA |
| Kicker / label | 11–12 | 400 mono | +1.68px (+.14em), UPPER |
| Nav / button | 11 | 400 mono | UPPER |
| Code | 11 | 400 mono | 0 |
| Body | 16 | 400 | 0, TASA |
Pattern: two registers only — TASA 700 for display, Geist Mono uppercase for everything structural. Nothing in between.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.