Every page in the design system uses one of three canonical chassis patterns. Pick by role, never invent a new one. The shared atoms (.section-label, .specimen, .tile, .spark, .api-block) are built once in preview.css and used across all three.
The default. Content, docs, spec pages, and component reference. One white card with a header (eyebrow + title + right-aligned subtitle), then section-labels and content blocks.
<div class="card"> <div class="card-header"> <div class="card-eyebrow">NN · …</div> <h1 class="card-title">Title</h1> </div> <div class="section-label">SECTION</div> … </div>
Landing and index pages that grid into sub-pages. Cobalt-900 hero with crumb + h1 + lede + meta strip, then a hub-grid of tiles. Top-level index, identity, pages, print/index, downloads, decks, diagrams.
<div class="hero"> <div class="crumb">… / …</div> <h1>Title.</h1> <p>Lede…</p> </div> <div class="hub-grid"> <a class="tile">…</a> … </div>
Print artefacts. Lightweight chrome with crumb + h1 + lede, then a two-column stage (paper specimen on the left, "why we built it this way" spark aside on the right). Defined in print/print.css.
<div class="chrome"> <div class="crumb">… / …</div> <h1>Artefact</h1> </div> <div class="stage"> <div class="paper">…</div> <aside class="spark">…</aside> </div>
| Class | Purpose |
|---|---|
.card-header / .card-eyebrow / .card-title / .card-subtitle | Page header pattern for the card chassis. Eyebrow on the left + right-aligned subtitle in a flex row. |
.section-label | Uppercase code-font block header. Marks every content section inside any chassis. |
.tile | White card grid item used by every hub. Adds .todo for greyed/dashed planned state. |
.specimen | Neutral cobalt-50 demo container for live element samples. Used on type, color, components, diagrams reference pages. |
.api-block / .api | API table for component reference pages. Cobalt-50 header row, sentence-case body cells. |
.spark | "Why we built it this way" rationale aside. Add .sticky when used inside a 2-column stage. |
.diagrams-cta | Cobalt-900 panel with eyebrow + h2 + lede + orange button. Used on components.html to link out to diagrams. |
.hub-footer | Bottom-of-hub link strip with breadcrumb-style nav back to parent. |
| Chassis | Pages |
|---|---|
| Card |
apps ·
brand ·
colors ·
components ·
spacing ·
type ·
conduction-bg ·
cookie-cli ·
cut-corners ·
hex-prism ·
side-box ·
diagrams ·
diagrams/cn-hex ·
identity/audience ·
identity/foundation ·
identity/products ·
identity/slogans ·
identity/system ·
identity/voice ·
identity/websites
|
| Hub |
index ·
identity ·
pages ·
print ·
downloads ·
decks
|
| Chrome | Every page in print/ (business-cards, letterhead, envelope, invoice, quotation, report, app-factsheet, one-pager, banner, plus the email artefacts) and decks/template.html. |
A single chassis would force compromises. The card pattern reads as documentation, with breathing room and a printed-spec feel. The hub pattern is built for visual punch, dark hero, sub-page tiles, almost a landing page in miniature. The chrome pattern is meant to disappear at print time, leaving only the paper. Each chassis is the right tool for its job. Mixing them inside a single page is what made the kit feel inconsistent before this normalisation.