← Back to the screen

Design system portfolio

centauri-marketing — the record

The four direction lines behind this page, the generator command that produced its tokens, and the pairs it was measured against.

Brief #24. The house system's Marketing profile, on the same spine as brief 20: one division's public landing page, which is the surface a buyer meets before the console in brief 20 exists for them at all.

It was systems/centauri/marketing.html, a companion document beside the console, until 2026-09-16. As a companion it was reachable only by a reader who had already chosen to open the console — which is backwards, because this is the one of the four profiles a buyer sees first. Different reader, different archetype, different stance: that is a specimen, not a second file beside one.

The four direction lines

LeverDecision
ArchetypeEditorial spread. An editorial column read once, top to bottom. The rail the console uses becomes a bar across the top — the one place in the house a top bar is allowed, because this is a public website rather than a product.
Data stanceTile-first. A sentence leads, then three figures, then three capability tiles and four seams as their peers. The reading act here is persuasion, and a page that persuades is not a looser console.
DensityThe marketing profile: the most generous of the four settings, on a two-pixel grid. Bigger type, taller controls, more air between sections.
The one bold thingA gradient, which nothing else in this house may have. Three declared roles — bed, rim, wash — and nowhere else. A .centauri-pane is required to sit inside a .centauri-bed, because a backdrop-filter over a flat ground composites to 1.008:1, which is white on white.

No two pages in this portfolio share both an archetype and a stance. Editorial spread is also tailwind-css, apex-brand and luxury-hospitality; all three are prose- or chart-first, so tile-first is this page's own pair.

Why this product suits this system

The claim the house system makes is that a console, a phone, a catalog and a landing page can be one firm. Three of the four were already on the ledger with a tile of their own or as companions of the console; the landing page is the only one of them a stranger ever reaches first, and it is the hardest of the four to keep in the system, because persuasion is where a design system is usually abandoned for a template. This page is the test of that claim at the point it is most likely to fail.

What it shares with brief 20, and what it does not

Transcribed from the page's own design-notes panel rather than restated:

The two screens resolve the same accent out of the same generated build, and the ledger draws them with one swatch. build-index.mjs carries an accentFrom field so that is true by construction: this directory holds no generated CSS of its own and links ../centauri/centauri/. Copying the build in here would have been two copies of one generated artefact, and would have left the ledger free to draw the two screens in two different accents — the one thing they exist to disprove.

What is illustrative, and what is not

The division is real and so are its boundaries. The three figures — 16 weeks, 4 divisions, 1 system — describe shapes of work the firm publishes definitions for; none is a performance claim. There is no customer quotation on this page, because a testimonial nobody gave is not a design element, and since 21 October 2024 a fabricated one is an FTC enforcement matter (16 CFR 465) rather than a matter of taste.

The page's own bold decision is the sentence most landing pages will not write: where this division stops. Four seams, each naming the sibling division that owns the other half, rendered as peers of the capability tiles rather than as a footnote — on the argument the page itself makes, that a stated boundary is worth more than a claimed capability, being the one sentence a buyer can check before anything is signed.

Generator

The same generated layers as brief 20, linked from ../centauri/centauri/ and never edited:

node generate.mjs

Six links, in the mandated order: centauri.spine.css, centauri.marketing.css, centauri.base.css, centauri.nav.css, centauri.page.css, centauri.expressive.css — the spine, exactly one profile, base and nav, then that system's own layers and nothing else.

@centauri-multi-profile is declared at the top of the document, as it is on every Centauri page here: a real product picks exactly one profile, and these pages exist to show what a profile does and does not change.

Gates

Measured 2026-09-16, on this directory:

import_lint.py systems/centauri-marketing/   clean — the spine, the declared profile,
                                             base, nav and only that system's layers
nav_lint.py    index.html                    no findings
audit_page.py  index.html                    2 info (touch icon, manifest) — the same
                                             two the console reports
slop_scan.py   index.html                    48 rules, clean
craft_lint.py  index.html                    11 rules, clean
motion_lint.py index.html                    29 rules, clean
layout_lint.py index.html                    35 rules, clean
copy_lint.py   index.html                    28 findings: 15 warning, 13 info, 0 errors
aria_lint.py   .                             18 rules, 0 findings
shots 1440 / 375                             no document wider than its window
a11y-probe                                   clean in both themes
picker-probe                                 clean
tools/check.sh centauri centauri-marketing   PASS

The copy findings are warnings and info only, and the loudest of them is the passive voice in this page's own design notes — the panel the contract reserves for a page describing its own system, which is the one region on any screen here written for a reader of the portfolio rather than for a buyer.