--- name: Harvey tagline: Counsel-grade dark — warm near-black canvas, custom serif display, ivory CTA, sharp 4px monochrome. updated_at: 2026-05-29T21:43:33.521Z published_at: 2026-05-29T21:43:33.521Z author: webdesignhot source_url: https://www.harvey.ai spec: webdesignhot/0.1 quality: curated featured: false categories: [ai, saas] tags: [dark, serif, minimal, warm, monochrome, premium] preview_swatch: ['#0f0e0d', '#fafaf9', '#ffffff'] related: [anthropic, openai, perplexity] description: 'Harvey is AI software for legal and professional services, and its site dresses the part — a warm near-black canvas `#0f0e0d`, a custom serif display (`HarveySerifFont`) running headlines at 72px / weight 400, and a custom sans (`HarveySansFont`) carrying body. The system is essentially MONOCHROME WARM: ivory `#fafaf9` is the only accent, used for headlines, the "Request a Demo" CTA, and high-emphasis type on the dark ground. Where consumer AI brands reach for gradients and electric blue, Harvey reaches for the register of a white-shoe law firm rendered in dark mode — restrained serif elegance, sharp 4px corners, and value contrast instead of colour. The warm-dark-plus-ivory-serif pairing IS the identity; there is no second hue.' lineage: summary: 'Harvey transposes the white-shoe law-firm aesthetic into dark mode: a warm near-black canvas, a serif headline for institutional gravitas, a single ivory accent, and sharp 4px corners. It inherits the serif-for-credibility tradition of editorial and institutional brands (close kin to Anthropic''s cream-and-serif, recast dark and stripped of earth tones), Linear''s near-black canvas and hairline-on-dark elevation, and the dark-mode-as-premium register Vercel established for serious software. It deliberately rejects gradient meshes, neon accents, pill-shaped friendliness, and exclamation-point marketing — anything that would undercut professional-services trust. The result is monochrome warm: the warm-dark plus ivory-serif pairing is the entire identity, with no second hue.' influences: - name: Anthropic role: Serif-for-headline confidence and warm-neutral restraint, recast into dark mode url: https://www.anthropic.com - name: Linear role: Near-black canvas, hairline-on-dark elevation, value-contrast depth url: https://linear.app - name: Vercel role: Monochrome dark-mode-premium register for serious software url: https://vercel.com - name: Klim Type Foundry role: DNA reference for the transitional editorial serif weight ladder (Tiempos / Canela) url: https://klim.co.nz - name: Stripe role: Hairline-border restraint and cool-confidence monochrome discipline url: https://stripe.com - name: Financial Times role: Institutional, serif-led, premium-professional editorial register url: https://www.ft.com # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border ring: brand colors: # Primary bg: '#0f0e0d' # warm near-black canvas — the defining ground, never pure #000 text: '#ffffff' # pure white body copy on warm-dark brand: '#fafaf9' # ivory — the only accent; headlines + CTA fill on-brand: '#0f0e0d' # warm-dark label on the ivory CTA # Surface surface: '#1a1918' # faint warm lift above canvas — cards, panels surface-raised: '#242220' # second elevation tier — popovers, sheets overlay-backdrop: 'rgba(0, 0, 0, 0.6)' # --controls-backdrop-color — modal/scrim dim # Text scale (warm-neutral ivories descending) text-strong: '#fafaf9' # ivory — headlines, high-emphasis display text-secondary: 'rgba(255, 255, 255, 0.72)' # supporting copy, deck/lede text-muted: 'rgba(255, 255, 255, 0.56)' # captions, metadata, footer text-faint: 'rgba(255, 255, 255, 0.40)' # disabled, placeholder, watermark # Interactive link: '#fafaf9' # ivory links on dark link-hover: '#ffffff' # brighten to pure white on hover selected-bg: 'rgba(250, 250, 249, 0.08)' # hovered/selected row tint disabled: 'rgba(255, 255, 255, 0.32)' # disabled control text # Borders (ivory at low alpha — never a separate grey) border: 'rgba(255, 255, 255, 0.12)' # default hairline on dark border-strong: 'rgba(255, 255, 255, 0.24)' # emphasized rule, outlined buttons border-subtle: 'rgba(255, 255, 255, 0.06)' # quietest division # Semantic (kept warm-neutral / desaturated to protect the monochrome register) success-bg: 'rgba(122, 158, 122, 0.14)' success-text: '#a9c9a9' warning-bg: 'rgba(201, 169, 110, 0.14)' warning-text: '#d8be93' danger-bg: 'rgba(196, 110, 110, 0.14)' danger-text: '#e0a3a3' info-bg: 'rgba(255, 255, 255, 0.08)' info-text: '#fafaf9' typography: display: family: '"HarveySerifFont", "Tiempos Headline", "Canela", Georgia, serif' weights: [400, 500] opentype-features: ['liga', 'kern'] note: 'display is SERIF — the legal-broadsheet move that anchors the brand' body: family: '"HarveySansFont", "Söhne", "Inter", system-ui, -apple-system, sans-serif' weights: [400, 500, 600] opentype-features: ['liga', 'kern'] mono: family: 'ui-monospace, "SF Mono", "Söhne Mono", Menlo, monospace' weights: [400, 500] opentype-features: ['tnum', 'zero'] scale: display-hero: { size: 96, weight: 400, lineHeight: 1.0, tracking: '-0.02em', family: display } display-lg: { size: 72, weight: 400, lineHeight: 1.04, tracking: '-0.018em', family: display } h1: { size: 72, weight: 400, lineHeight: 1.05, tracking: '-0.018em', family: display } h2: { size: 48, weight: 400, lineHeight: 1.1, tracking: '-0.012em', family: display } h3: { size: 32, weight: 500, lineHeight: 1.2, tracking: '-0.008em', family: display } h4: { size: 24, weight: 500, lineHeight: 1.3, tracking: '-0.004em', family: display } eyebrow: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.08em', family: body, transform: uppercase } body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } quote-pull: { size: 28, weight: 400, lineHeight: 1.3, tracking: '-0.01em', family: display, style: italic } code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1280 prose-width: 720 site-gutter: 'clamp(24px, 5vw, 64px)' header-height: 64 grid-columns: 12 section-rhythm: '96-160px' components: button-primary: background: '#fafaf9' text: '#0f0e0d' padding: '10px 18px' radius: 4 border: 'none' font: 'HarveySansFont 500 / 15px' hover-bg: '#ffffff' active-bg: '#ebebe9' use: 'Primary CTA — ivory fill, warm-dark label. The "Request a Demo" button.' button-secondary: background: 'transparent' text: '#fafaf9' padding: '10px 18px' radius: 4 border: '1px solid rgba(255, 255, 255, 0.24)' font: 'HarveySansFont 500 / 15px' hover-bg: 'rgba(255, 255, 255, 0.08)' use: 'Outlined twin — ivory text, hairline border, no fill' button-ghost: background: 'transparent' text: 'rgba(255, 255, 255, 0.72)' padding: '10px 14px' radius: 4 border: 'none' font: 'HarveySansFont 500 / 15px' hover-text: '#fafaf9' use: 'Quiet text action — nav links, repeated CTAs' button-disabled: background: 'rgba(255, 255, 255, 0.08)' text: 'rgba(255, 255, 255, 0.32)' padding: '10px 18px' radius: 4 border: 'none' use: 'Inert state — low-alpha fill, faint label' card: background: '#1a1918' border: '1px solid rgba(255, 255, 255, 0.12)' radius: 8 padding: '24px' use: 'Feature tile / case-study panel — faint warm lift on canvas' input: background: 'rgba(255, 255, 255, 0.04)' border: '1px solid rgba(255, 255, 255, 0.16)' text: '#ffffff' radius: 4 padding: '10px 14px' font: 'HarveySansFont 400 / 15px' placeholder-color: 'rgba(255, 255, 255, 0.40)' focus-ring: '0 0 0 2px rgba(250, 250, 249, 0.40)' use: 'Form fields, demo-request inputs' badge: background: 'rgba(255, 255, 255, 0.08)' text: '#fafaf9' padding: '4px 10px' radius: 4 font: 'HarveySansFont 500 / 12px / 0.02em' use: 'Category / status pill on dark' nav-link: background: 'transparent' text: 'rgba(255, 255, 255, 0.72)' padding: '8px 12px' font: 'HarveySansFont 500 / 15px' hover-text: '#fafaf9' use: 'Top-nav item; brightens to ivory on hover' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — transitions become opacity-only, durations halved' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' ambient: 'rgba(0, 0, 0, 0.40) 0 1px 2px' standard: 'rgba(0, 0, 0, 0.50) 0 6px 20px -6px' elevated: 'rgba(0, 0, 0, 0.60) 0 18px 48px -12px' overlay: 'rgba(0, 0, 0, 0.70) 0 32px 80px -20px' ring: '0 0 0 2px rgba(250, 250, 249, 0.40)' accessibility: contrast-text-on-bg: 19.3 # #ffffff on #0f0e0d — AAA at all sizes contrast-ivory-on-bg: 18.6 # #fafaf9 on #0f0e0d — AAA contrast-dark-on-brand: 18.6 # #0f0e0d on #fafaf9 (CTA) — AAA contrast-secondary-on-bg: 11.4 # white@72% on #0f0e0d — AAA focus-ring: '2px ivory ring at 40% alpha with 2px offset' reduced-motion-honored: true keyboard-nav: 'visible focus on every interactive surface; tab order matches visual flow' prose-line-length: 'capped at 720px (~70 characters) for editorial readability' dark-mode: 'dark-native — the warm near-black canvas IS the brand; no light variant' --- ## 1. Visual Theme & Atmosphere Harvey makes AI software for legal and professional services, and the marketing site is calibrated to one job: convincing partners at white-shoe firms that this tool belongs in their world. So it abandons the entire consumer-AI playbook. There is no purple gradient, no electric-blue glow, no chrome-on-black product render. Instead you land on a **warm near-black canvas `#0f0e0d`** — a black with a trace of brown in it, the colour of dark walnut or a leather-bound brief rather than a terminal — and the first thing that resolves is a headline set in a **custom serif** (`HarveySerifFont`) at 72px, weight 400. A serif headline on a warm-dark ground reads as *counsel*, not *startup*. That single pairing carries the whole brand. The system is, in the most literal sense, **monochrome warm**. There is exactly one accent: ivory `#fafaf9`. It is the colour of the headlines, the colour of the "Request a Demo" button, and the colour of every high-emphasis label. Body copy steps up to pure white `#ffffff` for maximum legibility; everything quieter descends through low-alpha white. No second hue is ever introduced — not a brand blue, not a success green sitting loudly in a toast. The discipline is the point: a firm that bills by the hour does not want a vendor whose website looks like a video game. The restraint signals seriousness. Type does the work that colour does on other sites. The **serif/sans split** is the load-bearing decision: `HarveySerifFont` for display and editorial moments (headlines, pull-quotes, the occasional oversized stat), `HarveySansFont` for everything functional (body, navigation, buttons, labels). The serif supplies the gravitas and the institutional register; the sans keeps the interface crisp and contemporary so the brand never tips into "old law firm with a Times New Roman PDF." It is the same move Anthropic makes with cream-and-serif, transposed into dark mode and stripped of the earth-tone palette — Harvey keeps only the elegance. Corners are **sharp**. The CTA radius is a tight 4px; cards and inputs sit at 4–8px. Nothing is pill-shaped, nothing is playfully rounded. The geometry is square-shouldered and precise, the visual equivalent of a well-set legal document. Elevation comes from near-black shadows and faint warm lifts (`#1a1918` cards on the `#0f0e0d` ground), not from glow or colour — depth is rendered the way a darkened room renders depth, in subtractive shades of the same warm black. Atmospheric vocabulary that captures the feeling: *counsel-grade, warm-dark, leather-and-ivory, serif-gravitas, monochrome-restrained, white-shoe, broadsheet-in-dark-mode, precise, credible, hushed, premium-professional.* Every surface reads as if it were prepared for a managing partner. **Key Characteristics** - Warm near-black canvas `#0f0e0d` — a black with brown in it, never pure `#000` - Custom serif display (`HarveySerifFont`) at 72px / weight 400 — the gravitas signal - Custom sans body (`HarveySansFont`) — crisp, contemporary, functional - Strictly **monochrome warm**: ivory `#fafaf9` is the only accent - Ivory CTA fill (warm-dark label) — the "Request a Demo" button - Pure white `#ffffff` body for maximum legibility on dark - Sharp 4px corners — square-shouldered, document-precise geometry - Value contrast over colour — depth via warm-black shades, not glow - Borders are ivory at low alpha, never a separate grey - Professional-services register: credible, restrained, premium ## 2. Color Palette & Roles ### Canvas / Primary - **bg** `#0f0e0d` — the warm near-black ground; the defining surface. Never substitute pure `#000000` (it would go cold and lose the leather warmth). - **text** `#ffffff` — pure white body copy; the maximum-legibility default on dark. - **brand** `#fafaf9` — ivory; the single accent. Headlines, CTA fill, high-emphasis labels. - **on-brand** `#0f0e0d` — the warm-dark label that sits on the ivory CTA. ### Surface & Elevation - **surface** `#1a1918` — a faint warm lift above the canvas for cards and panels. - **surface-raised** `#242220` — second elevation tier for popovers, sheets, sticky bars. - **overlay-backdrop** `rgba(0, 0, 0, 0.6)` — the live `--controls-backdrop-color`; modal scrim / dim layer. ### Text Scale (warm-neutral, descending) - **text-strong** `#fafaf9` — ivory; headlines and the highest-emphasis display type. - **text** `#ffffff` — primary body copy. - **text-secondary** `rgba(255,255,255,0.72)` — supporting copy, deck/lede paragraphs. - **text-muted** `rgba(255,255,255,0.56)` — captions, metadata, footer microcopy. - **text-faint** `rgba(255,255,255,0.40)` — disabled labels, placeholder, watermark. ### Interactive - **link** `#fafaf9` — ivory links on the dark ground. - **link-hover** `#ffffff` — brighten to pure white on hover. - **selected-bg** `rgba(250,250,249,0.08)` — hovered / selected row or menu-item tint. - **disabled** `rgba(255,255,255,0.32)` — inert control text. ### Borders (ivory at low alpha — never a separate grey) - **border** `rgba(255,255,255,0.12)` — default hairline on dark. - **border-strong** `rgba(255,255,255,0.24)` — emphasized rule; outlined-button border. - **border-subtle** `rgba(255,255,255,0.06)` — quietest division between same-tone surfaces. ### Shadow Colors Harvey's shadows are **pure-black, not tinted** — on a warm-dark page the most natural depth cue is a deeper black, so shadows run `rgba(0,0,0,0.40)` to `rgba(0,0,0,0.70)`. They appear only on lifted surfaces (popovers, modals, sticky nav); flat sections rely on the faint surface lift (`#1a1918` on `#0f0e0d`) plus a hairline border for separation. No coloured or glow shadows — colour glow would break the monochrome discipline instantly. ### Semantic The brand protects its monochrome register even in status colours — semantics are **desaturated and warm**, never the loud Material ladder. - **success** — bg `rgba(122,158,122,0.14)`, text `#a9c9a9` (muted sage). - **warning** — bg `rgba(201,169,110,0.14)`, text `#d8be93` (muted gold). - **danger** — bg `rgba(196,110,110,0.14)`, text `#e0a3a3` (muted clay-red). - **info** — bg `rgba(255,255,255,0.08)`, text `#fafaf9` (just ivory on a tint — the most on-brand choice). Note the deliberate restraint: the safest "status" colour in this system is no colour at all — an ivory label on a faint white tint. Reach for the muted hues only when meaning *requires* differentiation. ## 3. Typography Rules ### Font Family - **Display & Editorial**: `"HarveySerifFont", "Tiempos Headline", "Canela", Georgia, serif` — a custom transitional/Didone-adjacent serif used at weight 400–500. **This is the brand's signature** — the gravitas of a legal broadsheet rendered in dark mode. - **Body & UI**: `"HarveySansFont", "Söhne", "Inter", system-ui, sans-serif` — a custom grotesque-humanist sans for body copy, navigation, buttons, and labels. Crisp and contemporary; keeps the interface from feeling antique. - **Mono**: `ui-monospace, "SF Mono", "Söhne Mono", Menlo, monospace` — for code, tabular data, and citation references. - **OpenType features**: `liga` and `kern` always on; `tnum` and `zero` in mono for aligned figures and slashed zero. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |---|---|---|---|---|---|---| | Display Hero | HarveySerifFont | 96px | 400 | 1.00 | -0.02em | Oversized landing statement | | Display Large | HarveySerifFont | 72px | 400 | 1.04 | -0.018em | Section opener at scale | | H1 | HarveySerifFont | 72px | 400 | 1.05 | -0.018em | Page / hero title (live-probed) | | H2 | HarveySerifFont | 48px | 400 | 1.10 | -0.012em | Major section heading | | H3 | HarveySerifFont | 32px | 500 | 1.20 | -0.008em | Sub-section heading | | H4 | HarveySerifFont | 24px | 500 | 1.30 | -0.004em | Card / block heading | | Eyebrow | HarveySansFont | 13px | 500 | 1.40 | 0.08em uppercase | Section pre-label | | Body Large | HarveySansFont | 18px | 400 | 1.60 | 0 | Lede / deck paragraph | | Body | HarveySansFont | 16px | 400 | 1.60 | 0 | Default body (live-probed) | | Body Small | HarveySansFont | 14px | 400 | 1.55 | 0 | Captions, sidebars, footnotes | | Label | HarveySansFont | 13px | 500 | 1.40 | 0 | UI labels, form labels | | Caption | HarveySansFont | 12px | 500 | 1.40 | 0.02em | Metadata, image captions | | Pull Quote | HarveySerifFont | 28px | 400 | 1.30 | -0.01em italic | Testimonial / editorial quote | | Button | HarveySansFont | 15px | 500 | 1.0 | 0 | All button labels | | Nav Link | HarveySansFont | 15px | 500 | 1.0 | 0 | Top-nav items | | Code | Mono | 14px | 400 | 1.55 | 0 | Inline + block code | ### Principles - **Serif display, sans body — non-negotiable.** The serif headline on warm-dark is the entire brand signal. Setting headlines in the sans collapses Harvey into generic dark-mode SaaS. - **Display weight stays light (400).** Harvey's serif headlines are set at *weight 400*, not bold — the elegance comes from the letterforms and size, not from heft. Resist the instinct to bold a 72px headline. - **Negative tracking scales with size.** -0.02em at 96px, -0.018em at 72px, easing to ~0 by 24px. Compression at large sizes reads as confident, masthead-grade typesetting. - **Sans carries all chrome.** Navigation, buttons, labels, eyebrows, form fields, captions — all `HarveySansFont`. Only headlines, pull-quotes, and oversized editorial stats use the serif. - **Body line-height is generous (1.6).** Professional-services copy is dense and consequential; 1.6 leading keeps long paragraphs readable on the dark ground. - **Ivory for headlines, white for body.** The two-step value system (`#fafaf9` display / `#ffffff` body) is subtle but deliberate — ivory headlines feel warmer and more editorial; pure-white body maximises legibility. - **Italics live in the serif only.** Pull-quotes and gentle emphasis use serif italic; the sans never italicises in display. - **Uppercase eyebrows with wide tracking.** 13px / 500 / 0.08em uppercase eyebrows label sections — the one place tracking goes positive. ## 4. Component Stylings ### Buttons **Primary (Ivory)** - Background: `#fafaf9` ivory. Text: `#0f0e0d` warm-dark, HarveySansFont 500 / 15px. - Padding: `10px 18px`. Radius: `4px`. No border. - Hover: bg → `#ffffff` (brighten to pure white). Active: bg → `#ebebe9`. - Use: the primary CTA — *Request a Demo, Get started, Contact sales.* The single ivory moment per viewport. **Secondary (Outlined)** - Background: transparent. Text: `#fafaf9` ivory. Border: `1px solid rgba(255,255,255,0.24)`. - Same padding / radius / font as primary. - Hover: bg → `rgba(255,255,255,0.08)`; border may brighten to 0.36 alpha. - Use: twin to primary — *Read the case study, Watch the overview.* **Ghost (Text)** - Background: transparent. Text: `rgba(255,255,255,0.72)`. No border. - Padding: `10px 14px`. Radius: `4px`. - Hover: text → `#fafaf9` ivory. - Use: quietest action — nav links, repeated/footer CTAs, "Learn more." **Disabled** - Background: `rgba(255,255,255,0.08)`. Text: `rgba(255,255,255,0.32)`. Radius: `4px`. No border, no hover. - Use: inert state for any of the above. ### Cards **Feature / Case-Study Card** - Background: `#1a1918` (faint warm lift). Border: `1px solid rgba(255,255,255,0.12)`. Radius: `8px`. Padding: `24px`. - Shadow: none at rest — the surface lift plus hairline does the separation. - Hover: border → `rgba(255,255,255,0.24)`; optional `standard` shadow on interactive cards. Transition `240ms ease-standard`. - Use: capability tile, customer logo panel, resource/blog index entry. **Quote Card** - Background: `#1a1918`. Border: `1px solid rgba(255,255,255,0.12)`. Radius: `8px`. Padding: `32px`. - Quote in HarveySerifFont 28px / 400 / italic, ivory; attribution in HarveySansFont 14px muted. - Use: testimonial from a firm or partner. ### Badges, Tags, Pills **Standard Badge** — bg `rgba(255,255,255,0.08)`, text `#fafaf9` ivory, radius `4px`, padding `4px 10px`, HarveySansFont 500 / 12px / 0.02em tracking. Category labels, "New," section markers. **Outline Badge** — transparent bg, text `rgba(255,255,255,0.72)`, border `1px solid rgba(255,255,255,0.16)`, radius `4px`. Quieter alternative. **Status Badge** — uses the desaturated semantic tints (sage / gold / clay-red) with matching low-alpha background; radius `4px`. Reserve for genuine status, not decoration. ### Inputs / Forms - Background: `rgba(255,255,255,0.04)` (just barely lifted off canvas). Border: `1px solid rgba(255,255,255,0.16)`. Radius: `4px`. Padding: `10px 14px`. - Font: HarveySansFont 400 / 15px. Placeholder: `rgba(255,255,255,0.40)`. - Focus: `0 0 0 2px rgba(250,250,249,0.40)` ivory ring; border brightens to `rgba(255,255,255,0.32)`. - Error: border → `#e0a3a3`, ring → `rgba(196,110,110,0.30)`; helper text in danger-text. - Label: HarveySansFont 13px / 500 ivory above field; helper caption 12px muted below. ### Navigation - Header height `64px`. Background `#0f0e0d` (transparent over hero, solid on scroll with a `border-subtle` bottom rule). - Logo: Harvey wordmark in ivory. - Nav links: HarveySansFont 500 / 15px, colour `rgba(255,255,255,0.72)`, padding `8px 12px`. Hover → `#fafaf9` ivory. - Right side: a ghost "Log in" / "Sign in" + the primary ivory "Request a Demo" CTA. - Mobile: right-aligned hamburger → full-screen sheet; links stack at 18–20px / 500, CTA pinned at the bottom. ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 — a clean 4px-based ladder. - **Density observation**: Harvey is calm but not as airy as a print-magazine brand — it reads as a *confident enterprise* page. Headlines get room (96–128px above/below) but content blocks sit at a businesslike density appropriate for dense, consequential copy. ### Grid & Container - **Page max width**: `1280px` — a standard, no-nonsense container width that reads as enterprise rather than editorial-eccentric. - **Site gutter**: `clamp(24px, 5vw, 64px)`. - **Grid**: 12 columns with 24px gutters. Hero spans full width; capability rails span 8; sidebars span 4. - **Hero treatment**: full-bleed warm-dark, 72–96px serif headline, body confined to a ~720px column anchored left. ### Whitespace Philosophy Whitespace on a dark canvas reads as *gravitas* — the more black around a serif headline, the more weight it carries. Harvey uses generous **96–160px section gutters** between major blocks and lets hero headlines float in surrounding dark, but keeps interior content (feature grids, customer logos, copy blocks) at a practical density. The negative space is warm-dark, so it never feels empty — it feels composed. ### Section Cadence - Hero (warm-dark, serif headline + ivory CTA) → Trust strip (customer / firm logos in muted ivory) → Capability rail (card grid on canvas) → Editorial / outcomes section (720px serif-headed copy) → Testimonial card → CTA band → Footer. - Sections separate by spacing alone or by a single `border-subtle` hairline; consecutive dark sections may alternate canvas `#0f0e0d` ↔ surface `#1a1918` for quiet rhythm. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | Micro | 2px | Slim chip corners, decorative dividers | | Standard (sm) | 4px | **The signature** — buttons, inputs, badges, the CTA | | Comfortable (md) | 8px | Cards, panels, dropdowns | | Relaxed (lg) | 12px | Modals, larger callout boxes | | Featured (xl) | 16px | Oversized feature panels, image frames | | Pill | 9999px | Avoided — used at most for rare circular avatars | Harvey's defining radius is the **sharp 4px** on the CTA and form controls, with cards stepping up only to 8px. The system reads square-shouldered and precise. There are effectively no pill shapes — rounding everything would soften the professional-services register the brand depends on. Compound / per-corner radii are not used. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow, on `#0f0e0d` | Default page surface, hero, body sections | | 1 | Surface lift `#1a1918` + 1px hairline | Cards, panels, capability tiles | | 2 | `rgba(0,0,0,0.40) 0 1px 2px` | Sticky nav on scroll | | 3 | `rgba(0,0,0,0.50) 0 6px 20px -6px` | Hover-lifted cards, dropdowns | | 4 | `rgba(0,0,0,0.60) 0 18px 48px -12px` | Popovers, menus, sheets | | 5 | `rgba(0,0,0,0.70) 0 32px 80px -20px` + `rgba(0,0,0,0.6)` backdrop | Modals, dialogs | ### Shadow Philosophy On a warm near-black canvas, the most honest depth cue is a **deeper black** — so Harvey's shadows are pure-black at increasing opacity rather than tinted or glowing. Most elevation, however, is achieved *without* shadow at all: a faint surface lift (`#1a1918`) plus a `rgba(255,255,255,0.12)` hairline reads as "raised" because the eye perceives the edge and the slightly lighter face. Shadows are reserved for true overlays (popovers, modals), where the `rgba(0,0,0,0.6)` backdrop dims the page behind. The brand never uses coloured glow — a blue or purple halo would shatter the monochrome discipline. ## 8. Interaction & Motion ### Easing Curves - `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, colour transitions. - `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier; used on modal enter and hero reveal. ### Duration Buckets - **Fast (150ms)** — colour transitions, focus rings, link/nav hovers. - **Standard (240ms)** — button hover, card hover, dropdown reveal. - **Slow (320ms)** — modal enter/exit, section fade-in on scroll. ### Per-Component Micro-States - **Button (primary) hover**: ivory `#fafaf9` → pure white `#ffffff`, 150ms. No lift, no scale — value shift only. - **Button (secondary/ghost) hover**: background fades in to `rgba(255,255,255,0.08)`; text brightens to ivory. - **Card hover**: border `0.12` → `0.24` alpha over 240ms; interactive cards may add the `standard` shadow. - **Link hover**: `rgba(255,255,255,0.72)` → `#fafaf9` over 150ms. - **Input focus**: 2px ivory ring at 40% alpha fades in over 150ms; border brightens. - **Nav link active**: subtle ivory underline or full-opacity ivory text. ### Page Transitions Hero text fades in over 320ms with a small (~16px) translate-up; below-fold sections use `IntersectionObserver` to fade in near 85% viewport at 320ms, opacity-led with minimal translate. The motion register is *settled and quiet* — no bounce, no parallax theatrics. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved; translate animations disabled; scroll-linked reveals snap to final state. ## 9. Accessibility & A11y ### Contrast Pairs (computed from live tokens) - **`#ffffff` text on `#0f0e0d` bg**: ≈19.3:1 — AAA at all sizes (the body default). - **`#fafaf9` ivory on `#0f0e0d` bg**: ≈18.6:1 — AAA (headlines, links). - **`#0f0e0d` on `#fafaf9` brand (CTA)**: ≈18.6:1 — AAA (warm-dark label on ivory button). - **`rgba(255,255,255,0.72)` secondary on `#0f0e0d`**: ≈11.4:1 — AAA (supporting copy). - **`rgba(255,255,255,0.56)` muted on `#0f0e0d`**: ≈7.6:1 — AAA at body sizes (captions). - **`rgba(255,255,255,0.40)` faint on `#0f0e0d`**: ≈4.4:1 — AA at large sizes / disabled only; do not use for essential body text. The warm-dark + ivory pairing is a contrast windfall: nearly every important type pair clears AAA, so the only care needed is keeping low-alpha whites off small essential text. ### Focus Indicators - Default focus ring: `0 0 0 2px rgba(250,250,249,0.40)` ivory ring with 2px offset. - Every interactive surface keeps a visible focus state — no `outline: none` without an ivory-ring replacement. ### ARIA Patterns - **Navigation**: `