[ es/design · motion & material ]
The Execution Space design system, live: motion tokens, SVG animatics, materials, interface specimens — and a few things you'll have to find yourself.
Four rules govern every animation on the site. Full rationale in DESIGN-GUIDE.md.
| enter with purpose | Motion always travels toward its resting place — nothing wanders, nothing bounces idly. |
| settle fast | Short attacks, long tails: --eout and --espring. The eye should never wait. |
| earn the loop | Ambient motion stays sub-perceptual (twinkle, breathe). If it draws the eye, it must mean something. |
| respect the visitor | Everything collapses under prefers-reduced-motion. Eggs never arm. |
Durations and easings come from es-motion.css — never hand-typed values. The dots below run the real curves.
| token | value | use | curve |
|---|---|---|---|
| --t-instant · --t-quick | 90 · 180ms | hover fills, buttons, links | |
| --t-move | 320ms | cards, panels travelling | |
| --eout | .16,1,.3,1 | reveals — the house easing | |
| --espring | .34,1.56,.64,1 | marks, badges — one overshoot, then still | |
| --ease | .25,.46,.45,.94 | underlines, small accents | |
| --e-flat | .4,0,.6,1 | ambient loops |
Lottie-style loops with zero dependencies — inline SVG driven by CSS, shipped as a web component in es-animatics.js. Drop one tag into any page.
Named, reusable surface treatments — CSS recipes in DESIGN-GUIDE.md → Materials. Press and hold any swatch to read its token.
Core interface DNA — the full component & UX spec (breakpoints, tap targets, focus order, ARIA) lives in INTERFACE-GUIDE.md.
Small rewards, never in the way — armed on this page right now. Registry and rules in DESIGN-GUIDE.md → Easter eggs.
| egg | trigger | payoff |
|---|---|---|
| rocket | click the mark in the hero ×5, quickly | a rocket crosses the viewport |
| exe | type exe anywhere | yellow scanline sweep |
| konami | ↑ ↑ ↓ ↓ ← → ← → B A | hyperspace |
| token | press-and-hold any material swatch | its design token, revealed |
House rules: eggs are silent (no sound), brief (<2s), harmless (pointer-events: none), and off under reduced motion.
The written system behind this page — markdown canon, KB-ready.
Motion principles, animatic inventory, material recipes, easter-egg registry.
Components, layout, breakpoints, responsive UX, accessibility standards.
Editorial display patterns, headline systems, imagery direction, SEO + LLM-friendly authoring.
Standard, playbook, and note formats with seeded examples in content/seeds/.
The KB suite: architecture, content workflow, deploy, design system — cross-linked.
The component source. ESAnimatics.list() in the console enumerates the registry.