What is Algolia's primary brand color?

Algolia's brand voltage is the electric Algolia blue, declared on the page as the brand-primary hex and shipped as the favicon and theme-color meta tag. It appears 48 times in the captured marketing surface — 23 as text on inline links, 20 as the background fill for the single primary CTA pill, 3 as a border, and 2 inside drop-shadows. Unlike Stripe's indigo voltage which carries the gradient mesh that paints the hero, Algolia holds the blue in reserve and lets a violet-to-cobalt gradient carry the hero canvas instead. The single blue CTA pill is the load-bearing brand moment on the page, and the inline link tone in the body is the only secondary surface that carries the same chromatic signal.

What typefaces does Algolia use, and what should I use as a substitute?

Algolia runs two typefaces. Sora carries every display, heading, and big proof-point numeral — the hero h1 sits at 77px in weight 700 with -4% letter-spacing, the in-body display tier at 80px in weight 900, section h4 labels at 21px in weight 600. Inter carries every running paragraph, the body caption tier, the nav, and the button labels — 16px and 18px in weight 400 are the workhorse sizes. Both are open-source via Google Fonts, so the substitute is the typeface itself; if a closer-spaced display alternative is needed, Geist Sans at 95% line-height tracks comparably to Sora at the hero size, and system-ui transfers acceptably for Inter at body sizes without retuning.

Why does Algolia's hero use a violet-to-cobalt gradient instead of solid blue?

The above-fold hero washes from a saturated violet on the right toward a cobalt blue on the left, finishing into the near-black canvas at the edges. The gradient does the chromatic work that the brand blue would otherwise carry, freeing the electric-blue CTA pill to read as the single hottest element on the page. If the entire hero were brand-blue, the CTA would disappear into its own background; the gradient creates the contrast budget the single voltage moment depends on. The same gradient logic recurs in product-domain illustrations below the fold, where the violet-to-cobalt wash returns as the inner glow on feature tiles.

What is the canvas color of the body below the fold?

The body canvas below the fold is pure white rather than the warm cream tones brands like Cloudflare and Anthropic favor. Algolia surrounds it with near-white grey hairline borders — 1151 of the captured border occurrences — and lets the warmth come from the cards rather than from the canvas itself. The choice keeps the body reading as a documentation surface rather than as an editorial one, which matches Algolia's positioning as a dev-platform brand whose customers reach the marketing site already evaluating an API. Switching the body floor to a warmer off-white would soften the contrast between the cards and the surface, making the hairline borders read as decorative rather than as the load-bearing elevation device they are.

Can I use this DESIGN.md to build my own React search-platform marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Algolia's specific moves: the near-black gradient hero with Sora display in white, the held-in-reserve electric blue CTA pill, the warm-grey hairline-bordered body, and the Sora-on-Inter typographic split. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth treating as optional is the gradient hero canvas — it only works when your headline can stand alone in 80px display without supporting illustration; weaker copy needs more chrome and a flatter hero serves it better.

Algolia Design System

Algolia's marketing-site design system as a DESIGN.md file.

About Algolia DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source algolia.com

AI & LLM Platforms
Developer Tools & IDEs

Algolia's marketing site reads in two halves, joined at the fold. Above it sits a near-black hero washed left-to-right with a violet-to-cobalt gradient, the wordmark "Agentic. Generative. Search." stacked in 80px Sora at weight 700 with -4% tracking, and a single electric-blue CTA pill beneath. Below the fold the page flips entirely: a white editorial body where Inter takes over for every running paragraph, where hairline-bordered cards in near-white grey carry the ROI numerals, and where the blue voltage recedes to inline link accents. Where Elasticsearch's docs feel like infrastructure paperwork and where Meilisearch leans on a cartoonish lavender, Algolia treats the page like an editorial spread — a gradient title-page on top, hairline-ruled editorial body below.

The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 17 color tokens drawn from a near-black hero canvas, a white body floor, and the held-in-reserve electric blue voltage; 13 typography tokens split between Sora (display, headings, big proof-point numerals) and Inter (body, captions, nav, button labels); 7 radius tokens centered on the 8-12px tier with a full pill for the primary CTA and a circle for avatar chips; 8 spacing tokens on a 4-8-16-24px base; and 20 component definitions covering the gradient hero, the electric-blue primary pill, the hairline-bordered metric card, the dark feature-tile, the top-nav, and the dropdown search input.

Feed this file to Claude or Cursor and it reproduces Algolia's specific moves: the gradient near-black hero with white display type, the electric-blue CTA held in reserve, the white body with hairline cards, and the Sora-on-Inter typographic split. The tokens resolve directly without invention. The one move worth borrowing only with caution is the half-and-half page rhythm — it works when the hero earns the chromatic moment and the body keeps its head down, but a less-confident product ends up looking like two unrelated sites stitched together at the fold.

What makes it distinct

Scarce blue voltageelectric Algolia blue appears only 48 times across the captured page, reserved for the single primary CTA fill and a handful of inline link accents rather than painting the hero canvas
Gradient hero, white bodythe above-fold opens on a near-black canvas washed with a violet-to-cobalt gradient, then the entire below-fold page returns to a warm grey editorial surface
Sora plus Interdisplay headlines run Sora at 80px weight 700 with -4% tracking, body copy runs Inter at 16-18px weight 400; two voices, one each for shout and speak
Hairline-dominant chromea single near-white grey #e5e7eb carries 1151 of the captured border occurrences, doing the work that a shadow tier would carry on a typical dashboard product
Metric-led proofthe 80px Sora numerals reappear below the fold rendering the ROI numbers (213%, etc) as the dominant editorial moment of the body

Live at algolia.com

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

algolia.com

Explore Algolia

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Algolia design system FAQ

Common questions about Algolia'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.

Algolia — official site

Algolia'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.