Pipe documentation
Build calm, generous interfaces
Pipe is a design system for community software: capsule actions in a brand colour you can swap, 16px cards and 44px fields you can reach with a thumb. These docs cover what ships, how to run it, and the rules that keep it looking like itself.
Live specimen — press the controls. Nothing is published anywhere.
At a glance
- Palettes
- 6
- Both modes each
- Components
- 12
- Drawn live
- Props
- 45
- Read off source
- Tokens
- 81
- Measured on render
Pipe ships as source, not a package. You get the tokens, the primitives, sixty-odd compositions and eighty-odd screens in one repository, and you edit them in place. The current release is v0.5.0.
Start here
Four principles
Four rules carry most of Pipe’s character. They were measured from a reference interface, and every component follows them without being asked.
Colour marks the next move
The saturated brand colour is spent on one thing: the next action. A form has one filled button; everything else steps back to an outline or a ghost. Selection takes the tint, never the full fill.
Corners follow role
A corner belongs to a role, not a size. Actions are capsules at every height, surfaces are 16px, fields and popovers 8px, tabs 4px. A large button is not rounder than a small one.
Surfaces stay grounded
Cards sit on the canvas with one hairline and no shadow. Only things that float — a popover, a sheet, a menu — lift, and they lift lightly. Two surfaces that meet draw one line between them, never two.
Motion confirms input
Motion confirms input and never moves a target. Controls change colour over 100ms on one ease-in-out curve; overlays fade over 300ms. When the system asks for reduced motion, both become instant.
How to read these docs
- Get started walks from a clean clone to a running site.
- Foundations shows the tokens as they render here, in whichever palette and mode you have on.
- Reference pairs each component’s preview with its props.
- Updates lists what changed, with breaking changes marked where they land.
Every palette value on these pages is resolved from palettes.css at render time. If you change a palette and a swatch here does not move, the variable is not reaching the page.
Was this page helpful?
Answers stay in this browser session. This demo sends nothing.