@sanity/sanity-id

Sanity's brand design system — components, design tokens, and TailwindCSS v4 configuration for the Sanity marketing website and adjacent properties.

This package is published publicly for convenience but is not intended for general use outside of Sanity. There are no semver guarantees for external consumers, and breaking changes may occur in any release.

TailwindCSS v4 is required.

Installation

pnpm add @sanity/sanity-id

Add both stylesheets to your global CSS:

@import "@sanity/sanity-id/tailwind.css";
@import "@sanity/sanity-id/components.css";

Sanity ID uses Waldenburg for sans-serif and IBM Plex Mono for monospace. Load both however your framework prefers and expose them as --font-sans and --font-mono at the root — see the full font setup.

Using components

Each component is its own subpath; there is no barrel file.

import { Button } from "@sanity/sanity-id/components/button"
import { Eyebrow } from "@sanity/sanity-id/components/eyebrow"

function Example() {
	return (
		<>
			<Eyebrow>Eyebrow</Eyebrow>
			<Button mode="primary" size="md">
				Click me
			</Button>
		</>
	)
}

Components are framework agnostic. Those that render an element you may want to swap take an as prop:

import { Button } from "@sanity/sanity-id/components/button"
import Link from "next/link"

function Pricing() {
	return (
		<Button as={Link} href="/pricing">
			Pricing
		</Button>
	)
}

Finding the API

Every component's props, types, defaults, and descriptions are available as data, so there is no need to scrape the docs site or parse .d.ts:

import manifest from "@sanity/sanity-id/manifest.json"

It is generated from the components' own TypeScript types and JSDoc at build time, so it cannot fall out of date with the code. The same content is served as plain text for LLM consumption at llms.txt (an index) and llms-full.txt (every component, prop, and token in one file).

Each entry looks like this:

{
	"name": "Badge",
	"slug": "badge",
	"import": "@sanity/sanity-id/components/badge",
	"description": "A small inline label for status or metadata, optionally led by an icon.",
	"extends": [],
	"props": [
		{
			"name": "size",
			"type": "\"sm\" | \"md\"",
			"required": false,
			"description": "Size of the badge",
			"default": "\"md\""
		}
	]
}

The manifest also lists every utility class the stylesheet defines, under utilities: the typography scale, background patterns, and the rest.

Theming

Dark and light themes are applied with a data-theme attribute. Set it on the root element to theme a page, or on any element to override within it (up to four levels of nesting):

<html data-theme="dark">
	<body>
		<section data-theme="light">Light within a dark page</section>
	</body>
</html>

Target a specific theme in Tailwind with the light and dark variants:

<h1 class="light:text-black dark:text-white">Sanity</h1>

Typography and color

Typography is applied with utility classes rather than components:

<h1 class="text-page-heading-xl">Sanity: The Content Operating System</h1>

Prefer semantic color tokens (text-fg-base, bg-bg-dim) over primitives, so markup works in both themes. Where neither Tailwind nor CSS is available — Satori image rendering, for instance — the tokens are also importable:

import { primitiveColors, semanticColors } from "@sanity/sanity-id/colors"

Icons

Icons are loaded as SVG symbols from an Iconophor endpoint rather than inlined. Projects on www.sanity.io can use the existing endpoint at https://www.sanity.io/iconophor/sanity-icons/<version>/<icon>; anywhere else needs its own endpoint or a rewrite to that one.

Documentation

Full documentation, including live examples for every component, is at sanity-id-docs.sanity.build.