# Outlex Grammar — The Outlex Standard v3 · Volume 2: Cinematography laws ("Gravity") Additive layer over v2 (Precision + Atmosphere). v2 defined the tokens; v3 defines the **cinematography**. Locked from mockup 6A, July 2026. Load `tokens-v3-gravity.css` after `tokens-v2.css`. ## 1. The Color Law (Schindler rule) The scene is monochrome — ink, silver, slate, paper. Color is a counted resource; each appearance must mean something alive. Per viewport, the full color budget is: 1. **One sage CTA** — the machined primary button. Never two primary CTAs in view. 2. **One sage phrase** — the italic display phrase (`move fast.`, `A third way.`), with the 7s light sweep. One per page section, serif italic only. 3. **Life signals** — teal pulse dot (AI working), 5px status dots (terracotta/amber/sage), the gradient confidence ring. Only inside product surfaces, only when they represent state. Everything else — nav, headlines, body, cards, icons, borders — is grayscale. If a screen feels dead, fix light and motion, never add color. Gradient (#306AEF→#54D6A4) homes: mark, confidence ring, avatar placeholder squares. Nowhere else — not headlines, not buttons, not backgrounds. ## 2. Scene staging - Page base is `--ox-scene-bg` (deep slate radial) — never `#000`, never flat. - One key-light glow at top center (`--ox-scene-keylight`). - Up to two ambient tints (`--ox-ambient-sage` low + `--ox-ambient-blue` high, blur 110px, 11s breathe). They must be felt, not seen: if you can name the color while scrolling, it's too strong. - Grain: fractalNoise at 4% overlay (dark) / 3.5% multiply (light). - Sections divide with the **horizon**: 1px light hairline + soft under-glow, breathing at 10s. Light theme uses the ink hairline + warm sun glow. ## 3. Machined controls Raised controls are physical objects: surface gradient + dark seat border + inset top light + inset bottom shade + letterpress text shadow. - Primary: `--ox-btn-primary-*`. Hover: lift −2px, brightness 1.07, shadow widens. Press: +1px, brightness 0.94. Spring `cubic-bezier(0.34,1.56,0.64,1)` 180ms. - Secondary (dark): glass — `--ox-btn-glass-*`, blur 12–14px. - Secondary (light): white machined — `--ox-btn-machined-light-*`. - Radius: 11px rectangles for in-flow CTAs; 9999px pills inside the nav bar and hero badges. ## 4. Navigation Floating pill bar, centered: `--ox-nav-*`. Active item gets an inner pill (`--ox-nav-active-bg` + inset highlight). Right cluster: EN pill, theme-toggle pill (moon/sun 13px Lucide), Log in text, sage pill CTA. Brand cluster left: mark 26px + wordmark 600. ## 5. Product theater Product screenshots are never flat images. Recipe: 1. Frame: `--ox-frame-bg/border/shadow`, radius 18px, glass blur 20px. 2. Stage it: `--ox-frame-tilt` (8°), hover flattens to 3° over 700ms. 3. Floor shadow: `--ox-frame-floor` blurred 14px below. 4. Specular sheen crosses every 12s (`ox-sheen`). 5. The UI inside must be **alive on a loop** (~18s): typed text with caret, teal pulse, ring fill, one toast. A dead artifact is a brand violation. 6. Rises through a horizon line — top edge above, body below. ## 6. Light sweeps (the signature motion) Light moves; elements don't. The three sanctioned sweeps: - **Phrase shine** — `ox-shine` 7s through the sage/ink italic phrase. - **Frame sheen** — `ox-sheen` 12s across product glass. - **Horizon breathe** — `ox-horizon` 10s. Entrances: `hero-rise` (26px rise + fade, `cubic-bezier(0.16,1,0.3,1)`, staggered 120ms). No parallax gimmicks, no scroll-jacking. ## 7. Both worlds Dark is the theater (marketing hero, bookends). Light is the gallery (product default, docs, long reading): warm cream `oklch(0.962 0.010 80deg)`, white machined cards with warm shadows, ink horizon. The sage CTA and all life signals are identical in both. Every pattern ships in both themes or it doesn't ship. ## 8. Don'ts - No color-blob auroras, no gradient headlines, no gradient buttons. - No flat black backgrounds; no cold `rgba(0,0,0)` shadows on light. - No static product screenshots; no empty demo loops (panel blank >3s). - No second color dose in one element (dot chip label stays neutral). - No `transition: all`. No motion on ≥100×/day interactions. --- ## 9. Implementation appendix — locked decisions + recipes *Sections 1–8 above are verbatim from the locked 6A handoff (July 2026). This appendix records the decisions and concrete values the handoff carried only in its mockup HTML, so implementers never re-derive them.* ### 9a. Locked decisions - **Typography is inherited from v2, unchanged.** Display = `--ox-font-display` (`'Tiempos Headline'` commercial target → `'Newsreader'` loaded stand-in), weight **400 only** for display type. Body = Inter. Mono = `--ox-font-mono` (`'Berkeley Mono'` target → `'JetBrains Mono'`). Fraunces is v1/V7 legacy and does not appear anywhere in v3. Every mockup in the handoff (all six identity turns + the locked 6A) uses Newsreader — this is v2's stand-in, not a new font decision. - **Wordmark casing: capitalized `Outlex`** beside the mark in nav and formal lockups. (The locked 6A is explicit; earlier exploratory turns used lowercase — those are superseded.) - **`aurora-field.js` is a rejected device.** The cursor-reactive canvas aurora (Turn 3 "Lumen") and the CSS color-blob aurora (Turn 2a) were both explored and rejected. The canonical ambient device is the pair of static blurred tints (`--ox-ambient-sage` / `--ox-ambient-blue`, 11s `ox-ambient` breathe). Do not port aurora-field.js into any repo. - **Theming mechanism = v2's `[data-theme]` attribute.** `:root` carries the dark theater; `[data-theme="light"]` remaps the gallery. Consumers use the theme-neutral aliases (`--ox-phrase-shine`, `--ox-horizon`, `--ox-ring-track`, `--ox-btn-secondary-*`) so one markup serves both themes. - **Everything in `tokens-v3-gravity.css` above the "THEMED ALIASES" divider is locked-verbatim** from the handoff. The light block below the divider is derived (marked `~`) and is the tunable surface for founder review. ### 9b. Hero display recipe (marketing hero, dark theater) ``` font-family: var(--ox-font-display); font-weight: 400; font-size: 110px desktop hero (site pages) / 64px specimen contexts; letter-spacing: -0.045em; line-height: 0.96–0.99; color: oklch(0.98 0.003 90deg); ``` The sage phrase inside it: serif italic, `background: var(--ox-phrase-shine); background-size: 250% 100%; background-clip: text; color: transparent; animation: ox-shine var(--ox-shine-cycle) ease-in-out infinite;` Entrance: `hero-rise` — 26px rise + fade, `cubic-bezier(0.16,1,0.3,1)` 0.9s, staggered 120ms per element. ### 9c. Pill nav recipe Container: `padding: 4–5px; border-radius: var(--ox-nav-radius); background: var(--ox-nav-bg); backdrop-filter: blur(var(--ox-nav-blur)); border: 1px solid var(--ox-nav-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px rgba(0,0,0,0.35);` Items: `padding: 7px 14–15px; border-radius: 9999px; font-size: 13px; font-weight: 500;` Active item: `background: var(--ox-nav-active-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);` Brand cluster left: mark 22–26px + wordmark `Outlex` 600. Right cluster: EN pill 30px circle, theme toggle, Log in text, sage pill CTA (`border-radius: 9999px; padding: 8px 16px`). ### 9d. Machined CTA states (canonical interaction) ``` transition: transform 180ms cubic-bezier(0.34,1.56,0.64,1), filter 180ms ease, box-shadow 180ms ease; hover: transform: translateY(-2px); filter: brightness(1.07); box-shadow: var(--ox-btn-primary-shadow-hover); active: transform: translateY(1px); filter: brightness(0.94); ``` Radius: 11px in-flow rectangles / 9999px nav + hero-badge pills. ### 9e. Confidence ring recipe SVG `viewBox="0 0 96 96"`, track `circle r=42 stroke=var(--ox-ring-track) stroke-width=7`, fill circle same geometry with `stroke=url(#oxg-ring)` (gradient stops `#306AEF` 0.35 → `#54D6A4` 1.0), `stroke-linecap=round stroke-dasharray=264`, fill percent via `stroke-dashoffset = 264 × (1 − pct)`, `transform=rotate(-90 48 48)`. ### 9f. Grain Inline SVG `feTurbulence type=fractalNoise baseFrequency=0.85 numOctaves=4` rect: opacity **0.04 + `mix-blend-mode: overlay`** on dark / **0.035 + `multiply`** on light. ### 9g. The mark (portable asset) `` with gradient `oxg1` (`#306aef` 0.35 → `#54d6a4` 1.0) — canonical path data lives in `brand/index-v3.html` and v2's brand book; identical asset, unchanged in v3. Breathe: `ox-breathe` 4s drop-shadow cycle, hero placement only.