v3.49 — Live Studio shipping today

# Content is structured

Sanity is the headless content operating system for teams who treat content like code. Real-time collaborative Studio, GROQ queries, and APIs that ship as fast as you do.

Get started — free $ npm create sanity@latest
studio.sanity.io / production / schema
Content
Author
Article
Page
Product
System
Datasets
Webhooks
Article — Editing ● PUBLISHED
TITLE
Content is structured
SLUG
/blog/content-is-structured
EXCERPT
Why we believe the content layer of every product belongs in a queryable, typed graph — not a CMS template.
TAGS
launch cms groq v3
1 export default defineType({
2 name: 'article',
3 type: 'document',
4 fields: [
5 defineField({ name: 'title' }),
6 defineField({ name: 'slug' }),
7 defineField({ name: 'excerpt' }),
8 defineField({ name: 'body' }),
9 ],
10})
11
12// query.groq
13 await client.fetch(`*[_type=='article']`)
Powering content for
Figma PUMA National Geographic Sonos Skims Loom Vercel
SECTION_01 / PLATFORM

## Structured, real-time, schema-driven. The CMS that thinks like a database.

Three pillars that turn a content team into an engineering org — without making the editors feel like engineers.

PLATFORM_01

### Structured content engine

Define your schema in code. Every field, every reference, every variant gets a typed contract that flows from Studio to your frontend with zero glue.

PLATFORM_02

### GROQ — query content like an API

One open-source query language, projected against your schema. Sub-50ms reads at the edge, no over-fetch, no GraphQL ceremony.

PLATFORM_03

### Live Studio, multiplayer by default

Twelve editors in one document. Realtime presence, comments tied to fields, branch previews — the Figma model for content.

SECTION_02 / DEVELOPERS

## From schema to production in one deploy.

Sanity is the only headless CMS where the editor surface is generated from your TypeScript — not the other way around.

### Studio is generated from your code

Write a schema once. The editing experience — with validation, presence, previews and references — appears for free.

- → TypeScript-first schemas with full inference
- → 60+ official inputs (block content, portable text, references)
- → Custom inputs as React components
- → Per-document permissions and workflow states

### Query at the edge with GROQ

One query, one round-trip, exactly the shape your component needs.

// fetch the homepage hero const hero = await client.fetch(` *[_type == "page" && slug.current == "home"][0]{ title, "hero": hero{ headline, cta } } `) // → 38ms p99 from the edge
View GROQ docs →
SECTION_03 / PLANS

## Pricing that scales with content, not with seats.

Free for solo developers, transparent for teams, custom only when you need it.

PLAN_FREE

### Developer

$0 / forever

- 3 users, 2 datasets
- 10k documents, 5GB assets
- 100k API requests / mo
- Live Studio + GROQ

Start free
PLAN_GROWTH

### Growth

$15 / user / mo

- Unlimited datasets
- 1M documents, 50GB assets
- 500k API requests / mo
- Content history (30 days)
- Webhooks + scheduled publishing

Choose Growth
PLAN_ENTERPRISE

### Enterprise

Custom / contact

- SSO + audit log + RBAC
- Dedicated infrastructure
- 99.99% SLA, 24/7 support
- Custom retention & residency

Talk to sales

## Structure your content.

Spin up a Studio, query with GROQ, and ship in the next hour. No credit card. No demo to schedule.

Get started — free $ npm create sanity@latest
DS_REF / 00

## The achromatic system underneath the canvas.

A pure-neutral gray ramp punctured by coral CTA, electric-blue interaction, and neon-green status. Depth lives in surface color — not shadow.

### Color

Primary Brand
Sanity Black#0b0b0b
Pure Black#000000
Sanity Red#f36458
Accent & Interactive
Electric Blue#0052ef
Light Blue#55beff
Pale Blue#afe3ff
Neon Green#19d600
Magenta#f502ff
Surface & Neutrals
Dark Gray#212121
Medium Dark#353535
Medium Gray#797979
Silver#b9b9b9
Light Gray#ededed
Pure White#ffffff
Semantic
Error Red#dd0000
GPC Green#37cd84
Focus Ring Blue#0052ef

### Typography — sans + mono, narrow weight band

Role | Family | Size | Weight | Line ht. | Tracking | Preview
--- | --- | --- | --- | --- | --- | ---
Display / Hero | Space Grotesk | 112px | 400 | 1.00 | -4.48px | Structured
Hero Secondary | Space Grotesk | 72px | 400 | 1.05 | -2.88px | Structured
Section Heading | Space Grotesk | 48px | 400 | 1.08 | -1.68px | Structured
Heading Medium | Space Grotesk | 32px | 425 | 1.24 | -0.32px | Structured
Body Large | Space Grotesk | 18px | 400 | 1.50 | -0.18px | Real-time content workspace
Body | Space Grotesk | 16px | 400 | 1.50 | normal | Real-time content workspace
Caption | Space Grotesk | 13px | 400-500 | 1.40 | -0.13px | Caption metadata
Micro Label | Space Grotesk | 11px | 600 | 1.0 | normal (UC) | PLATFORM_01
Code Body | IBM Plex Mono | 15px | 400 | 1.50 | normal | defineType({ ... })
Code Micro | IBM Plex Mono | 11px | 500 | 1.30 | 0.7px (UC) | DS_REF / 00

### Radius — 3px → 12px → pill (no in-between)

3px XS · Inputs
5px SM · Ghost buttons
6px MD · Cards
12px LG · Feature
∞PILL · Primary CTA

### Components — pill primary, surface depth, blue hover

Component | Background | Border | Radius | Sample
--- | --- | --- | --- | ---
Primary CTA (pill) | #f36458 | none | 99999px | Get started
Secondary (dark pill) | #0b0b0b | 1px #212121 | 99999px | $ npm install
Outlined (light pill) | #ffffff | 1px #0b0b0b | 99999px | View docs
Ghost / Subtle | #212121 | 1px #212121 | 5px | Settings
Uppercase Label | transparent | 1px #212121 | 5px | PUBLISHED
Dark Card | #212121 | 1px #353535 | 6px | Card surface
Input (focused) | #0b0b0b | 1px #0052ef + 2px ring | 3px | Editable field
Mono tag | transparent | none | — | DS_REF / 00

View DESIGN.md ↗