Harvey

01Colors

• Warm paper#F6F5F3Background · 88% · WhitePage canvas everywhere, also the dashboard main area and the tab that holds the security badges.
• Card white#FCFCFCSurface · WhiteOuter feature cards, CTA card, footer panel, Login button, dashboard cards and dropdowns.
• Well grey#F4F4F4Surface · WhiteInner wells inside the nested cards that hold each mini UI. Some wells carry a faint peach glow (#F8F3ED).
• Ink#141311Text · 0.6% · BlackSerif headlines, KPI numerals and stats (stats go to pure black).
• Stone grey#656462Muted text · 1.2% · GraySection subheads, card body copy, nav links (#6A6967) and footer links. The hero subhead is darker, about #393836.
• Charcoal#303030CTA · GrayBook a Demo and Request a Demo buttons, white label.
• Sidebar black#0F0E0CSurface · 1.7% · BlackDashboard sidebar, H monogram tiles and Ask Harvey button. The announcement bar is a lifted #1E1E1E, the active sidebar row #32312D.
• Hairline#DEDEDEBorder · 4.1% · GrayCard outlines, dropdown borders and stat dividers. The giant footer wordmark uses almost the same grey (#DCDCDC).
• Warm sand#E8DCC8Accent · Beige & creamLight end of the blurred gradient band behind the hero dashboard.
• Graphite haze#484844Accent · 0.7% · GrayDark end of the same gradient band, pooling at the left and right edges.
• Slate#4C5460Chart · Gray'Your organization' bars and the power-user bars, filled with fine grain noise.
• Peer dot grey#DCDCE0Chart · 3.6% · Gray'Peers' comparison bars, filled with a dotted stipple instead of a second hue.
• Oxblood#70585CChart · Gray'Needs attention' bars in the product-usage chart.
• Delta green#457A68Status · GreenUp-arrow deltas (5%, 10%) in the hero dashboard. The feature-card version uses a brighter #4BB165.
• Review mint#E4FCE4Status · GreenFill of 'Ready to review' tabs and pills, text #226F1D.
• Call blush#FCDCE0Status · GrayFill of 'Needs your call' tabs and pills, text #A35457 to #9D0E10. 'Queued' uses a pale blue-grey #ECF0F8.
• Client orange#FC8C28Accent · OrangeMultiplayer cursor label 'Client' in the Spaces card. Its partner 'Firm' label is violet #6054F4.

Warm, near-monochrome neutrals: paper, card white, a grey well and a charcoal ink, with contrast coming from value rather than hue. The only large colour field is the blurred graphite-to-sand gradient band behind the hero dashboard, and it never returns except in the cropped CTA repeat. Real colour is rationed to meaning: mint and blush status tabs, green deltas, an oxblood 'needs attention' bar, blue Google Docs and red PDF file icons, and two cursor labels (orange Client, violet Firm). Charts stay in slate and grey and get their character from grain and dotted fills instead of colour.

02Typography

Specimens use a stand-in face of the same class and weight.

Pairing

One serif carries the voice (headlines, card titles, numerals, the wordmark) and DM Sans does every functional job. The serif reads like legal letterhead, and DM Sans keeps the dense UI mockups clean and modern. Using the serif inside the product UI (dashboard title, KPI figures, chat sender label) ties marketing and app together.

Hierarchy

Hero ~72px serif, H2 ~56px, split H3 ~40px, card titles ~24px, body 18px sans, eyebrows ~13px, dashboard micro-labels 8–9px. Every face is regular weight, so hierarchy comes from size, the serif-to-sans switch and ink vs stone-grey colour. Line lengths stay moderate and most section heads are left aligned, while the hero and the two statement headings are centered.

03Layout

Dark announcement bar, then a contained page on warm paper. The hero is centered with a single CTA, followed by a tab of page background that holds the security badges and hangs into a full-bleed gradient band carrying the dashboard. After that come a centered customer statement with logo rows, a left-aligned how-it-works row of three cards, a centered intro to two alternating split sections (copy left/mockup right, then mockup left/copy right), a 2x3 product card grid, a testimonial carousel, a three-stat row, a CTA card with a dashboard crop, a boxed footer and a giant wordmark.

Alignment

mixed

Density

airy

Width

contained

Corners

rounded

Depth

layered

Grid

About 1390px container with ~45px side margins on a 1480px canvas. Three equal step cards; two 50/50 split sections with the mockup card at about 42%; a 2x3 grid of equal product cards; three stats split by vertical hairlines; a five-column footer. The hero dashboard is a 2x2 card grid beside a fixed dark sidebar.

Spacing

Generous vertical rhythm: about 150–200px between sections, 40–60px between heading and content, ~20px gutters between cards. Nested cards use roughly 16–24px padding between the outer card and its inner well. Buttons are compact (about 44px tall, 16–20px side padding).

