Outlex Design — Brand Book

A canonical brand and design system

Tokens, voice, and visual identity — for product, website, and everything we make. One source of truth.

This is the brand book. It is also the registry. It is also the spec the agents read. The same file that powers outlex.ai, the product UI, the LinkedIn post, and the Codex session — because there is no version of "Outlex" where one of those is wrong.

Chapter I

The palette.

Warm, restrained, semantic. Each color earns its place because it means something.

Surfaces

--outlex-bg

#FAF8F5

Page background — warm cream

--outlex-bg-raised

#F5F2EE

Hover / raised surface

--outlex-card

#FFFFFF

Card surface

Foreground (warm charcoal — never pure black)

--outlex-fg

#2D2A26

Body text, primary headings

--outlex-fg-ink

#231F20

CTA-on-sage WCAG anchor

--outlex-fg-muted

#6B6460

Secondary copy

--outlex-meta

#8A847C

Timestamps, captions

Accents — semantic, not decorative

--outlex-primary

#6B7EC2

Warm blue — info, links, interactive

--outlex-sage

#6B8F71

Default primary CTA, success, Lexi

--outlex-amber

#C49432

Warning, focus ring, pending

--outlex-terra

#C27256

Risk, urgent

--outlex-danger

#811D1D

Destructive, true error (AAA)

Brand mark gradient (logo SVG only — never elsewhere)

mark gradient

#306AEF → #54D6A4

The Outlex mark. Nothing else.

Chapter II

The voice on the page.

Fraunces for emphasis and editorial moments. Inter for everything else. Hard ceilings on weight — weight 700+ is forbidden across the system.

hero36 / 1.1 / 500Welcome back.

display-lg28 / 1.15 / 500The palette.

display20 / 1.35 / 500Section heading

title16 / 1.5 / 500Card title or list header

section14 / 1.4 / 500Section label

body15 / 1.6 / 400Body text. The reading register. Inter at 400.

meta12 / 1.4 / 4002026-04-29 · timestamp · captions

Hard stops

Fraunces never above weight 500 (medium).
Inter never above weight 600 (semi-bold).
Italic on Fraunces only for the human word in headlines — never for body emphasis.
No font-weight: 700 anywhere in the system.

Chapter III

The warmth beneath.

All shadows use a warm rgba(40, 35, 30, α) base. Never grey. Never pure black. Never blue-tinted. The light in our world comes from a window, not a fluorescent.

shadow-1

shadow-2

shadow-3

shadow-4

Radii — concentric, calm

--outlex-radius-pill 9999px — chips, tags, AI pill
--outlex-radius-xl 16px — default card radius
--outlex-radius-lg 12px — inner card
--outlex-radius-md 8px — buttons, inputs
--outlex-radius-2xl 28px — hero chat input only

Chapter IV

The primitives.

Five components carry the brand across product and website. The full registry ships in Phase 3 — these are what every surface should already use.

Buttons

Sage primary at rest (not on hover). Period on the primary CTA. No exclamation marks. No bold weights.

Pills

● Active ● Pending review ● Overdue ✦ AI ● Draft

Card

Mutual NDA — Acme Corp.

Reviewed 2 days ago. 3 obligations, 1 expiring within 30 days.

● Renewal soon

Logo mark

The brand-mark gradient appears here and only here. Not in cards, not in hero backgrounds, not in pills.

Chapter V

How we sound.

The Guide with Conviction. Mentor energy, not enthusiastic-SaaS energy. We translate legal complexity — we don't dumb it down, and we don't hide behind it.

"Most of what you pay your lawyer for isn't legal judgment. It's pattern recognition."

Three principles, non-negotiable

Simplicity — if a non-lawyer can't parse it in one read, rewrite it.
Actionability — every piece of copy ends with a clear next step.
Approachability — knowledgeable colleague, not law-firm lobby.

Product copy rules

Welcome!

Welcome back.

Something went wrong!

Something broke on our side.

All done!

Another one done.

Marketing copy rules

"Leverage our solution to optimize your legal operations."

"Automate your legal work. Save time. Grow faster."

"Comprehensive legal solutions for modern enterprises."

"Your startup's legal department. €299/month. Everything you need."

Banned phrases

Leverage · Synergy · Unlock · Streamline · AI-powered solution · Empower your team · Leading platform · End-to-end · Seamless · Frictionless · Best-in-class · Per our previous communication.

Chapter VI

How to consume this.

One source. Three audiences. No drift.

For LLMs (Codex, Cursor, Claude, ChatGPT)

Fetch the single-file inlined reference. It contains tokens, voice, and rules in one parseable doc.

https://design.outlex.ai/brand.md

For engineers

Both mvp2 (product) and outlex-corporate-website symlink the canonical:

ln -sf ~/outlex-design/tokens/tokens.css \
  ./src/styles/outlex-tokens.css

@import './styles/outlex-tokens.css';  /* in your index.css */

CI workflow checks for drift. Updates ship as PRs to outlex-design — never directly to consumer repos.

For marketing & design

This page is the brand book. Bookmark design.outlex.ai. The colors, type, shadows, and voice rules above are canonical — copy hex values from the swatches, lift voice patterns from the chapters.

Voice files: voice.md (canonical) · voice-product.md · voice-marketing.md

Outlex, in one place.