import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Overview / Introduction" />

<div className="sb-doc">

# Shade

<p className="excerpt">Shade is the design system that powers Ghost Admin. Tokens, layout primitives, generic UI controls, and product-shaped patterns — all in one place so designers, engineers, and AI agents stop reinventing them.</p>

## In one screen

- **[Tokens](?path=/docs/tokens-tokens-guide--docs)** — colour, type, spacing, radius, motion. Visual galleries in the sidebar.
- **[Primitives](?path=/docs/primitives-primitives-guide--docs)** — `Stack`, `Inline`, `Box`, `Grid`, `Container`, `Text`. Layout, not chrome.
- **Components** — `Button`, `Input`, `Dialog`, `Tabs`… Generic and accessible. Built on Radix + ShadCN.
- **Patterns** — `PageHeader`, `ListPage`, `KpiCard`, `Filters`. Product-shaped compositions.

The boundaries between those layers are the whole point. See **[Layers](?path=/docs/overview-layers--docs)** for the decision flow.

## Working in Shade

Shade is the **default source for Ghost Admin UI**. It's already wired into every admin app — just import:

```tsx
import {Button} from '@tryghost/shade/components';
import {Stack} from '@tryghost/shade/primitives';
```

If a control exists, use it. If it doesn't and you'll reuse it, [Layers](?path=/docs/overview-layers--docs) tells you which folder to add it to.

For AI-assisted work, see `apps/shade/AGENTS.md` — the canonical rules for where new code goes.

</div>
