# Motion (motion.dev) — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Hero band (yellow act)
| Token | Hex | Role / usage |
|---|---|---|
| hero yellow | `#fbd509` | Nav + hero band background (bright variant `#ffdb2a`) |
| hero ink | `#080b08` | Black text / demo blocks on yellow |

### Dark body (dossier act)
| 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`) |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| foreground | `#ededec` / `#edebe5` | Primary text on dark |
| foreground-feint | `#7a8180` | Muted / secondary |

### Accents & tier grades
| 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`).

## 3. Typography Rules

- Display / sans: `"TASA Orbiter", "Inter", sans-serif` — display always weight **700**.
- Mono / chrome: `"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.

## 4. Component Stylings

### Buttons (all square, radius 0)
- **Primary dark ("Motion+")**: bg `#080b08`, text `#edebe5`, height 48px, Geist Mono 11px uppercase, padding `12px 18px`, 1px border matching fill.
- **Yellow ("Get started")**: bg `#fbd509`, text `#080b08`, same 48px / mono uppercase recipe.
- **Nav items ("Docs / Examples / AI Kit")**: transparent, black ink on yellow, Geist Mono 11px uppercase, height 44px, padding `8px 12px`.

### Kickers
- Numbered mono eyebrows ("01 / FREE", "REACT", "JAVASCRIPT", "VUE", "MOTION 12.42.2") in Geist Mono uppercase with wide tracking — the primary labelling device.

### Feature dossier cards
- Square cards on `#13181a` layer with `#1e2427` hairline borders, a mono numbered kicker, a 23px TASA 700 title, and mono body; many contain a live inline animation demo.

### Tier-grade chips
- Small square chips grading library features S→F, each a saturated hue on its own `18`-alpha ground (S `#ffd60a`, A `#34d399`, B `#60a5fa`, C `#a78bfa`, D `#e879f9`, F `#f43f5e`).

### Code panels
- `#111112` bg, `#1e1e20` border, Geist Mono 11px, copy-to-clipboard affordance.

## 5. Layout Principles

- Max content width `--max-width: 980px`; generous full-bleed section bands.
- Hero anatomy: yellow band with black nav + a live black motion-demo block (no static headline — the demo IS the hero).
- Body is a stack of dark dossier sections: mono kicker → 40px TASA heading → feature grid / code / showcase, separated by `#1e2427` hairlines and a diagonal `--dossier-stripe` texture (119deg, 10%-foreground, 8px period).
- Everything square; separation by border + colour band, not radius.

## 6. Depth & Elevation

- Radius: **0px everywhere** — the whole design is square.
- Elevation is by surface colour steps (`#0d1111` → `#13181a` → `#080b08`), diagonal dossier stripes, and 1px `#1e2427` hairlines. Drop shadows are essentially absent.
- `--accent-light rgba(232,238,238,.08)` / `--accent-feint .04` for subtle fills.

## 7. Motion

- Motion is the product: the page uses Motion itself for spring physics, layout animation, scroll-linked reveals, gestures and exit animations — headlines and blocks animate on load, hover and scroll.
- Library: Motion (formerly Framer Motion). Springs and layout transitions rather than fixed CSS eases; kinetic but purposeful.

## 8. Backgrounds, Effects & WebGL

- No WebGL. The signature texture is the `--dossier-stripe`: a `color-mix` diagonal hairline stripe at 119deg, 1.5px stroke, 8px period, over dark panels.
- Animated black demo blocks in the hero are DOM/Canvas driven by Motion.
- Otherwise flat solid colour bands (yellow / near-black); no gradients, no blur.

## 9. Do's and Don'ts

### Do
- Open on a full-bleed acid-yellow `#fbd509` band with black `#080b08` ink, then switch to a green near-black `#0d1111` body with `#ededec` text.
- Keep every corner square (0px radius) — buttons, cards, chips.
- Split type into two voices: TASA Orbiter 700 for display, Geist Mono UPPERCASE (tracking .1–.18em) for all chrome, kickers and code.
- Number sections with mono kickers ("01 / FREE").
- Reserve saturated colour for tier-grade chips (S/A/B/C/D/F) and syntax.
- Let the components demonstrate real Motion animations in place.

### Don't
- Don't round corners — nothing has radius.
- Don't use the yellow outside the hero act, or add a second display weight below 700.
- Don't set chrome in a sans face — chrome is Geist Mono uppercase.
- Don't add drop shadows; use surface steps, stripes and hairlines.

## 10. Responsive Behavior

- Content capped at 980px; multi-column feature grids collapse to single column on narrow viewports and the hero band reflows.
- Breakpoints from stylesheets only — mobile rendering not verified.

## 11. Agent Prompt Guide

- Hero `#fbd509` / ink `#080b08` · Body `#0d1111` · Text `#ededec` · Muted `#7a8180` · Border `#1e2427` · Layer `#13181a`
- Font: TASA Orbiter 700 display, Geist Mono UPPER chrome · Body 16px · Radius: **0 everywhere** · Button 48px, mono 11px uppercase
- Tiers: S `#ffd60a` A `#34d399` B `#60a5fa` C `#a78bfa` D `#e879f9` F `#f43f5e`

<motion-marketing_design_language>
Use the Motion (motion.dev) marketing design language: a two-act developer dossier. Act one is a full-bleed acid-yellow #fbd509 band carrying the nav in black #080b08 ink and a live black motion-demo block (the demo is the hero, not a static headline). Act two is a green-tinted near-black body #0d1111 with #ededec text, layer panels #13181a, deepest black #080b08, and #1e2427 hairlines. EVERYTHING is square — 0px radius on buttons, cards and chips. Type is strictly two-voiced: TASA Orbiter at weight 700 for all display (hero 44px/-0.04em, sections 40px, titles 23px) and Geist Mono UPPERCASE with .1–.18em tracking for ALL chrome — nav, numbered kickers (01 / FREE), buttons and code. Buttons are 48px, Geist Mono 11px uppercase, padding 12px 18px: primary black #080b08 on #edebe5, or yellow #fbd509 on #080b08. Saturated colour is confined to a tier-grade chip system (S #ffd60a, A #34d399, B #60a5fa, C #a78bfa, D #e879f9, F #f43f5e), each on an 18-alpha ground, plus syntax. Depth is surface-colour steps, a 119deg diagonal dossier stripe texture and 1px hairlines — no drop shadows. The page animates itself with Motion (springs, layout, scroll, gestures). Feels: technical, kinetic, dossier-like. Avoid: rounded corners, yellow outside the hero, a sans chrome voice, drop shadows, a second display weight below 700.
</motion-marketing_design_language>