v2 · Precision + Atmosphere — active since 2026-06-11 · v1/V7 legacy applies only to unmigrated app surfaces → /v1/  ·  agent guide
Direction B — Precision + Atmosphere

The Outlex
Standard

The canonical design system for Outlex — an AI legal operating system built for European businesses. Dark-first, OKLCH-native, and crafted to the precision of legal work.

Start using v2 brand.md (agents)
OKLCH Color space
8px Base grid unit
4 + 4 Palette families
AA+ WCAG contrast
Chapter 01

Identity

The Outlex mark, wordmark, the glow, clearspace rules, and what never changes.

Clearspace: 1× mark width on all sides
Outlex
48px hero
28px ui
20px nav
16px icon
Blue → teal gradient (306aef → 54d6a4) · 6-petal asterisk
The gradient
Every petal carries the canonical #306aef → #54d6a4 blue-to-teal gradient defined in the SVG. Never fill with a single flat color. Never recolor for themes — the gradient is invariant.
The glow
On dark surfaces, add drop-shadow(0 0 28px oklch(0.57 0.15 270deg / 0.50)) for the canonical blue glow. Sanctioned in: nav brand, hero, empty states, loading. Omit in dense UI contexts.
SVG usage rule
Define the mark once as a <symbol> in a container with width="0" height="0" style="position:absolute". Never display:none — it breaks gradient rendering in Safari and Firefox.
Clearspace
Maintain 1× mark width of clear space on all sides. The mark viewBox is 50 47 150 160 — preserve this ratio exactly.
Usage Rules
Always
Use the blue→teal gradient as defined
Preserve the 50 47 150 160 viewBox aspect ratio
Use width="0" height="0" style="position:absolute" for symbol containers
Add glow filter only in sanctioned hero contexts
Pair with "Outlex" wordmark in Inter 600 at −0.03em tracking
Never
Recolor petals with a single flat color
display:none on the symbol SVG container
Distort the aspect ratio or scale unevenly
Use the glow in dense UI contexts (tables, lists)
Place on a dark background without contrast check for surrounding text
Chapter 02

Color

Four 11-step OKLCH ramps, semantic roles, dark/light pairing, and the amber grammar for AI signals.

Palette Ramps — click any swatch to copy oklch value
Sage — Primary CTA / Success / Foliage
50
100
200
300
400
500
600
700
800
900
950
Amber — Warning / Pending Accents Only
50
100
200
300
400
500
600
700
800
900
950
Blue — Informational / Interactive / Brand Links
50
100
200
300
400
500
600
700
800
900
950
Terracotta — Warning / Destructive
50
100
200
300
400
500
600
700
800
900
950
Semantic Role Tokens
Token Dark value Light value Role
--ox-bg
oklch(0.12 0.015 270)
oklch(0.975 0.006 75)
 Page base
--ox-panel
oklch(0.16 0.012 270)
#FFFFFF
 Sidebars, drawers
--ox-card
oklch(0.20 0.010 270)
oklch(0.990 0.004 75)
 Elevated cards
--ox-ai-border
rgba(255,255,255,0.07)
#E2DDD6
 Neutral card border (AI surfaces)
--ox-cta-bg
#7BA081 → #5F8266
#7BA081 → #6B8F71
 Primary button — both themes
AI Colour Grammar — Teal Dot + Neutral

