---
version: alpha
name: "Statsig"
website: "https://statsig.com"
description: >-
  A dev-tools experimentation platform running Geist and Geist Mono on a near-white canvas with a single structural-ink primary button — charcoal ink-black at #1f2328 fills every CTA rather than a chromatic accent, while the brand blue #367eed is declared in CSS but used sparingly, appearing once as a background fill. The type scale uses tight -2px letter-spacing on the 65px / weight 500 display headline, pill-radius buttons at 30px, and a 10px standard card radius — a system that reads like a Vercel cousin with GitHub's ink palette.

seo:
  title: "Statsig Design System for React — charcoal ink CTAs, Geist, 18 components"
  metaDescription: "Statsig's marketing design system as a DESIGN.md file — charcoal ink buttons, Geist display at 65px, 15 color tokens, 18 components for React and AI tools."
  highlights:
    - "Ink-as-CTA — the primary button fills with charcoal #1f2328 rather than any chromatic accent, inverting the SaaS convention of reserving brand color for primary actions"
    - "Geist across all tiers — Vercel's open-source sans runs display through caption; Geist Mono handles code labels in uppercase at 14px/400"
    - "Declared but unseen blue — #367eed is wired as --color-blue but appears once on the captured page; the system trusts structure over chroma"
    - "Pill-radius buttons at 30px — the CTA geometry is fully-rounded while cards sit at 10px, creating a sharp contrast between interactive and container shapes"
    - "65px / -2px display tracking — the hero h1 uses tight negative letter-spacing and weight 500, not 700; density communicates precision rather than volume"
  tags:
    - "Developer Tools & IDEs"
    - "Analytics & Data"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Statsig's marketing site is built with the same typeface Vercel ships its own product on — Geist — but the resemblance stops at the font stack. Where Vercel uses its brand identity on a dark canvas, Statsig uses Geist on a light off-white ground and replaces Vercel's white button with a charcoal-ink primary CTA. The hero headline reads "Measure what ships. Ship what matters." at 65px with -2px letter-spacing and weight 500. No chromatic voltage anywhere above the fold: the single registered brand color, a medium blue, appears once in the captured page as a background fill. The system communicates through density and typographic precision, not through saturated accent.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 15 color tokens drawn from the charcoal ink palette, the near-white canvas, and a declared-but-scarce blue accent family; 12 typography tokens spanning Geist at five size tiers and Geist Mono in two uppercase label contexts; 5 radius tokens centered on 10px standard and 30px pill; 8 spacing values on a 20px-dominant scale; and 18 component definitions covering the ink-fill primary button, the tag chips at 30px radius, the section-feature cards, and the monochrome logo wall.

    Feed this file to Claude or Cursor and it reproduces Statsig's specific moves: structural-ink primary CTA instead of a chromatic accent, Geist at tight display tracking, 10px card rounding with pill-shaped interactive elements, and a pure off-white canvas rather than stark white. The one discipline worth borrowing even if you have a strong brand color: holding the blue in reserve creates more perceived confidence than spending it on every link and button. Statsig's system is the clearest example in the dev-tools category of trust signaled by chromatic restraint.

  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://statsig.com"
      title: "Statsig — official site"
      description: "Statsig'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 Statsig's primary brand color?"
      answer: "Statsig's registered brand voltage is a medium blue at #367eed, wired in CSS as --color-blue. On the captured marketing page it appears exactly once as a background fill — the lowest-usage brand token in the dev-tools category. The system's primary CTA is instead filled with charcoal ink #1f2328, the structural text color. A lighter blue family exists (--color-medium-blue at #accfff, --color-dark-blue at #1b63d2) but none of those appeared in the marketing chrome capture. This is a deliberate pattern: brand voltage withheld to maximize its impact when it does appear."
    - id: "typography"
      title: "What typeface does Statsig use, and what weight does the hero use?"
      answer: "Statsig runs Geist — Vercel's open-source geometric sans — for all display, heading, body, and button text, with Geist Mono reserved for code-style labels. The hero h1 sits at 65px in weight 500 (not 700) with -2px letter-spacing, a choice that reads as density rather than volume. Section h2 headings run at 40px / 600 / 50px line-height; h3 at 32px / 600; and body at 16px / 400. Because Geist is open-source and available via the Vercel font package, you can use the actual family — no substitute needed."
    - id: "button-radius"
      title: "Why does Statsig use a 30px pill radius on its CTA button?"
      answer: "The pill CTA at 30px is the sharpest contrast in the system's shape vocabulary: cards and feature modules sit at 10px (--border-standard-radius), small chips at 5px (--border-sharp-radius), and then the primary button jumps to 30px (--border-button-radius). This binary — small containers, circular interactions — is a dev-tools pattern seen at Linear and Vercel. The pill geometry signals 'tap me' without using a brand color to do it; shape does the CTA work that chroma does in color-forward systems."
    - id: "canvas-color"
      title: "What is Statsig's background color and why isn't it pure white?"
      answer: "Statsig's canvas is #f6f6f6, a very light neutral gray wired as --color-background. It's distinct from the pure #ffffff used for card surfaces and elevated content. This two-tone light system — off-white canvas with white cards — creates a hairline-level surface lift without shadows, which is how most of the feature cards create depth. The near-white canvas also softens the high contrast of the charcoal #1f2328 ink against the page floor, making the typographic density feel data-precise rather than harsh."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a developer-tools landing page?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Statsig's specific moves: charcoal ink primary CTA instead of a chromatic accent, Geist at tight -2px display tracking, 10px card rounding with 30px pill buttons, off-white canvas with white card surfaces, and Geist Mono in uppercase for code labels. All token references resolve without invention. The most transferable move in this spec: using the structural text color as the CTA fill, which makes the hierarchy self-evident — the darkest thing on the page is the most important action."

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