04Sections 16

1. 01
   Announcement bar

   Full-width #1E1E1E strip with centered white DM Sans: "New: Harvey II. Agents that handle more complex work." and an underlined "See What’s New" link.

2. 02
   Navbar

   Serif "Harvey" wordmark on the left, grey DM Sans links (Platform, Solutions and Resources with chevrons; Customers, Security, Company), and on the right a white Login button plus a charcoal Book a Demo button. No background or border, sits on the page paper.

3. 03
   Hero

   Centered two-line serif headline, two-line charcoal subhead and one charcoal "Request a Demo" button. No eyebrow, no visual: the product appears just below.

4. 04
   Security badges

   "Enterprise-Grade Security" label over two rows of certification chips: ISO 27701, ISO 27001 and ISO 42001 with ISO seal icons, then SOC 2 Type II, CCPA, GDPR and AIUC-1 with shield-check icons. The block is a tab of paper that drops into the gradient band with concave curved shoulders.

5. 05
   Product mockup

   Full-bleed blurred gradient (graphite edges, warm sand centre) holding a rounded app window: black sidebar (New Thread, Agents, Vaults, Command Center, More; Apps; Recents; Spaces with lettered tiles; user Maya Sterling) and a paper main area titled "Whitford Lane’s Command Center" with a Peers toggle, View all analytics, Ask Harvey, a recommendation banner and four analytics cards.

6. 06
   Logo cloud

   Centered serif statement "3,000+ law firms and legal teams use Harvey in 70+ Countries", then two rows of grey monochrome logos that fade at both edges: O’Melveny, Booking.com, Deutsche Telekom, Gleiss Lutz, A&O Shearman, Hengeler Mueller, Ashurst; flex, Markel, Bredin Prat, Naver, Mallesons, Stikeman Elliott, Anderson Mōri & Tomotsune.

7. 07
   How it works

   "How Harvey Works" left-aligned serif H2 with a two-line grey intro, then three nested cards. Each holds a mini UI (chat with file chips; agent node graph Agent → iManage + Opus 4.8 → Planning; a Done 3-of-3 file list with Reject/Approve and a cursor), an underlined step label, a serif sentence title and grey copy. The third card is mislabelled "Step 2" and all three share the same body sentence.

8. 08
   Use cases

   Centered intro "Built for How Your Team Works" with a two-line subhead, introducing the two audience splits below.

9. 09
   Features

   For Law Firms split: eyebrow, serif H3 "AI Agents That Work Every Matter to Your Firm’s Playbooks", body, a three-item checklist (Research, Diligence, Drafting) and a white "See Harvey for Law Firms" button. Right side: a review-queue mockup with stacked agent cards joined by gradient connectors and status tabs (Ready to review, Needs your call with an expanded redline and Edit/Accept, Queued fading out).

10. 10
    Features

    For in-house teams split, mirrored: a business-request mockup ("BUSINESS REQUEST – SALES / Can we accept 60-day payment terms with this vendor?" then an H tile, "Draft response" and a Ready to review pill) on the left; eyebrow, serif H3 "AI Agents That Draft the Answer to Every Business Request" and body on the right. Cut off by the shot.

11. 11
    Bento grid

    "What Harvey Does for Your Team" with a one-line subhead, then a 2x3 grid of nested cards: Knowledge (research query plus source chips), Agents (drafting thread), Spaces (shared document with Client/Firm cursors and a comment), Vault (question with a per-document answer table), Contract Intelligence (playbook-check table with an Inbound/Portfolio toggle) and Command Center (mini analytics). Each has a grey eyebrow, serif title, grey body and a black "Explore … →" link.

12. 12
    Testimonials

    Carousel: a rounded portrait photo card on the left and a white quote card on the right ending with "Dr. Claudia Junker, General Counsel, Deutsche Telekom AG" and square prev/next arrow buttons. A centered grey "See More Customer Stories →" link sits below.

13. 13
    Stats

    Three centered serif figures (25+, 80+, 200K+) with DM Sans captions, separated by thin vertical rules. Captions contain typos: "Vverage hours saved per month", "AmLaw 100 uses Harvey", "Professionals uses Harvey".

14. 14
    CTA

    Large card-white rounded panel: charcoal serif H2 "See What Harvey Could Take Off Your Team’s Plate", grey body and a charcoal Request a Demo button on the left; a cropped repeat of the Command Center dashboard on its gradient on the right.

15. 15
    Footer

    Card-white rounded panel with five link columns (Product, For, Solutions, Resources, Company) in grey DM Sans under semibold heads. Bottom row: "© 2026 Harvey AI. All rights reserved." on the left; Legal | Privacy Policy | Your Privacy Choices separated by hairlines on the right.

