What is Sanity's primary brand color?

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.

Does Sanity have a light mode?

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.

What typography does Sanity use, and what should I use if waldenburgNormal isn't available?

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.

What's Sanity's shape language?

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.

Can I use this DESIGN.md to build my own React project?

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.

What's missing from this DESIGN.md spec?

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.

Sanity Design System

Sanity's design system as a DESIGN.md file.

About Sanity DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source sanity.io

Developer Tools & IDEs
Documentation & Knowledge

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.

What makes it distinct

Near-black canvas#0b0b0b is the primary identity, not a dark-mode toggle, with no warm or cool undertone
Extreme negative trackingdisplay headings at 72px+ run -2.88px to -4.48px letter-spacing for a precision-engineered voice
Universal blue hoverevery interactive element shifts to electric blue #0052ef on hover, a single activation signal
Colorimetric depthelevation through surface color shifts (#0b0b0b → #212121 → #353535), never offset shadows
Radius cliffcorners jump from 12px (large card) directly to 99999px (pill); nothing in between

Live at sanity.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

sanity.io

Explore Sanity

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Sanity design system FAQ

Common questions about Sanity's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Sanity in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→