---
version: alpha
name: "Weaviate"
website: "https://weaviate.io"
description: >-
  An open-source AI-native vector database whose marketing site looks unlike any peer in the category — the hero is a vivid green grid (frequency-1 brand color, declared as `--site-font-accent-color`) carrying a 72px Anton condensed all-caps headline ("FOR AI ENGINEERS turning ideas into products") in deep indigo, with a graffiti-style "AI native DATABASE" tag and a hand-drawn "W" wordmark airbrushed beside it. Below the fold the canvas switches to white and the page becomes a sticker book of pastel candy tiles — mint, lavender, lilac, lime — each holding a feature pictogram. Plus Jakarta Sans carries section h2s at 28-32px / 600, Inter handles 18px body, and Anton appears only on the hero. The system mixes a B2B database product with street-art display energy in a way nobody else in the AI-infrastructure rail attempts.

seo:
  title: "Weaviate Design System for React — emerald green, Anton + Plus Jakarta, 14 components"
  metaDescription: "Weaviate's marketing site as a DESIGN.md file. A vivid emerald-green grid hero with 72px Anton condensed display, graffiti wordmark, candy-pastel sticker tiles, indigo ink. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Graffiti grotesk — 72px 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 canvas — the 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 stack — Anton for the hero display moment, Plus Jakarta Sans for every section heading, Inter for body, plus Menlo mono inside code samples"
    - "Candy-tile feature grid — pastel 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 black — every text surface uses deep indigo (declared as `--ink` and `--darkColor`), softer than pure black against the saturated emerald hero"
  tags:
    - "AI & LLM Platforms"
    - "Backend, Database & DevOps"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  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://weaviate.io"
      title: "Weaviate — official site"
      description: "Weaviate'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 Weaviate's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typefaces does Weaviate use, and how do they pair?"
      answer: "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."
    - id: "candy-tiles"
      title: "Why are the feature cards in pastel mint, lavender, and lime?"
      answer: "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."
    - id: "ink-color"
      title: "Why does Weaviate use indigo for text instead of black?"
      answer: "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."
    - id: "rounded-style"
      title: "What corner-radius scale does Weaviate use?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#00a142"
  primary-soft: "#61d384"
  accent-mint: "#61bd73"
  ink: "#130c49"
  ink-soft: "#1c1468"
  ink-muted: "#2c3854"
  muted: "#8396b1"
  canvas: "#ffffff"
  surface-1: "#ebedf0"
  surface-2: "#d6deeb"
  pill-lavender: "#7487ec"
  pill-lilac: "#c8a8e7"
  syntax-orange: "#f78c6c"
  syntax-lime: "#addb67"

typography:
  display-xl:
    fontFamily: "Anton, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"Plus Jakarta Sans\", sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 44.8px
    letterSpacing: 0
  display-md:
    fontFamily: "\"Plus Jakarta Sans\", sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 39.2px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"Plus Jakarta Sans\", sans-serif"
    fontSize: 22.4px
    fontWeight: 600
    lineHeight: 29.12px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"Plus Jakarta Sans\", sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 26px
    letterSpacing: 0
  body-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 31.68px
    letterSpacing: 0
  body-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0
  label-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 25.12px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Plus Jakarta Sans\", sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 23.1px
    letterSpacing: "0.7px"
  nav-link:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26.4px
    letterSpacing: 0
  mono-sm:
    fontFamily: "SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "5px"
  sm: "8px"
  md: "10px"
  lg: "16px"
  xl: "20px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "10px"
  base: "16px"
  lg: "20px"
  xl: "32px"
  2xl: "40px"
  3xl: "48px"
  4xl: "60px"

components:
  hero-section:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "60px 32px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  sub-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.body-sm}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.surface-2}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 32px"
    height: "60px"
    borderColor: "{colors.surface-1}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  candy-tile:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.xl}"
    padding: "20px"
  card-pastel:
    backgroundColor: "{colors.pill-lilac}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.xl}"
    padding: "20px"
  code-panel:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.mono-sm}"
    rounded: "{rounded.lg}"
    padding: "32px 48px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.surface-2}"
---