Lexi uses the Outlex mark (monochrome) as its identity symbol. AI cards are standard elevated surfaces — no amber tint, no coloured border. Teal (#54D6A4) is the AI accent dot only. Amber is reserved for warning/pending accents.

Teal dot (4–5px) on citation chip / AI status chip
Correct
Outlex mark (currentColor) on AI buttons and inline labels
Correct
Lexi — uppercase mono label in fg-muted
Correct
AI Suggestion — filled amber background
Never
Amber left-border on AI response card
Never
Lexi 2 min ago
Pursuant to GDPR Art. 28(3), the data processing agreement between Outlex Lda. and the processor must specify the subject matter, duration, and nature of the processing. The CNPD has clarified in its CNPD/2024-PT-0047 guidance that sub-processors require a written authorisation chain.
Chapter 03

Typography

Display, body, and mono — live specimens, tracking rules, weight hard-stops, and the Tiempos target.

Display Hero
Newsreader 400
56px / −0.03em
lh: 1.05
Legal certainty for
companies that move fast.
Display LG
Newsreader 400
36px / −0.03em
lh: 1.10
AI handles the 80%.
Real lawyers handle the 20%.
Display
Newsreader 400
28px / −0.02em
lh: 1.15
Acordo de Assessoria Jurídica
Outlex Lda. — Startup Lisboa, S.A.
Body
Inter 450 (variable)
15px / −0.01em
lh: 1.60
O Regulamento Geral sobre a Proteção de Dados (RGPD) aplica-se a qualquer organização que trate dados pessoais de cidadãos da União Europeia. O Artigo 28.º exige que os responsáveis pelo tratamento utilizem apenas subcontratantes que garantam medidas técnicas e organizativas suficientes para cumprir os requisitos do regulamento.
Mono Legal
JetBrains Mono 400
13px / +0.02em
lh: 1.60
DGSI — Proc. 4829/22.7T8LSB.L1 — Lisboa, 14 jun. 2024
CNPD/2024-PT-0047 — Orientação sobre subcontratantes
CJEU C-311/18 — Schrems II — Data transfers to third countries
Mono Label
JetBrains Mono 500
11px / +0.09em
UPPERCASE
Data Processing Ready Needs Review GDPR Art. 28
Weight Hard-Stops
Aa
400 — Regular
Newsreader display only. NEVER regular Inter for display.
Aa
450 — Body
Inter variable axis body text. Primary reading weight.
Aa
500 — Medium
Nav items, button labels, chip text, UI emphasis.
Aa
600 — Semibold MAX
Maximum allowed. Strong emphasis only. NEVER 700+.

Commercial target: Tiempos Headline (Klim Type Foundry, ~$240/yr) — the display font used by Anthropic and The New York Times. It brings institutional authority and editorial grace. Newsreader (Google Fonts, free) is the approved interim stand-in with near-identical optical characteristics. When Tiempos Headline is licensed, swap only the --ox-font-display token — all other type rules remain unchanged. The same applies to Berkeley Mono (commercial, ~$75) vs JetBrains Mono for legal citations.

Chapter 04

Depth & Atmosphere

Orbs, grain, the 5-step surface ladder, inset highlights, and layered shadow stacks — live examples.

Three radial gradient orbs — 120px blur, 8s pulse cycle

Sage (top-left), blue (top-right), amber (bottom-center). Orbs sit behind all content at z-index: 0. They animate at 70% scale / 8s cycle. Always use pointer-events:none; overflow:hidden on the container. Never increase opacity beyond the token values.

Sage 18%
Blue 14%
Amber 10%
5-Step Surface Ladder — Lightness-Lift Elevation
Surface 0
--ox-surface-0 · page base
Surface 1
--ox-surface-1 · panel
Surface 2
--ox-surface-2 · card
Surface 3
--ox-surface-3 · hover
Surface 4
--ox-surface-4 · highest

Dark: lightness 0.12 → 0.28 (no drop shadows in chrome). Light: white cards + warm shadows. Toggle theme to compare.

1px Inset Top-Edge Highlight — Linear Signature

Every elevated card carries box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) (dark) or inset 0 1px 0 rgba(255,255,255,0.90) (light). This creates the "resting on a light source" 3D grammar. This card is an example — the top edge carries the highlight.

4-Layer Shadow Stacks — Hover to see lift
Shadow 1
Flat surfaces, secondary cards
Shadow 2
Primary cards, dropdowns
Shadow 3
Modals, elevated panels
Shadow 4
Floating menus, command palette
Grain Overlay — feTurbulence 3-4%

An SVG feTurbulence noise layer sits at z-index:9999 via position:fixed; inset:0. Dark: mix-blend-mode:overlay; opacity:0.04. Light: mix-blend-mode:multiply; opacity:0.03. Always pointer-events:none. It is active on this page right now.

Chapter 05

Voice

The Guide with Conviction archetype — three principles, six example pairs, writing guardrails.

