# Sanity · Design system migration spec

> Source: https://www.sanity.io  ·  Curated by OpenDesign  ·  en

> A strong example of a modern developer platform that uses high-contrast typography and strict spatial discipline to convey authority.

## 1. Identity DNA

Like a well-documented API, this system is defined by what it chooses not to include. The aesthetic is one of deliberate reduction—a clean, monochromatic base where every element must justify its presence, much like a developer scrutinizes each line of code for necessity and purpose.

**One-liner:** A modern headless CMS platform designed for structured content operations and developer flexibility.
**Keywords:** content infrastructure · developer-first · structured content · AI-powered · enterprise scale
**Analogy:** The operating system for digital content, bridging editorial workflows with developer tooling.

## 2. Color

The color system is an exercise in restraint, built on a foundation of stark monochrome. A single, functional blue accent is reserved exclusively for brand identity and primary action states, ensuring color serves a clear hierarchical purpose rather than decorative impulse.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0b0b0b` | main background |
| `--bg-soft` | `#151515` | card background |
| `--bg-quiet` | `#ffffff` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#b9b9b9` | secondary text |
| `--muted` | `#797979` | placeholder |
| `--muted-soft` | `#353535` | weak hint |
| `--accent` | `#ff5400` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast foundation with a singular vibrant accent for clear hierarchy and action.

The guiding principle is that color is information; its absence is equally meaningful, establishing a clear visual grammar where neutrality is the default and accent is the exception.

## 3. Typography

Typographic voice is split between a transitional serif for display elements and a clean sans-serif for body copy, establishing a clear distinction between brand statements and technical content. The hierarchy is functional, not decorative, with a monospace typeface grounding technical elements in a familiar developer lexicon.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -1.14px | Main hero headline |
| headline | 40px | 1.1 | 400 | -0.5px | Section headers |
| body | 16px | 1.5 | 400 | 0px | Standard body text |
| caption | 12px | 1.5 | 400 | 0px | Navigation and metadata |

## 4. Spacing

Spacing operates on a consistent, generous rhythm, treating white space as an active structural component rather than passive emptiness.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px-based spatial system ensuring tight, purposeful alignment.

## 5. Surfaces

Surfaces are defined by subtlety, using a consistent shadow and border treatment to create gentle depth without drawing attention to itself. This approach maintains a flat, clean plane where content is the primary focus, and interface elements recede into the background.

- **Radius:** sm 4px · md 8px · lg 12px · pill 99999px
- **Borders:** Subtle 1px borders or 1px inset strokes; relies on background contrast for depth.

## 6. Layout

The layout skeleton is a focused, single-column arrangement centered in the viewport, prioritizing content clarity over spatial complexity. Generous white space surrounds the central column, creating a document-like feel that directs the eye inward and minimizes visual competition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric splits for feature showcases, full-width backgrounds for immersive hero sections.

## 7. Motion & Interaction

Motion is used with surgical precision, limited to the functional feedback of hover states and content loading. Transitions are smooth and brief, designed to acknowledge user interaction without introducing distraction or theatrical flourish.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and opacity transitions for interactive states
  - Standard easing curves for predictable feedback
  - Opacity fades for content reveals

- **Hover:** Immediate transition of background color or border-color for clarity.
- **Click:** Subtle opacity reduction for tactile feedback.
- **Transition:** 150ms cubic-bezier(0.4, 0, 0.2, 1) applied to color, background-color, and opacity.
- **Keyboard:** Standard focus outlines, primarily relying on visual contrast.

## 8. Voice & Don'ts

The system's voice is professional and technical, employing clear, concise language that mirrors the directness of its visual design. Headlines focus on functionality, and calls to action are straightforward, avoiding ambiguity and excess.

- **Tone:** Professional, technical, and confident.
- **Headline style:** Short, declarative statements emphasizing structure and intelligence.
- **CTA style:** Direct and action-oriented, such as 'Start building' or 'Contact sales'.
- **Avoid:** Marketing fluff or vague promises / Playful or overly casual language / Jargon without context / Aggressive sales tactics

### Don'ts
- ❌ Don't use generic sans-serifs for headlines — screenshot shows a distinct transitional-serif display face.
- ❌ Don't rely on soft grays for primary backgrounds — screenshot shows deep, high-contrast blacks.
- ❌ Don't use rounded squares for primary CTAs — screenshot shows distinct pill-shaped buttons.
- ❌ Don't avoid monospaced type for metadata — screenshot shows it used extensively for navigation.
- ❌ Don't use a multi-color palette — screenshot shows a deliberate focus on a single vibrant orange accent.
- ❌ Don't clutter the hero with too much text — screenshot shows large, breathing typography with minimal supporting copy.

This design deliberately omits decorative elements, complex gradients, and varied accent colors—finding its authority in disciplined restraint.

## System Prompt (paste into AI tool)

```
Sanity is a developer-first CMS platform. The design language balances deep blacks (#0b0b0b) with crisp whites and a vibrant orange accent (#ff5400). Typography pairs a transitional serif for bold headlines with a clean humanist sans for body text and geometric mono for UI elements. The layout is spacious and focused, emphasizing clarity. Key constraints: maintain strict 4px grid adherence; never use multiple accent colors; always use pill shapes for primary buttons. The tone is professional and technical. Avoid any visual clutter or playful elements.
```