colors:
  primary: "#367eed"
  primary-dark: "#1b63d2"
  primary-light: "#accfff"
  ink: "#1f2328"
  ink-secondary: "#535963"
  ink-dark: "#343941"
  canvas: "#ffffff"
  surface-1: "#f6f6f6"
  surface-2: "#ededed"
  hairline: "#d4d7dc"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 65px
    fontWeight: 500
    lineHeight: 71.5px
    letterSpacing: "-2px"
  display-md:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 50px
    letterSpacing: 0
  heading-lg:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: 0
  heading-md:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 30px
    letterSpacing: 0
  heading-sm:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0
  body-lg:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  label-md:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: 0
  label-sm:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: 0
  caption:
    fontFamily: "Geist, Helvetica, \"Segoe UI\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  mono-label:
    fontFamily: "\"Geist Mono\", monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  mono-bold:
    fontFamily: "\"Geist Mono\", monospace"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "5px"
  lg: "10px"
  pill: "30px"
  full: "9999px"

spacing:
  xs: "8px"
  sm: "10px"
  md: "16px"
  base: "20px"
  lg: "30px"
  xl: "40px"
  2xl: "60px"
  3xl: "80px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "6px 20px"
    height: "36px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "6px 20px"
    height: "36px"
    borderColor: "{colors.hairline}"
  button-cta:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
    height: "44px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "8px 20px"
    height: "56px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "8px 16px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "20px"
    borderColor: "{colors.hairline}"
  feature-chip:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: "3px 12px"
  stat-number:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    padding: "10px 16px"
    height: "44px"
    borderColor: "{colors.hairline}"
  logo-chip:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
  tag-pill:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "3px 12px"
  footer:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-sm}"
    padding: "40px 20px"
  code-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: "2px 6px"
---

## Overview

