Sanity Design System

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

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

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.