Design system · brand-001-postie
Postie
Postie pulls every email account into one seamless, high-performance inbox.
Positioning: the fastest, most convenient unified email client for busy multi-account power users — API-first, driveable by voice or agent. Essence: effortless speed. Promise: every account in one place, every time.
Directory
Everything in the pack
Category → page → file. A page link opens that part of the site; a file link opens the artifact itself.
Canvas ↗
The Design canvas, served from this site — 45 boards in 5 groups. canvas/index.html open ↗
Foundations17
The tokens layer and its specimen cards — colour, themes, pairings, type, shape, spacing, print. Always shipped.
Components86
One folder per concern. Every component is plain HTML + CSS over the tokens, with a typed contract and a prompt.
- Core
- components/core/core.card.html ↗
- components/core/Button.html ↗
- components/core/Badge.html ↗
- components/core/Kicker.html ↗
- components/core/StatTile.html ↗
- components/core/Panel.html ↗
- components/core/SectionHead.html ↗
- components/core/Avatar.html ↗
- components/core/AccountPebble.html ↗
- components/core/ChromeBar.html ↗
- components/core/Masthead.html ↗
- components/core/TriageBand.html ↗
- components/core/VoiceButton.html ↗
- components/core/StateChip.html ↗
- components/core/AddSlot.html ↗
- components/core/ProductPreview.html ↗
- components/core/AccountPebble.css ↗
- components/core/AccountPebble.d.ts ↗
- components/core/AccountPebble.prompt.md ↗
- components/core/AddSlot.css ↗
- components/core/AddSlot.d.ts ↗
- components/core/AddSlot.prompt.md ↗
- components/core/Avatar.css ↗
- components/core/Avatar.d.ts ↗
- components/core/Avatar.prompt.md ↗
- components/core/Badge.css ↗
- components/core/Badge.d.ts ↗
- components/core/Badge.prompt.md ↗
- components/core/Button.css ↗
- components/core/Button.d.ts ↗
- components/core/Button.prompt.md ↗
- components/core/ChromeBar.css ↗
- components/core/ChromeBar.d.ts ↗
- components/core/ChromeBar.prompt.md ↗
- components/core/Kicker.css ↗
- components/core/Kicker.d.ts ↗
- components/core/Kicker.prompt.md ↗
- components/core/Masthead.css ↗
- components/core/Masthead.d.ts ↗
- components/core/Masthead.prompt.md ↗
- components/core/Panel.css ↗
- components/core/Panel.d.ts ↗
- components/core/Panel.prompt.md ↗
- components/core/ProductPreview.css ↗
- components/core/ProductPreview.d.ts ↗
- components/core/ProductPreview.prompt.md ↗
- components/core/SectionHead.css ↗
- components/core/SectionHead.d.ts ↗
- components/core/SectionHead.prompt.md ↗
- components/core/StatTile.css ↗
- components/core/StatTile.d.ts ↗
- components/core/StatTile.prompt.md ↗
- components/core/StateChip.css ↗
- components/core/StateChip.d.ts ↗
- components/core/StateChip.prompt.md ↗
- components/core/TriageBand.css ↗
- components/core/TriageBand.d.ts ↗
- components/core/TriageBand.prompt.md ↗
- components/core/VoiceButton.css ↗
- components/core/VoiceButton.d.ts ↗
- components/core/VoiceButton.prompt.md ↗
- Forms
- components/forms/forms.card.html ↗
- components/forms/Field.html ↗
- components/forms/SearchWell.html ↗
- components/forms/SegmentedControl.html ↗
- components/forms/Field.css ↗
- components/forms/Field.d.ts ↗
- components/forms/Field.prompt.md ↗
- components/forms/SearchWell.css ↗
- components/forms/SearchWell.d.ts ↗
- components/forms/SearchWell.prompt.md ↗
- components/forms/SegmentedControl.css ↗
- components/forms/SegmentedControl.d.ts ↗
- components/forms/SegmentedControl.prompt.md ↗
- Data
UI kits12
The real surfaces — a desktop page, a mobile page where the surface has one, and a wrapper card each.
Applications5
The applied pieces the brand sends and prints, as the overlay names them.
Templates4
Starting points a consumer copies — one folder each, one repointable line.
Record
What was shown, what was left out on purpose, what is still open, what came up in the build, and what was turned down.