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.

Assembled 20 Sep 2026Gate · pass124 files · 17 foundations · 86 components · 12 kits · 5 applications · 4 templates

Foundations · 17 files

Foundations

The tokens layer and its specimen cards — colour, themes, pairings, type, shape, spacing, print. Always shipped.

Palette

colourway 4 · charcoal + oxblood — 31 fixed values, theme-invariant; roles swap in themes.css

Themes

dark default · light alternate — dark chrome over paper; brand-ground roles theme-invariant, working-ground roles invert

Pairings

every legal on-colour pairing with its measured ratio — the ONLY combinations — and the illegal list

Colour usage

ground-role-split · oxblood as fill vs the lifted face · pebbles tonal-only · the two never-text rules · ≈5% signal

Print spec

no print surface in this pack — CMYK builds + nearest Pantone solid coated held as reference for the day one is needed

Display type

Nunito 800 — wordmark, page titles, tile figures, subjects · tracked −0.03em (−0.04em above 60px) · never running text

Body and mono

Nunito Sans 400 / 600 / 700 at 16 · 15 · 14 · 13 · 12 · 11 — tabular figures on · labels uppercase +0.14em · ui-monospace for code and log figures

Shape and decor

12 / 16 / pill · the 1.5px edge · the pebble · masthead-band pattern for small surfaces, quadrant pattern for large

Spacing

packed · base 4 · 4 / 8 / 12 / 16 / 20 / 24 · section gap 32 · separation is a tonal step or space, never a rule

Components · 86 files

Components

One folder per concern. Every component is plain HTML + CSS over the tokens, with a typed contract and a prompt.

Core

Button · Badge · Kicker · StatTile · Panel · SectionHead · Avatar · AccountPebble · ChromeBar · Masthead · TriageBand · VoiceButton · StateChip · AddSlot · ProductPreview

All 15 core specimens

Forms

Field (pill-input · well) · SearchWell · SegmentedControl

All 3 forms specimens

Data

MailList (ThreadRow · unread-dot) · DataTable (rows · log)

All 2 data specimens

UI kits · 12 files

UI kits

The real surfaces — a desktop page, a mobile page where the surface has one, and a wrapper card each.

Applications · 5 files

Applications

The applied pieces the brand sends and prints, as the overlay names them.

Email

Transactional email — card

welcome (account connected) · receipt (subscription charged) — send-ready, 600px, tables + inline styles, charcoal masthead-band over paper

Marketing email — card

feature announcement (Postie now takes voice) — send-ready, 600px, headline in the masthead-band, one motif, unsubscribe footer

Transactional welcome

Transactional receipt

Marketing announcement

Templates · 4 files

Templates

Starting points a consumer copies — one folder each, one repointable line.

Record

The 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.

Preview pages

Viewing surfaces for the build — not part of the system.

Not delivered by design

  • p3-open-warning-token foundations · token

    no amber/warning token in colourway 4 — StateChip catching-up renders as hollow muted dot; owner decision

  • p3-open-error-token foundations · token

    no error token in colourway 4 — Field --error uses accent-as-text message + dot, border to ink; no red minted; owner decision

Open decisions

  • p3-open-chart-component components · component

    no chart component (hourly bar / sparkline) in the frozen set — dashboard ships a token-only kit-level stand-in (.kit-chart); Track-2 add-on

Raised during the build