16. 16
    Footer wordmark

    Giant serif "Harvey" in #DCDCDC spanning the full container below the footer, with the descender of the y cut off by the page edge.

05Components 29

• Primary button

  Charcoal #303030 fill, white DM Sans regular ~15px, ~8px radius, no border or shadow. Used for Book a Demo and both Request a Demo buttons.

• Secondary nav button

  Login: card-white fill with a faint hairline, same ~8px radius and height as the primary, black label.

• Outline button

  "See Harvey for Law Firms": white fill, hairline border, almost square corners (~2px), roomier padding. The one sharp-cornered button on the page.

• Text link with arrow

  "Explore Knowledge →" in near-black DM Sans medium with a thin arrow. "See More Customer Stories →" is the grey variant. The announcement link is underlined white.

• Nav dropdown trigger

  Grey link plus a small chevron (Platform, Solutions, Resources). No pill or underline for an active state.

• Certification chip

  Outline icon (ISO seal or shield with a check) plus a ~18px DM Sans label, no container, laid out in two centered rows.

• Nested mockup card

  Outer card-white card with a #DEDEDE hairline and ~24px radius, inner #F4F4F4 well with ~20px radius holding the mini UI, then eyebrow, title, body and link underneath. Some wells have a faint warm glow in one corner.

• Eyebrow

  Plain ~13px grey DM Sans in sentence case ("Knowledge", "For Law Firms"). No pill, dot or uppercase.

• Step label

  Small grey underlined "Step 1" above a serif sentence title.

• Checklist

  Thin check glyph, a medium-weight item name (Research) and a grey one-line description indented under it.

• Status tabs

  Folder-style tabs attached to the top-right edge of review cards: 'Ready to review' green #226F1D on mint #E4FCE4, 'Needs your call' red on blush #FCDCE0, 'Queued' blue-grey on #ECF0F8.

• Status pills

  Rounded table pills with the same mint/blush pairs, plus an outline grey 'Ready to review' pill on the business-request card.

• H monogram tile

  Black rounded square with a white serif H. Acts as the agent avatar in chat, review queues and the recommendation banner.

• Chat bubbles

  White rounded message boxes: user prompt on the right with file chips (Google Docs blue or PDF red icon plus filename) above it; Harvey reply on the left under an "H Harvey" serif label.

• Chat input

  White pill input "Ask Harvey anything…" with a grey paper-plane send icon. The research variant adds a + button and a "1 Source" globe chip.

• Source chips

  White rounded tiles with a brand icon (globe, EDGAR seal, EU flag, US flag, LexisNexis), a label and a check circle that turns solid green when selected (Web Search).

• Dropdown selects

  White, hairline border, ~8px radius, label plus chevron: 6 months, 2026, This week, Weekly, Past month, and Last 30 days with a calendar icon.

• Toggle

  Small black pill switch labelled "Peers" in the dashboard header.

• Dark app sidebar

  Near-black panel with a serif wordmark, bell and search icons, outline nav icons, a #32312D rounded active row (Command Center), small grey section labels (Apps, Recents, Spaces), muted coloured letter tiles for spaces and a lettered avatar for the user.

• KPI block

  Large serif figure (49.5%, 305) with a small green ↑ delta and a grey caption (DAU/MAU, Active users), plus two dropdowns top-right.

• Chart legend

  Dot plus label (Your organization, Peers underlined, Needs attention) on the left, filter and download icons on the right, separated from the plot by a hairline.

• Data table

  Contract / Playbook check / Status columns: doc icon, name and grey source line ("Meridian – From Procurement"), amber warning "1 deviation" or check "Matches playbook", and a status pill. The Vault variant shows bold "Yes." answers with an external-link icon per row.

• Segmented control

  "Inbound | Portfolio" pill toggle under the contract table, with an arrow cursor on Inbound.

• Comment card

  "Comment on clause 4.2" header with a speech-bubble icon, the question, and a "Reply to this comment…" field.

• Collaboration cursors

  Arrow cursors with pill name tags: "Client" in orange, "Firm" in violet.

• Decision button pairs

  Reject (ghost, faded) and Approve (white, raised) in step 3. Edit (outline) and Accept (dark grey gradient) in the review queue, with an "Agreement 1 of 2" counter.

• Carousel arrows

  Two square white buttons with hairline borders and ←/→ icons, right-aligned in the quote card.

• Stat item

  Serif figure over a DM Sans caption, separated by 1px vertical rules.

• Footer columns

  Semibold DM Sans head, then 5–8 grey links with ~24px rhythm. Legal links separated by vertical hairlines.

06Graphics 10/14

