---
version: alpha
name: Sanity
website: "https://www.sanity.io"
description: A developer-content platform rendered as a nocturnal command center — dark, precise, and deeply structured. The entire experience sits on a near-black canvas (#0b0b0b) that reads less like a "dark mode toggle" and more like the natural state of a tool built for people who live in terminals. Type runs waldenburgNormal — a slightly geometric sans with extreme negative tracking (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality, paired with IBM Plex Mono for code and technical labels. A pure achromatic gray ramp (#0b0b0b → #212121 → #353535 → #797979 → #b9b9b9 → #ededed → #ffffff) carries the structure, with vivid accent punctuation: coral-red CTA (#f36458), universal electric blue hover (#0052ef), and a wide-gamut neon green. Pill-shaped primary buttons (`{rounded.pill}` — 99999px) contrast with subtle 3–6px radii for secondary actions; depth is colorimetric rather than shadow-based, with everything mounted flat to the surface.

seo:
  title: "Sanity Design System for React — Sanity Black (#0b0b0b), waldenburgNormal, 29 components"
  metaDescription: "Sanity's design system as a DESIGN.md file. Near-black #0b0b0b canvas, waldenburgNormal, 29 colors, 29 components. For React, Next.js, and AI tools."
  highlights:
    - "Near-black canvas — #0b0b0b is the primary identity, not a dark-mode toggle, with no warm or cool undertone"
    - "Extreme negative tracking — display headings at 72px+ run -2.88px to -4.48px letter-spacing for a precision-engineered voice"
    - "Universal blue hover — every interactive element shifts to electric blue #0052ef on hover, a single activation signal"
    - "Colorimetric depth — elevation through surface color shifts (#0b0b0b → #212121 → #353535), never offset shadows"
    - "Radius cliff — corners jump from 12px (large card) directly to 99999px (pill); nothing in between"
  tags:
    - "Developer Tools & IDEs"
    - "Documentation & Knowledge"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Sanity's website behaves like a control room for structured content. The canvas is #0b0b0b — near-black, achromatic, with no warm or cool tint — and it stays that way across every surface. There is no light mode in mainline marketing, and the dark canvas is treated as the natural identity rather than a toggle. Type runs waldenburgNormal, a custom geometric sans with aggressive negative letter-spacing at display sizes (-2.88px at 72px, -4.48px at 112px), paired with IBM Plex Mono for code and uppercase technical labels. The dual-register voice — editorial display next to system-readout mono — signals the audience: developers and content engineers who expect precision.

    This page packages the spec into a single DESIGN.md file built on the Google Labs format. Inside: 29 color tokens grouped into brand, accent, surface, neutral, semantic, and border roles; 16 type styles spanning a 112px hero down to 10px code micro-labels; 9 spacing tokens on an 8px base unit; a 5-step radius scale that jumps from 12px straight to a 99999px pill; and 29 components covering buttons, cards, inputs, navigation, and badges. Every color is quoted as a hex, every font size is a number, every component has a typography and radius token attached.

    Drop the file into Claude, Cursor, or GitHub Copilot and the agent will reproduce Sanity's discipline rather than a generic dark-mode shadcn theme — pure achromatic grays, the coral-red #f36458 CTA, the universal #0052ef hover, and the pill-or-3px-radius binary. The system is worth studying because it commits: no shadows, no warm grays, no second accent, no dark-mode opt-in. That commitment is the design.
  related:
    - 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."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Sanity's primary brand color?"
      answer: "Sanity's primary color is the canvas itself — Sanity Black (#0b0b0b), a near-black neutral that anchors the entire identity. The single accent color is Sanity Red (#f36458), a warm coral-red reserved for primary CTAs. Every interactive element hovers to Electric Blue (#0052ef), which acts as the universal activation signal across buttons, links, and form focus rings. The system commits to one CTA color, one hover color, and one canvas — the rest of the palette is pure achromatic grays."
    - id: "dark-mode"
      title: "Does Sanity have a light mode?"
      answer: "No — the public site treats #0b0b0b as the primary identity, not a dark-mode toggle. Pure white (#ffffff) and light gray (#ededed) appear only as inverted sections inside the otherwise dark page, never as a full theme. The neutral ramp runs from #0b0b0b through #212121, #353535, #797979, #b9b9b9, #ededed, to #ffffff with no warm or cool bias — pure achromatic discipline that's native to dark interfaces."
    - id: "typography"
      title: "What typography does Sanity use, and what should I use if waldenburgNormal isn't available?"
      answer: "Sanity runs waldenburgNormal, a custom geometric sans not available outside their stack, paired with IBM Plex Mono for code and uppercase technical labels. Display headings use extreme negative letter-spacing (-2.88px at 72px, -4.48px at 112px) for a compressed, machined quality. Inter or Space Grotesk are the closest open-source substitutes for the sans — both have the geometric, slightly condensed feel. IBM Plex Mono is on Google Fonts and transfers cleanly."
    - id: "shape-language"
      title: "What's Sanity's shape language?"
      answer: "Binary: pills or near-square. Primary CTAs are full 99999px pills, while everything else sits at 3–6px radius (inputs at 3px, secondary buttons at 5px, cards at 6px, feature cards at 12px). There is nothing between 12px and the pill — the system avoids the soft-medium 16–20px range entirely. Combined with colorimetric depth (surface color steps instead of shadows), the result feels engineered rather than friendly."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React project?"
      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 Sanity's commitment to pure achromatic grays, the #f36458 coral CTA, the universal #0052ef hover, and the pill-or-3px radius binary rather than a generic shadcn dark theme. You can also reference the tokens directly: every color, type style, radius, and spacing value in the spec is a quoted hex or number you can paste into Tailwind config, CSS variables, or your own component library."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A few items are documented in the Known Gaps section: the exact custom-typeface license terms for waldenburgNormal (only Sanity-licensed), the wide-gamut display-p3 fallback strategy for the neon green and accent magenta on sRGB displays, complete loading skeleton states, motion and transition timing, and the Sanity Studio (the embedded editor product) UI which uses a related but distinct token set. The spec captures the public marketing and documentation surfaces, not the in-product Studio chrome."

colors:
  sanity-black: "#0b0b0b"
  pure-black: "#000000"
  sanity-red: "#f36458"
  electric-blue: "#0052ef"
  light-blue: "#55beff"
  light-blue-soft: "#afe3ff"
  neon-green: "#19d600"
  accent-magenta: "#f600ff"
  surface-base: "#0b0b0b"
  surface-elevated: "#212121"
  surface-prominent: "#353535"
  surface-light: "#ededed"
  surface-inverted: "#ffffff"
  focus-cyan: "#072227"
  text-primary: "#ffffff"
  text-secondary: "#b9b9b9"
  text-tertiary: "#797979"
  text-on-light: "#212121"
  text-on-button-light: "#0b0b0b"
  error-red: "#dd0000"
  gpc-green: "#37cd84"
  focus-ring-blue: "#0052ef"
  border-dark: "#0b0b0b"
  border-subtle: "#212121"
  border-medium: "#353535"
  border-light: "#ffffff"
  border-orange: "#ff5500"
  on-primary: "#ffffff"
  scrim: "#000000"

typography:
  display-xl:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 112px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -4.48px
  hero-secondary:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -2.88px
  section-heading:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -1.68px
  heading-lg:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -1.14px
  heading-md:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 425
    lineHeight: 1.24
    letterSpacing: -0.32px
  heading-sm:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 425
    lineHeight: 1.24
    letterSpacing: -0.24px
  subheading:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 425
    lineHeight: 1.13
    letterSpacing: -0.2px
  body-lg:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.18px
  body-md:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0
  body-sm:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.15px
  caption:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: -0.13px
  caption-sm:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.12px
  micro-label:
    fontFamily: "waldenburgNormal, 'waldenburgNormal Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0
    textTransform: uppercase
  code-body:
    fontFamily: "'IBM Plex Mono', 'ibmPlexMono Fallback', ui-monospace, monospace"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0
  code-caption:
    fontFamily: "'IBM Plex Mono', 'ibmPlexMono Fallback', ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0
  code-micro:
    fontFamily: "'IBM Plex Mono', 'ibmPlexMono Fallback', ui-monospace, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0
    textTransform: uppercase

rounded:
  none: 0px
  xs: 3px
  sm: 5px
  md: 6px
  lg: 12px
  pill: 99999px

spacing:
  px: 1px
  xxs: 2px
  xs: 4px
  sm: 6px
  base: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  section: 48px
  section-lg: 64px
  section-xl: 96px

components:
  button-primary:
    backgroundColor: "{colors.sanity-red}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.electric-blue}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
  button-secondary:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: 8px 12px
  button-outlined:
    backgroundColor: "{colors.surface-inverted}"
    textColor: "{colors.text-on-button-light}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: 8px
    border: "1px solid #0b0b0b"
  button-ghost:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 0px 12px
    border: "1px solid #212121"
  button-uppercase-label:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.micro-label}"
    rounded: "{rounded.sm}"
  card-dark:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 24px
    border: "1px solid #353535"
  card-feature:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
    border: "1px solid #212121"
  text-input:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 8px 12px
    border: "1px solid #212121"
  text-input-focus:
    backgroundColor: "{colors.focus-cyan}"
    textColor: "{colors.text-secondary}"
    rounded: "{rounded.xs}"
    border: "2px solid #0052ef"
  textarea:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 8px 12px
    border: "1px solid #212121"
  search-input:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 0px 12px
  top-nav:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
    border: "1px solid #212121"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
  nav-link-hover:
    backgroundColor: transparent
    textColor: "{colors.electric-blue}"
    typography: "{typography.body-md}"
  nav-cta:
    backgroundColor: "{colors.sanity-red}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  footer:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
  footer-link:
    backgroundColor: transparent
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
  footer-section-header:
    backgroundColor: transparent
    textColor: "{colors.text-primary}"
    typography: "{typography.code-caption}"
    textTransform: uppercase
  badge-neutral-subtle:
    backgroundColor: "{colors.surface-inverted}"
    textColor: "{colors.text-on-button-light}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px
  badge-neutral-filled:
    backgroundColor: "{colors.sanity-black}"
    textColor: "{colors.text-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px
  tag-code-uppercase:
    backgroundColor: transparent
    textColor: "{colors.text-tertiary}"
    typography: "{typography.code-caption}"
    textTransform: uppercase
  focus-ring:
    border: "2px solid #0052ef"
    rounded: "{rounded.xs}"
  divider-hairline:
    backgroundColor: "{colors.border-subtle}"
  divider-medium:
    backgroundColor: "{colors.border-medium}"
  modal-scrim:
    backgroundColor: "{colors.scrim}"
  dropdown-overlay:
    backgroundColor: "{colors.sanity-black}"
    border: "1px solid #212121"
    rounded: "{rounded.md}"
  code-block:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.code-body}"
    rounded: "{rounded.md}"
    padding: 16px
    border: "1px solid #353535"
