Installation

From a clean clone to a running site in about two minutes. Everything the theme needs is in the repository — fonts, palettes and checks included.

Updated 18 Sep 20268 sections

Requirements

Three things on your machine, nothing else. No account, no private registry.

Tool	Version	Why
Node.js	22 or newer	Runs Next.js 16 and the palette scripts.
pnpm	10.17.0	The lockfile is pinned to it.
A browser	Evergreen	The checks drive Chromium through Playwright.

Fonts come with the repository

DM Sans and Bricolage Grotesque are self-hosted OFL packages. The site builds and runs without a single request to a font service.

Install and run

Pick your package manager once; every command on every page follows the choice for the rest of your visit.

Clone the repository

Terminal

git clone https://github.com/your-org/pipe-ds.gitcd pipe-ds

Install dependencies
pnpm install --frozen-lockfile
The lockfile is pnpm’s
npm and bun install from package.json and resolve their own versions. For the exact tree the checks were run against, use pnpm.
Start the dev server
pnpm dev
Open http://localhost:7415. Storybook runs beside it on port 6115 with pnpm storybook.

Choose a default palette

Pipe ships 6 palettes. Visitors can switch between them; the default is the one a first visit sees. Change one line:

src/lib/palettes.ts

1export type Palette = (typeof PALETTES)[number]["id"]2export const DEFAULT_PALETTE: Palette = "cocoa"

cocoa
violet
slate
plum
lagoon
moss

Want a palette of your own? Palettes are generated, not hand-picked: see Design tokens for what a palette owns, then run the generator rather than typing hex values.

Run the checks

A green build proves the code compiles, not that anything appears on screen. These are the checks that do.

Command	What it proves
pnpm lint	ESLint across the app, stories and scripts.
pnpm typecheck	Route types generated, then a strict TypeScript pass.
pnpm format:check	Prettier, including Tailwind class order.
pnpm palette:report	Every palette carries all its slots in both modes and meets its contrast floors.
pnpm build	The library registry, then a production Next.js build.
pnpm test:e2e	Rendered tests against a fresh production server.

pnpm lint
ESLint across the app, stories and scripts.
pnpm typecheck
Route types generated, then a strict TypeScript pass.
pnpm format:check
Prettier, including Tailwind class order.
pnpm palette:report
Every palette carries all its slots in both modes and meets its contrast floors.
pnpm build
The library registry, then a production Next.js build.
pnpm test:e2e
Rendered tests against a fresh production server.

Troubleshooting

Was this page helpful?

Answers stay in this browser session. This demo sends nothing.