# Sanity — Marketing site Design Spec

> Source: sanity.io (live DOM, computed styles), 2026-07-19.
> Coverage: home. Responsive: breakpoints not captured. A cookie banner was present and only non-essential cookies were declined; no other interaction.

## 1. Visual Theme & Atmosphere

Not the "white site with a red-orange accent" the category suggests — Sanity's home is a **near-black `#0b0b0b` stage** with white type, punctuated by full-bleed `#ff4100` orange bands. Two faces do all the work and they are held in strict opposition: **Waldenburg**, a neo-grotesque, carries every headline and content role at a single weight 400 with aggressive negative tracking (-4% at the 112px hero); **IBM Plex Mono** carries every piece of chrome — nav links, buttons, eyebrows, labels — always 13px, always UPPERCASE. So the page reads as editorial display type sitting on a developer-console UI layer, with nothing in between.

Every control is a `99999px` pill with a 1px border, and the hero's third "button" is not a button at all but an outlined pill containing `npm create sanity@latest` with a copy icon — the install command promoted to a primary call to action. Surfaces are flat: there are no drop shadows anywhere, only a `inset 0 0 0 1px #ffffff` ring. All remaining colour is **syntax colour**, borrowed from a GitHub-dark code theme.

Feels: black-stage, editorial, developer-console, strictly two-voiced.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Primary text on black; also a surface |
| ink | `#0b0b0b` | Text on white and on the orange band |
| muted | `#797979` | Secondary copy on black |
| muted-light | `#b9b9b9` | Tertiary copy |
| code-default | `#e1e4e8` | Default code text |

| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#0b0b0b` | The dominant page ground |
| white surface | `#ffffff` | Inverted sections |
| surface-raised | `#212121` | Cards, product rows, panels on black |
| deepest | `#040507` | Darkest inset ground |
| border-dark | `#212121` (1px) | Hairline between dark surfaces |
| border-mid | `#353535` (1px) | Emphasised hairline on black |
| border-white | `#ffffff` (1px) | Outline controls on black |
| border-ink | `#0b0b0b` (1px) | Outline controls on white/orange |
| border-light | `#d6d6d6` (1px) | Hairline on white |

| Token | Hex | Role / usage |
|---|---|---|
| orange | `#ff4100` | The one accent — primary CTA fill, full-bleed logo band |

| Token | Hex | Role / usage |
|---|---|---|
| syntax-keyword | `#f97583` | Code blocks only |
| syntax-string | `#9ecbff` | Code blocks only |
| syntax-fn | `#79b8ff` | Code blocks only |

Rules: `#ff4100` is the only non-neutral in chrome, and text on it is always `#0b0b0b`, never white. The pink/blue trio exists exclusively inside code samples — never in UI.

## 3. Typography Rules

- Display + content: `Waldenburg, -apple-system, system-ui, sans-serif` — held at weight **400** (one lead paragraph uses the variable weight **425**).
- Chrome + code: `"IBM Plex Mono", ui-monospace, monospace` — always 13px, always uppercase, except inside code samples.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 112/112 px | 400 | -4.48px (-4%) |
| Section h2 | 72/75.6 px | 400 | -2.88px (-4%) |
| Sub-section h3 | 48/51.84 px | 400 | -1.68px (-3.5%) |
| Lead paragraph | 32/36.16 px | 425 | -0.32px |
| Button label (large) | 24/26.4 px | 400 | -0.24px |
| Body | 16/24 px | 400 | normal |
| Mono chrome / eyebrow | 13/16.9 px | 400 | normal, UPPERCASE |
| Mono label (small) | 13/19.5 px | 400 | normal, UPPERCASE |

Patterns: **weight never moves** — 400 everywhere, with a single 425 escape. Hierarchy is size + tracking only, and tracking scales proportionally (about -4% of font size) rather than by a fixed step. Line-height at the hero is exactly 1.0. Nothing sans is uppercase; everything mono is.

## 4. Component Stylings

- **Nav pill** — IBM Plex Mono 13/16.9 uppercase, `border-radius:99999px`, height 35px, padding `4px 12px`. Three variants: text-only (`LOG IN`, section links), 1px `#ffffff` outline (`CONTACT SALES`), and `#ff4100` fill with `#0b0b0b` text and a matching 1px `#ff4100` border (`GET STARTED`).
- **Hero button** — Waldenburg 24/26.4 at 400/-0.24px, `border-radius:99999px`, height 55px, padding `8px 32px`. Primary is `#ff4100` on `#0b0b0b` text; secondary is `#ffffff` on `#0b0b0b` text; both carry a 1px border matching their fill.
- **Signature: install pill** — the same 55px outlined pill, 1px `#ffffff`, transparent fill, containing `npm create sanity@latest` set in IBM Plex Mono at 24/26.4 with a trailing copy glyph. The install command is treated as a first-class CTA alongside the two buttons.
- **Content row** — `border-radius:6px`, `#212121` fill, 51px tall, padding 12px: an avatar-initials chip, a document title, and a status word (`Published`).
- **Card / panel** — `border-radius:12px` on `#212121` with a `1px #353535` hairline; no shadow.
- **Ring** — the only box-shadow in the system is `inset 0 0 0 1px #ffffff`, used as a focus/selected ring.
- **Logo band** — full-bleed `#ff4100` strip with `#0b0b0b` monochrome customer logos and a 13px uppercase mono label at the left.