8 raised · 4 fixed at source · 4 carried as recorded gaps
  • ui_kits · component-gap

    Working-context re-entry must beat brand-scoped descendant rules..postie-brand.postie-pebble,.postie-brand.postie-state--live,.postie-brand.postie-badge--accent,.postie-brand.postie-seg__item and.postie-brand.postie-panel--raised still match inside a nested.postie-working block, so pebbles and Live chips in the marketing-site cards, the landing ProductPreview and the Power pricing tier render in brand-context colours (charcoal discs, #282627 chip) instead of the working tonal steps the owner approved on the C4L light boards (#DAD8D8 / #C7C4C5 pebbles). Fix at source: add.postie-working counterparts (or:where()-lower the brand selectors) in AccountPebble.css, StateChip.css, Badge.css, SegmentedControl.css, Panel.css.

    Used insteadLeft as rendered — no kit-level override (a colour override on a frozen component is a fork). Visible on light: marketing-site/index.html + mobile.html cards, landing-page/index.html preview, the Power tier.

    Resolutionfixed at source 2026-09-20T20:46:29Z re-freeze

  • ui_kits · component-gap

    ProductPreview on light leaks a ~3px paper crescent at its two top corners:.postie-preview paints --postie-surface behind a square-cornered charcoal chrome. Fix at source: give.postie-previewchrome the panel radius on its top corners, or paint the card background as --postie-ground and the list as surface.

    Used insteadLeft as rendered on landing-page/index.html (light).

    Resolutionfixed at source 2026-09-20T20:46:29Z re-freeze

  • ui_kits · component-gap

    A chart component (hourly bar / sparkline) for the dashboard — the brief asks for numbers, a chart and a table that agree, and the frozen set has none.

    Used insteadKit-level stand-in in dashboard/index.html (.kit-chart): 24 bars in --postie-pebble-2 with the agent hour in --postie-accent, inside a raised Panel, styled from tokens only. Swap for the component when it exists.

    ResolutionTrack-2 add-on; token-only stand-in ships

  • ui_kits · variant-gap

    MailList mobile density: the CSS comment and the approved C4 mobile board describe the first row as raised, but no class implements it.

    Used insteadRows left flat in app/mobile.html; unread dot + weight carry the signal.

    Resolutionfixed at source 2026-09-20T20:46:29Z re-freeze

  • ui_kits · variant-gap

    Panel needs a theme-resolved tone for the landing feature cards — raised-on-brand on dark, paper tile on light (BRIEF §4a) — from one markup; the specimen switches markup per theme.

    Used instead[data-theme="light"].kit-feature in landing-page/index.html re-enters the working context with tokens only (no component CSS touched).

    Resolutionfixed at source 2026-09-20T20:46:29Z re-freeze

  • ui_kits · token-gap

    No warning/amber token: the dashboard's Gmail account in a catching-up state and the auth lock-out have no status hue (recorded gap).

    Used insteadStateChip catching-up (hollow muted dot) and word-plus-figure copy; lock-out uses a disabled tonal Button and a StatTile, no colour.

    ResolutionP2 token decision pending owner; stand-in ships

  • ui_kits · token-gap

    No error token: the expired sign-in code on auth-screens (get back in state).

    Used insteadField --error as frozen: accent-as-text message with a dot, border to ink.

    ResolutionP2 token decision pending owner; stand-in ships

  • templates · assembler-gap

    delivery-pack-spec.md §2 gives every template folder index.html · ds-base.js · support.js (optional) and phase-3-system.md § Ledger says one row per template folder's index.html, but scripts/assemble-pack.py scan_pack() lists every file under templates/ and check_coverage() only lets components/ trio siblings ride on their.html row — so ds-base.js and README.md would be ORPHAN at the gate.

    Used insteadexplicit rows for ds-base.js (kind template-support) and README.md (kind doc) in this fragment; the collator may fold them into the index.html row if the assembler learns template siblings the way it knows TRIO_SIBLINGS.

    Resolutionopen — assembler must accept ds-base.js/README.md riding on the template index row or accept their explicit rows; see PA step

Rejected directions

Recorded so they are never re-proposed — direction D was chosen.

  • Direction A

    Not chosen — owner preferred D's rounded heavy letterform.

  • Direction B

    Rejected outright by the owner.

  • Direction C

    Not chosen — owner preferred D's rounded heavy letterform.

Audit

Coverage

Every artifact in the ledger and the file it lives in. Anything absent from this table has not been delivered.

IdGroupKindFileStatus
p3-components-buttonComponentscomponentcomponents/core/Button.htmllocked
p3-components-badgeComponentscomponentcomponents/core/Badge.htmllocked
p3-components-kickerComponentscomponentcomponents/core/Kicker.htmllocked
p3-components-stattileComponentscomponentcomponents/core/StatTile.htmllocked
p3-components-panelComponentscomponentcomponents/core/Panel.htmllocked
p3-components-sectionheadComponentscomponentcomponents/core/SectionHead.htmllocked
p3-components-avatarComponentscomponentcomponents/core/Avatar.htmllocked
p3-components-accountpebbleComponentscomponentcomponents/core/AccountPebble.htmllocked
p3-components-chromebarComponentscomponentcomponents/core/ChromeBar.htmllocked
p3-components-mastheadComponentscomponentcomponents/core/Masthead.htmllocked
p3-components-triagebandComponentscomponentcomponents/core/TriageBand.htmllocked
p3-components-voicebuttonComponentscomponentcomponents/core/VoiceButton.htmllocked
p3-components-statechipComponentscomponentcomponents/core/StateChip.htmllocked
p3-components-addslotComponentscomponentcomponents/core/AddSlot.htmllocked
p3-components-productpreviewComponentscomponentcomponents/core/ProductPreview.htmllocked
p3-components-core-cardComponentscardcomponents/core/core.card.htmllocked
p3-components-fieldComponentscomponentcomponents/forms/Field.htmllocked
p3-components-searchwellComponentscomponentcomponents/forms/SearchWell.htmllocked
p3-components-segmentedcontrolComponentscomponentcomponents/forms/SegmentedControl.htmllocked
p3-components-forms-cardComponentscardcomponents/forms/forms.card.htmllocked
p3-components-maillistComponentscomponentcomponents/data/MailList.htmllocked
p3-components-datatableComponentscomponentcomponents/data/DataTable.htmllocked
p3-components-data-cardComponentscardcomponents/data/data.card.htmllocked
p3-components-tokens-workingComponentsworking-tokenscomponents/tokens.working.csslocked
p3-ui_kits-marketing-site-desktopUI kitskitui_kits/marketing-site/index.htmllocked
p3-ui_kits-marketing-site-mobileUI kitskitui_kits/marketing-site/mobile.htmllocked
p3-ui_kits-marketing-site-cardUI kitscardui_kits/marketing-site/marketing-site.card.htmllocked
p3-ui_kits-landing-pageUI kitskitui_kits/landing-page/index.htmllocked
p3-ui_kits-landing-page-cardUI kitscardui_kits/landing-page/landing-page.card.htmllocked
p3-ui_kits-app-desktopUI kitskitui_kits/app/index.htmllocked
p3-ui_kits-app-mobileUI kitskitui_kits/app/mobile.htmllocked
p3-ui_kits-app-cardUI kitscardui_kits/app/app.card.htmllocked
p3-ui_kits-dashboardUI kitskitui_kits/dashboard/index.htmllocked
p3-ui_kits-dashboard-cardUI kitscardui_kits/dashboard/dashboard.card.htmllocked
p3-ui_kits-auth-screensUI kitskitui_kits/auth-screens/index.htmllocked
p3-ui_kits-auth-screens-cardUI kitscardui_kits/auth-screens/auth-screens.card.htmllocked
p3-applications-transactional-email-welcomeApplicationsemailapplications/email/transactional-welcome.htmllocked
p3-applications-transactional-email-receiptApplicationsemailapplications/email/transactional-receipt.htmllocked
p3-applications-transactional-email-cardApplicationscardapplications/email/transactional.card.htmllocked
p3-applications-marketing-emailApplicationsemailapplications/email/marketing-announcement.htmllocked
p3-applications-marketing-email-cardApplicationscardapplications/email/marketing.card.htmllocked
p3-templates-template-emailTemplatestemplatetemplates/email/index.htmllocked
p3-templates-email-cardTemplatescardtemplates/email/email.card.htmllocked
p3-templates-email-ds-baseTemplatestemplate-supporttemplates/email/ds-base.jslocked
p3-templates-email-readmeTemplatesdoctemplates/email/README.mdlocked
p3-foundations-tokens-fontsFoundationstoken-filetokens/fonts.csslocked
p3-foundations-tokens-colorsFoundationstoken-filetokens/colors.csslocked
p3-foundations-tokens-themesFoundationstoken-filetokens/themes.csslocked
p3-foundations-tokens-typographyFoundationstoken-filetokens/typography.csslocked
p3-foundations-tokens-spacingFoundationstoken-filetokens/spacing.csslocked
p3-foundations-tokens-shapeFoundationstoken-filetokens/shape.csslocked
p3-foundations-tokens-motionFoundationstoken-filetokens/motion.csslocked
p3-foundations-tokens-baseFoundationstoken-filetokens/base.csslocked
p3-foundations-stylesFoundationstoken-filestyles.csslocked
p3-foundations-tokens-mdFoundationsdocTOKENS.mdlocked
p3-foundations-colors-paletteFoundationscardguidelines/colors-palette.card.htmllocked
p3-foundations-colors-themesFoundationscardguidelines/colors-themes.card.htmllocked
p3-foundations-colors-pairingsFoundationscardguidelines/colors-pairings.card.htmllocked
p3-foundations-colors-usageFoundationscardguidelines/colors-usage.card.htmllocked
p3-foundations-print-specFoundationscardguidelines/print-spec.card.htmllocked
p3-foundations-type-displayFoundationscardguidelines/type-display.card.htmllocked
p3-foundations-type-body-monoFoundationscardguidelines/type-body-mono.card.htmllocked
p3-foundations-shape-decorFoundationscardguidelines/shape-decor.card.htmllocked
p3-foundations-spacing-scaleFoundationscardguidelines/spacing-scale.card.htmllocked
p3-preview-03-foundationsFoundationspreviewpreview-03-foundations.htmllocked
p3-components-rulesComponentsdoccomponents/RULES.mdlocked

Not a card by design: index.html · sitemap.md · thumbnail.html · preview-*.html