# Outlex Brand — Single-File Reference

> **This file is for cross-LLM consumption.** It inlines the canonical tokens, voice, and design rules into one fetchable URL. Codex, Cursor, ChatGPT, and any other agent without skill-file injection should fetch this from `https://design.outlex.ai/brand.md` to ground brand decisions.
>
> Source repo: [outlex/outlex-design](https://github.com/outlex/outlex-design). Update via PR.

---

## 1. Identity at a glance

- **Product**: Outlex — AI Legal Operating System for European businesses
- **Positioning**: "Your AI Legal Department"
- **Mission**: Legal certainty for companies that move fast.
- **Audience**: European VC-backed startups (seed → Series B), founders/COOs/CTOs.
- **Visual character**: warm, restrained, editorial, calm. Sunsama-inspired calm focus, not generic SaaS.

---

## 2. Color tokens (canonical hex)

### Surfaces
- `--outlex-bg` `#FAF8F5` — warm cream page background
- `--outlex-bg-raised` `#F5F2EE`
- `--outlex-bg-hover` `#F0EBE2`
- `--outlex-card` `#FFFFFF`

### Foreground (warm charcoal — never `#000`)
- `--outlex-fg` `#2D2A26` — body text
- `--outlex-fg-ink` `#231F20` — CTA-on-sage WCAG anchor
- `--outlex-fg-secondary` `#4A4641`
- `--outlex-fg-muted` `#6B6460`
- `--outlex-meta` `#8A847C`
- `--outlex-meta-light` `#ABA59D`

### Borders
- `--outlex-border` `#E8E4DF`
- `--outlex-border-hover` `#D5D0CA`

### Accents (semantic — see § 5)
- `--outlex-primary` `#6B7EC2` — warm blue, info/links
- `--outlex-sage` `#6B8F71` — primary CTA, success, Lexi action
- `--outlex-amber` `#C49432` — warning, focus ring, pending
- `--outlex-terra` `#C27256` — risk, urgent
- `--outlex-danger` `#811D1D` — destructive (AAA on white)

### Brand mark gradient (LOGO SVG ONLY — never elsewhere)
- `--outlex-mark-blue` `#306AEF`
- `--outlex-mark-teal` `#54D6A4`

Full token set: see `tokens/tokens.css` and `tokens/design-tokens.dtcg.json`.

---

## 3. Typography

- **Display**: Fraunces (variable serif, opsz 9-144) — `--outlex-font-heading`
- **Body**: Inter (variable sans-serif) — `--outlex-font-sans`
- **Mono**: system mono — `--outlex-font-mono`

### HARD STOPS (never violate)
- **Fraunces never above weight 500** (medium). No `font-semibold`/`font-bold` with `font-heading`.
- **Inter never above weight 600** (semi-bold). Weight 700 is FORBIDDEN.
- **Italic on Fraunces ONLY for the human word in headlines** (see § 7 Rule 2). Not for emphasis in body, not for "elegance," not for marketing prose.

### Static type scale
| Token | Size |
|---|---|
| `--outlex-text-hero` | 36px |
| `--outlex-text-display-lg` | 28px |
| `--outlex-text-display` | 20px |
| `--outlex-text-title` | 16px |
| `--outlex-text-section` | 14px |
| `--outlex-text-item` | 13px |
| `--outlex-text-body` | 15px |
| `--outlex-text-meta` | 12px |
| `--outlex-text-chip` | 11px |
| `--outlex-text-2xs` | 10px |

---

## 4. Spacing — 8px grid

All spacing must be a multiple of 8px: **8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128**.

Allowed exceptions for density: `*-3` (12px), `*-2.5` (20px buttons), `*-3.5` (28px cards), `h-1.5` (6px progress bars).

**NEVER**: `gap-1` (4px), arbitrary `*-5` (20px when grid expects 16 or 24).

---

## 5. Color semantic system

| Color | Use for | Never use for |
|---|---|---|
| **Sage** (`--outlex-sage`) | Primary CTAs, success states, Lexi-completed actions, "done" indicators | Destructive actions, warnings |
| **Warm blue** (`--outlex-primary`) | Links, info accents, interactive selection, curated/highlighted callouts | Default CTA color (use sage), warnings, errors |
| **Amber** (`--outlex-amber`) | Warnings, pending states, focus rings (V7 trust ring), deadlines approaching | Errors (use danger), success |
| **Terracotta** (`--outlex-terra`) | Risk indicators, urgent/overdue, SLA-warning | Destructive confirmations (use danger), background fills |
| **Danger** (`--outlex-danger`) | Destructive confirmations, true errors, critical alerts | Decoration, warnings (use amber) |
| **Brand gradient** (mark-blue → mark-teal) | Outlex logo SVG — and ONLY the logo SVG | Any other UI element. Ever. |

---

## 6. Shadows — warm base

All shadows use `rgba(40, 35, 30, α)` warm base. Never grey, never `#000`, never blue-tinted. 4-level elevation tiers in `tokens/tokens.css`.

---

## 7. Voice & copy rules

### Voice archetype
**The Guide with Conviction.** Morpheus, not Neo. Mentor energy, not enthusiastic-SaaS energy.

### Three principles (non-negotiable)
1. **Simplicity** — no legal jargon without explanation
2. **Actionability** — every piece of copy ends with a clear next step
3. **Approachability** — knowledgeable colleague, not law-firm lobby

### 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 Fraunces 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.

### Banned phrases
"Leverage" · "Synergy" · "Unlock" · "Streamline your workflow" · "AI-powered solution" · "Empower your team" · "Leading platform" · "End-to-end" · "Seamless" · "Frictionless" · "Best-in-class" · "Per our previous communication" · "Comprehensive solution"

### How we talk about AI
We are pro-better-AI, not pro-AI generally. The distinction is always: **general-purpose AI** (US legal corpus, no accountability) vs **purpose-built legal AI** (EU 27 jurisdictions, confidence scoring, human backup).

Outlex isn't the alternative to AI — it's what AI for legal should look like when it's built for Europe.

### Originality test
Could this have been written by any other company? If yes, rewrite.

---

## 8. Lexi (in-product AI assistant) 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?"

---

## 9. Key brand phrases (reference, not copy-paste)

- "When given two choices, we decided to build a third." (origin stories)
- "AI handles the 80%. Real lawyers handle the 20%."
- "Your AI Legal Department" (hero positioning)
- "Purpose-built, not general-purpose." (vs ChatGPT)
- "Built for Europe's 27 legal systems."

---

## 10. What this doc does NOT cover

- Component code (buttons, cards, dialogs) — see future shadcn registry (Phase 3+4)
- Logo SVG file — see `brand/logo/` once added
- Per-platform marketing structures (LinkedIn hook formulas, blog SEO patterns) — see `voice/voice-marketing.md`
- Lexi's full conversation patterns — see `voice/voice-product.md`

---

## Provenance

This file is generated from the canonical tokens + voice docs in [outlex-design](https://github.com/outlex/outlex-design). Last regenerated: see git log.

When this file disagrees with `tokens/tokens.css` or `voice/voice.md`, **the source repo wins**. Re-fetch.