Sanity's website is 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. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.

The signature typographic voice is waldenburgNormal -- a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality. At 112px hero scale with -4.48px tracking, the type feels almost machined -- like precision-cut steel letterforms. This is paired with IBM Plex Mono for code and technical labels, creating a dual-register voice: editorial authority meets developer credibility.

What makes Sanity distinctive is the interplay between its monochromatic dark palette and vivid, saturated accent punctuation. The neutral scale runs from pure black through a tightly controlled gray ramp (`#0b0b0b` -> `#212121` -> `#353535` -> `#797979` -> `#b9b9b9` -> `#ededed` -> `#ffffff`) with no warm or cool bias -- just pure, achromatic precision. Against this disciplined backdrop, a neon green accent (display-p3 green) and electric blue (`#0052ef`) land with the impact of signal lights in a dark control room. The orange-red CTA (`#f36458`) provides the only warm touch in an otherwise cool system.

**Key Characteristics:**

*Note: waldenburgNormal is a custom typeface. For external implementations, use Inter or Space Grotesk as the sans substitute (geometric, slightly condensed feel). IBM Plex Mono is available on Google Fonts.*

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |

|------|------|------|--------|-------------|----------------|-------|

| Display / Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (tight) | -4.48px | Maximum impact, compressed tracking |

| Hero Secondary | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (tight) | -2.88px | Large section headers |

| Section Heading | waldenburgNormal | 48px (3rem) | 400 | 1.08 (tight) | -1.68px | Primary section anchors |

| Heading Large | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (tight) | -1.14px | Feature section titles |

| Heading Medium | waldenburgNormal | 32px (2rem) | 425 | 1.24 (tight) | -0.32px | Card titles, subsection headers |

| Heading Small | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (tight) | -0.24px | Smaller feature headings |

| Subheading | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (tight) | -0.2px | Sub-section markers |

| Body Large | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs, descriptions |

| Body | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | Standard body text |

| Body Small | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |

| Caption | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | Metadata, descriptions, tags |

| Small Caption | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |

| Micro / Label | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | Uppercase labels, tiny badges |

| Code Body | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | Code blocks, technical content |

| Code Caption | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | Inline code, small technical labels |

| Code Micro | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | Tiny code labels, uppercase tags |

**Primary CTA (Pill)**

**Secondary (Dark Pill)**

**Outlined (Light Pill)**

**Ghost / Subtle**

**Uppercase Label Button**

**Dark Content Card**

**Feature Card (Full-bleed)**

**Text Input / Textarea**

**Search Input**

**Top Navigation**

**Footer**

**Neutral Subtle**

**Neutral Filled**

Base unit: **8px**

| Token | Value | Usage |

|-------|-------|-------|

| space-1 | 1px | Hairline gaps, border-like spacing |

| space-2 | 2px | Minimal internal padding |

| space-3 | 4px | Tight component internal spacing |

| space-4 | 6px | Small element gaps |

| space-5 | 8px | Base unit -- button padding, input padding, badge padding |

| space-6 | 12px | Standard component gap, button horizontal padding |

| space-7 | 16px | Section internal padding, card spacing |

| space-8 | 24px | Large component padding, card internal spacing |

| space-9 | 32px | Section padding, container gutters |

| space-10 | 48px | Large section vertical spacing |

| space-11 | 64px | Major section breaks |

| space-12 | 96-120px | Hero vertical padding, maximum section spacing |

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. This rhythm gives the page a "slides" quality -- each section feels like its own focused frame.

| Token | Value | Usage |

|-------|-------|-------|

| radius-xs | 3px | Inputs, textareas, subtle rounding |

| radius-sm | 4-5px | Secondary buttons, small cards, tags |

| radius-md | 6px | Standard cards, containers |

| radius-lg | 12px | Large cards, feature containers, forms |

| radius-pill | 99999px | Primary buttons, badges, nav pills |

| Level | Value | Usage |

|-------|-------|-------|

| Level 0 (Flat) | none | Default state for most elements -- dark surfaces create depth through color alone |

| Level 1 (Subtle) | 0px 0px 0px 1px `#212121` | Border-like shadow for minimal containment without visible borders |

| Level 2 (Focus) | 0 0 0 2px `var(--color-blue-500)` | Focus ring for inputs and interactive elements |

| Level 3 (Overlay) | Backdrop blur + semi-transparent dark | Navigation overlay, modal backgrounds |

Sanity's depth system is almost entirely **colorimetric** rather than shadow-based. Elevation is communicated through surface color shifts: `#0b0b0b` (ground) -> `#212121` (elevated) -> `#353535` (prominent) -> `#ffffff` (inverted/highest). This approach is native to dark interfaces where traditional drop shadows would be invisible. 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 `#212121` or `#353535`) serves as the primary spatial separator, with the border darkness calibrated to be visible but not dominant. The system avoids "floating card" aesthetics -- everything feels mounted to the surface rather than hovering above it.

| Name | Width | Behavior |

|------|-------|----------|

| Desktop XL | >= 1640px | Full layout, maximum content width |

| Desktop | >= 1440px | Standard desktop layout |

| Desktop Compact | >= 1200px | Slightly condensed desktop |

| Laptop | >= 1100px | Reduced column widths |

| Tablet Landscape | >= 960px | 2-column layouts begin collapsing |

| Tablet | >= 768px | Transition zone, some elements stack |

| Mobile Large | >= 720px | Near-tablet layout |

| Mobile | >= 480px | Single-column, stacked layout |

| Mobile Small | >= 376px | Minimum supported width |

```

Background: #0b0b0b (near-black canvas)

Surface: #212121 (elevated cards/containers)

Border: #353535 (visible) / #212121 (subtle)

Text Primary: #ffffff (white on dark)

Text Secondary: #b9b9b9 (silver on dark)

Text Tertiary: #797979 (medium gray)

CTA: #f36458 (coral-red)

Interactive: #0052ef (electric blue, all hovers)

Success: #19d600 (green, sRGB fallback)

Error: #dd0000 (pure red)

Light Surface: #ededed / #ffffff (inverted sections)

```

**Landing page section:**

"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue."

**Card grid:**

"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card."

**Form section:**

"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field."

**Navigation bar:**

"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center/right: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121."

1. **Start dark**: Begin with `#0b0b0b` background, `#ffffff` primary text, `#b9b9b9` secondary text

2. **Add structure**: Use `#212121` surfaces and `#353535` borders for containment -- no shadows

3. **Apply typography**: Inter (or Space Grotesk) with tight letter-spacing on headings, 1.50 line-height on body

4. **Color punctuation**: Add `#f36458` for CTAs and `#0052ef` for all hover/interactive states

5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections

6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata

7. **Polish**: Ensure all interactive elements hover to `#0052ef`, all buttons are pills or subtle 5px radius, borders are hairline (1px)