What is Exa's primary brand color?

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.

If the brand color is electric blue, what color is Exa's primary CTA?

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.

What typefaces does Exa use, and what should I use as substitutes?

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.

Why does Exa run a dark editorial band below the fold?

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.

What is Exa's corner-radius philosophy?

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.

Exa Design System

Exa's AI-search-API marketing system as a DESIGN.md file.

About Exa DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source exa.ai

AI & LLM Platforms
Developer Tools & IDEs

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.

What makes it distinct

Editorial serif displayArizona 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 rhythma 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 voicesArizona serif for display, ABCDiatype sans for body and label, Geist Mono for metadata and code
Tight 2px workhorse radiusthe 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

Live at exa.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

exa.ai

Explore Exa

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Exa design system FAQ

Common questions about Exa's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Exa — official site

Exa's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.