# 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 on dark
Light Gray
#ededed
Light surface, backgrounds
White
#ffffff
Primary text on dark, light surfaces
Sanity Red
#f36458
Primary CTA
Electric Blue
#0052ef
Hover/active state, focus rings
Blue 300
#55beff
Light blue accent
Neon Green
#19d600
Success, accent green
Error Red
#dd0000
Errors, destructive actions

## 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.

### Light Surface

### Small Variants

### Dark Surface

### Badges

Neutral Dark New Featured Active

## Card Examples

Minimal containment with border-based separation. Dark cards use surface color shifts for elevation.

### Light Cards

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 →

### Dark Cards

Schemas
Define your content model
Use code-first schemas to define documents, objects, and fields with full TypeScript support and validation rules.
View docs →
Plugins
Extend with the ecosystem
Community-driven plugin ecosystem with dashboards, custom inputs, media management, and workflow tools.
Browse plugins →
Webhooks
React to content changes
Trigger builds, sync to external systems, and automate workflows whenever your content updates in real-time.
Set up →

## Form Elements

Minimal inputs with subtle borders and blue focus rings. Dark variant uses colorimetric depth.

### Light Form

First Name
Last Name
Email Address We will never share your email.
Message

### Dark Form

Project Name
Dataset
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.

### Light Mode Elevation

Level 0
Canvas
#f7f7f7
Level 1
Surface
#ffffff
Level 2
Elevated
shadow

### Dark Mode Depth (Colorimetric)

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