Dark Mode

# Design System Inspired by Sanity

Structured content meets precise design. A dark-first, engineering-grade design language built on achromatic neutrals, tight typography, and vivid accent punctuation.

## Color Palette

Pure achromatic gray scale with vivid accent punctuation. No warm or cool bias in the neutral range.

Sanity Black
#0b0b0b
Primary canvas
Dark Surface
#212121
Elevated cards, containers
Medium Border
#353535
Visible borders, dividers
Medium Gray
#797979
Tertiary text, metadata
Silver
#b9b9b9
Secondary text
Light Gray
#ededed
Light surfaces
White
#ffffff
Primary text on dark
Sanity Red
#f36458
Primary CTA
Electric Blue
#0052ef
Hover/active, focus rings
Blue 300
#55beff
Light blue accent
Neon Green
#19d600
Success, accent green
Error Red
#dd0000
Errors, destructive

## Typography Scale

Space Grotesk (substitute for waldenburgNormal) with tight negative tracking at display sizes. IBM Plex Mono for technical labels.

Display 80px / 700 LH: 1.00 LS: -3.6px
Structure
Heading 1 48px / 600 LH: 1.08 LS: -1.68px
Powers intelligence
Heading 2 38px / 600 LH: 1.10 LS: -1.14px
Content operations
Heading 3 24px / 500 LH: 1.24 LS: -0.24px
Composable content platform
Subheading 20px / 500 LH: 1.13 LS: -0.2px
One API, every platform
Body Large 18px / 400 LH: 1.50 LS: -0.18px
Mirror how your content operations team works. Treat content as data with a structured, API-first approach.
Body 16px / 400 LH: 1.50
Power anything with one unified content platform. Connect to any frontend, any channel, any device.
Caption 13px / 400 LH: 1.50 LS: -0.13px
Loved by 1M+ users and 6K+ teams worldwide. Enterprise-grade content infrastructure.
Mono Label 12px / 500 LH: 1.50 UPPERCASE
CONTENT LAKE · GROQ · STUDIO · SCHEMAS
Code 15px / 400 LH: 1.50 IBM Plex Mono
sanity.fetch('*[_type == "post"]')

## Button Variants

Pill-shaped CTAs with coral-red brand color. All interactive elements hover to electric blue.

### Standard Buttons

### Small Variants

### Badges

Neutral Filled New Featured Active

## Card Examples

Minimal containment with border-based separation. Depth communicated through surface color shifts.

Content Lake
Structured content as data
Store, query, and distribute content across any channel using a single source of truth with real-time collaboration.
Learn more →
GROQ
Query language for content
Purpose-built query language that lets you fetch exactly the content you need, in the shape you want it.
Explore GROQ →
Studio
Customizable editing environment
A fully customizable, open-source editing environment that adapts to your team's workflow and content model.
Try Studio →

### Elevated Cards

Schemas
Define your content model
Use code-first schemas to define documents, objects, and fields with full TypeScript support.
View docs →
Plugins
Extend with the ecosystem
Community-driven plugin ecosystem with dashboards, custom inputs, and workflow tools.
Browse plugins →

## Form Elements

Minimal inputs with subtle borders on the dark canvas. Blue focus rings for accessibility.

Project Name
Dataset
API Token Keep your API token secure. Never commit it to version control.
GROQ Query Write a GROQ query to test against your dataset.

## Spacing Scale

8px base unit. Spacing follows a controlled progression for consistent rhythm.

4px
8px
12px
16px
24px
32px
48px
64px
96px
120px

## Border Radius Scale

Sharp geometry for inputs, subtle rounding for cards, full pills for buttons and badges.

3px
Inputs
5px
Ghost buttons
6px
Cards
12px
Large cards
99999px
Pill / CTA

## Elevation & Depth

Colorimetric depth system. Elevation is communicated through surface color shifts rather than shadows.

Ground
#000000
Canvas
#0b0b0b
Surface
#212121
Prominent
#353535
Inverted
#ffffff