---
name: Sanity
description: "A strong example of a modern developer platform that uses high-contrast typography and strict spatial discipline to convey authority."
version: alpha

colors:
  background: "#0b0b0b"
  primary: "#ffffff"
  secondary: "#b9b9b9"
  tertiary: "#ff5400"
  neutral: "#797979"
  bg-soft: "#151515"
  bg-quiet: "#ffffff"
  muted-soft: "#353535"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.14px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 99999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A modern headless CMS platform designed for structured content operations and developer flexibility.

*The operating system for digital content, bridging editorial workflows with developer tooling.*

## Colors

High-contrast foundation with a singular vibrant accent for clear hierarchy and action.

- **Background (`#0b0b0b`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#b9b9b9`)** — uses `ink-soft` token
- **Accent (`#ff5400`)** — uses `accent` token
- **Muted (`#797979`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Consistent 4px-based spatial system ensuring tight, purposeful alignment.

## Elevation & Depth

- Borders: Subtle 1px borders or 1px inset strokes; relies on background contrast for depth.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 99999px

## Components

- **button:** Pill-shaped solid accent fills for primary actions; outlined pills for secondary.
- **card:** Content blocks presented on neutral backgrounds with minimal border interference.
- **chip:** Uppercase monospaced badges for categorization and status.
- **input:** Clean bordered fields with monospaced labels.
- **hero:** Massive typography paired with dark, atmospheric imagery.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```