# Sanity — Design System
> The back-end built for AI content operations, powering web, mobile, and agentic applications at scale.
- **Canonical:** https://uiuxskills.com/library/sanity
- **Source:** https://www.sanity.io
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:39.534Z

---

---
version: alpha
name: Sanity
description: The Content Operating System for the AI era.
tone: >-
  Technical, precise, and authoritative. The brand speaks directly to engineers and product builders
  with a focus on efficiency and scalability.
color-scheme: light
colors:
  primary: "#FF4100"
  surface: "#FFFFFF"
  surface-dim: "#0B0B0B"
  on-surface: "#0B0B0B"
  on-surface-dim: "#FFFFFF"
  error: "#FF0000"
  outline: "#B9B9B9"
  link: "#0052EF"
  secondary: "#CCD6DD"
  focus-ring: "#FF4100"
typography:
  display-lg:
    fontFamily: Waldenburg
    fontSize: 112px
  display-md:
    fontFamily: Waldenburg
    fontSize: 72px
  headline-lg:
    fontFamily: Waldenburg
    fontSize: 48px
  body-md:
    fontFamily: Waldenburg
    fontSize: 16px
  body-sm:
    fontFamily: IBM Plex Mono
    fontSize: 14px
  label-md:
    fontFamily: Waldenburg
    fontSize: 14px
  label-sm:
    fontFamily: IBM Plex Mono
    fontSize: 10px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E63A00"
  button-secondary:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface-dim}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.outline}"
    typography: "{typography.body-sm}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.link}"
  link-hover:
    textColor: "#003BB8"
  badge:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-surface-dim}"
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.1)
  md: 0 4px 8px rgba(0,0,0,0.2)
  lg: 0 8px 16px rgba(0,0,0,0.3)
---

## Overview

Sanity provides a highly configurable, structured content platform designed for developers and enterprise teams. The visual identity is stark, high-contrast, and technical, emphasizing code-first workflows and developer-centric tooling.

## Colors

The color palette is designed for high-contrast legibility and technical clarity, utilizing a stark black-and-white base with a signature vibrant orange for primary actions.

