The Outlex Standard, third edition.
The foundation defined the tokens; v3 defines the cinematography — six laws that make every Outlex surface feel like one film: the color law, scene staging, machined controls, the pill nav, life signals, and product theater. Additive: nothing in the foundation breaks.
The Color Law
The scene is monochrome. Color is a counted budget: one sage CTA, one sage phrase, and life signals inside the product. If a screen feels dead — fix light and motion, never add color.
Gradient homes: mark · confidence ring · avatar placeholders. Never headlines, buttons, or backgrounds.
Scene staging
Deep slate radial — never flat black. One key-light, up to two breathing ambient tints (felt, not seen), grain at 4%, and the horizon hairline dividing acts.
Machined controls
Raised controls are physical: surface gradient, dark seat border, inset top light, inset bottom shade, letterpress label. Hover lifts −2px; press sinks +1px. Try them.
Specimen display — both primary radius variants (11px rect · 9999px pill) catalogued side by side, as in the locked 6A handoff. On a live surface the color law holds: never two primary CTAs in view.
The pill nav
Floating glass bar, active item gets the inner pill. Right cluster: EN, theme toggle, Log in, sage pill CTA.
Life signals
Inside product surfaces, color means state: the teal pulse (AI working), the typed verdict with caret, the gradient confidence ring. A dead artifact is a brand violation.
Product theater
Screenshots never ship flat. Frame → 8° tilt (hover flattens) → floor shadow → 12s specular sheen → a living loop inside → rising through a horizon.
02 — tilt 8° · hover → 3°
03 — floor shadow
04 — sheen every 12s
05 — alive inside (18s loop)
06 — rises through a horizon
Rollout
How this reaches the rest of the product.
Both worlds
Dark is the theater. Light is the gallery. Same laws, same CTA, same life — different lighting rig.
Dark theater — marketing hero and bookends: the deep slate scene, ambient tints, product frames rising through the horizon. Light gallery — the product default: warm cream, white machined cards, ink horizon, built for long reading. The sage CTA and every life signal — teal pulse, status dots, the confidence ring — render identically in both. Every pattern on this page ships in both themes or it doesn't ship.