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
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
1export 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
13await client.fetch(`*[_type=='article']`)
Powering content for
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

RoleFamilySizeWeightLine ht.TrackingPreview
Display / HeroSpace Grotesk112px4001.00-4.48pxStructured
Hero SecondarySpace Grotesk72px4001.05-2.88pxStructured
Section HeadingSpace Grotesk48px4001.08-1.68pxStructured
Heading MediumSpace Grotesk32px4251.24-0.32pxStructured
Body LargeSpace Grotesk18px4001.50-0.18pxReal-time content workspace
BodySpace Grotesk16px4001.50normalReal-time content workspace
CaptionSpace Grotesk13px400-5001.40-0.13pxCaption metadata
Micro LabelSpace Grotesk11px6001.0normal (UC)PLATFORM_01
Code BodyIBM Plex Mono15px4001.50normaldefineType({ ... })
Code MicroIBM Plex Mono11px5001.300.7px (UC)DS_REF / 00

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

3pxXS · Inputs
5pxSM · Ghost buttons
6pxMD · Cards
12pxLG · Feature
∞PILL · Primary CTA

Components — pill primary, surface depth, blue hover

ComponentBackgroundBorderRadiusSample
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