Statsig's marketing page settles a quiet argument about brand color: what if the CTA wasn't chromatic at all? **Chromatic abstinence.** The primary button is filled with the same charcoal ink (#1f2328) that carries every headline, and the only registered blue (#367eed) appears once on the page as a single background fill. Where Mixpanel uses its purple on every interactive element and Amplitude plasters its orange across section headings, Statsig holds its blue entirely in reserve — a signal of infrastructure confidence rather than marketing energy.

The type system runs Vercel's open-source Geist across every tier: 65px display at weight 500 with -2px letter-spacing for the hero h1, 40px / 600 for section h2, 16px / 400 for body. Geist Mono appears in two distinct roles: uppercase category labels (14px / 400) and inline code annotations (14px / 700 bold). The result is a page that reads as if it were built by the same engineering team that built Vercel's dashboard, because it uses exactly the same typography tooling.

**Key Characteristics:**
- Charcoal ink primary CTA (`{colors.ink}` — #1f2328) rather than any brand-color fill — the interactive hierarchy is established through shape (30px pill) not chroma.
- Brand blue (`{colors.primary}` — #367eed) appears once on the captured page; the secondary and dark blue variants are declared but unseen.
- Geist across display, heading, body, label; Geist Mono uppercase for product-category chips (PRODUCT ANALYTICS, EXPERIMENTATION, FEATURE MANAGEMENT, etc.).
- Two-tone light system: near-white canvas (#f6f6f6) with white cards (#ffffff) creates tonal lift without shadows.
- Pill geometry for CTAs (30px radius) sharply contrasted with 10px standard card rounding — shape differentiates interactions from containers.
- Feature-category chips use Geist Mono in uppercase, creating a terminal-label aesthetic within an otherwise editorial layout.
- Shadow system runs a single soft token: `0 0 20px rgba(27, 37, 40, 0.05)` — nearly invisible, enough only to lift a card 1 layer.

## Colors

### Ink & Text

- **Ink** (`{colors.ink}` — #1f2328): frequency 1369. Used as text (678), border (643), shadow (40), bg (8). The dominant color on every surface — headlines, body copy, hairlines, and the primary CTA button fill. Mapped to `--color-black` and `--color-text-primary`; the extraction clustered near-duplicate dark-charcoal values into this single representative hex.
- **Ink Secondary** (`{colors.ink-secondary}` — #535963): frequency 14. Used as text (7), border (7). The secondary text tier for supporting labels and muted metadata, wired as `--color-text-secondary`. Not abundant — used selectively for visual hierarchy.
- **Ink Dark** (`{colors.ink-dark}` — #343941): frequency 0 in render. Declared as `--color-dark-gray`. Reserved for hover states and active-state borders.

### Canvas & Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 98. Used as background (66), text (16), border (16). The card and modal surface — distinct from the page floor. Wired as both `--color-white` and `--color-background`.
- **Surface-1** (`{colors.surface-1}` — #f6f6f6): part of the #ffffff cluster, `--color-background` mapped here for the page floor. The near-white canvas on which white cards sit, establishing tonal lift.
- **Surface-2** (`{colors.surface-2}` — #ededed): frequency 1. Declared as `--color-soft-white`. Used for inactive chips and tag pills.

### Hairlines

- **Hairline** (`{colors.hairline}` — #d4d7dc): frequency 27. Used as border (24), shadow (3). The standard card border and input border, wired as `--color-gray` and `--color-input-border`. Only border role — never appears as text or background.

### Brand Blue

- **Primary** (`{colors.primary}` — #367eed): frequency 1. Used as background (1). Wired as `--color-blue`. Appears once on the page — its rarity is the point.
- **Primary Dark** (`{colors.primary-dark}` — #1b63d2): frequency 0. Declared as `--color-dark-blue`. Hover state for the blue accent.
- **Primary Light** (`{colors.primary-light}` — #accfff): frequency 0. Declared as `--color-medium-blue`. Tint tier for focus rings or soft highlights.

### Neutral

- **Shadow** (`{colors.shadow}` — #000000): frequency 7. Used across text (2), border (2), gradient (2), shadow (1). The pure-black shadow base, used in CSS `box-shadow` calculations.

## Typography

### Font Family

The system runs **Geist** (Vercel's open-source geometric sans, available via `next/font/google` as well as npm) across every display, heading, body, label, and button tier. Fallbacks walk `Helvetica, "Segoe UI", Arial`. **Geist Mono** carries the product-category label chips and code annotations, always in uppercase or code contexts — never in headings.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 65px | 500 | 71.5px | -2px | Hero h1 ("Measure what ships.") |
| `{typography.display-md}` | 40px | 600 | 50px | 0 | Section h2 ("There's a smarter way…") |
| `{typography.heading-lg}` | 32px | 600 | 40px | 0 | h3 sub-section titles |
| `{typography.heading-md}` | 24px | 600 | 30px | 0 | h4 card headings |
| `{typography.heading-sm}` | 20px | 400 | 30px | 0 | h5 feature sub-titles |
| `{typography.body-lg}` | 16px | 400 | 24px | 0 | Default body copy |
| `{typography.body-sm}` | 14px | 400 | 21px | 0 | Supporting body and nav links |
| `{typography.label-md}` | 16px | 600 | 24px | 0 | Button labels, section callouts |
| `{typography.label-sm}` | 14px | 600 | 24px | 0 | CTA buttons, nav labels |
| `{typography.caption}` | 12px | 400 | 24px | 0 | Metadata and footnotes |
| `{typography.mono-label}` | 14px | 400 | 24px | 0 | Geist Mono uppercase product chips |
| `{typography.mono-bold}` | 14px | 700 | 24px | 0 | Bold code annotations |

### Principles

The display tier tops at weight 500 with tight -2px letter-spacing — dense but not heavy. Section headings jump to 600 at 40px, the only bold-weight moment in the display range. Body and labels stay at 400 and 600 respectively, with no 700+ tier in the sans family (that weight lives only in Geist Mono for code annotations).

### Note on Font Substitutes

Geist is open-source and free; use it directly via `npm install geist` or the Vercel font package. For teams unable to use Geist, Inter at the same sizes and weights is the closest alternative — the proportions are near-identical. For Geist Mono, JetBrains Mono or IBM Plex Mono are comparable monospace substitutes.

## Layout

### Spacing System

- **Base unit:** 8px, but the dominant spacing value on the page is 20px (106 occurrences), which functions as the de-facto module.
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 16px · `{spacing.base}` 20px · `{spacing.lg}` 30px · `{spacing.xl}` 40px · `{spacing.2xl}` 60px · `{spacing.3xl}` 80px.
- **Section padding (vertical):** 80px top, 40px horizontal on major sections.
- **Card internal padding:** `{spacing.base}` (20px) on feature cards; `{spacing.sm}` (10px) on compact chips.
- **CTA padding:** 6x20 on the primary pill button; 10x20 on the secondary larger CTA.

### Grid & Container

- **Max content width:** ~1200px on the hero; section content constrained to ~1100px.
- **Feature grid:** 2-column layout at desktop (Experimentation / Feature Management, Product Analytics / Session Replays), collapsing to single-column on tablet.
- **Metric strip:** 4-column stat row with numbers at display-md size.
- **Logo wall:** horizontal scrolling row of monochrome partner logos.

### Rhythm

The page alternates between full-width typographic sections on the off-white canvas and constrained 2-column feature modules. Every section boundary is marked by the same 80px top padding rather than a background color change — the only background shift is the charcoal-ink CTA block in the middle of the page ("Say goodbye to expensive point solutions"), which uses the structural ink color as a full-section background.

## Elevation

The shadow system has one token and uses it subtly. The CSS variable `--shadow-regular` resolves to `0 0 20px rgba(27, 37, 40, 0.05)` — a nearly invisible bloom that lifts white cards off the off-white canvas without any visible shadow shape. The elevation system is:

- **Flat:** the page floor and every section background — no shadow.
- **1px tonal lift:** `{colors.canvas}` white cards on `{colors.surface-1}` near-white floor — the dominant elevation signal.
- **Hairline borders:** `{colors.hairline}` (#d4d7dc) 1px borders on cards and inputs — the most-used depth signal.
- **Soft glow:** `--shadow-regular` token for cards that need physical separation without a hard border.

## Shapes

The radius scale is **binary-ish**: everyday containers at 10px, pills for all interactive triggers:

- `{rounded.none}` 0px — code blocks and flush sections.
- `{rounded.sm}` 4px — the most compact chips and form labels.
- `{rounded.md}` 5px (`--border-sharp-radius`) — smaller UI chips.
- `{rounded.lg}` 10px (`--border-standard-radius`) — the default card, input, and modal radius. 45 instances — the dominant shape.
- `{rounded.pill}` 30px (`--border-button-radius`) — every CTA button and the feature-chip pills.
- `{rounded.full}` 9999px — avatar icons and logo marks in the partner wall.

The gap between 10px (container) and 30px (button) is the most pronounced shape contrast in the system — shape performs the role that color performs in chromatic systems.

## Components

**`button-primary`** — Charcoal ink `{colors.ink}` fill, white text, `{rounded.pill}` 30px radius, 6x20 padding, 36px height. The canonical instance is "Book a Live Demo" in the top nav. No chromatic fill anywhere on the primary interactive element.

**`button-secondary`** — Transparent fill, charcoal text, 1px `{colors.hairline}` border, same pill radius and dimensions. Used for secondary CTAs like "See how it works."

**`button-cta`** — White fill with charcoal text at `{rounded.pill}`, 10x20 padding, 44px height. Used for the larger in-page CTA ("Create a free account").

**`top-nav`** — White canvas background, 56px height, charcoal text at `{typography.body-sm}` (14px / 400). Hairline border separates nav from page content.

**`hero-heading`** — Transparent background, charcoal text, `{typography.display-xl}` (65px / 500 / -2px tracking). Zero padding because the headline floats over the page canvas.

**`section-heading`** — Charcoal text, `{typography.display-md}` (40px / 600 / 50px line-height). Used for "There's a smarter way to build great products" and similar section openers.

**`card`** — White `{colors.canvas}` fill, charcoal text, `{rounded.lg}` 10px radius, 20px padding, 1px `{colors.hairline}` border. The standard feature card. The "Regular" shadow token lifts it off the near-white floor.

**`feature-chip`** — Near-white `{colors.surface-1}` fill, ink text, `{typography.mono-label}` in uppercase (PRODUCT ANALYTICS, EXPERIMENTATION), `{rounded.pill}` 30px radius, 3x12 padding.

**`text-input`** — White fill, charcoal text, `{rounded.lg}` 10px radius, 10x16 padding, 44px height, 1px `{colors.hairline}` border. Wired as `--color-input-border`.

**`stat-number`** — Transparent background, charcoal text at `{typography.display-md}` (40px / 600). Used in the metric strip for "1+ Trillion Events," "2.5 Billion Subjects," "99.99% Infra uptime."

**`tag-pill`** — Light-gray `{colors.surface-2}` fill, secondary-ink text, `{typography.label-sm}`, `{rounded.pill}` radius, 3x12 padding. Used for product-category labels in the nav dropdown.

**`footer`** — Near-white `{colors.surface-1}` background, secondary-ink text, 40x20 padding. The footer de-emphasizes rather than disappears — it's the same near-white as the page floor.

## Do's and Don'ts

**Do** use `{colors.ink}` (#1f2328) as the primary CTA background. The charcoal-ink button is not a placeholder — it is the deliberate primary interactive state. Replacing it with `{colors.primary}` blue would spend the one scarce voltage on every action click rather than holding it for emphasis.

**Do** use `{rounded.pill}` (30px) exclusively for buttons and interactive chips. Containers sit at `{rounded.lg}` (10px). The gap between 10 and 30 is intentional — mixing intermediate radii (14px, 20px) collapses the shape contrast that replaces color contrast.

**Do** keep display weight at 500 for the hero h1 and 600 for section h2. There is no 700 moment in the sans type system. Bumping the hero to 700 turns the editorial density into a generic SaaS shout.

**Do** render all product-category chips in Geist Mono uppercase. The monospace + uppercase combination reads as a data label — a precision signal that distinguishes product taxonomy from marketing copy.

**Don't** use `{colors.primary}` (#367eed) as a button fill or section accent. It appears once on the captured page as a single background tile. Each additional usage of the blue dilutes the precision-discipline the system is built on. Use `{colors.ink}` instead.

**Don't** add a card shadow heavier than `--shadow-regular` (`0 0 20px rgba(27,37,40,0.05)`). The near-invisible glow does the lift work without competing with the hairline border. A heavier shadow (e.g., 10px 15px 30px) would make the page feel like a SaaS landing page rather than a data infrastructure product.

**Don't** use `{colors.hairline}` (#d4d7dc) as a text color. It is border-only — 24 border uses, zero text uses. For muted text, use `{colors.ink-secondary}` (#535963).

**Don't** use tight -2px letter-spacing outside the 65px display h1. The tracking is calibrated for very large type; applying it at 24px or below makes labels look compressed rather than precise.

## Known Gaps

- **Hover states:** documented only for the primary button (background flips from #1f2328 to a lighter tint implied by --color-dark-gray #343941); full state matrix for links, cards, and chips is not captured.
- **Mobile breakpoints:** the captured surface is 1440px desktop width; responsive column collapse and type-scale reduction are not represented.
- **Dark mode:** no dark-mode variant is visible in the marketing page capture; the product dashboard likely has a separate dark token set.
- **Animated feature modules:** the Experimentation and Feature Management sections contain animated chart and UI previews; motion curves and timing functions are not captured.
- **Branded illustration palette:** the arrow and icon illustrations in the feature sections use a multi-color scheme not represented in the extracted CSS colors.
- **Form states:** error, success, and focus states for `{component.text-input}` are not visible on the marketing surface.