Harvey

Overview

Harvey is an enterprise legal AI platform that transforms how leading law firms and corporate legal teams work. The design system embodies Architectural Minimalism—a discipline rooted in precision, legibility, and intellectual clarity. Every element serves a functional purpose: the dark canvas (#0f0e0d) evokes the gravitas of legal practice, while the refined serif-and-sans pairing (HarveySerifFont for headlines, HarveySansFont for body) communicates both tradition and innovation. The emotional response is one of calm authority: users trust Harvey because the interface itself feels deliberate, trustworthy, and built for serious work.

The brand voice is precise, measured, and never hyperbolic. Vocabulary favors concrete nouns and active verbs: "streamline contract analysis," "unlock intelligence," "own your legal work." Tone is professional yet approachable—never patronizing, never breathless. Example sentence: "Harvey II processes 50 pages of due diligence in under 60 seconds, so your team can focus on strategy."

Colors

The color system is anchored in a sophisticated grayscale foundation with strategic accent deployment. Primary (#0f0e0d, near-black) is the dominant surface and text color, establishing the austere, professional baseline. On-surface (#fafaf9, off-white ivory) provides maximum contrast for readability and accessibility. The surface stack progresses from surface-container-lowest (#050403) through surface-container-highest (#3a3733), enabling subtle visual hierarchy without relying on color saturation. Secondary (#706d66, warm gray) and tertiary (#adaba5, lighter warm gray) serve as supporting neutrals for disabled states, secondary text, and subtle UI elements. Error (#f26161, warm red) is reserved for validation states and critical alerts. The outline tokens (#8f8b85 for primary, #524f49 fo

Typography

The type system pairs two custom typefaces to communicate both heritage and modernity. HarveySerifFont (400 weight, regular and italic) anchors display and headline levels, evoking the formality of legal documents while maintaining contemporary elegance. Headlines use -0.02em to -0.01em letter-spacing to tighten the serif letterforms and enhance authority. HarveySansFont (variable weight, 400–500) handles body, labels, and UI text, ensuring legibility at small sizes and rapid scanning. Body text (16px, 400 weight, 24px line-height) is set with 0em letter-spacing for neutral, professional tone. Labels and buttons use 500 weight to signal interactivity without visual aggression. On small labels over busy backgrounds (e.g., badges, form hints), apply a subtle text-shadow: 0 1px 2px rgba(0, 0,

Layout

The page grid is fluid on mobile (single column, 24px gutter) and fixed at 1280px max-width on desktop (12-column grid, 24px gutter). Container max-width is 1280px; content padding is 24px on desktop, 16px on tablet, 12px on mobile. Section separation uses lg spacing (40px) for major rhythm breaks (hero to features, features to testimonials). Card and component spacing follows the semantic scale: sm (12px) for internal component padding, md (24px) for card padding and section margins, lg (40px) for section-to-section gaps. The form layout uses a 2-column grid on desktop (collapsing to 1 column on mobile) with consistent 24px row gaps and 12px field gaps. Whitespace is generous but purposeful—never wasteful, always serving to isolate and emphasize key content. The hero section uses 64px ver

Elevation & Depth

Depth is conveyed through subtle shadow and layering rather than color shifts. The primary shadow (0 3px 8px rgba(0, 0, 0, 0.15)) is applied to cards, modals, and elevated surfaces to separate them from the base surface (#0f0e0d). This shadow is tight and controlled—no blur radius exceeding 8px—to maintain the architectural precision of the design. Form inputs and secondary surfaces use no shadow, relying instead on a 1px border at outline-variant (#524f49) to define their boundary. Focus states on interactive elements use a 2px ring at outline (#8f8b85) with a 2px gap, creating a clear visual

Shapes

The shape philosophy is Architectural Sharpness—clean, rectilinear, and purposeful. Buttons and form inputs use 4px border-radius (0.25rem), a subtle softening that prevents harsh corners while maintaining geometric clarity. Cards and larger containers use 8px border-radius (0.5rem) for a slightly more approachable feel. Modals and elevated surfaces use 16px border-radius (1rem) to signal importance and create visual distinction. The full radius (9999px) is reserved for badges and pill-shaped elements. This hierarchy ensures that the most interactive elements (buttons, inputs) feel direct and

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses {colors.primary} (#0f0e0d) background with {colors.on-primary} (#fafaf9) text, {typography.label-md} (14px, 500 weight), {rounded.sm} (4px), and 12px horizontal padding. Height is fixed at 48px to ensure touch-friendly sizing. On hover, the background shifts to {colors.primary-container} (#33312c) with {colors.on-primary-container} (#e5e5e3) text, creating a subtle but perceptible state change. Transition timing is 200ms (all 0.2s ease-in-out). The button-secondary variant uses a transparent background with a 1px border at {colors.outline} (#8f8b85), same text color as primary, and identical padding and height. On hover, the background becomes {colors.surface-container-high} (#2d2a26). B

Do's and Don'ts

**Do**

• Do use HarveySerifFont for all display and headline content (h1–h3 equivalents); it establishes authority and visual hierarchy.
• Do maintain the dark surface (#0f0e0d) as the primary background; it is the foundation of the brand's professional identity.
• Do apply the lg elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) consistently to cards and modals to create clear visual separation.
• Do use on-surface (#fafaf9) for all body text and on-surface-variant (#cccac6) for secondary information; never use pure white or pure black.
• Do set button height to 48px minimum for touch accessibility; padding should be 12px horizontal, 0px vertical.
• Do use 24px gutter and 40px section spacing (lg) for consistent rhythm and breathing room.
• Do apply 200ms transition timing (all 0.2s ease-in-out) to all interactive state changes (hover, focus, active).

**Don't**

• Don't use the primary color (#0f0e0d) for text on light backgrounds; it will fail WCAG contrast requirements. Use on-surface (#fafaf9) on dark surfaces only.
• Don't apply shadows larger than 0 3px 8px rgba(0, 0, 0, 0.15); excessive shadows dilute the architectural precision of the design.
• Don't mix serif and sans fonts within a single headline or body paragraph; maintain strict separation (serif for headlines, sans for body).
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary rounding breaks visual consistency.
• Don't apply color changes on hover without a transition; all state changes must use 200ms timing to feel intentional and polished.
• Don't use uppercase text for buttons or labels; sentence case is preferred for accessibility and brand voice alignment.
• Don't reduce padding or height of buttons below 12px horizontal and 48px height; this breaks touch accessibility and visual hierarchy.