The Content
Operations
Platform

Power content applications and AI workflows at scale. Every application, one platform.

Start building Watch demo npm create sanity@latest
Trusted by leaders and innovators loveholidaysshopifyFigmaRedisreplitANTHROP\CSpotifyLinearSKIMS
Components

One platform

Studio

Structured content

An open-source editing environment you configure with code and deploy anywhere.

Content Lake

Real-time backend

Query with GROQ or GraphQL. Every change is versioned and instantly available.

Agent Actions

AI workflows

Generate, translate and transform content on the same schema your apps read.

Content
Documents
Releases
Media
Assets
Schema types
Releases  /  Autumn dropRun release
KGHomepage hero — autumnPublished
KMProduct listing — outerwearPublished
RREditorial — the layering guideDraft
JSCampaign banner — EUScheduled
import {defineField, defineType} from 'sanity'

export const post = defineType({
  name: 'post',
  type: 'document',
  fields: [
    defineField({name: 'title', type: 'string'}),
    defineField({name: 'body',  type: 'array'}),
  ],
})
Controls

Pills only

Orange 35px Outline 35px Text 35px Text hover Outline hover Ring / focus Disabled
Start building Watch demo npm create sanity@latest ⧉ Disabled
Field position · 55px pill · IBM Plex Mono 24/26.4 · default and focus
DraftScheduledPublished v4.10.2

Every control is a 99999px pill carrying a 1px border that matches its own fill — 35px in the nav with a 13px uppercase mono label, 55px in the hero with Waldenburg 24/26.4 at -0.24px. Text on the orange is always #0b0b0b. The only box-shadow in the entire system is inset 0 0 0 1px #ffffff, used as a ring — there are no drop shadows anywhere. No form field was exposed on the home page, so input chrome and its rest border were not captured; the pair above instead stands the real install pill up in field position and composes the two states from adjacent captured tokens — the pill chassis at 55px / 99999px with IBM Plex Mono 24/26.4, the #353535 hairline at rest, and the one genuinely captured focus recipe, a 1px #ffffff outline plus inset 0 0 0 1px #ffffff.

Typography

Two voices

Hero h1 · Waldenburg · 112/112 · 400 · -4.48pxThe Content Operations Platform
Section h2 · Waldenburg · 72/75.6 · 400 · -2.88pxOne platform
Sub-section h3 · Waldenburg · 48/51.84 · 400 · -1.68pxStructured content
Lead · Waldenburg · 32/36.16 · 425 · -0.32pxPower content applications and AI workflows at scale.
Button large · Waldenburg · 24/26.4 · 400 · -0.24pxStart building
Body · Waldenburg · 16/24 · 400 · normalAn open-source editing environment you configure with code.
Mono chrome · IBM Plex Mono · 13/16.9 · 400 · UPPERProducts · Solutions · Docs · Pricing
Mono label · IBM Plex Mono · 13/19.5 · 400 · UPPERTrusted by leaders and innovators

Weight never moves — 400 everywhere, with a single 425 escape on the lead paragraph. Hierarchy is size plus tracking, and tracking scales proportionally at about -4% of font size rather than in fixed steps. Nothing sans is uppercase; everything mono is.

Palette

Black, white, one orange

Text
white#ffffff
ink#0b0b0b
muted#797979
muted-light#b9b9b9
code-default#e1e4e8
Surfaces & borders
canvas#0b0b0b
white surface#ffffff
surface-raised#212121
deepest#040507
border-mid#353535
border-light#d6d6d6
Accent
orange#ff4100
Syntax — code blocks only
keyword#f97583
string#9ecbff
function#79b8ff
Depth & motion

No shadows

99999px control
12px card
6px row
5px
4px
3px chip
inset 0 0 0 1px #ffffff — the only recipe
1px #353535 hairline
1px #212121 hairline
surface step 0b0b0b to 040507

Motion is 0.2s ease-out on transform, color and background-color, with opacity/visibility at 0.2s/0s. The one unusual entry is flex-grow 1s linear — the segmented indicator above advances by growing a flex child rather than translating it. No scroll-linked or entrance animation, no gradients, no backdrop-filter, no canvas or WebGL, no grain.