### Sanity - Headless CMS. - Red accent, content-first editorial layout - Sanity's website is a developer-content platform rendered as a nocturnal command ce…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
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
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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
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)
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
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
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
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
4,600+ AI skills, agents & workflows. Install in 60 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.