# Outlex Brand — The Outlex Standard v3 (complete reference)
> **This file is for cross-LLM consumption.** It is served at `https://design.outlex.ai/brand.md` (and, unchanged, at `https://design.outlex.ai/brand-v3.md` — same file, two stable URLs) — the single CANONICAL brand reference for the whole system. Codex, Cursor, ChatGPT, and any agent without skill-file injection should fetch this URL to ground ALL identity, color, typography, spacing, depth, component, motion, iconography, AI/Lexi, voice, and hard-stop decisions — foundation and cinematography alike.
>
> **There is one system: v3, "The Outlex Standard."** It absorbs everything that used to be called "v2" (the OKLCH foundation — color ramps, type scale, spacing, elevated-card depth, motion budget) and layers the six laws of cinematography on top (scene staging, machined controls, the color law, pill nav, life signals, product theater). Nothing described as "v2" below is deprecated — it is the foundation this standard stands on. The engineering filenames stay stable for backward compatibility: foundation tokens ship in `tokens-v2.css`, cinematography tokens in `tokens-v3-gravity.css`. The book that used to be labeled "v2" is archived, unchanged, at `/v2/` (same status as the v1/V7 archive at `/v1/`) — useful for history, not the surface to build against.
>
> **Load order**: `https://design.outlex.ai/tokens-v2.css` **first** (foundation), then `https://design.outlex.ai/tokens-v3-gravity.css` **second** (cinematography, additive — never redefines a v2 token). Component recipes: `https://design.outlex.ai/GRAMMAR.md` (Volume 1 — foundation recipes) and `https://design.outlex.ai/GRAMMAR-v3.md` (Volume 2 — cinematography laws).
>
> Direction: **6A "Gravity · Warm"**, locked July 2026, active since 2026-07-15 — built on **Direction B "Precision + Atmosphere,"** approved by founder 2026-06-10. Source repo: `outlex/outlex-design`.
---
## Migration state — read before touching product code
**v3 is the standard for design.outlex.ai and for any new marketing/hero surface.** The PRODUCT (`app.outlex.ai`) is mid-migration and does **not** yet run v3's scene/machined/theater grammar anywhere:
- **Editing an EXISTING product surface?** Match the code that's there — most of the product is still V7 legacy (cream-editorial, `--v7-*` tokens, archived reference at `/v1/` and `/v1/brand.md`); the Lawyer Portal has migrated to the foundation tokens described in this document (§§3–9, 13, 15). Do NOT mix in v3's scene-staging/machined-control/theater grammar on an unmigrated surface.
- **Building a NEW surface, mockup, or anything in the migration plan?** Use this document (the foundation sections for any in-app surface; add the cinematography sections — §§2, 8's scene half, 10, 14, 16 — for marketing/hero/website surfaces).
- **Migration order** (tracked in mvp2 `DESIGN_DIRECTION.md`, the source of truth for what's flipped): lawyer portal → website → user app. Rollout order for the *cinematography* layer specifically (GRAMMAR-v3 §Rollout): P1 this design site (DONE) → P2 outlex-corporate-website homepage (next) → P3 mvp2 product, light-first → P4 marketing kit.
- The v1 `tokens.css` at the root URL is untouched — product symlink consumers keep working. The foundation lives at `tokens-v2.css`; cinematography at `tokens-v3-gravity.css`.
- The v3 **color law** (§2, Law 00 — one sage CTA + one sage phrase per viewport, gradient exclusive to mark/ring/avatar) already binds for any NEW surface today, even ahead of full cinematography rollout.
---
## 1. Identity at a Glance
- **Product**: Outlex — AI Legal Operating System for European businesses
- **Positioning**: "The AI legal operating system for European businesses"
- **Mission**: Legal certainty for companies that move fast.
- **Audience**: European VC-backed startups (seed → Series B), founders / COOs / CTOs.
- **Visual character**: dark-first precision + ambient atmosphere, now staged as cinematography. Near-black surfaces, OKLCH color ramps, radial gradient scenes, grain texture, machined controls with letterpress text and layered shadow — alongside a paired warm-paper light theme where dark is the theater and light is the gallery (§16). Premium craft — linear/Vercel-tier — but credibly European and institutional.
---
## 2. The Six Laws — the Grammar of Every Surface
Law 00 is the umbrella rule; Laws 01–06 are the six laws it governs. Everything else in this document — the color ramps, the type scale, the depth recipes, the component CSS — exists to serve these six laws. Read this section first; it frames every section that follows.
### Law 00 — 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 exactly:
1. **One sage CTA** — the machined primary button (`--ox-btn-primary-*`, §9). Never two primary CTAs in one view.
2. **One sage phrase** — the italic display phrase, theme-neutral alias `--ox-phrase-shine`, 7s `ox-shine` sweep (§9, §11). One per page section.
3. **Life signals** — teal pulse (`--ox-life-teal`), 5px status dots (`--ox-dot-high/-review/-ready`), the gradient confidence ring (§12). Inside product surfaces only, only when representing real state.
Everything else — nav, headlines, body, cards, icons, borders — is grayscale. If a screen feels dead, fix light and motion; never add a second color.
Gradient (`#306AEF → #54D6A4`) homes: the mark, the confidence ring, avatar placeholder squares. Nowhere else — not headlines, not buttons, not backgrounds. (This updates and supersedes the older "gradient is for the mark only" framing — see the Hard Stops reconciliation note in §19.)
### Law 01 — Scene staging
- Page base is `--ox-scene-bg` (deep slate radial) — never `#000`, never flat.
- One key-light glow top-center: `--ox-scene-keylight`.
- Up to two ambient tints: `--ox-ambient-sage` (low) + `--ox-ambient-blue` (high), `--ox-ambient-blur` (110px), `--ox-ambient-cycle` (11s breathe via `ox-ambient`). Felt, not seen.
- Grain: inline SVG `feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4"`, opacity 0.04 + `mix-blend-mode: overlay` (dark) / opacity 0.035 + `multiply` (light).
- Sections divide with the **horizon**: theme-neutral alias `--ox-horizon` (1px hairline) + `--ox-horizon-glow`, breathing 10s via `ox-horizon`.
Full recipe and tokens: §8.
### Law 02 — Machined controls
Every raised control = surface gradient + dark seat border + inset top light + inset bottom shade + letterpress text shadow (`--ox-btn-letterpress`).
- Primary: `--ox-btn-primary-bg/-border/-fg/-shadow/-shadow-hover`. Spring `cubic-bezier(0.34,1.56,0.64,1)` 180ms.
- Secondary (dark): glass — `--ox-btn-glass-bg/-border/-shadow`.
- Secondary (light): white machined — `--ox-btn-machined-light-bg/-border/-shadow`.
- Radius: 11px in-flow rectangles / 9999px pills (`--ox-nav-radius`).
Full recipe and tokens: §9.
### Law 03 — Pill nav
Floating glass bar: `--ox-nav-bg/-border/-blur/-active-bg/-radius`. Brand cluster left = mark 22–26px + wordmark **"Outlex"** (capitalized, weight 600). Right cluster = EN pill, theme-toggle pill, "Log in" text, sage pill CTA.
Full recipe and tokens: §10.
### Law 04 — Life signals
Teal pulse `--ox-life-teal` (`ox-teal-pulse` keyframe, AI working), typed verdict + caret (`ox-caret` keyframe), gradient confidence ring (`--ox-ring-track`, r42/c264 dashoffset). A dead artifact — a panel with no motion, no state change — is a brand violation, not a minor issue.
Full recipe and tokens: §12.
### Law 05 — Product theater
Product frames are never flat images: `--ox-frame-tilt` (8°) → `--ox-frame-tilt-hover` (3°) over 700ms, `--ox-frame-bg/-border/-shadow`, `--ox-frame-floor` shadow, 12s specular `--ox-sheen` (`ox-sheen` keyframe, `--ox-sheen-cycle`), the UI inside alive on an 18s loop (`--ox-theater-cycle`), rising through a horizon.
Full recipe and tokens: §14.
### Law 06 — Both worlds
Dark is the theater (marketing hero, bookends). Light is the gallery (product default, warm cream, ink horizon). The sage CTA and every life signal are pixel-identical in both themes. Every pattern in this document ships in both themes or it doesn't ship.
Mechanism and remapped values: §16.
---
## 3. Color System — Dark Theme (Default / `:root`)
Dark theme is the canonical `:root`. Light overrides via `[data-theme="light"]` (§4).
### 3a. Dark Surface Ladder
| Token | OKLCH | Hex approx | Role |
|---|---|---|---|
| `--ox-surface-0` | `oklch(0.12 0.015 270deg)` | `#0C0B12` | Page base — near-black |
| `--ox-surface-1` | `oklch(0.16 0.012 270deg)` | `#111019` | Elevated panels / sidebar |
| `--ox-surface-2` | `oklch(0.20 0.010 270deg)` | `#16151E` | Elevated cards |
| `--ox-surface-3` | `oklch(0.24 0.008 270deg)` | `#1C1B23` | Hover state / active items |
| `--ox-surface-4` | `oklch(0.28 0.008 270deg)` | `#222128` | Highest elevation / tooltips |
### 3b. Dark Foreground
| Token | OKLCH | Role |
|---|---|---|
| `--ox-fg-primary` | `oklch(0.97 0.005 270deg)` | Headlines, active nav — near-white `#F5F4F2` |
| `--ox-fg-secondary` | `oklch(0.82 0.006 270deg)` | Body copy — ≥4.5:1 on surface-0 |
| `--ox-fg-muted` | `oklch(0.78 0.006 270deg)` | Meta, labels — founder-QA contrast fix, ≈10:1 on surface-0 |
| `--ox-fg-chips` | `oklch(0.78 0.006 270deg)` | Chip labels / uppercase caps text |
| `--ox-fg-inverse` | `oklch(0.12 0.015 270deg)` | Dark text on light/sage buttons |
### 3c. Dark Borders
| Token | OKLCH | Role |
|---|---|---|
| `--ox-border` | `oklch(0.28 0.010 270deg)` | Base border |
| `--ox-border-subtle` | `oklch(0.22 0.008 270deg)` | Hairlines, dividers |
### 3d. Accent Ramps — 11 Steps (OKLCH)
All accents are `--ox-{family}-{step}` where step ∈ `{50,100,200,300,400,500,600,700,800,900,950}`.
**Sage** (primary CTA / success) — hue 150deg:
- `--ox-sage-500`: `oklch(0.60 0.10 150deg)` — main CTA color on dark
- `--ox-sage-400`: `oklch(0.68 0.10 150deg)` — hover, lighter emphasis
- `--ox-sage-600`: `oklch(0.52 0.10 150deg)` — pressed, deeper
**Amber** (warning/pending accent ONLY — NOT the AI/Lexi colour) — hue 75deg:
- `--ox-amber-500`: `oklch(0.70 0.14 75deg)` — pending dots, SLA deadline meta text, focus rings only
- `--ox-amber-400`: `oklch(0.78 0.14 75deg)` — lighter variant on dark
- AI/Lexi accent is **teal `#54D6A4`** via `--ox-ai-accent` / `--ox-life-teal` — never amber
**Terracotta** (warning / destructive) — hue 28deg:
- `--ox-terracotta-500`: `oklch(0.60 0.16 28deg)`
- `--ox-terracotta-400`: `oklch(0.70 0.15 28deg)`
**Blue** (informational / links / interactive) — hue 270deg:
- `--ox-blue-500`: `oklch(0.57 0.15 270deg)`
- `--ox-blue-400`: `oklch(0.65 0.17 270deg)`
Full 11-step ramps in `https://design.outlex.ai/tokens-v2.css` § Section 1.
---
## 4. Color System — Light Theme (`[data-theme="light"]`)
### 4a. Light Surface Ladder
| Token | Value | Role |
|---|---|---|
| `--ox-surface-0` | `oklch(0.962 0.010 80deg)` ≈ `#F5F1EA` | Warm cream page base — NEVER pure white or lightness > 0.97 |
| `--ox-surface-1` | `#FFFFFF` | White panels |
| `--ox-surface-2` | `oklch(0.994 0.003 80deg)` | Near-white elevated card (pops on cream bg) |
| `--ox-surface-3` | `oklch(0.950 0.010 80deg)` | Hover state |
| `--ox-surface-4` | `oklch(0.935 0.012 80deg)` | Depressed / highest elevation |
### 4b. Light Foreground
| Token | Value | Role |
|---|---|---|
| `--ox-fg-primary` | `#231F20` | Near-black ink |
| `--ox-fg-secondary` | `#4A4641` | Warm dark grey body |
| `--ox-fg-muted` | `#6B6460` | Labels, meta |
| `--ox-fg-chips` | `#8A847C` | Chip labels |
| `--ox-fg-inverse` | `oklch(0.962 0.010 80deg)` | Warm cream on dark buttons |
### 4c. Light Borders
| Token | Value |
|---|---|
| `--ox-border` | `oklch(0.86 0.015 80deg)` ≈ `#DCD5CA` — visible, not ghost |
| `--ox-border-subtle` | `oklch(0.90 0.010 80deg)` — hairlines / dividers |
### 4d. Light Accent Adaptations
Light-theme overrides deepen accent chroma for contrast on white/warm-paper:
- `--ox-sage-500`: `oklch(0.55 0.11 150deg)` (deeper than dark's 0.60)
- `--ox-amber-500`: `oklch(0.65 0.13 75deg)` (readable on white)
- `--ox-blue-400`: `oklch(0.55 0.17 270deg)`
---
## 5. Semantic Color Roles & the Color Law Budget
| Color role | Semantic use | NEVER use for |
|---|---|---|
| **Sage** | Primary CTAs, success states, "done" indicators, Lexi-confirmed actions | Destructive, warnings, decorative fills |
| **Teal (#54D6A4)** | AI dot accent — the 4–5px dot in AI chips, citation chips, streaming indicator, `--ox-life-teal` pulse | Backgrounds, large fills, text — dots only |
| **Amber** | Warning/pending: tiny dot indicators, SLA deadline meta text, focus rings | AI/Lexi surfaces, AI labels, icon fills, backgrounds |
| **Terracotta** | Risk, urgent/overdue, destructive confirmations | Success, AI output, information |
| **Blue** | Links, informational callouts, interactive selection | Primary CTA (use sage), errors |
| **Brand gradient** | The Outlex mark SVG, the confidence ring, avatar placeholder squares — and ONLY those three | Any other UI element, ever |
This table IS the enforcement mechanism for Law 00's color budget (§2): one sage CTA, one sage phrase, life signals only where stateful, gradient only in its three homes — everything else stays grayscale.
### AI/Lexi Token Set (neutral grammar — teal dot accent)
AI message cards are **neutral** — identical to elevated cards. No amber surfaces. Teal is the AI accent dot.
```css
--ox-ai-surface: /* dark: oklch(0.16 0.012 270deg) [=surface-1] | light: #FFFFFF [=surface-1] */
--ox-ai-border: /* dark: rgba(255,255,255,0.07) [neutral card] | light: #E2DDD6 [border-subtle] */
--ox-ai-accent: /* #54D6A4 — teal dot accent, both themes; same value as --ox-life-teal */
--ox-ai-text: /* dark: oklch(0.82 0.006 270deg) [fg-secondary] | light: #4A4641 */
--ox-ai-icon-bg: /* dark: rgba(255,255,255,0.06) [monochrome] | light: oklch(0.960 0.007 75deg) */
```
**Dot-chip grammar (Linear-style):**
- Chip surface + border = neutral
- Label text = `fg-secondary` — NEVER coloured
- Colour lives ONLY in the 4–5px leading dot
- Dot palette: terracotta = HIGH/overdue · amber = pending/review · sage = done/ready · teal = AI/citation
**One-accent-per-element rule:** Never coloured icon + coloured label on the same element. Never icon colour + chip colour on the same list row. Severity lives in the dot chip alone.
### Status Token Set
```css
--ox-success / --ox-success-surface / --ox-success-border /* sage */
--ox-warning / --ox-warning-surface / --ox-warning-border /* amber */
--ox-danger / --ox-danger-surface / --ox-danger-border /* terracotta */
--ox-info / --ox-info-surface / --ox-info-border /* blue */
```
---
## 6. Typography
### 6a. Font Stack
```css
/* Display — institutional authority */
--ox-font-display: 'Tiempos Headline', 'Newsreader', 'Georgia', 'Times New Roman', serif;
/*
* Commercial target: Tiempos Headline (Klim Type Foundry, ~$240/yr)
* Free interim stand-in: Newsreader (Google Fonts) — APPROVED, use now
* Weight: ALWAYS 400. Italic for editorial em emphasis only.
* NEVER bold (600+) on display face — ever. (Fraunces is v1/V7 legacy — never appears here.)
*/
/* Body — precision sans */
--ox-font-sans: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
/*
* Mandatory OpenType features:
* font-feature-settings: 'calt', 'kern', 'liga', 'cv11', 'tnum', 'zero';
* Body weight: font-variation-settings: 'wght' 450 (variable font axis)
* cv11 = single-story 'a' for legibility; tnum + zero for legal data tables.
*/
/* Mono — legal data precision */
--ox-font-mono: 'Berkeley Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
/*
* Commercial target: Berkeley Mono (~$75) — primary for citations, case refs.
* Free interim stand-in: JetBrains Mono (Google Fonts) — APPROVED, use now.
* Weight 300 for metadata; 400 for code blocks.
*/
```
Hero display context (marketing/theater, §9): `font-size: 110px` desktop hero / `64px` specimen contexts, `letter-spacing: -0.045em`, `line-height: 0.96–0.99`, `color: oklch(0.98 0.003 90deg)` — same `--ox-font-display` stack and 400-weight rule above, just at hero scale.
### 6b. Type Scale
| Token | Size | Usage |
|---|---|---|
| `--ox-text-hero` | 56px | Marketing masthead, display-xl |
| `--ox-text-display-lg` | 36px | Section headers, page titles |
| `--ox-text-display` | 28px | Card titles, modal headers |
| `--ox-text-title` | 20px | List group headers, widget titles |
| `--ox-text-body` | 15px | Primary reading text |
| `--ox-text-meta` | 12px | Timestamps, helper text, captions |
| `--ox-text-chip` | 11px | Status chips, badge labels |
### 6c. Tracking (Letter-Spacing)
| Token | Value | Use |
|---|---|---|
| `--ox-tracking-display` | `-0.03em` | Hero / display-lg at 28px+ |
| `--ox-tracking-title` | `-0.02em` | Title-level headings |
| `--ox-tracking-body` | `-0.01em` | Body copy |
| `--ox-tracking-caps` | `0.09em` | Uppercase chip text, status labels |
| `--ox-tracking-caps-wide` | `0.12em` | Eyebrow / section divider caps |
| `--ox-tracking-mono` | `0.02em` | Mono citations, legal refs |
### 6d. Font Weights
| Token | Value | Rule |
|---|---|---|
| `--ox-weight-display` | 400 | Display face — ALWAYS 400; editorial grace. This is a hard ceiling everywhere `--ox-font-display` is used, hero/theater contexts included — there is no separate, looser cap for marketing. |
| `--ox-weight-body` | 450 | Inter variable axis body text |
| `--ox-weight-medium` | 500 | Nav items, button labels, chip text |
| `--ox-weight-semibold` | 600 | **Maximum allowed** for Inter/body/UI text. Never higher. |
### 6e. Line Heights
| Token | Value | Use |
|---|---|---|
| `--ox-leading-display` | 1.05 | Hero / large display |
| `--ox-leading-tight` | 1.15 | Sub-headings, titles |
| `--ox-leading-body` | 1.60 | Normal body copy |
| `--ox-leading-loose` | 1.75 | AI/Lexi response bubbles — prose breathes |
---
## 7. Spacing — 8px Grid
All spacing is multiples of 8px.
```css
--ox-space-1: 4px; /* sub-grid — micro padding only (inner chip, icon padding) */
--ox-space-2: 8px; /* base grid unit — minimum gap */
--ox-space-3: 12px;
--ox-space-4: 16px;
--ox-space-5: 20px; /* AVOID — prefer --ox-space-6 */
--ox-space-6: 24px;
--ox-space-8: 32px;
--ox-space-10: 40px;
--ox-space-12: 48px;
--ox-space-16: 64px;
--ox-space-20: 80px;
--ox-space-24: 96px;
```
**Border radii:**
```css
--ox-radius-sm: 4px; /* chips, badges, kbd */
--ox-radius-md: 8px; /* buttons, inputs, nav items — v2/product-era buttons (§9a) */
--ox-radius-lg: 12px; /* cards, panels */
--ox-radius-xl: 14px; /* chat input, main content areas */
--ox-radius-2xl: 16px; /* product frames, hero screenshots */
--ox-radius-full: 9999px; /* pills, avatars, pill nav (--ox-nav-radius) */
```
Note: the machined primary CTA (§9b) uses a bespoke `11px` radius rather than reaching for `--ox-radius-md`/`-lg` — see the reconciliation note in §19.
---
## 8. Depth & Atmosphere: Cards (v2-era) and Scene Staging (v3 Law 01)
Two depth systems live here, used in different contexts — an **elevated-card** system for in-app surfaces and a **scene-staging** system for marketing/hero surfaces. Both are canonical; neither replaces the other. See the reconciliation note at the end of §8b.
### 8a. Elevated-Card Atmosphere (foundation)
#### Ambient Orbs (in-app / card-level)
Three radial gradient orbs on page-level backgrounds (never on cards). Zero layout impact — `position: absolute; pointer-events: none; z-index: 0`.
```css
/* Sage orb — top-left */
.orb-sage {
width: 600px; height: 500px;
top: -100px; left: -200px;
border-radius: 50%;
filter: blur(var(--ox-orb-blur)); /* 120px */
background: radial-gradient(circle,
var(--ox-orb-sage-color) 0%, /* dark: oklch(0.60 0.10 150deg / 0.18) */
transparent 70% /* light: rgba(107,143,113,0.14) */
);
animation: orb-pulse var(--ox-orb-cycle) ease-in-out infinite; /* 8s */
animation-delay: 0s;
}
/* Blue orb — center-right */
.orb-blue {
width: 700px; height: 600px;
top: 100px; right: -250px;
background: radial-gradient(circle,
var(--ox-orb-blue-color) 0%, /* dark: oklch(0.57 0.15 270deg / 0.14) */
transparent 70% /* light: rgba(48,106,239,0.08) */
);
animation-delay: 2.7s;
}
/* Amber orb — bottom-center */
.orb-amber {
width: 500px; height: 400px;
bottom: -50px; left: 30%;
background: radial-gradient(circle,
var(--ox-orb-amber-color) 0%, /* dark: oklch(0.70 0.14 75deg / 0.10) */
transparent 70% /* light: rgba(196,148,50,0.10) */
);
animation-delay: 5.3s;
}
@keyframes orb-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.08); }
}
```
Content above orbs must be `z-index: 1` or higher.
#### Grain Overlay
feTurbulence grain — 3–4% opacity. Zero layout impact. Premium paper signal.
```css
/* Apply on any surface element via ::after */
.ox-grain::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
mix-blend-mode: overlay; /* dark theme */
}
[data-theme="light"] .ox-grain::after {
mix-blend-mode: multiply;
/* Swap data URI to opacity="0.03" for light — or use .ox-grain-light class */
}
```
Dark: `mix-blend-mode: overlay`, opacity 0.04. Light: `mix-blend-mode: multiply`, opacity 0.03. (The scene-level grain in §8b uses the same recipe at 0.035 opacity light — treat 0.03/0.035 as the same "light grain" intent; use whichever number the concrete mockup you're copying specifies.)
#### 1px Inset Top Highlight (Linear Signature)
Every elevated card carries a 1px inset white top edge. This is the card grammar's signature:
```css
box-shadow:
inset 0 1px 0 var(--ox-inset-highlight), /* dark: rgba(255,255,255,0.08) | light: rgba(255,255,255,0.90) */
/* ... layered shadows below */
```
On dark: `rgba(255,255,255,0.08)` — subtle. On light: `rgba(255,255,255,0.90)` — strong.
#### Shadow Stacks (elevated cards)
All elevated-card shadows are warm-tinted (`oklch(0.05 0.02 270deg / N)` dark, `rgba(40,35,30,N)` light). Never neutral black, never grey, for this card system — see §19's reconciliation note for how this interacts with the machined-control and product-theater shadow recipes in §8b/§9b/§14, which intentionally use black-based shadow layers.
```css
/* Dark theme — 4 elevation tiers */
--ox-shadow-1:
0px 1px 2px oklch(0.05 0.02 270deg / 0.50),
0px 2px 6px oklch(0.05 0.02 270deg / 0.35);
--ox-shadow-2:
0px 1px 2px oklch(0.05 0.02 270deg / 0.50),
0px 2px 8px oklch(0.05 0.02 270deg / 0.40),
0px 4px 20px oklch(0.05 0.02 270deg / 0.30),
0px 8px 40px oklch(0.05 0.02 270deg / 0.20);
--ox-shadow-3:
0px 2px 4px oklch(0.05 0.02 270deg / 0.50),
0px 4px 16px oklch(0.05 0.02 270deg / 0.40),
0px 12px 40px oklch(0.05 0.02 270deg / 0.35),
0px 20px 60px oklch(0.05 0.02 270deg / 0.25);
--ox-shadow-4:
0px 4px 12px oklch(0.05 0.02 270deg / 0.60),
0px 12px 40px oklch(0.05 0.02 270deg / 0.50),
0px 24px 80px oklch(0.05 0.02 270deg / 0.35),
0px 40px 120px oklch(0.05 0.02 270deg / 0.25);
/* Light theme — same tiers, warm shadow base */
/* shadow-2 light: */
inset 0 1px 0 rgba(255,255,255,0.90),
0 1px 2px rgba(40,35,30,0.05),
0 3px 8px rgba(40,35,30,0.06),
0 8px 24px rgba(40,35,30,0.07);
```
### 8b. Scene Staging (Law 01 — marketing/hero)
Tokens, `:root` (dark):
```css
--ox-scene-bg: radial-gradient(130% 90% at 50% -10%,
oklch(0.185 0.008 200deg) 0%,
oklch(0.125 0.008 220deg) 48%,
oklch(0.085 0.007 250deg) 100%);
--ox-scene-keylight: radial-gradient(50% 50% at 50% 50%, rgba(240,237,232,0.06) 0%, transparent 70%);
--ox-ambient-sage: radial-gradient(circle, rgba(123,160,129,0.10) 0%, transparent 70%);
--ox-ambient-blue: radial-gradient(circle, rgba(48,106,239,0.07) 0%, transparent 70%);
--ox-ambient-blur: 110px;
--ox-ambient-cycle: 11s;
--ox-horizon-line: linear-gradient(90deg, transparent 4%,
rgba(235,238,242,0.38) 30%, rgba(245,247,248,0.5) 50%,
rgba(235,238,242,0.38) 70%, transparent 96%);
--ox-horizon-glow: radial-gradient(55% 60% at 50% 50%, rgba(220,228,236,0.09) 0%, transparent 70%);
--ox-horizon-line-light: linear-gradient(90deg, transparent 4%,
rgba(35,31,32,0.22) 30%, rgba(35,31,32,0.34) 50%,
rgba(35,31,32,0.22) 70%, transparent 96%);
```
Derived light-theme scene tokens (`[data-theme="light"]`, tunable on founder review):
```css
--ox-scene-bg: radial-gradient(130% 90% at 50% -10%,
oklch(0.976 0.008 85deg) 0%,
oklch(0.962 0.010 80deg) 48%,
oklch(0.944 0.012 78deg) 100%);
--ox-scene-keylight: radial-gradient(50% 50% at 50% 50%, rgba(255,252,244,0.65) 0%, transparent 70%);
--ox-ambient-sage: radial-gradient(circle, rgba(123,160,129,0.14) 0%, transparent 70%);
--ox-ambient-blue: radial-gradient(circle, rgba(48,106,239,0.09) 0%, transparent 70%);
--ox-horizon: var(--ox-horizon-line-light);
--ox-horizon-glow: radial-gradient(55% 60% at 50% 50%, rgba(214,178,116,0.12) 0%, transparent 70%);
```
Horizon divider recipe:
```css
/* the hairline */
background: var(--ox-horizon);
height: 1px;
/* the under-glow, positioned behind/around the hairline */
background: var(--ox-horizon-glow);
filter: blur(?); /* soft radial, no fixed blur token — size to section width */
animation: ox-horizon 10s ease-in-out infinite;
```
Dark theme = light hairline (`--ox-horizon-line`) + cool under-glow. Light theme = ink hairline (`--ox-horizon-line-light`) + warm sun under-glow (`rgba(214,178,116,0.12)`). Always reference the alias `--ox-horizon`, never the raw `-line`/`-line-light` pair (§16).
**Reconciliation note (§8a vs §8b):** these are two distinct, both-canonical atmosphere recipes for two distinct contexts. §8a's three-orb system (sage + blue **+ amber**, 8s cycle, orbs positioned per-corner) is the **in-app/card-level** depth recipe. §8b's scene-staging system (sage + blue ambients **only** — no amber ambient — plus one keylight, single unified `--ox-scene-bg` gradient, 11s cycle) is the **marketing/hero-level** recipe. Do not mix them on the same surface: an in-app panel uses orbs (§8a); a marketing hero uses the scene (§8b). See §19 for why this is flagged as a reconciliation rather than silently merged.
---
## 9. Component Recipes: Elevated Cards (foundation) & Machined Controls (Law 02)
Copy exact CSS — do not derive from taste or appearance.
### 9a. Elevated Card (dark + light, foundation)
```css
/* DARK */
.card-dark {
background: linear-gradient(180deg, oklch(0.21 0.012 270deg), oklch(0.18 0.012 270deg));
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--ox-radius-lg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 1px 2px rgba(0,0,0,0.40),
0 4px 16px rgba(0,0,0,0.35),
0 12px 40px rgba(0,0,0,0.25);
}
.card-dark:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 2px 4px rgba(0,0,0,0.50),
0 8px 24px rgba(0,0,0,0.45),
0 20px 60px rgba(0,0,0,0.35);
}
/* LIGHT */
.card-light {
background: linear-gradient(180deg, #FFFFFF, #FCFBF9);
border: 1px solid var(--ox-border-subtle);
border-radius: var(--ox-radius-lg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.90),
0 1px 2px rgba(40,35,30,0.05),
0 3px 8px rgba(40,35,30,0.06),
0 8px 24px rgba(40,35,30,0.07);
}
```
### 9b. Primary Sage CTA — two variants (product-era + machined/Law 02)
**Product/in-app era (simple gradient, still valid until a surface migrates to the machined variant):**
```css
.btn-primary {
background: linear-gradient(180deg, #7BA081, #5F8266);
color: #F0EDE8;
padding: 10px 20px;
border: none;
border-radius: var(--ox-radius-md);
font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 1px 2px rgba(0,0,0,0.3),
0 4px 16px oklch(0.60 0.10 150deg / 0.35);
transition:
transform var(--ox-press) ease,
box-shadow var(--ox-enter) var(--ox-ease);
}
.btn-primary:hover {
background: linear-gradient(180deg, #8BAD91, #6F9276);
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(1px) scale(0.99);
}
```
**Machined (Law 02 — marketing/hero and any migrated surface; the canonical direction going forward):**
Tokens:
```css
--ox-btn-primary-bg: linear-gradient(180deg,#84AA8B 0%,#5E8065 55%,#527258 100%);
--ox-btn-primary-border: rgba(0,0,0,0.5);
--ox-btn-primary-fg: #F0EDE8;
--ox-btn-letterpress: 0 1px 1px rgba(0,0,0,0.32);
--ox-btn-primary-shadow:
inset 0 1px 0 rgba(255,255,255,0.42),
inset 0 -2px 3px rgba(0,0,0,0.30),
0 1px 1px rgba(0,0,0,0.5),
0 12px 28px -8px rgba(95,130,102,0.55),
0 28px 56px -16px rgba(0,0,0,0.7);
--ox-btn-primary-shadow-hover:
inset 0 1px 0 rgba(255,255,255,0.48),
inset 0 -2px 3px rgba(0,0,0,0.26),
0 2px 2px rgba(0,0,0,0.5),
0 16px 36px -8px rgba(95,130,102,0.65),
0 34px 68px -16px rgba(0,0,0,0.7);
--ox-btn-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
--ox-btn-glass-border: rgba(255,255,255,0.14);
--ox-btn-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 6px rgba(0,0,0,0.4);
--ox-btn-machined-light-bg: linear-gradient(180deg,#FFFFFF,#F4F1EC);
--ox-btn-machined-light-border: #DCD5CA;
--ox-btn-machined-light-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
0 1px 2px rgba(45,38,28,0.08), 0 3px 8px rgba(45,38,28,0.07);
```
Recipe — three variants + states:
**Primary** (one per viewport, Law 00): `background: var(--ox-btn-primary-bg); border: 1px solid var(--ox-btn-primary-border); color: var(--ox-btn-primary-fg); text-shadow: var(--ox-btn-letterpress); box-shadow: var(--ox-btn-primary-shadow); border-radius: 11px;` (9999px inside nav/hero-badge pills).
**Secondary — dark** (glass): `background: var(--ox-btn-secondary-bg); border-color: var(--ox-btn-secondary-border); box-shadow: var(--ox-btn-secondary-shadow); color: var(--ox-btn-secondary-fg);` — resolves to `--ox-btn-glass-*` in dark.
**Secondary — light** (white machined): same alias set — resolves to `--ox-btn-machined-light-*` under `[data-theme="light"]`. Never hand-pick the dark or light variant directly; always reference `--ox-btn-secondary-*`.
**States** (all three variants):
```css
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); /* primary only — secondary keeps its own shadow token */
active: transform: translateY(1px); filter: brightness(0.94);
```
**When to use which**: the machined recipe is the canonical direction for marketing/hero surfaces (P1/P2 rollout) and any surface that has migrated. The simple `.btn-primary` recipe remains valid for unmigrated product/in-app buttons until P3 lands — see §19 for why both are documented rather than one replacing the other outright.
### 9c. Lexi/AI Response Bubble (neutral — teal dot accent)
```css
/* Neutral elevated card — identical structure to .card-dark */
.lexi-bubble {
background: linear-gradient(180deg, oklch(0.21 0.012 270deg), oklch(0.18 0.012 270deg));
border: 1px solid rgba(255,255,255,0.07); /* neutral — NO amber border */
border-radius: var(--ox-radius-lg); /* 12px — standard card, NO asymmetric spine */
padding: 18px 20px;
line-height: var(--ox-leading-loose); /* 1.75 */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 1px 3px rgba(0,0,0,0.30),
0 4px 16px rgba(0,0,0,0.20);
/* NO amber bloom shadow */
}
/* Streaming: neutral chip + pulsing teal dot (see §12 for the life-signal dot) */
/* Inline emphasis: neutral foreground weight */
.lexi-bubble strong {
font-weight: 600;
color: var(--ox-fg-primary); /* ink colour — NEVER amber */
}
/* Confidence bar (linear, inline — distinct from the confidence RING in §12): 2px solid sage fill, fg-muted label */
.confidence-bar-fill {
background: var(--ox-sage-500); /* solid sage — no gradient */
}
```
### 9d. Icon Container (IconBox)
```css
.icon-box {
width: 40px; height: 40px;
border-radius: var(--ox-radius-lg); /* 12px — squircle feel */
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 1px 3px rgba(0,0,0,0.30),
0 4px 10px rgba(0,0,0,0.20);
transition: transform 220ms var(--ox-ease), box-shadow 220ms var(--ox-ease); /* named properties — never transition: all */
}
.icon-box:hover {
transform: scale(1.1) translateY(-2px);
}
/* Icon inside: always 18×18, stroke-width 1.5 */
.icon-box svg { width: 18px; height: 18px; stroke-width: 1.5; }
/* Canonical base — monochrome (use for AI/Lexi and all general icons) */
.icon-box-base { background: rgba(255,255,255,0.06); color: var(--ox-fg-secondary); }
/* Accent variants — reserved use only (sage=CTA confirm, blue=info callout) */
.icon-box-sage { background: linear-gradient(145deg, oklch(0.30 0.06 150deg), oklch(0.22 0.04 150deg)); color: oklch(0.80 0.09 150deg); }
.icon-box-blue { background: linear-gradient(145deg, oklch(0.28 0.08 270deg), oklch(0.20 0.06 270deg)); color: oklch(0.78 0.14 270deg); }
/* icon-box-amber is REMOVED — AI containers use icon-box-base (monochrome) */
```
Full component recipes for chips, badges, secondary buttons, orb backdrop, grain, macOS frame, and product screenshot staging: see `https://design.outlex.ai/GRAMMAR.md` (Volume 1).
---
## 10. Pill Navigation (Law 03)
Tokens:
```css
--ox-nav-bg: rgba(255,255,255,0.045);
--ox-nav-border: rgba(255,255,255,0.09);
--ox-nav-blur: 14px;
--ox-nav-active-bg: rgba(255,255,255,0.10);
--ox-nav-radius: 9999px;
```
Derived light-theme nav tokens (`[data-theme="light"]`):
```css
--ox-nav-bg: rgba(35,31,32,0.035);
--ox-nav-border: rgba(35,31,32,0.10);
--ox-nav-active-bg: rgba(255,255,255,0.85);
```
Recipe:
```css
/* 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"** weight 600. Right cluster: EN pill (30px circle) → theme toggle (moon/sun, 13px Lucide) → "Log in" text → sage pill CTA (`border-radius: 9999px; padding: 8px 16px`).
---
## 11. Motion Budget & Canonical Keyframes
### 11a. Token Set (foundation)
```css
--ox-ease: cubic-bezier(0.23, 1, 0.32, 1); /* premium ease — fast-out deceleration */
--ox-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring with slight overshoot */
--ox-enter: 220ms; /* generous reveal */
--ox-exit: 130ms; /* snappy dismiss */
--ox-press: 80ms; /* micro-interaction / button press */
--ox-orb-cycle: 8s; /* ambient orb pulse — §8a */
```
Asymmetric timing is the rule: entries at 220ms ease-out, exits at 130ms ease-in-out. The asymmetry is what makes dismissal feel snappy and reveal feel premium.
### 11b. Motion Durations — cinematography (Law-specific cross-cutting durations)
```css
--ox-shine-cycle: 7s;
--ox-sheen-cycle: 12s;
--ox-theater-cycle: 18s;
--ox-breathe-cycle: 4s;
--ox-ambient-cycle: 11s; /* scene ambients, §8b — distinct cycle from --ox-orb-cycle's 8s (§8a) */
```
### 11c. Four Sanctioned Categories (foundation)
1. **Route transitions** — opacity 0→1 + translateY(8px)→0 at `--ox-enter` / `--ox-ease`. View Transitions API (`startViewTransition`) where supported; opacity fallback elsewhere.
2. **Drawers and modals** — spring physics: `{ type: 'spring', stiffness: 260, damping: 20 }` (≈ `--ox-ease-spring` at 350ms). `translateX` or `translateY` depending on origin. (The machined-control spring in §9b uses the same spring curve at a shorter 180ms for button micro-interactions — a distinct, intentional duration for a distinct component class, not a contradiction.)
3. **Micro-interactions** — button `:active` `translateY(1px) scale(0.99)` at `--ox-press` (80ms); card hover `translateY(-2px)` at `--ox-enter`.
4. **Ambient / atmosphere** — orb pulse at `--ox-orb-cycle` (8s), Lexi streaming left-border pulse at 1.2s.
### 11d. Canonical Keyframes (cinematography — names are API, never rename)
`prefers-reduced-motion: reduce` collapses every animation/transition duration to `0.01ms` globally (see §11f).
| Keyframe | Duration token | Animates | Allowed where |
|---|---|---|---|
| `ox-shine` | `--ox-shine-cycle` (7s) | `background-position` sweep across the sage/ink italic phrase | One sage/ink phrase per page section (Law 00 item 2) |
| `ox-sheen` | `--ox-sheen-cycle` (12s) | `transform: translateX + skewX` specular bar across product glass | Product theater frame only (Law 05, §14) |
| `ox-ambient` | `--ox-ambient-cycle` (11s) | `opacity` + `scale` breathe on ambient tint blobs | Up to 2 ambient tints per scene (Law 01, §8b) |
| `ox-horizon` | 10s (unnamed token; hardcode `10s`) | `opacity` breathe on the horizon hairline + glow | Every horizon divider (Law 01, §8b) |
| `ox-teal-pulse` | — (continuous while live) | `opacity` + `scale` pulse on the teal AI-working dot | AI-working life signal only (Law 04, §12) |
| `ox-caret` | — (continuous while typing) | `opacity` blink on the typed-verdict caret | Typed verdict life signal only (Law 04, §12) |
| `ox-breathe` | `--ox-breathe-cycle` (4s) | `filter: drop-shadow` glow cycle (violet → teal) | The Outlex mark, hero placement only (§15) |
Non-keyframe entrance: `hero-rise` — 26px rise + fade, `cubic-bezier(0.16,1,0.3,1)`, 0.9s, staggered 120ms per element. Not a keyframe token; implement per-component.
### 11e. Never-Animate List
Do NOT add transitions or animations to interactions that fire ≥100× per day:
- Keyboard navigation (arrow keys, tab focus traversal)
- Sidebar toggle when activated on intervals < 1000ms
- Bulk list selections and actions
- Any hover state on rows in dense legal document tables
Motion is a reward for infrequent, meaningful actions.
### 11f. Reduced Motion
Always include:
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
---
## 12. Life Signals, AI/Lexi Grammar & Confidence Indicators (Law 04)
### 12a. Lexi is represented by the Outlex mark — not sparkle icons
- **`ic-sparkles` is BANNED on all AI affordances.** Sparkle icons are a generic AI cliché and are explicitly not the Outlex visual identity.
- **Lexi is the Outlex mark.** Use `#ic-lexi` (monochrome currentColor variant) on AI buttons and inline labels. Use `#outlex-mark` (gradient) for avatars and card label rows.
- Define `#ic-lexi` once in the symbol container: four paths from the mark, each with `fill="currentColor"`.
- AI buttons: `` — inherits button text colour.
### 12b. Anatomy — Neutral card, teal dot
Lexi response surfaces are **neutral elevated cards** with a teal dot accent. No amber, no left-border spine, no amber bloom:
1. **Card background**: `--ox-ai-surface` = same as surface-1 (neutral, NOT amber-tinted)
2. **Border**: `--ox-ai-border` = neutral card border (`rgba(255,255,255,0.07)` dark / `#E2DDD6` light)
3. **Inset highlight**: `inset 0 1px 0 rgba(255,255,255,0.08)` — standard card grammar
4. **Lexi label row**: gradient `#outlex-mark` at 14–16px + "LEXI" in mono `fg-muted` + timestamp `fg-muted`
5. **Streaming indicator**: neutral chip + pulsing 5px teal dot (`#54D6A4`, `--ox-life-teal`), `animation: ox-teal-pulse 1.2s ease-in-out infinite;` + muted mono text
6. **Confidence bar** (linear, inline — see §9c): 2px track `rgba(255,255,255,0.08)`, fill solid `--ox-sage-500` (no gradient). Label mono `fg-muted`.
7. **Icon containers**: monochrome bg `rgba(255,255,255,0.06)`, icon stroke `fg-secondary`.
8. **Body text inline emphasis**: `font-weight: 600`, colour `--ox-fg-primary` (ink). NEVER coloured headings or "Recommendation:" lead-ins.
### 12c. The Amber Demotion Rule
Amber is a **tiny warning accent only**: deadline meta text, pending dot indicators, focus rings. It is not the AI colour.
**Amber is allowed for**: SLA deadline inline text ("Due in 18h"), the amber dot in pending/review chips, focus rings.
**Amber is NEVER allowed for**: AI/Lexi card backgrounds, AI/Lexi borders, AI label text, AI icon containers, citation chip text or background, the confidence bar fill, the streaming chip.
The teal dot (`#54D6A4` at 70% opacity) is the AI accent. It reads as a precise technical signal, not aggressive warmth.
### 12d. No amber fills on AI SLA cards
Stat cards and SLA queue rows must not use amber for icon + number + label + chip simultaneously. At most one line of amber meta text (e.g. deadline). Icon box, number, and label are all neutral foreground colours.
### 12e. Life Signals — the three Law 04 primitives
**Dot chip** — 5px dot (`--ox-life-dot`), color from `--ox-dot-high` (terracotta/urgent) / `--ox-dot-review` (amber/pending) / `--ox-dot-ready` (sage/done); label text stays neutral grayscale — never color the label too (one color dose per element).
```css
--ox-life-teal: #54D6A4;
--ox-life-dot: 5px;
--ox-dot-high: oklch(0.70 0.15 28deg);
--ox-dot-review: oklch(0.78 0.14 75deg);
--ox-dot-ready: oklch(0.75 0.09 150deg);
--ox-ring-track-dark: rgba(255,255,255,0.09);
--ox-ring-track-light: rgba(35,31,32,0.08);
```
**Typed verdict + caret**: text renders character-by-character; trailing caret uses `animation: ox-caret 1s step-end infinite` (blink via the `ox-caret` keyframe, opacity 1→0→1).
**Confidence ring** (circular, gradient — distinct component from the linear confidence *bar* in §9c/§12b item 6; see §19 for why both exist):
```
SVG viewBox="0 0 96 96"
track: circle r=42 stroke=var(--ox-ring-track) stroke-width=7
fill: circle r=42 stroke=url(#oxg-ring) stroke-width=7
stroke-linecap=round stroke-dasharray=264
stroke-dashoffset = 264 × (1 − pct)
transform=rotate(-90 48 48)
gradient #oxg-ring stops: #306AEF at 0.35 → #54D6A4 at 1.0
```
`--ox-ring-track` is a theme-neutral alias (§16): resolves to `--ox-ring-track-dark` on dark, `--ox-ring-track-light` on light.
---
## 13. Iconography
### 13a. Library and Stroke
- **Primary library**: Lucide Icons
- **Stroke width**: `stroke-width="1.5"` — always, everywhere, no exceptions
- **Fill**: `fill="none"` unless explicitly an active/selected state
- **Color**: `currentColor` only — inherits from parent CSS `color` property
Standard sizes: `18×18` inside icon boxes; `16×16` inline in text; `20×20` in nav (`22–26px` specifically for the pill-nav brand mark, §10).
### 13b. Semantic Token Colors Only
Icons inherit color through parent `color` property using semantic tokens:
```css
color: var(--ox-fg-muted); /* idle nav, tertiary actions */
color: var(--ox-fg-secondary); /* secondary actions, AI/Lexi icons */
color: var(--ox-fg-primary); /* active state */
color: var(--ox-sage-500); /* confirm / success actions */
color: var(--ox-terracotta-500); /* destructive actions */
color: var(--ox-blue-400); /* informational */
```
NEVER hardcode hex on icons. NEVER use inline Tailwind color classes (`text-[#...]`) on icon components. NEVER `color: var(--ox-amber-500)` on icons — amber is warning/deadline meta text only.
AI/Lexi icons use `var(--ox-fg-secondary)` (neutral). The Lexi identity appears as `` inheriting text colour, or gradient `` for avatars. `ic-sparkles` is banned on AI affordances.
### 13c. Icon Containers
Icons with semantic weight get an IconBox container (§9d). The canonical container is **monochrome** (neutral bg, `fg-secondary` stroke). Two coloured accent variants remain for explicit use cases: sage (CTA/confirm), blue (informational). The amber icon box variant is removed — AI containers use the neutral base.
### 13d. No Emoji Icons
Emoji are banned from all product UI. They are visual noise on a precision surface. Use Lucide SVG symbols only.
### 13e. Symbol Definition Pattern
All Lucide icons and the Outlex mark are pre-defined as SVG symbols in a single container near the top of ``. Container uses `width="0" height="0" style="position:absolute"` — **never** `display:none` (breaks gradient rendering in Safari/Firefox). Reference via ``. Full symbol definitions in `https://design.outlex.ai/GRAMMAR.md` § l.
---
## 14. Product Theater (Law 05)
Product frames are never flat images. Six-step recipe:
1. Frame shell: `background: var(--ox-frame-bg); border: 1px solid var(--ox-frame-border); box-shadow: var(--ox-frame-shadow);` — radius 18px, `backdrop-filter: blur(20px)`.
2. Stage it: `transform: var(--ox-frame-tilt)` (8°) at rest → `var(--ox-frame-tilt-hover)` (3°) on hover, 700ms transition.
3. Floor shadow beneath: `background: var(--ox-frame-floor); filter: blur(14px);`.
4. Specular sheen crosses every `--ox-sheen-cycle` (12s): `background: var(--ox-sheen); animation: ox-sheen var(--ox-sheen-cycle) ease-in-out infinite;`.
5. The UI inside is alive on an `--ox-theater-cycle` (18s) loop: typed text with caret, a teal pulse, a ring filling, one toast. Panel blank >3s is a hard stop (§19).
6. The frame rises through a horizon line — top edge sits above it, body below.
Tokens (dark):
```css
--ox-frame-tilt: perspective(1900px) rotateX(8deg);
--ox-frame-tilt-hover: perspective(1900px) rotateX(3deg);
--ox-frame-bg: linear-gradient(180deg, oklch(0.155 0.006 290deg / 0.94), oklch(0.11 0.006 290deg / 0.97));
--ox-frame-border: rgba(255,255,255,0.09);
--ox-frame-shadow: inset 0 1px 0 rgba(255,255,255,0.11),
0 2px 4px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.6),
0 70px 160px rgba(0,0,0,0.55);
--ox-frame-floor: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.75) 0%, transparent 75%);
--ox-sheen: linear-gradient(90deg, transparent, rgba(255,255,255,0.045) 45%,
rgba(255,255,255,0.085) 50%, rgba(255,255,255,0.045) 55%, transparent);
```
Derived light-theme tokens (`[data-theme="light"]`):
```css
--ox-frame-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,247,242,0.98));
--ox-frame-border: #DCD5CA;
--ox-frame-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
0 2px 4px rgba(45,38,28,0.10), 0 24px 60px rgba(45,38,28,0.14),
0 70px 160px rgba(45,38,28,0.10);
--ox-frame-floor: radial-gradient(50% 100% at 50% 0%, rgba(45,38,28,0.30) 0%, transparent 75%);
--ox-sheen: linear-gradient(90deg, transparent, rgba(255,255,255,0.35) 45%,
rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.35) 55%, transparent);
```
Note the light-theme frame shadow is warm-tinted (`rgba(45,38,28,…)`) while the dark-theme frame shadow above is flat-black-based (`rgba(0,0,0,…)`) — see §19 for the reconciliation note against the elevated-card "always warm-tinted" hard stop.
---
## 15. The Outlex Mark
### 15a. What It Is
The Outlex mark is a 6-petal asterisk with a blue→teal gradient (#306AEF → #54D6A4). It is the single most charismatic visual asset in the brand. Its scarcity is what makes it work.
### 15b. Sanctioned Moments (3–4 per screen context)
1. Nav brand mark (small, 20–24px in general nav contexts; 22–26px specifically in the pill nav, §10 — no glow needed)
2. Empty state backdrop (large, 160–200px, blurred 32px, 8–12% opacity, slow 60s rotation)
3. Hero/marketing backdrop or product screenshot context
4. Loading/authentication state (breathing animation — `ox-breathe`, §11d)
Beyond the mark itself, the gradient also appears on the confidence ring (§12e) and avatar placeholder squares — the full, current list of gradient homes (§2, Law 00; §19).
Do not use as background texture. Do not tile. Do not add more moments without founder approval.
### 15c. SVG Symbol — Critical Gotcha
The mark symbol container MUST use `width="0" height="0" style="position:absolute"` — **never `display:none`**. `display:none` prevents gradient rendering in Safari and Firefox. Define once near top of ``:
```html
```
### 15d. Mark Rules
- **Never fill petals with a flat color.** The gradient IS the mark.
- **Never distort aspect ratio.** viewBox is `50 47 150 160` — preserve it exactly.
- On dark: the gradient glows naturally. Add `drop-shadow(0 0 28px oklch(0.57 0.15 270deg / 0.50))` for emphasis, or the `ox-breathe` cycle (§11d) in hero placement.
- On light: no glow filter needed; the gradient reads cleanly.
- Use `` everywhere — never inline the paths.
---
## 16. Both Worlds — Theme Mechanism (Law 06)
**Mechanism**: the `[data-theme]` attribute. `:root` carries the dark theater (default); `[data-theme="light"]` remaps to the gallery. One theming mechanism for the whole system — nothing cinematography-specific is layered on top of it.
**Identical in both themes** (never remapped): `--ox-btn-primary-*` (the sage CTA + its letterpress), `--ox-life-teal`, `--ox-dot-high/-review/-ready`, the confidence-ring gradient stops (`#306AEF → #54D6A4`), all keyframe names and cycle durations, the mark asset itself.
**Remapped per theme**: `--ox-scene-bg/-keylight` (§8b), `--ox-ambient-sage/-blue` (bumped presence on light — felt, not absent), `--ox-nav-bg/-border/-active-bg` (§10), `--ox-frame-bg/-border/-shadow/-floor` (§14), `--ox-sheen`, and the theme-neutral aliases below.
**Theme-neutral aliases consumers MUST use** (never the raw dark/light pair):
- `--ox-horizon` (→ `-line` dark / `-line-light` light)
- `--ox-phrase-shine` (→ `--ox-phrase-sage-shine` dark / `--ox-phrase-ink-shine` light — sage lacks contrast on cream)
- `--ox-ring-track` (→ `-track-dark` / `-track-light`)
- `--ox-btn-secondary-*` (→ glass dark / white-machined light)
```css
--ox-phrase-sage-shine: linear-gradient(105deg, #7FB48A 42%, #C4E3C9 50%, #7FB48A 58%);
--ox-phrase-ink-shine: linear-gradient(105deg, #4A4641 42%, #A79E8F 50%, #4A4641 58%);
```
Sage phrase usage (Law 00 item 2, hero display): 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;`
If your markup references a raw `-dark`/`-light`/`-line`/`-line-light` token directly instead of its alias, that's a bug — it won't theme-switch.
---
## 17. Voice & Copy Rules
### 17a. Voice Archetype
**The Guide with Conviction.** Morpheus, not Neo. Mentor energy, not enthusiastic-SaaS energy.
### 17b. Three Principles (Non-Negotiable)
1. **User pain first** — name the real moment before naming the product.
2. **Actionability** — every piece of copy makes the next step obvious.
3. **Approachability** — knowledgeable colleague, not law-firm lobby.
### 17c. Marketing Copy Rules (external — launches, ads, posts, pages)
Every marketing asset must answer five questions:
1. Who is this for?
2. What painful workflow are they stuck in today?
3. What can they now do inside Outlex?
4. What manual follow-up, uncertainty, or rework disappears?
5. What should they do next?
Write to the reader in first or second person. Use "you" when the copy is meant to create closeness. Avoid detached category language such as "companies need" when the real message is "you need to know what is missing before the next investor request."
Show the old workflow and the new workflow when an asset is about a product update:
- Old: "You copy clauses into a spreadsheet and hope nothing changed."
- New: "Open the contract, run the review, and see the risky clauses in context."
Trust comes from verifiable product behavior, source quality, customer context, and clear limits. Do not imply law-firm backing, lawyer review, savings, speed, customer count, or jurisdiction coverage unless the exact proof is supplied in the brief.
### 17d. Product Copy Rules (in-app — buttons, headlines, errors)
1. **Period on every primary CTA**: "Sign in." / "Save." / "Send." Not "Sign In" / "SAVE" / "Submit"
2. **Italic on the human word in display-face headlines**: "Welcome *back*." / "Something *broke* on our side." / "Your NDA is *ready*."
3. **No exclamation marks** anywhere except quoted user speech.
4. **Complete sentences** in subtitles and body. Ellipses (…) only for in-flight loading.
### 17e. Banned Phrases
"Leverage" · "Synergy" · "Unlock" · "Streamline your workflow" · "AI-powered solution" · "AI-powered legal department" · "Comprehensive legal support" · "Provider network" · "Empower your team" · "Leading platform" · "End-to-end" · "Seamless" · "Frictionless" · "Best-in-class" · "Per our previous communication" · "Comprehensive solution"
### 17f. How We Talk About AI
We are pro-better-AI, not pro-AI generally. The distinction is always: **general-purpose AI** (unstructured, unsourced, low accountability) vs **purpose-built legal AI** (workflow-specific, source-backed, explicit about confidence and review limits).
Outlex isn't the alternative to AI — it's what AI for legal should look like when it's built for Europe.
### 17g. Originality Test
Could this have been written by any other company? If yes, rewrite.
### 17h. Key Brand Phrases (reference, not copy-paste)
- "When given two choices, we decided to build a third." (origin stories)
- "Routine legal work should not live in scattered documents, inboxes, and memory."
- "Know what changed, what matters, and what to do next."
- "The AI legal operating system for European businesses." (product category)
- "Purpose-built, not general-purpose." (vs ChatGPT)
- "Built for European legal workflows."
---
## 18. Lexi (In-Product AI) Voice
- **First person singular** — "I found 3 relevant clauses" not "the system detected"
- **Warm but not chatty** — never "Great question!" or "Happy to help!"
- **Confidence language** — "This appears to be" not "This is"
- **Three confidence tiers**: high (state finding directly), medium (caveat in same sentence), low (escalate to lawyer)
- **Always end with a clear next action**: "Want me to flag this for review?"
---
## 19. Hard Stops (Never Violate)
These are non-negotiable. Breaking any of them is a BLOCKER. This section merges every hard stop from the foundation and the cinematography layer into one list; where the two layers had material tension, a reconciliation note says so explicitly rather than silently picking a winner.
### The Real Mark — No Substitutes
- **Only the 6-petal asterisk SVG** is the Outlex mark. Never use a star emoji, a snowflake, an asterisk character, or any other symbol.
- **Critical symbol gotcha**: the SVG container uses `width="0" height="0" style="position:absolute"` — NEVER `display:none`. Safari/Firefox cannot render gradients inside hidden SVG elements.
- **Gradient IS the mark**: never fill petals flat. A sage or blue single-color asterisk is not the Outlex mark.
### Lexi is represented by the Outlex mark — sparkle icons are banned on AI affordances
- **`ic-sparkles` MUST NOT appear on any AI button, AI label, AI chip, or Lexi indicator.**
- Use `#ic-lexi` (monochrome `fill="currentColor"` variant of the mark) for AI buttons and inline labels.
- Use gradient `#outlex-mark` for Lexi avatars and card headers at 14–18px.
- The sparkle icon may only remain in the symbol set for non-AI decorative contexts (or remove entirely).
### No amber fills or labels on AI surfaces
- **AI card backgrounds are neutral** (identical to elevated card). `--ox-ai-surface` = surface-1 value.
- **No amber left-border spine on AI bubbles.** Standard card border-radius, no asymmetric spine.
- **Chip label text is always neutral** (`fg-secondary`). Colour lives only in the 4–5px leading dot.
- **Teal (#54D6A4) is the AI dot accent.** Amber is the warning/pending dot. They do not swap.
- The confidence bar fill is solid sage (`--ox-sage-500`). No sage→amber gradient.
### One accent per element — never coloured icon + coloured label together
- Icon container: monochrome bg, `fg-secondary` stroke. Status lives in the adjacent dot chip.
- If a list row has a coloured dot chip, the icon box must be neutral.
- Stat cards: icon box neutral, number `fg-primary`, label mono `fg-muted`. At most one line of coloured meta text (e.g. amber deadline). Never all four elements coloured simultaneously.
- A dot chip's label stays neutral grayscale even though its dot is colored (Law 00's "no second color dose per element" — same rule, restated by the cinematography layer).
### No Dark-on-Dark Text
- On `--ox-surface-0` (the darkest base), only use `--ox-fg-primary`, `--ox-fg-secondary`, or `--ox-fg-muted`. Never dark text on a dark surface.
- Minimum contrast: `--ox-fg-secondary` (0.82) on `--ox-surface-0` (0.12) = ≥4.5:1 WCAG AA.
### Blue and Amber: Accent Use Only
- Blue: orbs/ambients at 7–14% opacity only. Informational callouts and links. **Reconciliation note**: the foundation originally set this floor at 8%. The cinematography layer's dark-theme `--ox-ambient-blue` token ships at `rgba(48,106,239,0.07)` — 7% — deliberately below the old floor, so this line widens the range to 7–14% rather than picking a winner.
- Amber: tiny warning accent only — dots, deadline meta text, focus rings. NEVER AI/Lexi surfaces.
- If you can see amber in a quick glance on a large area, it is too loud.
### No Emoji Icons
- Zero emoji in product UI. Full stop. Lucide SVG symbols only.
### Typography Weight Caps
- Display face (`--ox-font-display`: Tiempos Headline / Newsreader): max weight **400**. Never 500, 600, 700. Never `font-bold` with a display class, in foundation OR hero/theater contexts — the cinematography layer does not loosen this cap, it only re-states it for hero-scale type.
- **Fraunces never appears anywhere in this standard** — it is v1/V7 legacy, archived at `/v1/`.
- Body / UI (Inter): max weight **600** (`--ox-weight-semibold`). Weight 700 is FORBIDDEN.
- The variable axis body weight is 450 (not 400): `font-variation-settings: 'wght' 450`.
### 8px Grid — No 4px Gaps
- Minimum gap is `--ox-space-2` (8px). Never `gap-1` (4px) anywhere.
- Never arbitrary `20px` spacing where the grid expects `16px` or `24px`. Use `--ox-space-5` only when you can justify it; prefer `--ox-space-6`.
### No Pure Black
- Never `color: black`, `background: black`, `border-color: black`, `#000`, `rgb(0,0,0)`.
- Use `--ox-surface-0` for darkest surfaces (never flat — `--ox-scene-bg` is always a deep-slate radial, §8b), `--ox-fg-primary` for darkest text.
### Gradient Only in Its Three Homes (updated by the cinematography layer)
- The blue→teal gradient (`#306AEF → #54D6A4`) lives on exactly three things: **the SVG mark petals, the confidence ring, and avatar placeholder squares.**
- **Reconciliation note**: the foundation originally scoped this to "the mark, and only the mark." The cinematography layer's color law (§2, Law 00) explicitly adds the confidence ring and avatar placeholders — both use the identical `#306AEF → #54D6A4` stops as the mark, so this is a deliberate widening of the rule, not a drift. Never use the gradient on buttons, backgrounds, dividers, text, headlines, or any element outside these three.
### Shadows — Warm-Tinted for Elevated Cards; Machined Controls & Theater Frames Are the Named Exception
- **Elevated cards** (§9a) and general depth recipes (§8a) use the warm-tinted base: `oklch(0.05 0.02 270deg / N)` (dark) or `rgba(40,35,30,N)` / `rgba(45,38,28,N)` (light). Never `rgba(0,0,0,N)` flat black or neutral grey shadows on these.
- **Reconciliation note**: the locked 6A handoff's machined-control shadows (§9b) and dark-theme product-theater frame shadow (§14) intentionally use flat-black-based layers (`rgba(0,0,0,…)`) mixed with sage-tinted glow (`rgba(95,130,102,…)`) to sell the machined-metal look — this is a deliberate v3 departure from the elevated-card warmth rule for these two component classes specifically, not an error to fix. Their **light-theme** counterparts still use warm-tinted shadows (`rgba(45,38,28,…)`), consistent with the rest of the system. Do not "fix" the dark machined/theater shadows to warm-tinted values — they are locked-verbatim from the handoff.
### No color-blob auroras
- `aurora-field.js` (cursor-reactive canvas) and the CSS color-blob variant were both explored and explicitly **rejected**. The canonical ambient device is the static blurred-tint pair (`--ox-ambient-sage`/`-blue`, `ox-ambient` 11s breathe, §8b). Do not port `aurora-field.js` into any repo.
### No static product screenshots / no dead artifacts
- Every product-theater frame must be alive on its 18s loop (§14 step 5).
- No empty demo loops: a panel blank for >3s inside a theater frame is a brand violation.
- A dead artifact anywhere — a panel with no motion, no state change — is a brand violation per Law 04, not a minor issue.
### No `transition: all`
- Name the specific properties. No motion on interactions firing ≥100×/day (keyboard nav, bulk list actions, sidebar toggles) — see §11e.
### Wordmark Casing
- Wordmark is `Outlex` (capitalized), weight 600, beside the mark in nav and formal lockups — never lowercase.
---
## 20. Consumption URLs
| Resource | URL |
|---|---|
| This file (agent fetch — complete reference) | `https://design.outlex.ai/brand.md` (identical content also served at `https://design.outlex.ai/brand-v3.md`) |
| Agent guide (rules + snippets, plain-text mirror) | `https://design.outlex.ai/agents` / `https://design.outlex.ai/llms.txt` |
| v3 specimen (visual, dark theater + light gallery) | `https://design.outlex.ai/` |
| Foundation token file (load FIRST) | `https://design.outlex.ai/tokens-v2.css` |
| Cinematography token file (load SECOND) | `https://design.outlex.ai/tokens-v3-gravity.css` |
| Foundation component grammar — Volume 1 | `https://design.outlex.ai/GRAMMAR.md` |
| Cinematography grammar — Volume 2, six laws | `https://design.outlex.ai/GRAMMAR-v3.md` |
| Archived "v2" book (historical, unchanged) | `https://design.outlex.ai/v2/` |
| Archived v1/V7 legacy book | `https://design.outlex.ai/v1/` |
| Approved dark mockup (foundation) | Local: `docs/research/2026-06-10-design-elevation/direction-b-precision-atmosphere.html` |
| Approved light mockup (foundation) | Local: `docs/research/2026-06-10-design-elevation/direction-b-light.html` |
When this file disagrees with `https://design.outlex.ai/tokens-v2.css`, `https://design.outlex.ai/tokens-v3-gravity.css`, `https://design.outlex.ai/GRAMMAR.md`, or `https://design.outlex.ai/GRAMMAR-v3.md`, **the source repo wins**. Re-fetch.
---
## Provenance
Direction B "Precision + Atmosphere" (the foundation: OKLCH color ramps, type scale, spacing, elevated-card depth, motion budget) approved by founder 2026-06-10; token file `tokens-v2.css` written the same day. Direction 6A "Gravity · Warm" (the cinematography layer: the six laws, scene staging, machined controls, pill nav, life signals, product theater) locked from the mockup 6A handoff bundle, July 2026, and went active as the homepage 2026-07-15.
As of 2026-07-16, these two layers are absorbed into **one standard, v3** — there is no separate "v2 is active" framing anymore. The book previously labeled "v2" is archived, unchanged, at `/v2/` for historical/consumer-link stability, the same status as the v1/V7 archive at `/v1/`. `tokens-v3-gravity.css` above its "THEMED ALIASES" divider is verbatim from the 6A handoff; the `[data-theme="light"]` blocks throughout this document are repo-side derived extensions (tunable, founder review pending) unless stated otherwise.
Source repo: `outlex/outlex-design`. Last regenerated: see git log.