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

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 — colour, type, spacing, radius, motion. Visual galleries in the sidebar.
Primitives — 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 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 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>