DIRECTION 11 · STYLE_PRESETS § 11 · concepts/design/editorial-motion-system.md

Editorial
Motion System

Two-color disciplined dev-tool elegance where motion connects layouts as system, not decoration — and the product UI itself replaces photography as the hero.

01 · PALETTE
Disciplined dim with signal accents
Two foundation tones (#0a0a0a + #161616) carry every surface. One accent for actions (#007aff signal blue), one for live data (#00dc82). Warning amber used sparingly. NO third decorative color.
bg-primary
DIM NEAR-BLACK
#0a0a0a
bg-secondary
LIFT SURFACE
#161616
bg-elevated
CARD / PANEL
#1f1f1f
text-primary
OFF-WHITE
#f4f4f4
accent-signal
ACTIONS / LINKS
#007aff
accent-live
LIVE DATA
#00dc82
02 · TYPOGRAPHY
Geist family at variable weights
Display: Geist Sans Black 900
Body: Geist Sans Regular 400/500
Mono: Geist Mono Regular 400/500

MOODBOARD SUBSTITUTES (Google Fonts): Inter (display + body), JetBrains Mono (mono)
DISPLAY 96PX
Method beats taste
DISPLAY 32PX
Output isn't design.
BODY 16PX
There is a lost art of building true quality software. The product UI is the hero image, not photography. Real screenshots in dark-mode rendered, often with one focal interaction highlighted.
MONO 14PX
$ git commit -m "feat: live leaderboard"
→ deployed in 2.4s · v2026.05.14.3
03 · SIGNATURE MOVES
Five recognizable patterns
Each signature is independently recognizable. Together they make the aesthetic legible from a single screenshot.
SIG 01
Live data on homepage
Real-time leaderboards / model rankings / deploy counts replacing the static logo wall convention.
01claude-opus-4-798.7%+0.3
02gpt-5-turbo96.2%+0.1
03gemini-3-pro94.8%−0.2
SIG 02
Product UI as hero
The actual UI is the image, dark-mode rendered, often with one focal interaction highlighted.
Issues Projects Cycles
● ENG-2451 · Add live leaderboard component
● ENG-2452 · Refactor scroll behavior
○ ENG-2453 · Update changelog video
SIG 03
Scrubbable embedded video
Every feature video has 0.25-2x speed control. Variable playback as accessibility AND craft signal.
00:42
02:08
0.5×1×2×
SIG 04
Manifesto-shaped feature page
Product philosophy doc treated as design surface. Linear's /method, Vercel's /ship.
01 · DIRECTION

Build with intention

Quality emerges from constraint. Every element earns its place. The product is the output of decisions, not features.

SIG 05
Custom monospace as system anchor
File paths, timestamps, code snippets, version numbers all in mono — visual proof of technical seriousness.
repo github.com/vercel/next.js
version v15.2.0-canary.4
commit a3f2e91 · 2 hours ago
deploy vercel.com/dpl/dpl_5KqW... · 2.4s
status ● ready
04 · MOTION
Subtle, native, 220ms ease-out
Hover the cards below. Subtle fade + 8px upward shift, 220ms ease-out. NO bounce. NO spring overshoot. Native scroll only — no smooth-scroll libraries. 120ms color shifts on links.
FADE + 8PX UP
220ms ease-out
STAGGER 50MS
between siblings
NO BOUNCE
linear/ease-out only
05 · ANTI-PATTERNS
What this aesthetic refuses
The DO-NOT-USE list defines the discipline as much as the signature moves. Each rule traces to a specific failure mode the brief is rejecting.
✕Stock photography of people in offices
✕Glassmorphism, soft drop shadows, neumorphic surfaces
✕Bouncing / spring-overshoot animations on UI elements
✕Auto-playing videos with sound
✕"Trusted by" logo walls (use live data instead)
✕Multi-color brand palettes (max 1 accent + 1 live-data color)