---

## Overview

Sanity's website is the canonical example of a dark-first developer-content platform that treats #0b0b0b as identity rather than mode. The base canvas is **near-black** (`{colors.sanity-black}` — #0b0b0b) with **pure white** (`{colors.text-primary}` — #ffffff) for primary text and **silver** (`{colors.text-secondary}` — #b9b9b9) for body copy. There is no light-mode equivalent in mainline marketing — the system commits to dark as the natural state. A single accent **Sanity Red** (`{colors.sanity-red}` — #f36458) carries every primary CTA, and a universal **Electric Blue** (`{colors.electric-blue}` — #0052ef) handles every hover state across buttons, links, and focus rings.

Type runs **waldenburgNormal**, a custom geometric sans Sanity licenses, with IBM Plex Mono as the technical counterweight. Display headings use aggressive negative letter-spacing — -4.48px at 112px hero scale, -2.88px at 72px, -1.68px at 48px — creating a precision-engineered, almost machined typographic voice. The weight range is intentionally narrow (400–425 for most styles, 500–600 only for 11px uppercase labels), keeping the voice consistent across editorial and UI registers.

The shape language is **binary**. Primary CTAs are full pills (`{rounded.pill}` — 99999px), inputs and textareas are 3px (`{rounded.xs}`), secondary buttons are 5px (`{rounded.sm}`), standard cards are 6px (`{rounded.md}`), and large feature cards are 12px (`{rounded.lg}`). There is **nothing** between 12px and the pill — the system jumps the gap. Depth is colorimetric: elevation reads through surface color shifts (#0b0b0b → #212121 → #353535) rather than offset shadows, native to dark interfaces where drop shadows would be invisible.

**Key Characteristics:**
- Single canvas: `{colors.sanity-black}` (#0b0b0b — "Sanity Black") is the default surface for every public page. Not pure black, but close enough to feel absolute. No light mode in mainline marketing.
- Single CTA color: `{colors.sanity-red}` (#f36458 — coral-red) carries primary actions and brand accent moments. The only warm color in an otherwise cool, achromatic system.
- Universal hover: `{colors.electric-blue}` (#0052ef) is the activation signal across every interactive element — buttons, links, focus rings. One color, one signal.
- Custom variable type: `waldenburgNormal` for display and UI, IBM Plex Mono for code and uppercase technical labels. Display tracking runs -0.32px to -4.48px depending on size.
- Pure achromatic neutrals: the gray ramp (#0b0b0b → #212121 → #353535 → #797979 → #b9b9b9 → #ededed → #ffffff) carries no warm or cool bias — pure neutral discipline.
- Colorimetric depth: elevation through surface color steps (#0b0b0b ground → #212121 elevated → #353535 prominent → #ffffff inverted). No offset shadows; only 1px ring shadows and backdrop blur.
- Radius cliff: 3px / 5px / 6px / 12px / 99999px. The system skips the soft 16–20px range entirely — corners are either crisp or fully round.
- 8px base spacing system, with major section breaks at `{spacing.section-lg}` (64px) and hero vertical padding climbing to 96–120px to create slide-like rhythm on the dark canvas.

## Colors

### Brand & Accent
- **Sanity Black** (`{colors.sanity-black}` — #0b0b0b): The primary canvas. Used as the default page floor and the dominant surface color across every public page. Not pure black — close enough to feel absolute, but with a hair of softness.
- **Sanity Red** (`{colors.sanity-red}` — #f36458): The primary CTA and brand accent. A warm coral-red — the only warm color in an otherwise cool, achromatic system. Used on "Get Started" buttons and primary conversion points.
- **Electric Blue** (`{colors.electric-blue}` — #0052ef): The universal hover/active state. Every button, link, and interactive element shifts to this blue on hover. Also serves as the focus-ring color across inputs.
- **Light Blue** (`{colors.light-blue}` — #55beff) and **Light Blue Soft** (`{colors.light-blue-soft}` — #afe3ff): Secondary blue variants for accent backgrounds, badges, and dimmed blue surfaces.
- **Neon Green** (`{colors.neon-green}` — #19d600 sRGB fallback): A vivid wide-gamut green used for success states and premium feature highlights. The display-p3 source value is `color(display-p3 .270588 1 0)`.
- **Accent Magenta** (`{colors.accent-magenta}` — #f600ff sRGB fallback): A vivid wide-gamut magenta for specialized accent moments. The display-p3 source value is `color(display-p3 .960784 0 1)`.

### Surface
- **Surface Base** (`{colors.surface-base}` — #0b0b0b): Default page floor.
- **Surface Elevated** (`{colors.surface-elevated}` — #212121): Cards, secondary containers, input backgrounds, subtle layering above the base canvas.
- **Surface Prominent** (`{colors.surface-prominent}` — #353535): Tertiary surface and border color for creating depth between dark layers.
- **Surface Light** (`{colors.surface-light}` — #ededed) and **Surface Inverted** (`{colors.surface-inverted}` — #ffffff): Used inside inverted sections — full-bleed light bands embedded in the otherwise dark page.
- **Focus Cyan** (`{colors.focus-cyan}` — #072227): The background tint that text inputs shift to when focused. A deep cyan that pairs with the 2px blue focus ring.

### Text
- **Text Primary** (`{colors.text-primary}` — #ffffff): The dominant text color on dark surfaces. Pure white for maximum legibility.
- **Text Secondary** (`{colors.text-secondary}` — #b9b9b9 — "Silver"): Body copy on dark surfaces, muted descriptions, placeholder text.
- **Text Tertiary** (`{colors.text-tertiary}` — #797979 — "Medium Gray"): Tertiary text, metadata, timestamps, de-emphasized content.
- **Text on Light** (`{colors.text-on-light}` — #212121 — "Charcoal"): Text on light/inverted surfaces.
- **Text on Button Light** (`{colors.text-on-button-light}` — #0b0b0b): Primary text on white/light button surfaces.

### Semantic
- **Error Red** (`{colors.error-red}` — #dd0000): Destructive actions, validation errors, critical warnings. A pure, high-saturation red — distinct from the coral CTA.
- **GPC Green** (`{colors.gpc-green}` — #37cd84): Privacy/compliance indicator green.
- **Focus Ring Blue** (`{colors.focus-ring-blue}` — #0052ef): The focus-ring color, matching the universal interactive blue.

### Border
- **Border Dark** (`{colors.border-dark}` — #0b0b0b): Primary border on dark containers — barely visible, minimal containment.
- **Border Subtle** (`{colors.border-subtle}` — #212121): Standard border for inputs, textareas, and card edges.
- **Border Medium** (`{colors.border-medium}` — #353535): More visible borders for emphasized containment and dividers.
- **Border Light** (`{colors.border-light}` — #ffffff): Border on inverted/light elements or buttons needing contrast separation.
- **Border Orange** (`{colors.border-orange}` — #ff5500 sRGB fallback): Special accent border for highlighted/featured elements. The display-p3 source value is `color(display-p3 1 0.3333 0)`.

### Scrim
- **Scrim** (`{colors.scrim}` — #000000): The global modal backdrop tone. Stored as the base hex; opacity is applied at render time. Pairs with a backdrop-filter blur on navigation overlays and modals.

## Typography

### Font Family
The system runs **waldenburgNormal** for display, body, navigation, and captions, with **IBM Plex Mono** as the technical counterweight for code blocks, inline code, and uppercase labels. Fallback stack: `waldenburgNormal Fallback, ui-sans-serif, system-ui` for the sans; `ibmPlexMono Fallback, ui-monospace` for the mono. CJK falls back to `Helvetica, Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei`.

The dual-register voice — editorial display next to system-readout mono — is deliberate. The sans handles authority and structure; the mono signals technical metadata and code.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 112px (7rem) | 400 | 1.00 | -4.48px | Maximum-impact hero |
| `{typography.hero-secondary}` | 72px (4.5rem) | 400 | 1.05 | -2.88px | Large section headers |
| `{typography.section-heading}` | 48px (3rem) | 400 | 1.08 | -1.68px | Primary section anchors |
| `{typography.heading-lg}` | 38px (2.38rem) | 400 | 1.10 | -1.14px | Feature section titles |
| `{typography.heading-md}` | 32px (2rem) | 425 | 1.24 | -0.32px | Card titles, subsection headers |
| `{typography.heading-sm}` | 24px (1.5rem) | 425 | 1.24 | -0.24px | Smaller feature headings |
| `{typography.subheading}` | 20px (1.25rem) | 425 | 1.13 | -0.2px | Sub-section markers |
| `{typography.body-lg}` | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs |
| `{typography.body-md}` | 16px (1rem) | 400 | 1.50 | 0 | Default body text |
| `{typography.body-sm}` | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |
| `{typography.caption}` | 13px (0.81rem) | 400 | 1.30 | -0.13px | Metadata, tags |
| `{typography.caption-sm}` | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |
| `{typography.micro-label}` | 11px (0.69rem) | 600 | 1.00 | 0 (uppercase) | Tiny badges, filter labels |
| `{typography.code-body}` | 15px | 400 | 1.50 | 0 | Code blocks |
| `{typography.code-caption}` | 13px | 400 | 1.30 | 0 | Inline code, small technical labels |
| `{typography.code-micro}` | 11px | 400 | 1.30 | 0 (uppercase) | Tiny code labels |

### Principles
Display weights stay between **400 and 425**. The system maxes out at 600, and only for 11px uppercase labels — heavy 700+ weights never appear. The narrow weight range keeps the voice consistent across editorial display and functional UI text.

Headings use **tight line-heights** (1.00–1.24) while body breathes at 1.50. The contrast creates clear visual hierarchy without resorting to weight changes. OpenType feature controls (`"cv01", "cv11", "cv12", "cv13", "ss07"` on display, `"calt" 0` on body) fine-tune character alternates for different contexts.

The single typographically loud moment in the system is the **112px / -4.48px hero display** — almost machined, like precision-cut steel letterforms. Everything else scales down from there with proportional tracking adjustments.

### Note on Font Substitutes
If waldenburgNormal is unavailable, **Inter** or **Space Grotesk** are the closest open-source substitutes — both have the geometric, slightly condensed feel. IBM Plex Mono is on Google Fonts and transfers cleanly.

## Layout

### Spacing System
- **Base unit:** 8px (with 1px hairline and 2px micro-step).
- **Tokens:** `{spacing.px}` 1px · `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 6px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.section}` 48px · `{spacing.section-lg}` 64px · `{spacing.section-xl}` 96px.
- **Section padding (vertical):** `{spacing.section-lg}` to `{spacing.section-xl}` (64–120px) for major bands — generous breathing room on the dark canvas.
- **Card internal padding:** `{spacing.xl}` (24px) for `{component.card-dark}`; 32–48px for `{component.card-feature}`.
- **Component padding:** `{spacing.base}` (8px) for buttons, inputs, badges; `{spacing.md}` (12px) for secondary button horizontal padding.

### Grid & Container
- **Max content width:** ~1440px (inferred from breakpoints). Full-bleed dark sections with centered, max-width content.
- **Page gutter:** 32px on desktop, 16px on mobile.
- **Multi-column layouts:** 2–3 columns on desktop, single column on mobile.
- **Card grids:** CSS Grid with consistent 16–24px gaps.

### Whitespace Philosophy
Sanity uses **aggressive vertical spacing** between sections (64–120px) to create breathing room on the dark canvas. Within sections, spacing is tighter (16–32px), creating dense information clusters separated by generous voids. The rhythm gives the page a "slides" quality — each section feels like its own focused frame.

## Elevation

The system has essentially **no shadow tier** in the traditional sense.

- **Level 0 (Flat):** Default state for most elements. Dark surfaces create depth through color alone.
- **Level 1 (Subtle):** `0px 0px 0px 1px #212121` — a border-like ring shadow for minimal containment without visible borders.
- **Level 2 (Focus):** `0 0 0 2px var(--color-blue-500)` — the 2px blue focus ring for inputs and interactive elements.
- **Level 3 (Overlay):** Backdrop-filter blur + semi-transparent dark — navigation overlay, modal backgrounds.

Sanity's depth system is almost entirely **colorimetric**. Elevation is communicated through surface color shifts: `{colors.surface-base}` (ground) → `{colors.surface-elevated}` (elevated) → `{colors.surface-prominent}` (prominent) → `{colors.surface-inverted}` (inverted/highest). The few shadows that exist are **ring-based** (0px 0px 0px Npx) or **blur-based** (backdrop-filter) rather than offset shadows, maintaining the flat, precision-engineered aesthetic.

Border-based containment (1px solid `{colors.border-subtle}` or `{colors.border-medium}`) serves as the primary spatial separator. The system avoids floating-card aesthetics — everything feels mounted to the surface rather than hovering above it.

## Components

### Buttons

**`button-primary`** — `{colors.sanity-red}` (#f36458) fill, white text, full pill (`{rounded.pill}` — 99999px) radius, 8×16px padding, 16px label weight 400. The single primary CTA across the system: "Get Started", "Sign Up", account-flow primaries.

**`button-primary-hover`** — On hover, background flips to `{colors.electric-blue}` (#0052ef), text stays white. No transform, no shadow change.

**`button-secondary`** — `{colors.sanity-black}` (#0b0b0b) fill with `{colors.text-secondary}` (#b9b9b9) text, full pill, 8×12px padding. Same hover treatment — shifts to electric blue.

**`button-outlined`** — White (`{colors.surface-inverted}`) fill with near-black text and a 1px `{colors.border-dark}` outline. Full pill, 8px padding. Used on inverted/light sections.

**`button-ghost`** — `{colors.surface-elevated}` (#212121) fill with silver text, 5px (`{rounded.sm}`) radius, 0×12px padding, 1px subtle border. The only non-pill primary CTA style.

**`button-uppercase-label`** — Transparent or `{colors.surface-elevated}` fill, silver text in `{typography.micro-label}` (11px / 600 / uppercase). Used for tab-like navigation and filter controls.

### Cards

**`card-dark`** — `{colors.surface-elevated}` (#212121) background, 1px `{colors.border-medium}` border, `{rounded.md}` (6px) radius, 24px padding. Titles in white, body in silver. Hover: subtle border color shift.

**`card-feature`** — `{colors.sanity-black}` (#0b0b0b) or full-bleed image background, no border or 1px subtle, `{rounded.lg}` (12px) radius, 32–48px padding. Contains large imagery with overlaid text — the maximum container radius in the system before jumping to the pill.

### Inputs

**`text-input`** — `{colors.sanity-black}` (#0b0b0b) background, silver text, 1px `{colors.border-subtle}` border, `{rounded.xs}` (3px) radius, 8×12px padding.

**`text-input-focus`** — On focus, the background shifts to `{colors.focus-cyan}` (#072227) — a deep cyan tint — and the border becomes a 2px solid `{colors.electric-blue}` ring.

**`textarea`** — Same treatment as `{component.text-input}` with vertical resize.

**`search-input`** — `{colors.sanity-black}` background, silver text, no visible border, 0×12px padding, `{rounded.xs}` (3px) radius. Placeholder in `{colors.text-tertiary}` (medium gray).

### Navigation

**`top-nav`** — `{colors.sanity-black}` background with backdrop-filter blur, compact padding, 1px `{colors.border-subtle}` bottom border. Logo flush-left (Sanity wordmark), nav links centered, primary CTA right-aligned.

**`nav-link`** — `{typography.body-md}` (16px) in silver. Hover: flips to `{colors.electric-blue}`.

**`nav-cta`** — `{component.button-primary}` styling — coral pill button anchored right.

### Footer

**`footer`** — `{colors.sanity-black}` background, multi-column link layout.

**`footer-section-header`** — White text in `{typography.code-caption}` (13px IBM Plex Mono, uppercase) — a system-readout aesthetic.

**`footer-link`** — Silver, hover to blue, in `{typography.body-md}`.

### Badges

**`badge-neutral-subtle`** — White (`{colors.surface-inverted}`) fill with near-black text, 13px label, full pill, 8px padding. The light variant for use on dark surfaces.

**`badge-neutral-filled`** — `{colors.sanity-black}` fill with white text, 13px label, full pill, 8px padding. The dark variant.

**`tag-code-uppercase`** — Transparent background, `{colors.text-tertiary}` (medium gray) text in `{typography.code-caption}` uppercase. Used as section markers and category tags.

### Code & Misc

**`code-block`** — `{colors.surface-elevated}` (#212121) background, silver text in `{typography.code-body}` (15px IBM Plex Mono), `{rounded.md}` (6px) radius, 16px padding, 1px `{colors.border-medium}` border.

**`focus-ring`** — 2px solid `{colors.electric-blue}` ring on all focusable elements.

**`modal-scrim`** — `{colors.scrim}` (#000000) at 50% opacity with backdrop-filter blur.

**`dropdown-overlay`** — `{colors.sanity-black}` background, 1px subtle border, `{rounded.md}` radius. Anchored to nav and account menus.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≥ 376px | Minimum supported width. Hero typography drops to 38–48px. Single-column stacked layout. |
| Mobile | ≥ 480px | Single-column, full-bleed sections extend edge-to-edge with 16px gutters. Touch targets minimum 44px. |
| Mobile Large | ≥ 720px | Near-tablet layout, some 2-column elements begin appearing. |
| Tablet | ≥ 768px | Transition zone — 2-column layouts begin. Navigation links remain horizontal. |
| Tablet Landscape | ≥ 960px | 2-column layouts begin collapsing to 1-column variants below this. |
| Laptop | ≥ 1100px | Reduced column widths. Hero typography at 72px. |
| Desktop Compact | ≥ 1200px | Slightly condensed desktop layout. |
| Desktop | ≥ 1440px | Standard desktop. Hero typography at 112px with full -4.48px tracking. |
| Desktop XL | ≥ 1640px | Full layout, maximum content width. |

### Touch Targets
- Primary CTAs: minimum 44×44px for all interactive elements on mobile.
- Heading letter-spacing relaxes slightly at mobile sizes (less aggressive negative tracking).

### Collapsing Strategy
- **Navigation:** Horizontal links collapse to hamburger menu below 768px.
- **Hero typography:** Scales 112px → 72px → 48px → 38px across breakpoints, maintaining tight letter-spacing ratios.
- **Grid layouts:** 3-column → 2-column at ~960px, single-column below 768px.
- **Card grids:** Horizontal scrolling on mobile instead of wrapping (preserving card aspect ratios).
- **Section spacing:** Vertical padding reduces by ~40% on mobile (120px → 64px → 48px).
- **Code blocks:** Horizontal scroll with preserved monospace formatting.
- **Image containers:** Switch from fixed aspect ratios to full-width with auto height.

## Known Gaps

- **Custom typeface license:** `waldenburgNormal` is licensed only to Sanity. The spec documents the metrics, weight range, and OpenType feature usage, but the typeface file itself is not redistributable — substitute with Inter or Space Grotesk.
- **Wide-gamut color fallbacks:** `{colors.neon-green}` and `{colors.accent-magenta}` use `color(display-p3 …)` source values; the sRGB fallback hexes (#19d600 and #f600ff) are documented, but the cross-browser display-p3 strategy is not exhaustively captured.
- **Loading skeletons and motion timing:** Skeleton screens, page-transition motion, and micro-interaction easing curves are not visible on the captured surfaces.
- **Sanity Studio chrome:** The embedded editor product uses a related but distinct token set (denser spacing, additional surface colors for inline editing). Not captured here — this spec covers public marketing and documentation only.
- **Form input error states:** The destructive `{colors.error-red}` (#dd0000) is documented, but the full input outline + helper-text combination on validation failure was not visible in the captured surfaces.