Harvey — design system & UI screens

AI · 1 screen · 10 sections · https://www.harvey.ai/

Dark cinematic legal-AI landing; a moody portrait of a lawyer under a light serif 'Practice Made Perfect' headline and a Request a Demo button, closing on a grayscale wall of elite law-firm wordmarks (Macfarlanes, KKR, A&O Shearman).

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/harvey.

Decoded design system

Harvey's decoded design system: background #0F0E0D, text #ECECEE, accent #FAFAF9, link #122124, primary #123456; type scale h1 96px / h2 40px / body 14px; 4px spacing base; 0px base radius. The single interactive/action color is #FAFAF9 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#0F0E0D`
surface	`#1C1B1A`
border	`#302F2E`
text	`#ECECEE`
text_muted	`#989798`
primary	`#123456`
accent	`#FAFAF9`
link	`#122124`
button_bg	`#FAFAF9`
button_text	`#0F0E0D`

Using these colors

Action color #FAFAF9 — the single interactive color; only on things you click or must notice, never large fills.
accent, button_bg are all #FAFAF9 — one role, not several (the action color).
accent #FAFAF9 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #123456 — a brand color — but the call-to-action uses #FAFAF9, not this.
link #122124 — fails contrast on the background (~1.2:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).

Typography

Heading: Roboto
Body: Roboto
h1: 96px
h2: 40px
body: 14px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px

Radii

base: 0px
button: 4px

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →