@dante · Backend & Data
Nocturnal developer-content design system: near-black canvas, machined waldenburg-style headlines with extreme negative tracking, coral-red pill CTAs, and electric-blue activation on every hover.
A nocturnal command center for structured content — dark, precise, and deeply engineered. The entire experience sits on a near-black canvas (#0b0b0b) that reads not as a dark-mode toggle but as the natural home of a tool built for people who live in terminals. Where most CMS marketing reaches for friendly pastels, Sanity leans into the gravity of its own product. Full-bleed dark sections frame measured, max-width content like a sequence of focused slides, and every interactive element shares one activation signal: a shift to electric blue.
The foundation is a pure achromatic gray ramp with no warm or cool bias — #0b0b0b → #212121 → #353535 → #797979 → #b9b9b9 → #ededed → #ffffff. Depth is colorimetric: surfaces lighten to signal elevation rather than casting shadows. Against this disciplined backdrop, vivid accents punctuate like signal lights — coral-red (#f36458) for primary CTAs, electric blue (#0052ef) for every hover and focus, and a wide-gamut neon green (sRGB #19d600) for success and premium highlights. Semantic red (#dd0000) marks errors. Borders are hairline #212121/#353535; the coral-red and the blue never share the same resting element.
A single machined sans (waldenburgNormal, substituted by Inter or Space Grotesk) carries both display and UI, with IBM Plex Mono as the technical counterweight. Display headings use extreme negative tracking — -4.48px at the 112px hero, -2.88px at 72px, -1.68px at 48px — creating a precision-cut, engineered voice. Weights stay narrow (400–425), rising to 500–600 only for tiny 11px uppercase labels. Headings run tight (1.00–1.24 leading); body breathes at 1.50. Mono uppercase handles tags, metadata, and section labels for a system-readout aesthetic.
An 8px base scale runs from 1px hairlines to 120px hero padding, with aggressive 64–120px gaps between sections and tighter 16–32px clusters within them. Containers max out near 1440px behind full-bleed dark backgrounds. Border-radius jumps deliberately — 3px inputs, 5–6px cards and ghosts, 12px feature containers, then straight to the 99999px pill for primary buttons and badges, with nothing in between. Depth is ring-based (0 0 0 1px) or backdrop-blur, never offset drop shadows — everything feels mounted to the surface, not floating above it.
Derived view rendered server-side from package tokens and components — no authored copy.
#0b0b0b#000000#212121#353535#797979#b9b9b9#ededed#ffffff#f36458#0052ef#55beff#afe3ff#19d600#f500ff#37cd84#dd0000#072227waldenburgNormal, Inter, 'Space Grotesk', ui-sans-serif, system-ui, sans-serifwaldenburgNormal, Inter, 'Space Grotesk', ui-sans-serif, system-ui, sans-serifwaldenburgNormal, Inter, ui-sans-serif, system-ui, Arial, sans-serifwaldenburgNormal, Inter, ui-sans-serif, system-ui, sans-serif'IBM Plex Mono', ui-monospace, Menlo, monospace{
"hero": "112px/1.00",
"heroSecondary": "72px/1.05",
"section": "48px/1.08",
"headingLarge": "38px/1.10",
"headingMedium": "32px/1.24",
"headingSmall": "24px/1.24",
"subheading": "20px/1.13",
"bodyLarge": "18px/1.50",
"body": "16px/1.50",
"bodySmall": "15px/1.50",
"caption": "13px/1.40",
"label": "11px/1.00"
}Primary CTAs are coral-red (#f36458) full pills; secondary and outlined variants are pills too; ghost uses a 5px dark rectangle. Every variant activates to electric blue (#0052ef) on hover.
Near-black field with a 1px #212121 border and 3px radius. Silver placeholder text, focus shows a 2px electric-blue ring and a deep-cyan (#072227) background shift.
Elevated #212121 surface with a 1px #353535 border and 6px radius — depth comes from surface color, not shadow. White title, silver body, mono uppercase tag.
Small full-pill markers — white subtle, near-black filled, and blue-tinted accent for interactive states.
Machined display hierarchy — extreme negative tracking (-4.48px at hero) and tight 1.00–1.24 leading, weight 400–425. White on the dark canvas.
Quiet silver inline links that activate to electric blue (#0052ef) on hover — the universal Sanity interaction signal.
Full-bleed near-black hero — 112px machined headline with -4.48px tracking, silver subtitle, coral-red pill CTA next to a dark secondary pill.
Sticky top nav on #0b0b0b with backdrop blur, silver links that hover to blue, and a coral-red pill CTA. Hairline #212121 bottom border.
Near-black multi-column footer with silver links hovering to blue and white mono uppercase section headers.
Large machined numeric figure with a mono uppercase label — top-border dividers keep the row structured and flat.
Pull-quote in 38px machined type with a neon-green opening mark — a rare warm-gamut accent against the dark field.
IBM Plex Mono uppercase system tag — a 5px dark rectangle for technical metadata, tokens, and filter chips.
Round avatar with a dark ring shadow that reads on the near-black canvas — used for contributors and team rosters.
Mono uppercase tab list on a #212121 track — the active tab lifts to a #0b0b0b pill, others hover to blue.
A nocturnal command center for structured content — dark, precise, and deeply engineered. The entire experience sits on a near-black canvas (#0b0b0b) that reads not as a dark-mode toggle but as the natural home of a tool built for people who live in terminals. Where most CMS marketing reaches for friendly pastels, Sanity leans into the gravity of its own product. Full-bleed dark sections frame measured, max-width content like a sequence of focused slides, and every interactive element shares one activation signal: a shift to electric blue.
The foundation is a pure achromatic gray ramp with no warm or cool bias — #0b0b0b → #212121 → #353535 → #797979 → #b9b9b9 → #ededed → #ffffff. Depth is colorimetric: surfaces lighten to signal elevation rather than casting shadows. Against this disciplined backdrop, vivid accents punctuate like signal lights — coral-red (#f36458) for primary CTAs, electric blue (#0052ef) for every hover and focus, and a wide-gamut neon green (sRGB #19d600) for success and premium highlights. Semantic red (#dd0000) marks errors. Borders are hairline #212121/#353535; the coral-red and the blue never share the same resting element.
A single machined sans (waldenburgNormal, substituted by Inter or Space Grotesk) carries both display and UI, with IBM Plex Mono as the technical counterweight. Display headings use extreme negative tracking — -4.48px at the 112px hero, -2.88px at 72px, -1.68px at 48px — creating a precision-cut, engineered voice. Weights stay narrow (400–425), rising to 500–600 only for tiny 11px uppercase labels. Headings run tight (1.00–1.24 leading); body breathes at 1.50. Mono uppercase handles tags, metadata, and section labels for a system-readout aesthetic.
An 8px base scale runs from 1px hairlines to 120px hero padding, with aggressive 64–120px gaps between sections and tighter 16–32px clusters within them. Containers max out near 1440px behind full-bleed dark backgrounds. Border-radius jumps deliberately — 3px inputs, 5–6px cards and ghosts, 12px feature containers, then straight to the 99999px pill for primary buttons and badges, with nothing in between. Depth is ring-based (0 0 0 1px) or backdrop-blur, never offset drop shadows — everything feels mounted to the surface, not floating above it.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css