PIPE / DESIGN SYSTEM / 0.1
A little brighter.
A lot more human.
Confident colour, friendly shapes, and room to breathe. Meet the components that make your next interface feel like a welcome.
Meet the components- Editable source
- Light & dark
- Built for touch
- 63
- UI modules
- 63
- Story files
- 6
- Palettes
Cocoa · active palette
Good things start here.
A friendly face. A clear next step.
01 / THE PRINCIPLES
Warmth, with a backbone.
The small decisions add up. These six rules make Pipe feel like one system, from a single button to a busy working surface.
Colour has a job.
The brand colour points to the next action. Quiet neutrals hold the work. Success and failure keep their own meaning, whatever palette you choose.
Friendly, not fussy.
Capsule actions invite a click. Cards keep their 16px corners, fields keep theirs. Bigger components never get a different personality.
A confident voice.
A broad, warm heading leads. The interface answers in clear, comfortable type. Weight does the work; not every line needs to shout.
Grounded by default.
A single hairline gives a card its place. A small shadow belongs to the things above it. We do not float the whole interface.
Make room for people.
44px controls, real labels, and a visible keyboard ring. Touch, pointer, and keyboard all get a considered way through the same interface.
Details stay in line.
One container owns its gutter. Related cards share their tracks. States change the ink, not the geometry, so nothing jumps away from your cursor.
02 / COLOUR
One personality. Six expressions.
Change the identity, not the meaning. Every palette has a complete light and dark neutral spine, a brand family, and a focus ring. Choose one to see the whole page respond.
A palette never changes the message.
Status colours are fixed. They carry a label as well as a colour, so you never have to guess what a change means.
Words you can build with.
--background
--card
--muted
21 palette slots · generated contrast · no component hexes
03 / TYPOGRAPHY
Type with a smile in its voice.
Bricolage Grotesque leads with a broad, friendly presence. DM Sans makes the everyday easy to read. Both are open-licensed, self-hosted, and loaded in the app and Storybook.
Bricolage Grotesque / 800
Make something
worth sharing.
The editorial face belongs to big ideas and short introductions. It never takes over a dense table or an ordinary form label.
Heading / 28 / 35 · 500
A fresh perspective
Component title / 18 / 23 · 700
A place for every good idea
Body / 16 / 24 · 400
Bring your ideas together. Give them room to grow.
Supporting / 14 / 21 · 400
All changes are saved in this session.
04 / SHAPE
Soft edges. Firm rules.
A small action and a large one share the same capsule. Fields use an 8px corner, tabs use 4px, and cards keep their 16px surface. Those are roles, not a ladder that grows with size.
05 / ELEVATION
Let the work stay grounded.
Cards use a single border and no shadow. Only overlays lift away from the page. Focus is a separate, crisp ring—press Tab to see it. Depth explains a relationship, never decorates empty space.
06 / LAYOUT
Room to breathe. Edges that agree.
Space carries relationships: 4 and 8px inside a group, 16 and 24px between related parts, 32px between decisions. Every container owns one gutter, so its heading, content and footer can agree.
Shared edges, less guesswork.
The grid is a tool, not a decoration. Turn it off and the relationships should still feel obvious.
At the narrow end, the composition changes—not just the scale. Cards stack, filters fold into a sheet, and wide tables become readable record lists. The page itself never scrolls sideways.
320px minimum / 44px fields / 24px target floor
07 / MOTION
A response, not a performance.
Motion in Pipe confirms that something changed. It never moves the thing you are about to press, and it never animates a number into looking like a trend.
Ready on scroll. The four recipes take turns while this section is on screen.
WHERE MOTION STOPS
Three cases the system refuses
- Immediate
- Focus and live values tell the truth without delay.
- Still
- Targets never shift, scale or bounce away from the cursor.
- Restrained
- No ambient loop competes with reading or comparing.
- Inclusive
- Reduced motion keeps every final state and its meaning.
08 / THE COMPONENTS
Small parts. Real possibilities.
Three rows of live primitives. Try the forms, open the overlays, and change the filters. Every colour follows the palette you choose.
09 / DATA
Make the numbers feel clear.
Three fixed series, labelled by name. The palette changes around them, but their meaning stays put. Every figure here — totals, changes, shares and both charts — is derived from the same twelve seeded weeks, so nothing on the page can drift out of step.
Kept in the last 4 weeks, measured against the previous 4 weeks.
Everything
162
up +25%
Notes
84
up +31%
Places
36
down -5%
Ideas
42
up +50%
The last 4 weeks, by kind
Segments are stacked, so the column height is the same total the first tile reports.
The whole quarter
One series needs no legend — the title names it. The shaded band is the period chosen above.
How long a note waits
- Same day41%
- 1–2 days27%
- 3–6 days16%
- 1–2 weeks11%
- Over 2 weeks5%
162 kept · shares are allocated by largest remainder, so the column sums to exactly 100%.
Collections close to done
- Kyoto, slowly18 of 24
- Balcony garden11 of 20
- Sunday cookingFinished
- Letters to write4 of 15
42 of 68 kept across 4 collections. Each bar divides the two counts beside it.
One fixture, every number.
Change the period and the tiles, both charts and every share move together, because they read the same twelve weeks. There are no hand-typed summaries to drift.
Identity gets hues; magnitude gets a ramp.
Six fixed hues name what a thing is, always in the same order. The brand marks the one series you came for, and the wait buckets are ordered, so they take the brand ramp instead. A seventh kind folds into one muted “other”.
Colour never works alone.
Every change carries a sign and an arrow, every series carries its name, and every bar carries its own percentage. Digits stay tabular so columns line up.
--chart-primary · --chart-muted · --chart-1 … --chart-6 · --chart-seq-1 … --chart-seq-6
10 / IN SITU
Six real screens, running inside this page.
Everything above is inventory: colour, type, shape, motion, components. This is what they add up to. Each panel is a live route from the screen library, on the palette and mode you are reading in right now.
Sign in
A welcoming split sign-in screen with local credential validation, password visibility, and a workspace preview.
These six are a sample. The library carries 82 built screens across 15 groups, every one a route in this repository on these tokens.
Browse the screen library11 / PUT IT TO WORK
From a useful part to the whole picture.
Explore a pattern in the composition canvas, then see the same system carry a complete screen. Every available example is built from Pipe’s own primitives.
Compositions
8 groups covering navigation, records, forms, overlays, feedback, AI and reporting.
Explore the canvas82 AVAILABLE SCREENSScreens
15 categories, from a first sign-in to daily work and the moments when something goes wrong.
Browse live screensNEXT MILESTONEDemos
Connected applications that share state across routes. This library is still being built.
See build status