Design System Preview: Sanity (Dark)

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