*   Primary (#FF4100): The signature vibrant orange used for primary CTAs and brand highlights.
*   Surface (#FFFFFF): The primary light background color for the main content areas.
*   Surface-dim (#0B0B0B): The dark background color used for hero sections and code blocks.
*   On-surface (#0B0B0B): Primary text color on light surfaces.
*   On-surface-dim (#FFFFFF): Primary text color on dark surfaces.
*   Error (#FF0000): Semantic color for errors and alerts.
*   Outline (#B9B9B9): Neutral border color for inputs and dividers.
*   Link (#0052EF): Standard link color for navigational elements.
*   Secondary (inferred) (#CCD6DD): Secondary accent color for UI elements.
*   Focus-ring (inferred) (#FF4100): Focus ring color matching the primary brand color.

## Typography

The typography system pairs a bold, custom display face with a clean monospaced font to reinforce the brand's technical, developer-first personality.

*   Display-lg (Waldenburg): Used for hero headlines.
*   Display-md (Waldenburg): Used for secondary headlines.
*   Headline-lg (inferred) (Waldenburg): Section headers.
*   Body-md (Waldenburg): Standard body copy.
*   Body-sm (IBM Plex Mono): Monospaced font for code snippets and technical labels.
*   Label-md (inferred) (Waldenburg): UI labels and navigation items.
*   Label-sm (IBM Plex Mono): Small metadata or helper text.

## Layout

The layout follows a wide-container approach with generous horizontal padding, utilizing a 4px base unit for all spacing to ensure a rhythmic, clean grid. The section order typically follows: nav, hero, social-proof, features, code-showcase, and footer. The hero pattern centers the headline and subhead above primary and secondary CTAs, often anchored by a code snippet or product visual. The design is mobile-first, stacking content and collapsing navigation into a drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate interactive cards from the background, providing subtle depth that feels grounded. 

*   `elevation.sm`: Subtle card lift.
*   `elevation.md`: Standard depth for interactive cards and popovers.
*   `elevation.lg`: Deepest level for modal or drawer overlays.

## Shapes

The brand employs a mix of sharp corners for structural elements and full-pill rounding for primary buttons. This creates a deliberate balance between technical precision and modern, approachable UI.

*   `rounded.sm` to `rounded.lg`: Used for structural containers and cards.
*   `rounded.full`: Reserved for buttons and badges to emphasize interactivity.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and `{colors.surface-dim}` for secondary actions. Always apply `{rounded.full}` to maintain the brand's pill-shaped interactive language.

### Card
Cards utilize `{colors.surface}` with a subtle `{colors.outline}` border. Use `{elevation.md}` for `card-elevated` variants to differentiate them from the background.

### Input Field
Input fields are transparent by default with `{colors.outline}` borders. On focus, the border must transition to `{colors.primary}` to indicate active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs | Use `{colors.primary}` for text on light backgrounds |
| Apply `{typography.body-sm}` for code snippets | Use `{typography.body-md}` for code snippets |
| Use `{rounded.full}` for all buttons | Mix rounded corners with sharp edges on one component |
| Maintain `{spacing.md}` between sections | Use `{spacing.xs}` as a primary layout gutter |
| Use `{colors.surface-dim}` for code blocks | Use `{colors.error}` for non-destructive actions |
| Ensure clear `{colors.primary}` focus states | Use `{typography.display-lg}` for body text |
| Use `{elevation.md}` for elevated cards | Use `{elevation.lg}` for standard UI noise |
| Use `{colors.outline}` for dividers | Use high-contrast black for subtle dividers |

## Content Style

CTA labels should use imperative verbs in sentence case, focusing on direct, action-oriented language like "Start building." 

Headings must be concrete and benefit-driven, emphasizing the power and intelligence of the platform rather than using abstract marketing fluff.

Copy density should be kept light and scannable. Use frequent code blocks and technical terminology to maintain the authoritative, engineer-focused tone.

## Imagery & Icons

Imagery follows a mixed treatment, combining high-quality product screenshots with clean, technical code snippets. Icons are minimal and functional, adhering to the brand's stark design language. Avoid decorative illustrations in favor of direct, informative visuals that demonstrate the platform's capabilities.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Sanity, a minimal and bold developer-focused content platform. Match its technical, precise tone — direct language, no ornamentation. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name (`{colors.primary}`, `{typography.body-sm}`, `{rounded.full}`) — never hardcode hex values, font sizes, or pixel radii.
2. Respect all entries under `components:` exactly. Do not invent variants (e.g. no `button-ghost`, no `card-flat`) unless they appear in the spec.
3. Follow the Layout narrative: mobile-first, one breakpoint at 768px, 4px base unit, section order nav → hero → social-proof → features → code-showcase → footer.
4. Apply the Shapes rule deliberately: `{rounded.sm}` through `{rounded.lg}` for structural containers; `{rounded.full}` exclusively for buttons and badges.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.

## Output contract

**Must:**
- Use token names for all colors, type styles, spacing, radii, elevation, and motion values.
- Render all buttons with `{rounded.full}` and cover hover (`button-primary-hover`), focus (`{colors.focus-ring}`), and disabled states for every interactive component.
- Apply `{typography.body-sm}` (IBM Plex Mono) to all code snippets and technical labels; never use `{typography.body-md}` for code.
- Use `{colors.surface-dim}` as the background for hero sections and code blocks.
- Apply transitions using `{motion.duration-short}` and `{motion.easing-standard}` on interactive state changes.
- Match CTA copy style: imperative verb, sentence case, no trailing punctuation variations beyond the spec.

**Must NOT:**
- Invent colors, fonts, radii, or spacing values absent from the spec.
- Use `{colors.primary}` for body text on light surfaces.
- Apply `{elevation.lg}` to anything other than modals or drawer overlays.
- Add emoji, decorative illustration, or filler marketing copy.
- Rewrite headings, button labels, navigation items, or page copy — visual tokens only.
- Alter page structure or navigation as a side effect of applying styles.

## When in doubt
- If a token is not defined in the spec, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens or variants.
- For ambiguous backgrounds, default to `{colors.surface}` (light) or `{colors.surface-dim}` (dark); use `{colors.on-surface}` / `{colors.on-surface-dim}` for text accordingly.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) exists, it overrides the spec.
- For unspecified breakpoints, default to mobile-first with a single breakpoint at 768px.