• Dashboard / product UI

  Yes, heavily. Hero: full "Whitford Lane’s Command Center" analytics screen (dark sidebar, KPI cards, product-usage and power-user charts), repeated as a crop in the final CTA. Every feature card holds a mini UI: chat thread, agent workflow graph, approval list, review queue, business request, legal-research input with sources, drafting agent, shared workspace, Vault answer table, contract playbook table and a small "Meridians Command Center".

• Charts & data viz

  DAU/MAU: a thin grey line floating over a barcode-style area made of dense 1px vertical stripes. Active users: the same stripe area alone. Product usage: grouped vertical bars, slate filled with grain noise against dotted light-grey peer bars, with oxblood bars for "needs attention" and faint horizontal gridlines at 0–100%. Top power users: horizontal grainy slate bars with day counts. The feature-card copy uses flat light-grey horizontal bars and KPI tiles.

• Photography

  One portrait photo in the testimonial carousel (a woman in a pink blazer, cropped at the top of shot 4) in a rounded card. No other photography.

• Icons

  Outline icons with a ~1.5px stroke and rounded joins, Lucide-like (plus, bot, folder, line chart, ellipsis, clock, layers, bell, search, calendar, filter, download, paper plane, speech bubble, external link, check). Certification row uses ISO seal and shield-check outlines. Brand icons appear inside mockups: Google Docs blue files, red PDF files, iManage, the Anthropic starburst next to "Opus 4.8", EDGAR seal, EU flag, US flag and LexisNexis.

• Logo cloud

  Two rows of grey monochrome customer logos fading out at both edges (law firms plus Booking.com, Deutsche Telekom, Markel and Naver).

• Avatars / people

  Lettered square avatars (M for Maya Sterling; A, P and D space tiles in muted teal, violet and olive), black H monogram tiles for the agent, and the testimonial portrait.

• Gradients

  The full-bleed hero band is a soft blurred radial gradient from graphite (#484844) at the edges to warm sand (#E8DCC8) in the centre. Smaller ones: a faint peach glow inside some card wells, dark-to-light vertical connectors between review-queue cards, a grey gradient on the Accept button, and fade-out masks on the queue and logo rows.

• Texture, grain or pixel

  Fine grain/speckle noise inside the slate chart bars and a dotted stipple fill in the peer bars. The page itself is clean, with no grain overlay.

• Grid lines / patterns

  No page-level grid or dot pattern. Only faint chart gridlines and the dotted fill used for comparison bars.

• Cursors / pointers

  Yes: an arrow cursor clicking Approve (step 3), an arrow cursor on the Inbound tab (Contract Intelligence), and two multiplayer cursors with name tags, Client (orange) and Firm (violet), in the Spaces card.

Not usedIllustration · 3D renders · Device or browser frames · Maps

07Motion

ModerateFrom stills; motion is inferred from cues

• implied
  Logo marquee

  Both logo rows are cut off and faded at the left and right edges, which is the standard cue for an infinite horizontal scroll.

• implied
  Scripted cursor demos

  Cursors parked on Approve and on the Inbound tab suggest looping click-through animations inside the feature cards.

• implied
  Review-queue sequence

  Stacked cards with Ready to review, an expanded Needs your call and a fading Queued item suggest items advancing through the queue one by one.

• implied
  Agent progress states

  "Planning" with skeleton lines, then "Done 3 of 3" with a file list, implies a stepped progress animation from task to output.

• implied
  Multiplayer cursors

  Named Client and Firm cursors over a shared document usually drift and type in a loop.

• implied
  Chart draw-in

  The dense stripe areas and bars are the kind of chart that grows in on scroll.

• implied
  Testimonial carousel

  Prev/next arrow buttons mean the quote and portrait slide or fade between customers.

• implied
  Nav dropdowns

  Chevrons on Platform, Solutions and Resources imply hover or click menus.

08Copy

Get legal work done faster ,with your lawyers in charge

Harvey's agents take on research, drafting, analysis and review for law firms and in-house legal teams. Your lawyers make the final call.

Tone

Plain, confident and professional. It sells speed while repeating that lawyers stay in control ("Your lawyers make the final call"), with concrete legal vocabulary (DRL, SPA, playbooks, change of control). Undercut by several typos and duplicated placeholder lines.

09Style

Quiet, expensive and trustworthy, like a law firm’s letterhead turned into software.

Accessibility

Main text contrast is solid: ink on paper is very high, and stone-grey body (#656462 on #F6F5F3) is about 5.4:1. Problems sit in the mockups: dashboard axis labels, legends and power-user names render at 8–9px, the Queued tab text and faded Reject button are around 1.5–2:1, and skeleton lines are near invisible (acceptable as decoration). Grey logos (#807F7D) are about 3.6:1. Status chips pair colour with words, so meaning is not colour-only. Focus styles are not shown.

10Takeaways