A near-black stage rather than the white-with-orange the CMS category implies, and strictly two-voiced: Waldenburg carries every headline and content role at a single weight 400 with tracking scaled proportionally to about -4% of font size, while IBM Plex Mono at 13px uppercase carries all the chrome, with nothing in between the two registers. Every control is a full pill whose 1px border matches its own fill, and the install command sits beside the CTAs as an outlined pill with a copy icon. There are no drop shadows at all — the only recipe is an inset white ring — and every remaining colour is GitHub-dark syntax colour locked inside code blocks.
Browse Sanity in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: sanity.io (live DOM, computed styles), 2026-07-19. Coverage: home. Responsive: breakpoints not captured. A cookie banner was present and only non-essential cookies were declined; no other interaction.
Not the "white site with a red-orange accent" the category suggests — Sanity's home is a near-black #0b0b0b stage with white type, punctuated by full-bleed #ff4100 orange bands. Two faces do all the work and they are held in strict opposition: Waldenburg, a neo-grotesque, carries every headline and content role at a single weight 400 with aggressive negative tracking (-4% at the 112px hero); IBM Plex Mono carries every piece of chrome — nav links, buttons, eyebrows, labels — always 13px, always UPPERCASE. So the page reads as editorial display type sitting on a developer-console UI layer, with nothing in between.
Every control is a 99999px pill with a 1px border, and the hero's third "button" is not a button at all but an outlined pill containing npm create sanity@latest with a copy icon — the install command promoted to a primary call to action. Surfaces are flat: there are no drop shadows anywhere, only a inset 0 0 0 1px #ffffff ring. All remaining colour is syntax colour, borrowed from a GitHub-dark code theme.
Feels: black-stage, editorial, developer-console, strictly two-voiced.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Primary text on black; also a surface |
| ink | #0b0b0b | Text on white and on the orange band |
| muted | #797979 | Secondary copy on black |
| muted-light | #b9b9b9 | Tertiary copy |
| code-default | #e1e4e8 | Default code text |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #0b0b0b | The dominant page ground |
| white surface | #ffffff | Inverted sections |
| surface-raised | #212121 | Cards, product rows, panels on black |
| deepest | #040507 | Darkest inset ground |
| border-dark | #212121 (1px) | Hairline between dark surfaces |
| border-mid | #353535 (1px) | Emphasised hairline on black |
| border-white | #ffffff (1px) | Outline controls on black |
| border-ink | #0b0b0b (1px) | Outline controls on white/orange |
| border-light | #d6d6d6 (1px) | Hairline on white |
| Token | Hex | Role / usage |
|---|---|---|
| orange | #ff4100 | The one accent — primary CTA fill, full-bleed logo band |
| Token | Hex | Role / usage |
|---|---|---|
| syntax-keyword | #f97583 | Code blocks only |
| syntax-string | #9ecbff | Code blocks only |
| syntax-fn | #79b8ff | Code blocks only |
Rules: #ff4100 is the only non-neutral in chrome, and text on it is always #0b0b0b, never white. The pink/blue trio exists exclusively inside code samples — never in UI.
Waldenburg, -apple-system, system-ui, sans-serif — held at weight 400 (one lead paragraph uses the variable weight 425)."IBM Plex Mono", ui-monospace, monospace — always 13px, always uppercase, except inside code samples.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 112/112 px | 400 | -4.48px (-4%) |
| Section h2 | 72/75.6 px | 400 | -2.88px (-4%) |
| Sub-section h3 | 48/51.84 px | 400 | -1.68px (-3.5%) |
| Lead paragraph | 32/36.16 px | 425 | -0.32px |
| Button label (large) | 24/26.4 px | 400 | -0.24px |
| Body | 16/24 px | 400 | normal |
| Mono chrome / eyebrow | 13/16.9 px | 400 | normal, UPPERCASE |
| Mono label (small) | 13/19.5 px | 400 | normal, UPPERCASE |
Patterns: weight never moves — 400 everywhere, with a single 425 escape. Hierarchy is size + tracking only, and tracking scales proportionally (about -4% of font size) rather than by a fixed step. Line-height at the hero is exactly 1.0. Nothing sans is uppercase; everything mono is.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.