Design System: Sanity

1. Visual Theme & Atmosphere

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:

• Near-black canvas (#0b0b0b) as the default, natural environment -- not a dark "mode" but the primary identity
• waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice
• Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline
• Vivid accent punctuation: neon green, electric blue (#0052ef), and coral-red (#f36458) against the dark field
• Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions
• IBM Plex Mono as the technical counterweight to the editorial display face
• Full-bleed dark sections with content contained in measured max-width containers
• Hover states that shift to electric blue (#0052ef) across all interactive elements -- a consistent "activation" signal