What is Weaviate's primary brand color?

Weaviate's brand voltage is an emerald green wired into CSS as --site-font-accent-color, --site-primary, --ifm-link-color, and --ifm-link-hover-color. It carries 102 total occurrences in the captured marketing page — 51 as text, 51 as border — and dominates the above-fold hero as a saturated grid background. Below the fold the green recedes to the primary CTA pill ('Try Weaviate Cloud'), inline link color across body copy, and the bottom-of-page 'Ready to get started?' panel. A secondary mint accent appears on the pastel feature tiles as gradient stops, but the headline emerald is singular.

What typefaces does Weaviate use, and how do they pair?

The system runs three families. Anton (a free condensed display grotesk from Google Fonts) handles the single hero h1 at 72px / 400, all-caps with no letter-spacing modifier — the graffiti-display moment. Plus Jakarta Sans carries every section h2-h3 from 19.2px through 32px in weights 600-800; it is the warm humanist counterpoint to Anton's narrow industrial display. Inter at 14-19.2px / 400-700 carries every running body paragraph, nav label, and button. SFMono-Regular / Menlo handles the embedded code blocks. The pairing is deliberate — one display, one humanist sans, one industrial sans — and reads closer to a poster design than to a typical SaaS landing page.

Why are the feature cards in pastel mint, lavender, and lime?

Below the fold the page switches from the emerald hero to a white canvas, and the feature explainer becomes a six-up grid of pastel-tinted tiles — mint green for the 'Smart search' card, lavender for 'Retrieval-augmented generation', lilac for 'Knowledge-base agents'. The tiles use 20px rounding and an internal pictogram per card. The pastel palette is the soft counterpart to the saturated emerald hero; together they read as a children's-book aesthetic transposed onto a vector-database product. Outside the feature grid the pastels do not appear — they are scoped to that single block.

Why does Weaviate use indigo for text instead of black?

Every text surface across the captured page uses one of two deep indigo tones — the dominant indigo wired as --site-font-main-color and --ifm-font-color-base, plus a darker variant wired as --ink and --darkColor. The dominant indigo carries 530 occurrences (265 text, 264 border). Pure black appears only inside the dark code-sample panel. The indigo softens against the saturated emerald hero in a way pure black would not — text-on-color readability is preserved without the heavy contrast of true black against bright green.

What corner-radius scale does Weaviate use?

The system runs a generous-soft scale centered on 20px. The dominant value is 20px (17 captured occurrences), used on the candy-tile feature cards and the larger surface blocks. Buttons and pill chips use 10px (10 occurrences); the smaller chips and meta labels use 5px (7 occurrences). Round icon containers and circular avatars use 50% (4 occurrences). There is no 4px tight tier — even the smallest surfaces start at 5-8px, keeping every shape feeling soft rather than industrial. The scale's softness reinforces the candy-tile aesthetic of the below-fold sticker grid.

Weaviate Design System

Weaviate's marketing site as a DESIGN.md file.

About Weaviate DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source weaviate.io

AI & LLM Platforms
Backend, Database & DevOps

Weaviate's marketing site looks unlike any peer in the AI-database rail. The above-fold hero is a saturated emerald-green field with a regular grid pattern stamped over it, a 72px Anton condensed-grotesk headline ("FOR AI ENGINEERS turning ideas into products") set in deep indigo, and a graffiti-style "AI native DATABASE" sticker — complete with a hand-drawn airbrushed "W" wordmark, drip shadows, and the kind of marker-pen flourish you would expect on a skateboard graphic, not on a vector-database landing page. Where Pinecone sits on sterile black, Chroma keeps its hero minimal, and Qdrant runs corporate red on white, Weaviate paints the page green and tags it.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 13 color tokens covering the emerald voltage, two indigo ink tones, a small "candy" palette for the pastel feature tiles, plus a Night Owl syntax-highlighting set for the embedded code samples below the fold. Eleven typography tokens span Anton at 72px / 400 for the single hero display moment, Plus Jakarta Sans at 28-32px / 600-800 for section h2-h3, Inter at 16-18px / 400-500 for body and nav, and Menlo for code. Six radius steps centered on 20px give every card the same generous-soft shoulder. Fourteen component definitions cover the hero, the candy-tile feature cards, the dark navy code-sample panel, and the bottom-of-page "Ready to get started?" form block on a green panel.

Feed this file to Claude or Cursor and the agent will reproduce Weaviate's specific moves: emerald grid hero, indigo ink instead of pure black, Anton condensed for one display moment paired with a humanist Jakarta Sans for all other headings, 20px default radius across every card surface, and candy-tile feature blocks. The single move worth borrowing only if your brand has the courage for it is the graffiti hero — most B2B-infra brands need an interstitial layer of typographic restraint, but Weaviate's "AI native DATABASE" sticker reads as confident rather than gimmicky because the typography ladder below the fold returns immediately to a quiet humanist sans.

What makes it distinct

Graffiti grotesk72px Anton condensed in deep indigo paints the hero, paired with a hand-drawn airbrushed 'W' wordmark and a tagged 'AI native DATABASE' graphic
Emerald green canvasthe brand voltage covers the entire above-fold hero as a grid texture, then recedes to CTA fills and inline link color below the fold
Three-typeface stackAnton for the hero display moment, Plus Jakarta Sans for every section heading, Inter for body, plus Menlo mono inside code samples
Candy-tile feature gridpastel mint, lavender, lilac, and lime cards with 20px rounding sit on a white canvas below the fold, each holding a feature pictogram
Indigo ink, not blackevery text surface uses deep indigo (declared as `--ink` and `--darkColor`), softer than pure black against the saturated emerald hero

Live at weaviate.io

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

weaviate.io

Explore Weaviate

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.

Weaviate design system FAQ

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

Weaviate — official site

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