Sanity — Style Reference

> Sanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (`#0b0b0b`) that reads less like a "dark mode toggle" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.

**Theme:** light

**Source website:** [https://www.sanity.io/](https://www.sanity.io/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| color 1 | `#0b0b0b` | `--color-color-1` | color 1 role extracted from the source design |

| color 2 | `#212121` | `--color-color-2` | color 2 role extracted from the source design |

| color 3 | `#353535` | `--color-color-3` | color 3 role extracted from the source design |

| color 4 | `#797979` | `--color-color-4` | color 4 role extracted from the source design |

| color 5 | `#b9b9b9` | `--color-color-5` | color 5 role extracted from the source design |

| color 6 | `#ededed` | `--color-color-6` | color 6 role extracted from the source design |

| color 7 | `#ffffff` | `--color-color-7` | color 7 role extracted from the source design |

| color 8 | `#0052ef` | `--color-color-8` | color 8 role extracted from the source design |

| color 9 | `#f36458` | `--color-color-9` | color 9 role extracted from the source design |

| pure black | `#000000` | `--color-pure-black` | pure black role extracted from the source design |

| light blue | `#55beff` | `--color-light-blue` | light blue role extracted from the source design |

| color 12 | `#afe3ff` | `--color-color-12` | color 12 role extracted from the source design |

| neon green | `#19d600` | `--color-neon-green` | neon green role extracted from the source design |

| error red | `#dd0000` | `--color-error-red` | error red role extracted from the source design |

| gpc green | `#37cd84` | `--color-gpc-green` | gpc green role extracted from the source design |

| color 16 | `#072227` | `--color-color-16` | color 16 role extracted from the source design |

Tokens — Typography

Inter, system-ui, sans-serif · `--font-primary`

Type Scale

| Role | Size | Line Height | Letter Spacing | Token |

|---|---|---|---|---|

| space-1 | 1px | 1.5 | 0 | `--text-space-1` |

| space-2 | 2px | 1.5 | 0 | `--text-space-2` |

| space-3 | 4px | 1.5 | 0 | `--text-space-3` |

| space-4 | 6px | 1.5 | 0 | `--text-space-4` |

| space-5 | 8px | 1.5 | 0 | `--text-space-5` |

| space-6 | 12px | 1.5 | 0 | `--text-space-6` |

| space-7 | 16px | 1.5 | 0 | `--text-space-7` |

| space-8 | 24px | 1.5 | 0 | `--text-space-8` |

| space-9 | 32px | 1.5 | 0 | `--text-space-9` |

| space-10 | 48px | 1.5 | 0 | `--text-space-10` |

| space-11 | 64px | 1.5 | 0 | `--text-space-11` |

| radius-xs | 3px | 1.5 | 0 | `--text-radius-xs` |

| radius-md | 6px | 1.5 | 0 | `--text-radius-md` |

| radius-lg | 12px | 1.5 | 0 | `--text-radius-lg` |

| radius-pill | 99999px | 1.5 | 0 | `--text-radius-pill` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|---|---|---|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 48 | 48px | `--spacing-48` |

| 64 | 64px | `--spacing-64` |

Border Radius

| Name | Value | Token |

|---|---|---|

| sm | 6px | `--radius-sm` |

| md | 9px | `--radius-md` |

| lg | 5px | `--radius-lg` |

| xl | 2px | `--radius-xl` |

| pill | 3px | `--radius-pill` |

| r6 | 1px | `--radius-r6` |

Layout

Components

buttons

**Role:** buttons component

cards

**Role:** cards component

inputs

**Role:** inputs component

navigation

**Role:** navigation component

badges pills

**Role:** badges pills component

Do's and Don'ts

Do

Don't

Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.sanity.io/).