Harvey

---
version: alpha
name: "Harvey AI – Legal Precision Dark"
description: "Harvey's design system is built around a warm, near-black and off-white monochromatic palette anchored by two proprietary typefaces. HarveySerifFont for editorial headings and HarveySansFont for all UI text. The hero is a full-bleed cinematic photograph overlaid with a dark scrim, placing large serif headlines over photography. The overall tone is authoritative and understated, evoking premium legal services rather than typical SaaS. No decorative color accents exist; hierarchy is achieved entirely through type scale, weight, and warm gray tonal steps. Elevation is flat. no box shadows appear in the data. Spacing follows a base-8 system with generous section padding."
colors:
  ivory: "#fafaf9"
  stone-900: "#1f1d1a"
  white: "#ffffff"
  ink: "#0f0e0d"
  stone-500: "#8f8b85"
  stone-600: "#706d66"
  stone-300: "#cccac6"
  stone-800: "#33312c"
typography:
  display-xl:
    fontFamily: "HarveySerifFont"
    fontSize: "72px"
    fontWeight: "400"
    lineHeight: "75.6px"
    letterSpacing: "-0.9px"
  display-l:
    fontFamily: "HarveySerifFont"
    fontSize: "48px"
    fontWeight: "400"
    lineHeight: "50.4px"
    letterSpacing: "-0.48px"
  display-m:
    fontFamily: "HarveySerifFont"
    fontSize: "32px"
    fontWeight: "500"
    lineHeight: "33.6px"
    letterSpacing: "-0.32px"
  display-s:
    fontFamily: "HarveySerifFont"
    fontSize: "32px"
    fontWeight: "400"
    lineHeight: "33.6px"
    letterSpacing: "-0.32px"
  body-l:
    fontFamily: "HarveySansFont"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "26px"
  body-base:
    fontFamily: "HarveySansFont"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  label-m:
    fontFamily: "HarveySansFont"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "18.2px"
    letterSpacing: "-0.14px"
  label-base:
    fontFamily: "HarveySansFont"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "18.2px"
  ui-m:
    fontFamily: "HarveySansFont"
    fontSize: "20px"
    fontWeight: "500"
    lineHeight: "26px"
  sans-heading:
    fontFamily: "HarveySansFont"
    fontSize: "32px"
    fontWeight: "500"
    lineHeight: "35.2px"
    letterSpacing: "-0.32px"
rounded:
  sm: "4px"
  md: "8px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "64px"
  3xl: "128px"
  4xl: "160px"
---

## Overview

Harvey's design system is built around a warm, near-black and off-white monochromatic palette anchored by two proprietary typefaces. HarveySerifFont for editorial headings and HarveySansFont for all UI text. The hero is a full-bleed cinematic photograph overlaid with a dark scrim, placing large serif headlines over photography. The overall tone is authoritative and understated, evoking premium legal services rather than typical SaaS. No decorative color accents exist; hierarchy is achieved entirely through type scale, weight, and warm gray tonal steps. Elevation is flat. no box shadows appear in the data. Spacing follows a base-8 system with generous section padding.

**Signature traits:**
- Dual typeface system: Pairs HarveySerifFont and HarveySansFont across the type hierarchy.

## Colors

The palette uses 8 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `ivory`: Role "background" is grounded by usage context "Primary page background, primary text on dark surfaces, nav text on hero".
- **action-text** maps to `ink`: Role "text" is grounded by usage context "Primary CTA button fill, primary text on light backgrounds, nav on light pages".
- **border-border** maps to `stone-300`: Role "border" is grounded by usage context "Secondary text, subtle borders, muted UI labels".
- **border-text** maps to `stone-500`: Role "text" is grounded by usage context "Muted/tertiary text, form input borders, focus ring, select icon".

