# Harvey · Design system migration spec

> Source: https://www.harvey.ai  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of premium, restrained design for a high-end B2B SaaS product in a conservative industry.

## 1. Identity DNA

Harvey's design system is built on the principle of restrained authority, mirroring the precision and discretion expected of top-tier legal counsel. The visual language draws from a high-end legal service, filtering it through the lens of modern technology to create an interface that feels both established and forward-looking.

**One-liner:** An AI platform for top law firms.
**Keywords:** legal · AI · premium · sophisticated · trustworthy
**Analogy:** A high-end legal service meets modern technology.

## 2. Color

The palette is a masterclass in chromatic restraint, built on a near-monochrome foundation of deep charcoal and off-white. This deliberate absence of a primary accent color forces clarity through contrast and value, not hue.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0F0E0D` | main background |
| `--bg-soft` | `#FAFAF9` | card background |
| `--ink` | `#FAFAF9` | body text |
| `--ink-soft` | `#0F0E0D` | secondary text |
| `--muted` | `#8F8B85` | placeholder |
| `--line` | `rgba(250, 250, 249, 1)` | divider |

**Color principle:** Monochromatic, high-contrast dark palette with minimal color usage.

The core principle is that authority is communicated through contrast and absence, not through decorative color.

## 3. Typography

Typography is defined by a clear voice: a **transitional serif** for display headlines conveys expertise and gravitas, while a **humanist sans-serif** for body text ensures readability and a human touch. The scale is structured for hierarchical clarity, from hero headings down to body copy.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -1px | Hero heading |
| h2 | 48px | 1.0 | 400 | -0.9px | Section headings |
| h3 | 32px | 1.0 | 400 | -0.48px | Sub-headings |
| body | 16px | 1.5 | 400 | -0.14px | Body text |

## 4. Spacing

An 8px base grid establishes a consistent vertical rhythm across all components and layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid

## 5. Surfaces

Surfaces are flat and direct, defined by a precise 1px solid border rather than shadows. The lack of drop shadows reinforces the system's honest, unembellished approach to information hierarchy.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgba(250, 250, 249, 1)

## 6. Layout

The layout skeleton is anchored by a left-aligned hero section that spans the full viewport, overlaying cinematic photography. Subsequent content flows into structured grid sections and a clean logo strip, maintaining generous whitespace to direct focus.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Left-aligned hero content over a full-width background image, followed by a logo strip and grid sections.

## 7. Motion & Interaction

Motion is applied with surgical subtlety, primarily through fade-ins on scroll and smooth hover transitions. All animations adhere to a 300ms duration, creating a sense of deliberate, controlled change without distraction.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.3, 0.3, 0.3, 1)`
- **Patterns:**
  - Fade-in on scroll
  - Smooth hover transitions

- **Hover:** Background color fill on buttons, subtle opacity changes on links.
- **Click:** Standard pointer cursor.
- **Transition:** Smooth transitions for color, background-color, and border-color over 300ms.
- **Keyboard:** Focus states are likely present but not clearly visible in static screenshots.

## 8. Voice & Don'ts

The editorial voice is authoritative and confident, using short, punchy serif headlines to emphasize expertise. Language is professional and direct, consistently avoiding jargon, playful tones, and aggressive sales copy.

- **Tone:** Authoritative, professional, and confident.
- **Headline style:** Short, punchy serif headlines that emphasize expertise.
- **CTA style:** Direct, action-oriented, and clearly differentiated.
- **Avoid:** Jargon / Playful language / Aggressive sales copy

### Don'ts
- ❌ Don't use bright, neon accent colors — the screenshot shows a restrained, near-monochrome palette.
- ❌ Don't use a generic geometric sans-serif for headlines — the screenshot shows a sophisticated serif font.
- ❌ Don't use heavy drop shadows on elements — the screenshot shows flat surfaces and subtle borders.
- ❌ Don't clutter the layout with too many elements — the screenshot shows generous whitespace and a clear hierarchy.
- ❌ Don't use rounded, bubbly button shapes — the screenshot shows slightly rounded, but firm rectangles.
- ❌ Don't use low-quality or generic stock photography — the screenshot shows high-quality, cinematic imagery.

The system deliberately rejects bright neon accents, generic typography, and cluttered layouts to uphold its premium, trustworthy stance.

## System Prompt (paste into AI tool)

```
Design a premium, sophisticated AI interface for a legal tech platform. Use a near-monochrome palette with a very dark (#0F0E0D) background and bright (#FAFAF9) text. Employ a transitional-serif for display headings and a humanist-sans for body text. Emphasize generous whitespace and high-quality cinematic photography. Ensure CTAs are clear and direct, using outline or solid white buttons. Avoid playful language or bright accent colors. The tone should be authoritative and professional.
```
