Brand guidelines
A living review of the Motion design system: colour, typography, buttons and diagram primitives, rendered from the same tokens the rest of motion.dev uses.
Colour
Every surface, line and text colour is a CSS custom property. The site runs dark by default with five per-section schemes layered on top, plus a full light mode for each.
Surfaces
Lines
Text
Accent and status
Scheme matrix — dark and light per section
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Typography
Three variable typefaces. TASA Orbiter carries display and headlines, Inter handles body and UI, Azeret / Geist Mono is reserved for code and operator labels. Weight and optical size are driven through font-variation-settings, never font-weight.
opsz 60 · wght 720Production-grade motion
opsz 60 · wght 700Built for performance
opsz 30 · wght 440A library that packages the power of native browser animation.
Inter sets running text and interface copy. It stays legible from 11px operator labels up to 18px ledes, and pairs with the mono face for editorial captions.
animate(element, { opacity: 1 }, { duration: 0.4 })
Optical size and weight axis
Buttons
The base .btn family covers utility actions. The signature caps-stripe button is the primary CTA across the site — monospace uppercase label, 119° dossier stripe and a parallelogram fill sweep on hover. Hover any button below to see live behaviour.
.btnBase family.btn-sm / .btn-lgSizes.btn-caps-stripeSignature CTA<Button />@motion/designDiagram primitives
Every diagram (render pipeline, threads, benchmarks) is assembled from the same parts. These specimens use the literal shared .rpd-* classes so the spec stays in sync with the components.
stroke var(--foreground) · opacity 0.06 · 0.5px · 16px step
fill transparent · 1px stroke (tier hue) · rx 0 · label mono 11px · 0.14em · uppercase
fill var(--layer) · stroke var(--foreground-feint) · the originating node
stroke var(--foreground-feint) · dashed 3 4 (trunk) · solid (between stages)
path M1 1 L11 6 L1 11 Z · refX 11 refY 6 · 10×10 · F-tier variant in #f43f5e
no fill · stroke foreground 45% · dashed 3 3 · label mono 10px · 0.18em
divider 28px above viewBox bottom · text baseline 10px above bottom · 16px horizontal inset · left > SECTION / right FIG.NN (zero-padded) · mono 10px · 0.18em · uppercase · var(--foreground-feint)
Semantic stroke palette
Diagram typography
Visual primitives
The operator-console aesthetic is built from a small set of repeatable parts. New surfaces derive from these rather than generic card conventions.
Tokens: --dossier-stripe-angle, --dossier-stripe-color
Mono · 11px · uppercase · 0.18em tracking · accent-coloured caret
S #fbbf24 · A #34d399 · B #60a5fa · C #a78bfa · D #e879f9 · F #f43f5e