Design System Inspired by 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
2. Color Palette & Roles
Primary Brand
-
Sanity Black (#0b0b0b): The primary canvas and dominant surface color. Not pure black but close enough to feel absolute. The foundation of the entire visual identity.
-
Pure Black (#000000): Used for maximum-contrast moments, deep overlays, and certain border accents.
-
Sanity Red (#f36458): The primary CTA and brand accent -- a warm coral-red that serves as the main call-to-action color. Used for "Get Started" buttons and primary conversion points.
Accent & Interactive
-
Electric Blue (#0052ef): The universal hover/active state color across the entire system. Buttons, links, and interactive elements all shift to this blue on hover. Also used as --color-blue-700 for focus rings and active states.
-
Light Blue (#55beff / #afe3ff): Secondary blue variants used for accent backgrounds, badges, and dimmed blue surfaces.
-
Neon Green (color(display-p3 .270588 1 0)): A vivid, wide-gamut green used as --color-fg-accent-green for success states and premium feature highlights. Falls back to #19d600 in sRGB.
-
Accent Magenta (color(display-p3 .960784 0 1)): A vivid wide-gamut magenta for specialized accent moments.
Surface & Background
-
Near Black (#0b0b0b): Default page background and primary surface.
-
Dark Gray (#212121): Elevated surface color for cards, secondary containers, input backgrounds, and subtle layering above the base canvas.
-
Medium Dark (#353535): Tertiary surface and border color for creating depth between dark layers.
-
Pure White (#ffffff): Used for inverted sections, light-on-dark text, and specific button surfaces.
-
Light Gray (#ededed): Light surface for inverted/light sections and subtle background tints.
Neutrals & Text
-
White (#ffffff): Primary text color on dark surfaces, maximum legibility.
-
Silver (#b9b9b9): Secondary text, body copy on dark surfaces, muted descriptions, and placeholder text.
-
Medium Gray (#797979): Tertiary text, metadata, timestamps, and de-emphasized content.
-
Charcoal (#212121): Text on light/inverted surfaces.
-
Near Black Text (#0b0b0b): Primary text on white/light button surfaces.
Semantic
-
Error Red (#dd0000): Destructive actions, validation errors, and critical warnings -- a pure, high-saturation red.
-
GPC Green (#37cd84): Privacy/compliance indicator green.
-
Focus Ring Blue (#0052ef): Focus ring color for accessibility, matching the interactive blue.
Border System
-
Dark Border (#0b0b0b): Primary border on dark containers -- barely visible, maintaining minimal containment.
-
Subtle Border (#212121): Standard border for inputs, textareas, and card edges on dark surfaces.
-
Medium Border (#353535): More visible borders for emphasized containment and dividers.
-
Light Border (#ffffff): Border on inverted/light elements or buttons needing contrast separation.
-
Orange Border (color(display-p3 1 0.3333 0)): Special accent border for highlighted/featured elements.
3. Typography Rules
Font Family
-
Display / Headline: waldenburgNormal, fallback: waldenburgNormal Fallback, ui-sans-serif, system-ui
-
Body / UI: waldenburgNormal, fallback: waldenburgNormal Fallback, ui-sans-serif, system-ui
-
Code / Technical: IBM Plex Mono, fallback: ibmPlexMono Fallback, ui-monospace
-
Fallback / CJK: Helvetica, fallback: Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei
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.
Hierarchy
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
Principles
-
Extreme negative tracking at scale: Display headings at 72px+ use aggressive negative letter-spacing (-2.88px to -4.48px), creating a tight, engineered quality that distinguishes Sanity from looser editorial typography.
-
Single font, multiple registers: waldenburgNormal handles both editorial display and functional UI text. The weight range is narrow (400-425 for most, 500-600 only for tiny labels), keeping the voice consistent.
-
OpenType feature control: Typography uses deliberate feature settings including "cv01", "cv11", "cv12", "cv13", "ss07" for display sizes and "calt" 0 for body text, fine-tuning character alternates for different contexts.
-
Tight headings, relaxed body: Headings use 1.00-1.24 line-height (extremely tight), while body text breathes at 1.50. This contrast creates clear visual hierarchy.
-
Uppercase for technical labels: IBM Plex Mono captions and small labels frequently use text-transform: uppercase with tight line-heights, creating a "system readout" aesthetic for technical metadata.
4. Component Stylings
Buttons
Primary CTA (Pill)
-
Background: Sanity Red (#f36458)
-
Text: White (#ffffff)
-
Padding: 8px 16px
-
Border Radius: 99999px (full pill)
-
Border: none
-
Hover: Electric Blue (#0052ef) background, white text
-
Font: 16px waldenburgNormal, weight 400
Secondary (Dark Pill)
-
Background: Near Black (#0b0b0b)
-
Text: Silver (#b9b9b9)
-
Padding: 8px 12px
-
Border Radius: 99999px (full pill)
-
Border: none
-
Hover: Electric Blue (#0052ef) background, white text
Outlined (Light Pill)
-
Background: White (#ffffff)
-
Text: Near Black (#0b0b0b)
-
Padding: 8px
-
Border Radius: 99999px (full pill)
-
Border: 1px solid #0b0b0b
-
Hover: Electric Blue (#0052ef) background, white text
Ghost / Subtle
-
Background: Dark Gray (#212121)
-
Text: Silver (#b9b9b9)
-
Padding: 0px 12px
-
Border Radius: 5px
-
Border: 1px solid #212121
-
Hover: Electric Blue (#0052ef) background, white text
Uppercase Label Button
-
Font: 11px waldenburgNormal, weight 600, uppercase
-
Background: transparent or #212121
-
Text: Silver (#b9b9b9)
-
Letter-spacing: normal
-
Used for tab-like navigation and filter controls
Cards
Dark Content Card
-
Background: #212121
-
Border: 1px solid #353535 or #212121
-
Border Radius: 6px
-
Padding: 24px
-
Text: White (#ffffff) for titles, Silver (#b9b9b9) for body
-
Hover: subtle border color shift or elevation change
Feature Card (Full-bleed)
-
Background: #0b0b0b or full-bleed image/gradient
-
Border: none or 1px solid #212121
-
Border Radius: 12px
-
Padding: 32-48px
-
Contains large imagery with overlaid text
Inputs
Text Input / Textarea
-
Background: Near Black (#0b0b0b)
-
Text: Silver (#b9b9b9)
-
Border: 1px solid #212121
-
Padding: 8px 12px
-
Border Radius: 3px
-
Focus: outline with var(--focus-ring-color) (blue), 2px solid
-
Focus background: shifts to deep cyan (#072227)
Search Input
-
Background: #0b0b0b
-
Text: Silver (#b9b9b9)
-
Padding: 0px 12px
-
Border Radius: 3px
-
Placeholder: Medium Gray (#797979)
Navigation
Top Navigation
-
Background: Near Black (#0b0b0b) with backdrop blur
-
Height: auto, compact padding
-
Logo: left-aligned, Sanity wordmark
-
Links: waldenburgNormal 16px, Silver (#b9b9b9)
-
Link Hover: Electric Blue via --color-fg-accent-blue
-
CTA Button: Sanity Red pill button right-aligned
-
Separator: 1px border-bottom #212121
Footer
-
Background: Near Black (#0b0b0b)
-
Multi-column link layout
-
Links: Silver (#b9b9b9), hover to blue
-
Section headers: White (#ffffff), 13px uppercase IBM Plex Mono
Badges / Pills
Neutral Subtle
-
Background: White (#ffffff)
-
Text: Near Black (#0b0b0b)
-
Padding: 8px
-
Font: 13px
-
Border Radius: 99999px
Neutral Filled
-
Background: Near Black (#0b0b0b)
-
Text: White (#ffffff)
-
Padding: 8px
-
Font: 13px
-
Border Radius: 99999px
5. Layout Principles
Spacing System
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 St