### Text Scale
- **Ink** (#0f0e0d): Primary CTA button fill, primary text on light backgrounds, nav on light pages. Role: text. {authored: rgb(15, 14, 13), space: rgb}
- **Stone 500** (#8f8b85): Muted/tertiary text, form input borders, focus ring, select icon. Role: text. {authored: rgb(143, 139, 133), space: rgb}
- **Stone 600** (#706d66): Form text color, footer secondary text. Role: text. {authored: rgb(112, 109, 102), space: rgb}

### Interactive
- **Stone 300** (#cccac6): Secondary text, subtle borders, muted UI labels. Role: border. {authored: rgb(204, 202, 198), space: rgb}
- **Stone 800** (#33312c): Disabled text, primary border, secondary hover background. Role: border. {authored: rgb(51, 49, 44), space: rgb}

### Surface & Shadows
- **Ivory** (#fafaf9): Primary page background, primary text on dark surfaces, nav text on hero. Role: background. {authored: rgb(250, 250, 249), space: rgb}
- **Stone 900** (#1f1d1a): Secondary surface background, hover state for primary background. Role: background. {authored: rgb(31, 29, 26), space: rgb}
- **White** (#ffffff): Ring offset, cookie modal background, card surfaces. Role: background. {authored: rgb(255, 255, 255), space: rgb}

## Typography

Typography uses HarveySerifFont, HarveySansFont across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes HarveySerifFont and HarveySansFont for visual contrast. Weight range spans regular, medium. Sizes range from 14px to 72px.

### Font Roles
- **Headline Font**: HarveySerifFont
- **Body Font**: HarveySerifFont

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline — largest display text, editorial authority | HarveySerifFont | 72px | 400 | 75.6px | -0.9px | HarveySerifFont, HarveySerifFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif; features: "calt", "liga" | Extracted token |
| Section headings, major content titles | HarveySerifFont | 48px | 400 | 50.4px | -0.48px | HarveySerifFont, HarveySerifFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif; features: "calt", "liga" | Extracted token |
| Sub-section headings, card titles in serif | HarveySerifFont | 32px | 500 | 33.6px | -0.32px | HarveySerifFont, HarveySerifFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif; features: "calt", "liga" | Extracted token |
| Lighter-weight section headings | HarveySerifFont | 32px | 400 | 33.6px | -0.32px | HarveySerifFont, HarveySerifFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif; features: "calt", "liga" | Extracted token |
| Lead paragraph / hero body copy | HarveySansFont | 20px | 400 | 26px | normal | HarveySansFont, HarveySansFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif | Extracted token |
| Primary body text, nav links, general UI copy | HarveySansFont | 16px | 400 | 24px | normal | HarveySansFont, HarveySansFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif | Extracted token |
| UI labels, nav items, button text, tags | HarveySansFont | 14px | 500 | 18.2px | -0.14px | HarveySansFont, HarveySansFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif | Extracted token |
| Secondary labels, form helper text, captions | HarveySansFont | 14px | 400 | 18.2px | normal | HarveySansFont, HarveySansFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif | Extracted token |
| Emphasized UI text, feature callouts | HarveySansFont | 20px | 500 | 26px | normal | HarveySansFont, HarveySansFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif | Extracted token |
| Sans-serif section headings, alternate to serif display | HarveySansFont | 32px | 500 | 35.2px | -0.32px | HarveySansFont, HarveySansFont Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif, sans-serif | Extracted token |

## Layout

Responsive system uses 3 breakpoint tier(s): mobile, tablet, desktop.

This system uses a 8px base grid with scale values 4, 8, 12, 16, 24, 32, 64, 128, 160.

### Responsive Strategy
- **mobile (<= 640px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (>= 768px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (>= 1106px)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| xs | 4px | 4 | Mapped to --spacing-xs |
| sm | 8px | 8 | Extracted spacing token |
| md | 12px | 12 | Extracted spacing token |
| base | 16px | 16 | Extracted spacing token |
| lg | 24px | 24 | Extracted spacing token |
| xl | 32px | 32 | Extracted spacing token |
| 2xl | 64px | 64 | Mapped to --spacing-xl |
| 3xl | 128px | 128 | Mapped to --spacing-2xl |
| 4xl | 160px | 160 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(15px) ; blur(16px) ; blur(20px) |
| Light | outline-color | rgb(250, 250, 249) ; rgb(15, 14, 13) ; rgb(255, 255, 255) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -1247.99, 0) ; matrix(1, 0, 0, 1, -288.607, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| sm | 4px | 4 | Subtle corner |
| md | 8px | 8 | Control corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| sm | 4px | px |
| md | 8px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 640px | (max-width: 640px) |
| Tablet | >= 768px | (min-width: 768px) |
| Desktop | >= 1106px | (min-width: 1106px) |
| Breakpoint 4 | Unknown | (prefers-reduced-motion: reduce) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.