---
version: alpha
name: "Exa"
website: "https://exa.ai"
description: >-
  A search-API platform for AI agents whose marketing surface pairs a tiny editorial
  Arizona-serif display with a dev-tool aesthetic: the hero h1 sits at 76.8px in
  weight 300 ("Imagine a world with perfect search") in the Arizona Light serif over
  a near-white canvas, and beneath the fold the page commits to dark editorial bands
  — near-black panels carrying Arizona display in pure white over screenshots of the
  Exa dashboard, query results, and dev-platform diagrams. Body type runs ABCDiatype
  (a contemporary geometric sans), and Geist Mono carries every code annotation and
  API-result count. The chromatic system is restrained — pure white, two layered
  near-blacks, a single electric blue voltage (#1f40ed) wired through CSS as
  --brand-default and --accent-background, and a small set of greige neutrals for
  card surfaces. The shape language is tight — a 2px workhorse radius with a 4px
  secondary, never a soft 12-16px corner.

seo:
  title: "Exa Design System for React — Arizona serif over near-black, ABCDiatype + Geist Mono, 17 components"
  metaDescription: "Exa's AI-search-API marketing system as a DESIGN.md file. Arizona-serif display weight 300, electric-blue brand voltage, dark editorial bands, ABCDiatype body, Geist Mono metadata, tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Editorial serif display — Arizona serif at 76.8px in weight 300 carries the hero h1, where most dev-API brands lean on a heavy sans hero; the lightness reads as quiet confidence"
    - "Two-canvas rhythm — a near-white above-fold transitions into a near-black editorial band carrying dashboard screenshots, then back to white for the feature grid"
    - "Electric blue voltage held scarce — `#1f40ed` wired as `--brand-default`, `--accent-background`, `--accent`, `--text-light-link`, with just 8 captured occurrences across the page"
    - "Three typeface voices — Arizona serif for display, ABCDiatype sans for body and label, Geist Mono for metadata and code"
    - "Tight 2px workhorse radius — the dominant border-radius is 2px (58 occurrences), a 4px secondary (23 occurrences) and only 3 pill instances; the system never reaches a soft 12-16px corner"
  tags:
    - "AI & LLM Platforms"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Exa's marketing page does something almost no AI-developer-tool brand attempts:
    the hero h1 is a 76.8px Arizona serif at weight 300, sitting over a near-white
    canvas with a small "The best search API for AI" tagline beneath, a centered
    search-bar mockup, and two muted greige CTAs. Where Linear leans on Inter at
    weight 500 and Vercel sits at Geist at weight 500-600 with a matte-black hero,
    Exa picks an editorial Arizona-serif treatment more typical of magazine longform
    or a literary-product brand than a search-API marketing site. Below the fold the
    page commits to its other signature — dark editorial bands carrying dashboard
    screenshots, query result panels, and dev-platform diagrams in near-black, with
    Arizona display in pure white floating over the imagery.

    The DESIGN.md file packages the system into a machine-readable spec for React
    tooling. Inside: 14 color tokens drawn from Exa's deep set of CSS custom
    properties (--brand-default, --accent-background, --text-light-default,
    --gray-*, --greige-*, --cream, --gold) — a single electric blue voltage (#1f40ed)
    with just 8 captured occurrences, a near-white canvas, two layered near-blacks
    for the editorial bands, and a set of greige neutrals for card surfaces. 13
    typography tokens cover three voices: Arizona serif at weights 300-400 across
    display tiers (76.8 / 41.6 / 23.8 / 20.8px), ABCDiatype sans at weights 400-600
    for body and label work, and Geist Mono at 12px / weight 400 for code and
    metadata annotation. 5 radius tokens center on a 2px workhorse and a 4px
    secondary — the system explicitly skips the soft 12-16px tier. 17 component
    tokens cover the muted-greige primary CTA, the dark editorial band, the white
    feature card with logo strip, the Geist Mono performance-stat row, and the
    search-bar mockup.

    Feed this file to an AI coding tool and it reproduces Exa's specific moves: the
    editorial Arizona-serif display in weight 300 instead of a heavy sans h1, the
    dark editorial band carrying product screenshots rather than the standard white
    feature-grid scroll, the scarce electric-blue voltage wired through five CSS
    var families, and the three-voice typeface split where Geist Mono handles
    every metadata and performance-stat row. The one move worth borrowing only if
    your product genuinely earns it: the Arizona-serif weight-300 hero only reads
    as quiet confidence on a brand that has a research-paper-shaped artifact
    behind it — for most consumer AI it would feel mannered.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://exa.ai"
      title: "Exa — official site"
      description: "Exa's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Exa's primary brand color?"
      answer: "Exa's brand voltage is electric blue #1f40ed, wired through Exa's CSS as `--brand-default`, `--accent-background`, `--accent`, `--text-light-link`, and `--light-shojin-blue`. It appears just 8 times across the captured page — 5 as text, 2 as shadow, 1 as gradient, 0 as background fill. The scarcity is the move: the brand voltage carries inline-link text and the rare emphasis chip, but never fills a primary CTA. Where Linear's brand violet sits in `--color-brand-bg` at exactly 2 occurrences and Vercel's brand black covers the entire above-fold, Exa keeps its electric blue scoped to inline link text and small emphasis moments only."
    - id: "primary-cta"
      title: "If the brand color is electric blue, what color is Exa's primary CTA?"
      answer: "The captured primary CTA renders as a muted greige (#f2f0ef fill with #514837 text), at 33px height, 6×12px padding, 4px radius. This is not the brand voltage — it's a deliberately quiet button that lets the editorial-serif display tier carry the page's tonal energy. Exa runs a second tier of primary-button treatment elsewhere on the page (the 'Try Exa' search-bar CTA inside the hero search-mockup) which uses the electric blue, but the persistent above-the-fold 'Contact sales' CTA stays in greige. The pattern is: brand voltage where intent is loud, greige where the CTA is structural."
    - id: "typography"
      title: "What typefaces does Exa use, and what should I use as substitutes?"
      answer: "Exa runs three voices. Arizona (an Adelle-derived serif) carries the display tier — hero h1 at 76.8px / 300, section h2 at 41.6px / 400, h6 at 20.8-23.8px / 300-400. ABCDiatype (a contemporary geometric sans) carries body and label at weights 400-600 across 12-19.2px. Geist Mono carries every metadata count and performance-stat row at 12px / weight 400 with -0.24px tracking. The serif-plus-mono pairing is the typographic signature. Open-source substitutes: Domaine Display or PolySans Slim for Arizona at the display tier, Inter or Geist Sans for ABCDiatype, and JetBrains Mono or IBM Plex Mono for Geist Mono."
    - id: "dark-band"
      title: "Why does Exa run a dark editorial band below the fold?"
      answer: "Below the fold, the page transitions from the near-white above-fold into a near-black editorial band (`#181815` floor) that carries product screenshots — the Exa dashboard, query result panels, and dev-platform diagrams. The band lets the imagery (which is dark-canvas product chrome) read as continuous with the page rather than as boxed-in screenshots floating on a white floor. The band sits at ~700px tall, includes an h2 ('Highest performance across every use case') in Arizona serif weight 400 / 41.6px in pure white, and returns to white below. The two-canvas rhythm (white / dark / white) is the page's structural device — most dev-tool marketing pages either commit to one canvas or alternate band-by-band; Exa uses the dark band to anchor the product-screenshot moment and white everywhere else."
    - id: "radius-philosophy"
      title: "What is Exa's corner-radius philosophy?"
      answer: "The radius scale is tight-only. 2px is the dominant value (58 occurrences across the page — used on the text input, small chips, and most cards), 4px is the secondary (23 occurrences — used on the primary CTA and slightly-larger surfaces), 6px appears 10 times on icon buttons, and 9999px appears just 3 times on small round badges. There is no 8px, 12px, 16px, or 24px tier on the captured surface. The tightness is deliberate — every interactive surface reads as a developer-tool UI control rather than as decorative chrome, which preserves the editorial-display contrast: the serif hero gets to be the soft moment, the UI stays tight and structural."

mockups:
  - "marketing-hero"
  - "code-editor-ide"

colors:
  primary: "#1f40ed"
  brand-dark: "#0d2189"
  brand-darker: "#000a40"
  ink: "#111827"
  ink-body: "#444444"
  ink-muted: "#787572"
  greige: "#58544e"
  greige-warm: "#675e56"
  canvas: "#ffffff"
  surface-cream: "#f5f3ef"
  surface-greige: "#e5e7eb"
  surface-dark: "#181815"
  ink-deep: "#000000"
  gold: "#89661a"

typography:
  display-xl:
    fontFamily: "Arizona, Georgia, serif"
    fontSize: 76.8px
    fontWeight: 300
    lineHeight: 76.8px
    letterSpacing: "-2.304px"
  display-md:
    fontFamily: "Arizona, Georgia, serif"
    fontSize: 41.6px
    fontWeight: 400
    lineHeight: 45.76px
    letterSpacing: "-1.248px"
  heading-sm:
    fontFamily: "Arizona, Georgia, serif"
    fontSize: 23.8px
    fontWeight: 400
    lineHeight: 23.8px
    letterSpacing: "-0.714px"
  heading-xs:
    fontFamily: "Arizona, Georgia, serif"
    fontSize: 20.8px
    fontWeight: 300
    lineHeight: 20.8px
    letterSpacing: "-0.32px"
  body-lg:
    fontFamily: "ABCDiatype, \"Trebuchet MS\", sans-serif"
    fontSize: 19.2px
    fontWeight: 500
    lineHeight: 28.8px
    letterSpacing: "-0.32px"
  body-md:
    fontFamily: "ABCDiatype, \"Trebuchet MS\", sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 24.65px
    letterSpacing: "-0.34px"
  body-sm:
    fontFamily: "ABCDiatype, \"Trebuchet MS\", sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: "-0.3px"
  body-xs:
    fontFamily: "ABCDiatype, \"Trebuchet MS\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "ABCDiatype, \"Trebuchet MS\", sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "SuisseIntl, ABCDiatype, \"Trebuchet MS\", sans-serif"
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: 0
  button-md:
    fontFamily: "Inter, \"Inter Fallback\", Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 21px
    letterSpacing: 0
  mono-sm:
    fontFamily: "GeistMono, \"Geist Mono\", monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: "-0.24px"
  mono-bold:
    fontFamily: "GeistMono, monospace"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "6px"
  lg: "8px"
  full: "9999px"

spacing:
  xs: "2px"
  sm: "4px"
  base: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "40px"
  4xl: "64px"

components:
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "64px 24px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  hero-heading-dark:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-sm}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  body-paragraph-greige:
    backgroundColor: "transparent"
    textColor: "{colors.greige-warm}"
    typography: "{typography.body-sm}"
  button-primary:
    backgroundColor: "{colors.surface-greige}"
    textColor: "{colors.greige-warm}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "6px 12px"
    height: "33px"
  button-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "6px 12px"
    height: "33px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "6px 12px"
    height: "33px"
    borderColor: "{colors.surface-greige}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 32px"
    height: "55px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-body}"
    typography: "{typography.nav-link}"
    padding: "0px 16px"
  dark-band:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: "64px 32px"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "32px"
    borderColor: "{colors.surface-greige}"
  feature-card-blog:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "24px"
  mono-stat:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.mono-sm}"
    padding: "0px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "12px 16px"
    height: "40px"
    borderColor: "{colors.surface-greige}"
---

## Overview

Exa's marketing surface inverts the dev-API marketing convention. **Editorial serif voltage.** Where Vercel runs Geist sans at 500-600 weight, Linear sits at Inter at 500, and Cursor leans on a SF-Mono-adjacent display, Exa picks an Arizona-serif treatment at weight 300 for its hero h1 ("Imagine a world with perfect search") — a soft, literary moment that reads more like a magazine longform feature than a search-API marketing page. The serif sits at 76.8px / 300 with -2.304px tracking; the lightness is doing the work that a heavier sans would do, and the editorial signal positions Exa as a research-and-relevance product rather than as a fast-and-cheap infra play.

Below the fold the page commits to its other signature — **two-canvas rhythm**. The near-white above-fold transitions into a near-black editorial band (`{colors.surface-dark}` — #181815) that carries dashboard screenshots, query-result panels, and dev-platform diagrams; the band runs ~700px tall, holds a section h2 in Arizona serif weight 400 / 41.6px in pure white, and returns to white below for the feature card grid. Where Stripe runs a continuous mesh gradient and Bun stays on cream from end to end, Exa uses the dark band to anchor the product-screenshot moment and white everywhere else — the canvas itself does structural work the standard band-by-band feature stack would not.

The chromatic discipline is severe. Outside of pure white, near-black ink (`{colors.ink}` — #111827), and a small set of greige neutrals, the system has exactly one brand color — electric blue (`{colors.primary}` — #1f40ed) wired through CSS as `--brand-default`, `--accent-background`, `--accent`, `--text-light-link`, and `--light-shojin-blue`. It appears just 8 times across the entire captured page, and none of those occurrences are a primary-CTA fill — the persistent "Contact sales" CTA renders as a muted greige (#f2f0ef on #514837 text). The brand voltage is reserved for inline link text and the secondary brand CTA only.

**Key Characteristics:**
- Arizona-serif display (`{typography.display-xl}` — 76.8px / 300) for the hero h1, with -2.304px tracking; weight 400 at 41.6px for section h2.
- Two-canvas rhythm — near-white above-fold, near-black editorial band beneath, white feature grid below.
- Single electric blue voltage (`{colors.primary}` — #1f40ed), 8 captured occurrences, wired through 5 CSS custom-property families.
- Three typeface voices: Arizona serif for display, ABCDiatype sans for body and label, Geist Mono for metadata and code.
- Muted greige primary CTA (`{colors.surface-greige}` on `{colors.greige-warm}` text) — not the brand voltage; the structural button stays quiet.
- Tight 2px workhorse radius — 58 captured occurrences. No 8 / 12 / 16 / 24px tier. The dev-tool corner discipline holds throughout.
- 4px secondary radius — 23 occurrences, used on the primary CTA and on slightly-larger surfaces.
- Geist Mono at 12px / 400 carries every performance-stat row, API-result count, and inline annotation — the technical voice.
- Hairline-only cards: `{colors.surface-greige}` (#e5e7eb) carries 632 of the 644 captured border occurrences across the page.

## Colors

### Brand

- **Electric Blue** (`{colors.primary}` — #1f40ed): frequency 8 (text 5, shadow 2, gradient 1). The single brand voltage — reserved for inline link text and the brand-CTA fill inside the hero search-bar mockup. Wired in CSS as `--brand-default`, `--accent-background`, `--accent`, `--text-light-link`, `--light-shojin-blue`. Never fills the persistent primary CTA; the brand voltage carries semantic emphasis only.
- **Brand Dark** (`{colors.brand-dark}` — #0d2189): declared as `--brand-dark`. Reserved for hover / pressed states on the brand CTA — not rendered on the captured surface.
- **Brand Darker** (`{colors.brand-darker}` — #000a40): declared as `--brand-darker`. Reserved for the dark-canvas variant of brand emphasis; not rendered on the captured surface.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 488 (text 450, background 30, border 6, gradient 2). The dominant page surface — used as the page floor above the fold and beneath the dark band, the feature-card fill, and the top-nav surface. Wired through 11 CSS variable names including `--white`, `--cream`, `--background`, `--secondary-default`, `--secondary-faint`.
- **Surface Cream** (`{colors.surface-cream}` — #f5f3ef): frequency 5 (background 5). A warm off-white used inside the blog-card feature surfaces. Wired as `--blog-cards-hover`.
- **Surface Greige** (`{colors.surface-greige}` — #e5e7eb): frequency 644 (border 632, background 12). The dominant border tone and the muted-greige primary-CTA fill. Wired through 10 CSS variables — `--paper-white`, `--gray-200`, `--secondary-darkest`, `--secondary-darker`, `--brand-fainter`, `--text-light-faint`, `--cream-darker`.
- **Surface Dark** (`{colors.surface-dark}` — #181815): frequency 2 (background 2). The dark editorial-band floor — used as the surface for the "Highest performance across every use case" section that carries the dashboard screenshots. Wired as `--gray-900`, `--thamar-black`.
- **Ink Deep** (`{colors.ink-deep}` — #000000): frequency 52 (text 24, background 8, border 7, shadow 13). Pure black — used as the small product-screenshot card fill inside the dark band and as the shadow-ink tone across the system. Wired as `--black`.

### Text

- **Ink** (`{colors.ink}` — #111827): frequency 16 (text 16). The dominant display-text color on the white canvas. Wired as `--text-light-default`. A deep blue-charcoal — slightly warmer than pure black, sits in the same blue-hue family as the electric-blue brand voltage.
- **Ink Body** (`{colors.ink-body}` — #444444): frequency 14 (text 14). The default body-text and nav-link color. Wired as `--gray-700`.
- **Ink Muted** (`{colors.ink-muted}` — #787572): frequency 28 (text 27, background 1). Secondary running-text and caption color. Wired as `--text-light-muted`, `--lucky-grey`, `--greige-light`, `--gray-500`.
- **Greige** (`{colors.greige}` — #58544e): frequency 6 (text 6). A warmer secondary-text tone used inside feature-card body. Wired as `--greige`.
- **Greige Warm** (`{colors.greige-warm}` — #675e56): frequency 23 (text 23). The primary-CTA text color and warm body-text variant — gives the muted-greige CTA its visual identity.
- **Gold** (`{colors.gold}` — #89661a): frequency 24 (shadow 24). Used only as shadow ink — gives card shadows a slight warm cast on the white canvas. Wired as `--gold`.

## Typography

### Font Families

The system runs three voices: **Arizona** (a serif in the Adelle / Domaine family) for the display tier (76.8 / 41.6 / 23.8 / 20.8px at weights 300-400), **ABCDiatype** (a contemporary geometric sans by Dinamo) for body, label, blockquote, and small heading work (12-19.2px at weights 400-600), and **GeistMono** for every metadata, code annotation, and performance-stat row (12px at weights 400-600). Fallback for Arizona walks to `Georgia, serif`; ABCDiatype walks to `"Trebuchet MS", sans-serif`; GeistMono walks to `monospace`.

The pairing is the typographic signature. Serif display + sans body + mono metadata is closer to a print-magazine or a documentation site (Stripe Docs, MDN) than to a typical dev-API marketing page where the entire system would lean on a single sans.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 76.8px | 300 | 76.8px | -2.304px | Hero h1 ("Imagine a world with perfect search") |
| `{typography.display-md}` | 41.6px | 400 | 45.76px | -1.248px | Dark-band h2 ("Highest performance across every use case"), section h2 |
| `{typography.heading-sm}` | 23.8px | 400 | 23.8px | -0.714px | h6 / sub-heading inside feature cards |
| `{typography.heading-xs}` | 20.8px | 300 | 20.8px | -0.32px | h6 / small section title |
| `{typography.body-lg}` | 19.2px | 500 | 28.8px | -0.32px | Blockquote text inside testimonial section |
| `{typography.body-md}` | 17px | 400 | 24.65px | -0.34px | Default paragraph body |
| `{typography.body-sm}` | 15px | 400 | 21px | -0.3px | Sub-paragraph beneath display |
| `{typography.body-xs}` | 14px | 400 | 20px | 0 | Caption rows, footer text |
| `{typography.label-md}` | 16px | 600 | 24px | 0 | Section labels and sidebar items |
| `{typography.nav-link}` | 12.8px | 400 | 19.2px | 0 | Top-nav link labels (note: Suisse Intl declared first in stack) |
| `{typography.button-md}` | 14px | 500 | 21px | 0 | Primary and secondary button labels |
| `{typography.mono-sm}` | 12px | 400 | 16.8px | -0.24px | Geist Mono metadata, performance-stat rows, API-result counts |
| `{typography.mono-bold}` | 12px | 600 | 16px | 0 | Bold mono variant for emphasis inside stat rows |

### Principles

The display tier drops weight as size grows — the 76.8px hero sits at weight 300, the 41.6px section h2 at weight 400, the 23.8px sub-heading at 400, and the 20.8px small heading at 300. The lightest weights are reserved for the loudest sizes, which gives the editorial-serif treatment its airy character. Body sits at 400 / 500 with consistent negative tracking (-0.3 to -0.34px) across sizes; the negative tracking is a single typographic decision applied uniformly.

Geist Mono carries every metadata duty. There is no small-caps tracked-sans label tier in the system — small-caps work belongs entirely to GeistMono at 12px / 400, with bold variants at 12px / 600 for emphasis. The result reads quietly technical: the serif speaks, the sans handles structure, the mono annotates.

### Note on Font Substitutes

Arizona is a licensed Klim or Adelle-family serif. Open-source substitutes: **PolySans Slim Display**, **Domaine Display Light**, or **GT Sectra Display** at the same weights for the display tier. For ABCDiatype, **Geist Sans** or **Inter** at the same weights transfer cleanly. For GeistMono — Geist Mono is open-source, free to use; **JetBrains Mono** or **IBM Plex Mono** are equivalent substitutes.

## Layout

### Spacing System

- **Base unit:** 4px (with 8px and 16px as the dominant modules).
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 40px · `{spacing.4xl}` 64px.
- **Section padding (vertical):** 64px between major sections; the dark editorial band sits at ~700px tall with 64px top / 32px horizontal padding.
- **Card internal padding:** 32px on feature cards, 24px on blog cards, 16px on small inline cards.
- **Top-nav padding:** 12px vertical, 32px horizontal — sits at 55px tall (plus an announcement-banner-height of 48px exposed in CSS but not rendered on capture).

### Grid & Container

- **Max content widths:** 1040px on the home page (`--home-page-container`), 1364px on blog (`--blog-container`), 1100px on pricing (`--pricing-page-container`), 1400px on websets (`--websets-container`).
- **Hero block:** centered display at ~1216px max-width, sub-paragraph centered beneath, search-bar mockup at ~720px max-width.
- **Dark editorial band:** centered h2 at ~360px max-width left, dashboard screenshot at right (2-column 50/50 split).
- **Feature-card sequence:** alternating left-image / right-text and right-image / left-text rows at ~1080px max-width.

### Rhythm

The page alternates between **near-white editorial** and **dark editorial band** — not band-by-band gradient shifts but a single dark anchor moment. The hero is generous; the dark band is dense (product screenshots, query results, performance metrics); the feature-card sequence below the band returns to white-canvas editorial. There is no atmospheric gradient between sections — each band terminates on either the white canvas or the dark band floor.

## Elevation

The system uses **gold-tinted shadow** on cards rather than pure-black drop shadows. The captured page shows 24 occurrences of `{colors.gold}` (#89661a) as shadow ink — giving cards a slight warm cast on the white canvas — plus 13 pure-black shadow occurrences for the dark-band-context cards. The dominant elevation device is the hairline border (`{colors.surface-greige}` — 632 occurrences) rather than a multi-tier shadow ladder.

- **Flat (no shadow):** hero, top-nav, body bands, feature cards on the white canvas — most surfaces.
- **Gold-tinted shadow:** small product cards and the search-bar mockup carry a low-opacity gold-cast shadow.
- **Pure-black shadow:** the dark-band cards (product screenshots, query-result panels) carry low-opacity pure-black shadow to read on the near-black floor.
- **Hairline outlines:** `{colors.surface-greige}` (#e5e7eb) marks every card outline, input edge, and feature-card divider.

## Shapes

The radius scale is **tight-only**, centered on 2px:

- `{rounded.none}` 0px — display headings, body paragraphs.
- `{rounded.xs}` 2px — the workhorse. Used on the text input, small chips, and the dominant card-corner radius. 58 occurrences across the page.
- `{rounded.sm}` 4px — used on the primary CTA and on slightly-larger surfaces. 23 occurrences.
- `{rounded.md}` 6px — used on icon buttons and select chips. 10 occurrences.
- `{rounded.lg}` 8px — declared as `--radius` and `--border-radius-8`. 2 occurrences on the captured surface.
- `{rounded.full}` 9999px — used on three small round badges and one logo-chip. 3 occurrences.

The system explicitly skips the 12 / 16 / 24px softer-corner tier. Even the largest feature cards sit at 2px — every interactive surface reads as a dev-tool UI control rather than as decorative chrome, and the contrast with the editorial-serif display is the move: the type is soft, the UI stays tight.

## Components

**`hero-section`** — Near-white `{colors.canvas}` fill, ink text, 64×24px padding, no radius. Holds the wordmark, the h1 at `{typography.display-xl}`, a short tagline, the centered search-bar mockup, and the muted-greige CTA pair.

**`hero-heading`** — Ink `{colors.ink}` (#111827) text on the canvas, Arizona serif 76.8px / 300, -2.304px tracking. The hero h1 — the soft display moment.

**`hero-heading-dark`** — Canvas-white text on the dark band, Arizona serif 41.6px / 400, -1.248px tracking. The dark-band h2 — "Highest performance across every use case."

**`section-heading`** — Ink text on the white canvas, same Arizona-serif 41.6px / 400. Used for section h2s on the white feature grid.

**`body-paragraph`** — Ink-body `{colors.ink-body}` (#444444) at `{typography.body-sm}` (15px / 400). The default running text in feature cards and inline copy.

**`body-paragraph-muted`** — Ink-muted `{colors.ink-muted}` (#787572) at `{typography.body-sm}`. Secondary running-text tone in caption rows.

**`body-paragraph-greige`** — Greige-warm `{colors.greige-warm}` (#675e56) at `{typography.body-sm}`. Warm body-text variant used inside the dark-band sidebar copy.

**`button-primary`** — The signature CTA. Greige `{colors.surface-greige}` (#e5e7eb) fill, greige-warm text, `{rounded.sm}` 4px radius, 6×12px padding, 33px height, weight 500. "Contact sales" is the canonical instance — deliberately quiet so the editorial-serif display carries the tonal energy.

**`button-brand`** — The brand-CTA variant. Electric-blue `{colors.primary}` (#1f40ed) fill, canvas-white text, 4px radius. Used inside the search-bar mockup as the "Try Exa" trigger and on any high-intent secondary CTA — the brand voltage when the action is loud.

**`button-secondary`** — Canvas fill, ink text, 1px greige border, 4px radius, 6×12px padding, 33px height. Used as the second CTA in the hero pair beside the primary.

**`top-nav`** — Canvas surface, ink-body text, 55px height, 12×32px padding, no bottom hairline. Hosts the Exa wordmark flush left, the product-nav links (Search API / Websets / Pricing / Docs / Blog / Customers / Careers) center, the Sign In / Contact sales cluster flush right.

**`nav-link`** — Ink-body text in `{typography.nav-link}` (12.8px / 400 — note: Suisse Intl declared first in the stack but ABCDiatype renders), 0×16px padding. No background fill in resting state.

**`dark-band`** — Surface-dark `{colors.surface-dark}` (#181815) fill, canvas-white text, 64×32px padding, no radius. The full-bleed editorial band anchoring the performance / dashboard section. The single dark canvas moment on the page.

**`feature-card`** — Canvas fill, ink text, 1px greige border, `{rounded.xs}` 2px radius, 32px padding. The default content card — holds feature illustrations, code snippets, and customer-logo strips. Hairline does the elevation work.

**`feature-card-blog`** — Cream `{colors.surface-cream}` (#f5f3ef) fill, ink text, 2px radius, 24px padding. The blog-style card variant used inside the blog rail beneath the main feature grid.

**`mono-stat`** — Transparent fill, ink text, `{typography.mono-sm}` (12px / 400 / -0.24px). The Geist Mono performance-stat row — appears beneath dashboard screenshots inside the dark band carrying API-result counts and latency metrics.

**`text-input`** — Canvas fill, ink text, 1px greige border, 2px radius, 12×16px padding, 40px height. The hero search-bar mockup uses this base treatment with the brand-CTA button flush right.

## Do's and Don'ts

**Do** keep the brand voltage scarce. The system uses `{colors.primary}` (#1f40ed) just 8 times across the entire captured page — and never as a primary-CTA fill. Multiplying the electric blue into multiple CTAs and inline accents dilutes the typographic signal that the brand voltage is for inline link text and high-intent secondary actions, not for structural buttons.

**Do** use the muted greige `{colors.surface-greige}` for the persistent primary CTA. The "Contact sales" button is deliberately quiet — that's how the editorial-serif hero gets to carry the tonal energy. Swapping the CTA fill to the electric blue tips the page into standard SaaS marketing and erases the literary signal.

**Do** keep display weight at 300-400 on the Arizona serif tier. The 76.8px / 300 hero h1 and the 41.6px / 400 section h2 carry the system's editorial voice; bumping to weight 500-600 on Arizona makes the serif read as declarative rather than airy and undercuts the literary positioning.

**Do** anchor the product-screenshot moment on the dark editorial band. The two-canvas rhythm (white above-fold, dark band, white feature grid) is the page's structural device — pushing the screenshots onto the white canvas removes the contrast that lets the dashboard chrome read as a coherent product surface.

**Don't** introduce an 8 / 12 / 16 / 24px corner radius on the captured surfaces. The system runs only five radii (0 / 2 / 4 / 6 / pill) with the 2px workhorse carrying 58 of the captured 100 corner occurrences. Adding a soft-rounded tier breaks the dev-tool discipline that pairs with the editorial-serif display.

**Don't** use the gold `{colors.gold}` (#89661a) for text or background fills — it is a shadow-only token (24 of 24 occurrences are shadows). Using it as a heading color or chip background creates a competing brand voltage that conflicts with the electric blue.

**Don't** swap the dark-band floor from `{colors.surface-dark}` (#181815) to pure black. The deliberate slight lift off pure black leaves headroom for the product screenshots (which themselves use near-black UI chrome) to read as the deepest elements on the band; flattening to pure black collapses the dashboard chrome into the floor.

**Don't** render the small-caps and metadata work in tracked sans. The system has no sans-label tier — every metadata duty belongs to GeistMono at 12px. Substituting an ABCDiatype tracked uppercase erases the three-voice typeface split that gives Exa its technical signal.

## Known Gaps

- **Hover and focus states:** the primary CTA, the brand CTA, the input, and the nav-link show only resting state; the full state matrix (hover fill, focus ring, active press, disabled tints) is not captured from the marketing surface.
- **Dark-mode CSS variables:** Exa exposes a complete dark-canvas token set (`--text-dark-default`, `--text-dark-link`, `--text-dark-muted`, `--text-dark-faint`, `--dark-accent-*` families) that is not rendered on the captured marketing surface; the dark band is light-content-on-dark rather than a full dark-mode variant.
- **Accent palette:** the CSS exposes a rich set of `--accent-pink-*`, `--accent-yellow-*`, `--accent-green-*`, `--accent-skyblue-*`, `--accent-darkgreen-*`, `--accent-maroon-*`, `--accent-purple-*` families (light/dark variants) — none rendered on the captured surface; reserved for the deeper product editor and the websets / agents surfaces.
- **Form input error states:** `{component.text-input}` carries the resting state; error / validation styling lives in the API-key entry and the websets-builder forms not exposed on the marketing surface.
- **Motion:** the dark-band dashboard screenshots animate on scroll-into-view, and the hero search-bar mockup shows result-streaming animations; the spec captures end-state values only.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Exa dashboard, websets builder, API playground, and docs surfaces carry richer token systems — sidebar chrome, code-editor syntax themes, result-card layouts — that are not represented here.
- **Pricing surface:** the captured page does not include the pricing tier table; tier-specific accent colors and the standard 3-column pricing layout are not exposed here.