Marketing site
Marketing site — card
marketing-site-desktop (1440×1720 · product page) · marketing-site-mobile (390 · stacked)
Design system · brand-001-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.
Foundations · 17 files
The tokens layer and its specimen cards — colour, themes, pairings, type, shape, spacing, print. Always shipped.
colourway 4 · charcoal + oxblood — 31 fixed values, theme-invariant; roles swap in themes.css
dark default · light alternate — dark chrome over paper; brand-ground roles theme-invariant, working-ground roles invert
every legal on-colour pairing with its measured ratio — the ONLY combinations — and the illegal list
ground-role-split · oxblood as fill vs the lifted face · pebbles tonal-only · the two never-text rules · ≈5% signal
no print surface in this pack — CMYK builds + nearest Pantone solid coated held as reference for the day one is needed
Nunito 800 — wordmark, page titles, tile figures, subjects · tracked −0.03em (−0.04em above 60px) · never running text
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
12 / 16 / pill · the 1.5px edge · the pebble · masthead-band pattern for small surfaces, quadrant pattern for large
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
One folder per concern. Every component is plain HTML + CSS over the tokens, with a typed contract and a prompt.
Button · Badge · Kicker · StatTile · Panel · SectionHead · Avatar · AccountPebble · ChromeBar · Masthead · TriageBand · VoiceButton · StateChip · AddSlot · ProductPreview
Field (pill-input · well) · SearchWell · SegmentedControl
MailList (ThreadRow · unread-dot) · DataTable (rows · log)
UI kits · 12 files
The real surfaces — a desktop page, a mobile page where the surface has one, and a wrapper card each.
marketing-site-desktop (1440×1720 · product page) · marketing-site-mobile (390 · stacked)
landing-page (1440×1024 · hero + ProductPreview + three feature cards)
app-desktop (1440 · three-pane inbox) · app-mobile (390×844 · masthead band + voice pill)
dashboard (1440×1024 · StatTile row · hourly chart · DataTable × 2 · TriageBand · AddSlot)
auth-screens (1440×1024 · sign in · get back in · locked out politely — one document, a state switcher top right)
Applications · 5 files
The applied pieces the brand sends and prints, as the overlay names them.
welcome (account connected) · receipt (subscription charged) — send-ready, 600px, tables + inline styles, charcoal masthead-band over paper
feature announcement (Postie now takes voice) — send-ready, 600px, headline in the masthead-band, one motif, unsubscribe footer
Templates · 4 files
Starting points a consumer copies — one folder each, one repointable line.
template-email · the send-ready skeleton a project copies — six slots, tables, inline styles, 600px, Outlook-safe
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.
Viewing surfaces for the build — not part of the system.
no amber/warning token in colourway 4 — StateChip catching-up renders as hollow muted dot; owner decision
no error token in colourway 4 — Field --error uses accent-as-text message + dot, border to ink; no red minted; owner decision
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
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
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
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
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
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
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
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
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
Recorded so they are never re-proposed — direction D was chosen.
Not chosen — owner preferred D's rounded heavy letterform.
Rejected outright by the owner.
Not chosen — owner preferred D's rounded heavy letterform.
Audit
Every artifact in the ledger and the file it lives in. Anything absent from this table has not been delivered.
| Id | Group | Kind | File | Status |
|---|---|---|---|---|
| p3-components-button | Components | component | components/core/Button.html | locked |
| p3-components-badge | Components | component | components/core/Badge.html | locked |
| p3-components-kicker | Components | component | components/core/Kicker.html | locked |
| p3-components-stattile | Components | component | components/core/StatTile.html | locked |
| p3-components-panel | Components | component | components/core/Panel.html | locked |
| p3-components-sectionhead | Components | component | components/core/SectionHead.html | locked |
| p3-components-avatar | Components | component | components/core/Avatar.html | locked |
| p3-components-accountpebble | Components | component | components/core/AccountPebble.html | locked |
| p3-components-chromebar | Components | component | components/core/ChromeBar.html | locked |
| p3-components-masthead | Components | component | components/core/Masthead.html | locked |
| p3-components-triageband | Components | component | components/core/TriageBand.html | locked |
| p3-components-voicebutton | Components | component | components/core/VoiceButton.html | locked |
| p3-components-statechip | Components | component | components/core/StateChip.html | locked |
| p3-components-addslot | Components | component | components/core/AddSlot.html | locked |
| p3-components-productpreview | Components | component | components/core/ProductPreview.html | locked |
| p3-components-core-card | Components | card | components/core/core.card.html | locked |
| p3-components-field | Components | component | components/forms/Field.html | locked |
| p3-components-searchwell | Components | component | components/forms/SearchWell.html | locked |
| p3-components-segmentedcontrol | Components | component | components/forms/SegmentedControl.html | locked |
| p3-components-forms-card | Components | card | components/forms/forms.card.html | locked |
| p3-components-maillist | Components | component | components/data/MailList.html | locked |
| p3-components-datatable | Components | component | components/data/DataTable.html | locked |
| p3-components-data-card | Components | card | components/data/data.card.html | locked |
| p3-components-tokens-working | Components | working-tokens | components/tokens.working.css | locked |
| p3-ui_kits-marketing-site-desktop | UI kits | kit | ui_kits/marketing-site/index.html | locked |
| p3-ui_kits-marketing-site-mobile | UI kits | kit | ui_kits/marketing-site/mobile.html | locked |
| p3-ui_kits-marketing-site-card | UI kits | card | ui_kits/marketing-site/marketing-site.card.html | locked |
| p3-ui_kits-landing-page | UI kits | kit | ui_kits/landing-page/index.html | locked |
| p3-ui_kits-landing-page-card | UI kits | card | ui_kits/landing-page/landing-page.card.html | locked |
| p3-ui_kits-app-desktop | UI kits | kit | ui_kits/app/index.html | locked |
| p3-ui_kits-app-mobile | UI kits | kit | ui_kits/app/mobile.html | locked |
| p3-ui_kits-app-card | UI kits | card | ui_kits/app/app.card.html | locked |
| p3-ui_kits-dashboard | UI kits | kit | ui_kits/dashboard/index.html | locked |
| p3-ui_kits-dashboard-card | UI kits | card | ui_kits/dashboard/dashboard.card.html | locked |
| p3-ui_kits-auth-screens | UI kits | kit | ui_kits/auth-screens/index.html | locked |
| p3-ui_kits-auth-screens-card | UI kits | card | ui_kits/auth-screens/auth-screens.card.html | locked |
| p3-applications-transactional-email-welcome | Applications | applications/email/transactional-welcome.html | locked | |
| p3-applications-transactional-email-receipt | Applications | applications/email/transactional-receipt.html | locked | |
| p3-applications-transactional-email-card | Applications | card | applications/email/transactional.card.html | locked |
| p3-applications-marketing-email | Applications | applications/email/marketing-announcement.html | locked | |
| p3-applications-marketing-email-card | Applications | card | applications/email/marketing.card.html | locked |
| p3-templates-template-email | Templates | template | templates/email/index.html | locked |
| p3-templates-email-card | Templates | card | templates/email/email.card.html | locked |
| p3-templates-email-ds-base | Templates | template-support | templates/email/ds-base.js | locked |
| p3-templates-email-readme | Templates | doc | templates/email/README.md | locked |
| p3-foundations-tokens-fonts | Foundations | token-file | tokens/fonts.css | locked |
| p3-foundations-tokens-colors | Foundations | token-file | tokens/colors.css | locked |
| p3-foundations-tokens-themes | Foundations | token-file | tokens/themes.css | locked |
| p3-foundations-tokens-typography | Foundations | token-file | tokens/typography.css | locked |
| p3-foundations-tokens-spacing | Foundations | token-file | tokens/spacing.css | locked |
| p3-foundations-tokens-shape | Foundations | token-file | tokens/shape.css | locked |
| p3-foundations-tokens-motion | Foundations | token-file | tokens/motion.css | locked |
| p3-foundations-tokens-base | Foundations | token-file | tokens/base.css | locked |
| p3-foundations-styles | Foundations | token-file | styles.css | locked |
| p3-foundations-tokens-md | Foundations | doc | TOKENS.md | locked |
| p3-foundations-colors-palette | Foundations | card | guidelines/colors-palette.card.html | locked |
| p3-foundations-colors-themes | Foundations | card | guidelines/colors-themes.card.html | locked |
| p3-foundations-colors-pairings | Foundations | card | guidelines/colors-pairings.card.html | locked |
| p3-foundations-colors-usage | Foundations | card | guidelines/colors-usage.card.html | locked |
| p3-foundations-print-spec | Foundations | card | guidelines/print-spec.card.html | locked |
| p3-foundations-type-display | Foundations | card | guidelines/type-display.card.html | locked |
| p3-foundations-type-body-mono | Foundations | card | guidelines/type-body-mono.card.html | locked |
| p3-foundations-shape-decor | Foundations | card | guidelines/shape-decor.card.html | locked |
| p3-foundations-spacing-scale | Foundations | card | guidelines/spacing-scale.card.html | locked |
| p3-preview-03-foundations | Foundations | preview | preview-03-foundations.html | locked |
| p3-components-rules | Components | doc | components/RULES.md | locked |
Not a card by design: index.html · sitemap.md · thumbnail.html · preview-*.html