The Guide with Conviction
Morpheus, not Neo. Gandalf, not Frodo. The mentor who's been through the complexity and makes the journey possible for the founder. Two modes, one voice: Guide energy in product and onboarding — Conviction energy in brand storytelling and investor conversations. The voice never changes; the tone shifts.
Direct Clear Knowledgeable European Problem-first Human
Principle 01
Simplicity
Speak without legal jargon in a way people relate and understand. If a non-lawyer can't parse it in one read, rewrite it. Translate legal complexity — don't dumb it down, don't hide behind it.
Principle 02
Actionability
Make it clear what we do, how we do it, and what the reader should do next. Every piece of copy should leave the reader knowing their next step. No vague promises. No abstract benefits.
Principle 03
Approachability
Sound like a knowledgeable colleague, not a law firm lobby. Serious about outcomes, human in delivery. The reader should feel invited, not intimidated.
Six Example Pairs
Avoid
"Leverage our AI-powered platform to streamline your legal workflow and unlock compliance efficiencies."
Write this
"Your privacy policy has 3 gaps. Here's how to fix them before your Series A due diligence."
Avoid
"Our comprehensive, end-to-end legal solution empowers your team with seamless AI-powered tools."
Write this
"AI reviews your NDA in 30 seconds and flags the indemnity clause that doesn't work under German law."
Avoid
"Lexi is your best-in-class AI copilot for all your legal needs across our leading platform."
Write this
"Lexi isn't confident on this one. Here's a lawyer who can help — she specialises in Portuguese data law."
Avoid
"Harness the power of general-purpose AI to transform your legal operations at scale."
Write this
"Purpose-built, not general-purpose. Trained on EU law across 27 jurisdictions, not US case law."
Avoid
"Our holistic legal ecosystem solution facilitates multi-jurisdictional compliance synergies."
Write this
"Documents, compliance, and counsel — one platform. You're hiring in Germany and here's what you need to know."
Avoid
"You're at risk! Don't let legal gaps expose your company to costly penalties and liability."
Write this
"Most of what you pay your lawyer for isn't legal judgment. It's pattern recognition. We handle the pattern recognition."
Read the full voice guide → voice.md — includes banned phrases, tone by context, originality test
Chapter 06

Consumption

How developers, designers, and AI agents consume the design system. Tokens, references, and integration patterns.

tokens-v2.css
CSS Custom Properties
The canonical token source. 6 sections: primitives, dark semantics, light overrides, typography, spacing, motion. Import once; override via [data-theme="light"].
/* Option A: import from design.outlex.ai */ @import "https://design.outlex.ai/tokens/tokens-v2.css"; /* Option B: vendor copy in repo */ @import "src/styles/outlex-tokens-v2.css"; /* Toggle theme */ document.documentElement.setAttribute( 'data-theme', 'light' );
brand.md (agent reference)
Claude · Codex · Cursor · ChatGPT
Single-file canonical reference for AI coding agents. Before any UI, styling, or visual work, agents load design.outlex.ai/brand.md as ground truth. If local docs conflict with the live design system, prefer the live source.
# In CLAUDE.md / AGENTS.md: Brand reference: https://design.outlex.ai/brand.md Tokens (upstream): https://design.outlex.ai/tokens.css Product copy (v2): https://design.outlex.ai/tokens/tokens-v2.css # Agent rule: # ALWAYS treat design.outlex.ai as canonical # before local taste or stale session memory
design-tokens-v2.dtcg.json
W3C DTCG Format
All v2 tokens in W3C Design Token Community Group format for Figma Variables, Style Dictionary, and Theo pipelines. Structured by family with "$type" and "$value".
// Structure preview: { "sage": { "500": { "$type": "color", "$value": "oklch(0.60 0.100 150deg)", "$description": "CTA fill" } } }
GRAMMAR.md
Component recipes
Exact CSS recipes for every component: card, CTA button, secondary button, chips, icon boxes, Lexi bubble, orbs, grain overlay, macOS product frames. Copy exact — do not derive from taste.
/* Components covered: */ (a) Elevated card — dark + light (b) Primary sage CTA button (c) Secondary button variants (d) Chip / citation chip (e) Icon container (squircle) (f) Lexi AI bubble + confidence bar (g) Status badges (h) Orb backdrop recipe (i) Grain overlay snippet (j) macOS product frame staging
Key Hard Rules for Consumers
Token / Pattern Rule Severity
--ox-font-display weight NEVER font-weight above 400 (500+) with Newsreader/Tiempos. Editorial grace requires restraint. Hard stop
8px grid minimum NEVER gap-1 (4px) or smaller in layout. Minimum gap is gap-2 (8px) = --ox-space-2. Hard stop
--ox-ai-* tokens Amber only as hairlines, dots, and labels. NEVER as a background fill. Loud amber breaks the whisper grammar. Hard stop
Shadow warmth NEVER neutral black rgba(0,0,0,N) shadows. Always warm-tinted: oklch(0.05 0.02 270deg / N). Required
Symbol SVG container width="0" height="0" style="position:absolute" — NEVER display:none. Breaks gradients in Safari/Firefox. Hard stop
Lucide stroke-width Always stroke-width="1.5". Never 2. Color via currentColor semantic tokens only — never hardcoded hex. Required
Pure black / white NEVER text-black, bg-black, border-black, or #FFFFFF text. Use semantic tokens: --ox-fg-primary, --ox-surface-0. Hard stop
oklch value copied