## 5. Layout Principles

1296px container (a 1219px inner text measure also appears). The hero is **left-aligned, not centred** — a three-line 112px headline hard against the left margin, then a 32px lead, then a row of three pills (orange CTA, white CTA, install pill). Below it, a full-bleed orange logo band. Sections then alternate `#0b0b0b` and `#ffffff` grounds full-bleed, each with a mono uppercase eyebrow above a 72px Waldenburg heading. Nav is a 66px bar: wordmark left, mono uppercase links centred, three pills right.

## 6. Depth & Elevation

Radius scale: `99999px` (all buttons and pills) · `12px` (cards) · `6px` (content rows) · `5px` · `4px` · `3px` (small chips and code chrome).

Shadows: **there are none.** The only recipe on the page is `inset 0 0 0 1px #ffffff` — a ring, not a lift. Depth is entirely (a) the `#0b0b0b` → `#212121` surface step and (b) 1px hairlines at `#212121` / `#353535` on dark and `#d6d6d6` on light.

## 7. Motion

- `transform, color, background-color` — `0.2s ease-out` (the house transition)
- `color` — `0.2s ease-out`
- `opacity, visibility` — `0.2s ease` / `0s`
- `transform, opacity, visibility` — `0.1s, 0.2s, 0s linear`
- `flex-grow` — `1s linear`, animating a segmented progress/indicator bar by growing a flex child rather than translating it

No scroll-linked or entrance animation observed.

## 8. Backgrounds, Effects & WebGL

None observed — no gradients, `backdrop-filter`, blend modes, canvas, WebGL, video backgrounds or grain. Every surface is a flat solid. Visual interest comes from the sheer scale of the type, the full-bleed orange band, and product screenshots.

## 9. Do's and Don'ts

### Do
- Ground the page on `#0b0b0b` and step raised surfaces to `#212121`.
- Split the type system in two: Waldenburg 400 for all display and content, IBM Plex Mono 13px UPPERCASE for all chrome.
- Scale negative tracking with size — roughly -4% of the font size at display sizes.
- Make every control a `99999px` pill with a 1px border matching its fill; 35px in the nav, 55px in the hero.
- Put `#0b0b0b` text on the orange `#ff4100` fill.
- Promote the install command to a CTA — an outlined pill holding mono text and a copy icon.
- Left-align the hero.

### Don't
- Don't use any weight other than 400 (a 425 lead is the one exception).
- Don't add drop shadows — the only recipe is `inset 0 0 0 1px #ffffff`.
- Don't set white text on the orange band.
- Don't let the syntax colours (`#f97583`, `#9ecbff`, `#79b8ff`) out of code blocks.
- Don't uppercase the sans, and don't set the mono in sentence case.
- Don't centre the hero.

## 10. Responsive Behavior

Not captured. Container caps at 1296px.

## 11. Agent Prompt Guide

- Canvas `#0b0b0b` · Surface `#212121` · Text `#ffffff` · Muted `#797979` · Border `#353535` · Accent `#ff4100`
- Font: Waldenburg 400 / IBM Plex Mono 13px UPPER · Body: 16/24 · Radius: 99999px control / 12px card / 6px row · Control height: 35px nav, 55px hero
- Focus: `inset 0 0 0 1px #ffffff` · Hover: `0.2s ease-out` on transform/color/background-color

<sanity_design_language>
A near-black `#0b0b0b` stage — not the white-with-orange the CMS category implies — with `#212121` raised surfaces, `#040507` insets, and full-bleed `#ff4100` orange bands. The system is strictly two-voiced: **Waldenburg** at a single weight 400 carries every headline and content role with tracking scaled to about -4% of size (112/112 at -4.48px hero, 72/75.6 at -2.88px, 48/51.84 at -1.68px, 32/36.16 lead at variable 425, 16/24 body), while **IBM Plex Mono at 13px UPPERCASE** carries all chrome — nav, buttons, eyebrows, labels — with nothing in between the two. Every control is a `99999px` pill with a 1px border matching its fill: 35px in the nav, 55px in the hero at Waldenburg 24/26.4, and text on the orange is always `#0b0b0b`, never white. Signature: the install command `npm create sanity@latest` sits beside the CTAs as an outlined white pill with a copy icon. There are **no drop shadows at all** — the only recipe is `inset 0 0 0 1px #ffffff` — so depth is the surface step plus 1px `#212121` / `#353535` hairlines; radii are 12px cards and 6px rows. All remaining colour is GitHub-dark syntax colour (`#f97583`, `#9ecbff`, `#79b8ff`) confined to code blocks. Hero is left-aligned in a 1296px container; motion is `0.2s ease-out` on transform/color/background. Feels: black-stage, editorial, developer-console, strictly two-voiced. Avoid: any weight but 400, drop shadows, white text on the orange, syntax colours in UI, uppercase sans, a centred hero.
</sanity_design_language>