## Overview

Weaviate's marketing site looks unlike any peer in the AI-database rail. **Graffiti grotesk.** The above-fold hero is a saturated emerald field (`{colors.primary}` — #00a142) overlaid with a regular grid pattern, 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 a marker-pen flourish. Where Pinecone keeps its hero on sterile black, Chroma runs a minimalist white canvas, and Qdrant leans on a corporate red-on-white system, Weaviate paints the page green and tags it.

The chromatic discipline below the fold reverses the move. The canvas switches from saturated emerald to plain white (`{colors.canvas}` — #ffffff), and the emerald recedes to a single CTA fill, inline link color, and the bottom-of-page form-block panel. In its place the page introduces a "candy" palette — mint (`{colors.primary-soft}` — #61d384), lavender (`{colors.pill-lavender}` — #7487ec), and lilac (`{colors.pill-lilac}` — #c8a8e7) — used as the background tints of the six-up feature-tile grid. The pastels appear only inside that grid; outside it the page returns to white and indigo. The result is a two-mode chromatic system: saturated voltage above the fold, pastel sticker book below, with no middle tier of muted brand greens.

Typography runs three families on purpose. **Anton** at 72px / 400 carries the hero h1 and the embedded sticker wordmark — a free condensed display grotesk that reads closer to a record-sleeve typeface than to a SaaS hero. **Plus Jakarta Sans** at 28-32px / 600-700 carries every section h2-h3 below the fold; its humanist counters soften the page after Anton's industrial display moment. **Inter** at 14-18px / 400-500 handles body and nav. The pairing — display grotesk + humanist sans + neutral sans — is closer to an editorial system than to a typical dev-infrastructure landing page.

**Key Characteristics:**
- Emerald green (`{colors.primary}` — #00a142) fills the entire above-fold hero as a grid-textured canvas, then recedes to CTAs and inline link color below — 102 total occurrences, declared as `--site-primary` and `--ifm-link-color`.
- Indigo ink across all text — `{colors.ink-soft}` (#1c1468) dominates at 530 occurrences, `{colors.ink}` (#130c49) handles display headings — neither is pure black.
- Three-typeface stack — Anton for the single hero display moment, Plus Jakarta Sans for every section heading, Inter for body and nav, plus Menlo mono inside code samples.
- Candy-tile feature grid using pastel fills (`{colors.primary-soft}` mint, `{colors.pill-lavender}` lavender, `{colors.pill-lilac}` lilac) on a white below-fold canvas — 20px rounding, internal pictogram per card.
- Generous-soft radius scale centered on 20px (`{rounded.xl}`) for cards, 10px (`{rounded.md}`) for buttons and pill chips, 50% (`{rounded.full}`) for circular icon containers — no 4px tight tier.
- Indigo code-sample panel — the embedded API example sits inside a deep-indigo block (`{colors.ink}` background) with white mono text, Night-Owl-style syntax highlighting using `{colors.syntax-orange}` and `{colors.syntax-lime}`.
- Hairline-only cards on the white below-fold canvas — `{colors.surface-1}` (#ebedf0) and `{colors.surface-2}` (#d6deeb) carry every non-pastel card border.
- Graffiti wordmark — the "AI native DATABASE" sticker beside the hero headline is an illustration, not a typographic element, and exists nowhere else in the system.

## Colors

### Brand

- **Emerald Primary** (`{colors.primary}` — #00a142): frequency 102. Used as text (51), border (51). The single brand voltage — fills the hero canvas as a grid pattern, the primary CTA button, the bottom-of-page form panel, and every inline link across body copy. Wired in CSS as `--site-primary`, `--site-font-accent-color`, `--ifm-link-color`, `--ifm-link-hover-color`, and `--ifm-navbar-link-active-color`.
- **Primary Soft** (`{colors.primary-soft}` — #61d384): frequency 16. Used as background (3), text (6), border (6). The pastel mint that fills the first column of the candy-tile feature grid and the bottom "Easy start, boundless scale" panel. Wired as `--ifm-color-success-lightest` and `--pill2`.
- **Accent Mint** (`{colors.accent-mint}` — #61bd73): frequency 22, all as text or border. Wired as `--accent`. A secondary mid-saturation green used on small chips and inline icons that need to read as Weaviate-coded without competing with the primary emerald.

### Text

- **Ink** (`{colors.ink}` — #130c49): frequency 104, 48 as text, 9 as background, 47 as border. The deepest indigo — used as the code-sample panel background and as display-heading text color. Wired as `--ink`, `--darkColor`, and `--docs-header-color`.
- **Ink Soft** (`{colors.ink-soft}` — #1c1468): frequency 530, 265 as text, 264 as border. The dominant indigo across the page — body running text, navigation hover state, dropdown link color. Wired as `--ifm-font-color-base`, `--site-font-main-color`, and `--site-base-color`.
- **Ink Muted** (`{colors.ink-muted}` — #2c3854): frequency 16. Used as the top-nav inactive label color and as sub-heading text. Wired as `--ifm-heading-color`, `--ifm-navbar-link-color`, and `--site-font-header-color`.
- **Muted** (`{colors.muted}` — #8396b1): frequency 20. Tertiary text — figure captions, "View all" links, footer category labels. Wired as `--muted`, `--inkSub`, and `--ifm-color-emphasis-600`.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): the page floor below the fold. Frequency 143 across text / background / border roles — the dominant surface color outside the hero band. Wired as `--ifm-background-surface-color`, `--paper`, and `--docs-body-bg`.
- **Surface-1** (`{colors.surface-1}` — #ebedf0): frequency 165. The footer background and dropdown/menu panels. Wired as `--ifm-footer-background-color`, `--panel`, and `--ifm-color-gray-100`.
- **Surface-2** (`{colors.surface-2}` — #d6deeb): frequency 90. Hairline border on cards, input outlines, blockquote rules. Wired as `--ifm-color-emphasis-300`, `--ifm-toc-border-color`, and `--ifm-table-border-color`.

### Candy Tiles

- **Pill Lavender** (`{colors.pill-lavender}` — #7487ec): frequency 4. Used as background tint and gradient stop on the lavender column of the candy-tile feature grid. Wired as `--pill1`.
- **Pill Lilac** (`{colors.pill-lilac}` — #c8a8e7): frequency 3, all inside gradients. The lilac tile in the candy-tile feature grid.

### Syntax (code panel)

- **Syntax Orange** (`{colors.syntax-orange}` — #f78c6c) and **Syntax Lime** (`{colors.syntax-lime}` — #addb67): used inside the embedded API code sample. These are Night-Owl palette values borrowed for the syntax-highlighted snippet — not part of the brand chrome elsewhere.

## Typography

### Font Families

The system runs three sans families on the captured surface. **Anton** is a free condensed display grotesk from Google Fonts; Weaviate uses it for exactly one moment — the 72px hero h1 in all caps with a 0 letter-spacing — and the airbrushed graffiti wordmark beside it. **Plus Jakarta Sans** carries every section h2-h3 from 19.2px through 32px in weights 600-800; it is the humanist counterweight to Anton's industrial display. **Inter** at 14-19.2px / 400-700 handles all body, nav, button-secondary, and metadata. **SFMono-Regular / Menlo** carries the embedded code blocks.

The CSS layer wires the heading family as `--site-font-heading-family` set to `"Plus Jakarta Sans", ui-monospace, SFMono-Regular, ...` — Jakarta first, with a mono safety stack — and the body family as `--site-font-base-family` set to Inter. Anton is referenced directly on the hero h1 rather than through a custom property.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Anton | 72px | 400 | 72px | Hero h1 — the single display moment |
| `{typography.display-lg}` | Plus Jakarta | 32px | 600 | 44.8px | Section h3 / h4 — feature-block titles |
| `{typography.display-md}` | Plus Jakarta | 28px | 700 | 39.2px | Section h2 — "One foundation for search, RAG…" |
| `{typography.heading-md}` | Plus Jakarta | 22.4px | 600 | 29.12px | Sub-heading inside cards |
| `{typography.heading-sm}` | Plus Jakarta | 20px | 600 | 26px | h5 — candy-tile card titles |
| `{typography.body-lg}` | Inter | 19.2px | 400 | 31.68px | Section lead paragraphs |
| `{typography.body-md}` | Inter | 18px | 400 | 25.2px | Default body paragraph |
| `{typography.body-sm}` | Inter | 14px | 400 | 19.6px | Caption rows, footnote text |
| `{typography.label-md}` | Inter | 16px | 500 | 25.12px | Inline link labels, emphasized spans |
| `{typography.button-md}` | Plus Jakarta | 14px | 600 | 23.1px | CTA labels — uppercase with 0.7px tracking |
| `{typography.nav-link}` | Inter | 16px | 400 | 26.4px | Top-nav link labels |
| `{typography.mono-sm}` | Menlo | 14px | 400 | 21px | Embedded code samples |

### Principles

Anton appears once. The 72px hero h1 is the loudest typographic moment in the system, and the typeface does not repeat elsewhere — even the airbrushed wordmark beside it is a hand-drawn illustration rather than an Anton glyph. This restraint is the typographic move worth preserving: graffiti display works because the rest of the page returns immediately to a quiet humanist sans.

Plus Jakarta Sans does the entire heading job below the fold at weight 600-800 with no italic, no condensed variant, no light cut. Button labels use Plus Jakarta at 14px / 600 in uppercase with 0.7px tracking — the only place letter-spacing modifiers appear in the system.

### Note on Font Substitutes

Anton ships free on Google Fonts. The closest open-source substitute if Anton is unavailable is **Oswald** at weight 500 — slightly less condensed, comparable cap height. **Bebas Neue** is condensed-grotesk-adjacent but reads more art-deco. For Plus Jakarta Sans, the closest free substitute is **Manrope** at the same weights; for Inter, the official Inter family is open-source. The pairing translates cleanly to other stacks as long as the three-typeface principle is maintained.

## Layout

### Spacing System

- **Base unit:** 8px, with 16px and 20px as the dominant module values (33 and 29 captured occurrences respectively).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 32px · `{spacing.2xl}` 40px · `{spacing.3xl}` 48px · `{spacing.4xl}` 60px.
- **Section padding (vertical):** ~60-90px between major bands on the white canvas, ~120px on the hero.
- **Card internal padding:** `{spacing.lg}` (20px) on the candy-tile feature cards, `{spacing.xl}` (32px) on the larger surface blocks, `{spacing.3xl}` (48px) on the code-sample panel.
- **Top-nav padding:** `{spacing.md}` (12px) vertical, `{spacing.xl}` (32px) horizontal.

### Grid & Container

- **Max content width:** ~1080px on body text, ~1280px on the candy-tile feature grid and the customer-logo wall.
- **Hero block:** full-bleed emerald canvas with the headline + sticker pair anchored left at ~720px max-width, leaving room on the right for the graffiti "W" wordmark illustration.
- **Candy-tile grid:** 3-column at desktop, 2-column at tablet, 1-column at mobile. Each tile holds a header text block stacked above a pictogram block.
- **Customer-logo wall:** Multi-row scrolling marquee of monochrome logos (Intel, Deel, MNG, Factset, Siemens) — every logo flattens to ink color regardless of source brand.
- **Code-sample panel:** 2-column split on the "Production-ready AI applications, faster" block — text column on the left, dark code panel on the right.

### Rhythm

The page alternates between **saturated and neutral** bands rather than holding one tempo. The hero is saturated (full emerald canvas, 120px vertical padding). The features grid is neutral (white canvas, pastel candy-tile inserts). The customer-logo wall is dense neutral. The code-sample block returns to saturated (deep-indigo panel). The bottom CTA is saturated again (emerald-green form panel). The rhythm reads as poster-style: bright band, quiet band, bright band.

## Elevation

The system has essentially **no shadow tier**. There are 4 captured occurrences of pure black used as shadow ink — almost all of them confined to subtle 1px halos under cards. A single low-saturation aqua-shadow tone (6 shadow occurrences, a desaturated teal) gives the candy tiles a faint colored drop, but the effect is barely perceptible.

- **Flat (no shadow):** hero, candy tiles, customer-logo wall, footer — 99% of surfaces.
- **Hairline lift:** `{colors.surface-2}` (#d6deeb) borders carry the elevation work that shadows would do on a typical dashboard product.
- **Aqua tint shadow:** the candy-tile feature cards carry a barely-visible 0-4-12 colored shadow tinted toward the brand color, anchoring them to the white canvas without competing with the saturated emerald hero above.

## Shapes

The radius scale is **generous-soft**, centered on 20px:

- `{rounded.none}` 0px — only on full-bleed sections (the hero, the customer-logo wall).
- `{rounded.xs}` 5px — small chips and inline meta labels (7 captured occurrences).
- `{rounded.sm}` 8px — input field corners, dropdown items (1 captured occurrence).
- `{rounded.md}` 10px — primary and secondary buttons, pill chips (10 captured occurrences).
- `{rounded.lg}` 16px — the larger surface blocks (3 captured occurrences).
- `{rounded.xl}` 20px — the dominant value (17 captured occurrences); used on candy tiles, large cards, and the bottom CTA panel.
- `{rounded.full}` 9999px / 50% — circular icon containers and avatars (4 captured occurrences).

There is no 4px tier. The 20px-as-default move is unusual for a B2B-infrastructure system; most dev-infra brands sit at 8-12px. The 20px softness is what lets the candy-tile aesthetic sit beside the saturated emerald hero without friction — every shape feels approachable rather than industrial.

## Components

**`hero-section`** — Full-bleed emerald `{colors.primary}` canvas with a grid-pattern texture stamped over it, 60×32 padding, no radius. Holds the 72px Anton hero h1 in `{colors.ink}` indigo, a sub-paragraph at `{typography.body-lg}`, the primary CTA pill, and the graffiti "W" wordmark illustration on the right.

**`hero-heading`** — Indigo `{colors.ink}` text on the emerald canvas, Anton 72px / 400 in all caps. The single display moment in the system.

**`section-heading`** — Indigo `{colors.ink}` text on the white canvas, Plus Jakarta Sans 28px / 700 — used for "One foundation for search, RAG, agents…" and similar section h2s.

**`sub-heading`** — Plus Jakarta Sans 22.4px / 600 in `{colors.ink-muted}` — used for h3-h4 inside feature blocks.

**`body-paragraph`** — Inter 18px / 400 in `{colors.ink-soft}` indigo — the workhorse paragraph style.

**`body-paragraph-muted`** — Inter 14px / 400 in `{colors.muted}` — caption rows and footnote text.

**`button-primary`** — Emerald `{colors.primary}` fill, white `{colors.canvas}` text, Plus Jakarta Sans uppercase 14px / 600 with 0.7px tracking, `{rounded.md}` 10px radius, 8×16 padding, 40px height. "Try Weaviate Cloud" is the canonical instance.

**`button-secondary`** — White `{colors.canvas}` fill, indigo `{colors.ink-soft}` text, 1px `{colors.surface-2}` border, same Plus Jakarta uppercase tracked label, `{rounded.md}` 10px radius. Used for "Get Started" and the secondary "Become Guidance" CTA inside the code-sample block.

**`top-nav`** — White `{colors.canvas}` surface, ink-muted `{colors.ink-muted}` text, 60px height, 1px `{colors.surface-1}` bottom hairline. Houses the airbrushed wordmark left, Products / Solutions / Pricing / Resources / Developers / Company links center, Login / Try Free / Contact right.

**`nav-link`** — Transparent background, `{colors.ink-muted}` text in `{typography.nav-link}` (16px / 400 Inter), 8×12 padding. The active state switches to the brand emerald.

**`candy-tile`** — Mint `{colors.primary-soft}` fill, indigo `{colors.ink}` text, `{rounded.xl}` 20px radius, 20px internal padding. The signature feature-tile treatment — each tile holds a 4-word feature title at `{typography.heading-sm}` over a Plus Jakarta sub-label, with a pictogram in the lower half.

**`card-pastel`** — Lilac `{colors.pill-lilac}` fill on the same `{rounded.xl}` 20px tile geometry — used for the third feature column ("Knowledge-base agents & agentic workflows"). The candy-tile component repeats with a different pastel for each column.

**`code-panel`** — Deep-indigo `{colors.ink}` fill, white text, `{rounded.lg}` 16px radius, 32×48 padding. Holds the embedded API sample using `{typography.mono-sm}` Menlo with `{colors.syntax-orange}` and `{colors.syntax-lime}` for syntax highlighting.

**`text-input`** — White `{colors.canvas}` fill, indigo `{colors.ink-soft}` text, 1px `{colors.surface-2}` border, `{rounded.md}` 10px radius, 8×16 padding, 40px height. Used in the bottom "Stay updated" and "Ready to get started?" newsletter / lead-capture forms.

## Do's and Don'ts

**Do** treat the hero emerald `{colors.primary}` (#00a142) as a full-canvas voltage, not a held-in-reserve accent. The brand statement is the saturated grid-textured hero; reducing the green to a small CTA fill would destroy the page's most distinctive move.

**Do** use indigo (`{colors.ink}` #130c49 or `{colors.ink-soft}` #1c1468) for every text surface. Pure black against the saturated emerald hero reads as too harsh; the indigo softens the contrast without sacrificing readability.

**Do** scope Anton to the single hero h1. Letting the condensed display family creep into section h2s or body labels destroys the typographic restraint that makes the graffiti hero feel deliberate rather than gimmicky.

**Do** use the candy palette (`{colors.primary-soft}`, `{colors.pill-lavender}`, `{colors.pill-lilac}`) only inside the feature-tile grid. Outside that block the pastels read as random secondary accents and weaken the binary "saturated above the fold, neutral below" rhythm.

**Don't** swap the 20px default radius for a tighter 8px tier. The generous-soft 20px (`{rounded.xl}`) is what binds the candy-tile aesthetic to the rest of the chrome; tightening the corners would push the page toward a dev-infra system look (Vercel, Linear) that contradicts the sticker-book feature grid.

**Don't** raise display weight above 700. Plus Jakarta Sans at 700 is the heaviest typographic moment below the fold; bumping to 900 turns the editorial section heads into shouts and undercuts the warm humanist feel.

**Don't** introduce a fourth typeface. The three-family stack (Anton + Plus Jakarta + Inter) is already unusual for a SaaS landing page; adding a serif or a second display would tip the system into poster-design territory and away from product readability.

**Don't** mix the brand emerald with the mint `{colors.accent-mint}` (#61bd73) inside the same composition. The two greens occupy adjacent slots in the OKLCH space and read as a near-miss rather than a deliberate harmony — `{colors.primary-soft}` (#61d384) is the pastel pair that works.

## Known Gaps

- **Hover and focus states:** the captured marketing surface does not expose explicit hover / press / disabled states on `{component.button-primary}` or `{component.button-secondary}`. CSS variables exist for `--ifm-color-primary-dark` and other dev-tools-derived hover tones, but those are Docusaurus defaults rather than rendered marketing values.
- **Form input validation:** `{component.text-input}` carries the resting state from the newsletter and lead-capture forms; error / success styling is not exposed on the captured marketing surface.
- **Dark mode:** the captured page is light-only. A dark mode exists in the Docusaurus-powered docs section (`weaviate.io/docs`) but is not represented in the marketing tokens here.
- **Motion:** the graffiti hero animates on scroll-into-view, and the candy tiles carry a subtle hover lift, but the spec captures end-state values only. Easing curves and durations live in the live site CSS animations.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Weaviate Cloud Console, the docs site (`weaviate.io/docs`), and the Weaviate Cluster Manager carry their own surface tokens and component sets that are not represented here.
- **Customer-logo wall styling:** the captured page shows ~30 customer logos in a scrolling marquee, all rendered in monochrome indigo. The marquee speed, gap rhythm, and pause-on-hover behavior are not captured here.
- **Graffiti illustration system:** the airbrushed "W" wordmark beside the hero headline is part of a broader hand-illustrated asset library (also visible on the customer-tile mascots and the "Ready to get started?" panel). The illustration style is not parameterizable from this token spec.