Design System v4
Design System v4
The class for anything a person reads on paper: multi-page proposals, reports, guides, registers, and pricing plans that end as a PDF. US Letter, flat white paper, a full-colour crest header bar over a navy rule, a running head, and page numbers. No weave anywhere. Text and tables lead; the page supplies no colour beyond ink, one navy rule weight, a Fog row tint, and a Mist table head.
Four doors, one question each. The Print row and this one are the pair that get confused, so answer the routing test below before you start a piece that could be either.
More than one page, a running head, or page numbers means Documents. One sheet built from type, colour blocks, and the weave means Print.
Answer in order and stop at the first yes.
Both sheets below are real .page elements from document.css, laid out at 8.5 by 11 inches and scaled onto the screen. Every size in them is a print size.
One sentence naming the venue, the season, and the single fact a reader needs before page 2.
The lede runs two or three sentences and is capped at 6.6 inches so the cover reads as a page rather than a wall. Everything under the rule is ordinary body copy at 10.5pt.
Cover. Crest 96pt, kicker, Fabiola hero sized by --mast-chars, standfirst, one 2pt navy rule under the whole bar. No running head, no footer. Fabiola appears here and nowhere else in a document.
Sample Report
Section 2
Every sheet after the cover opens with the running head and closes with the footer. Nothing on the paper touches either one: every block clears both by real space.
Body copy runs the full content column, 7.4 inches. Two column body text is banned in this class, because at roughly 25 characters a line the copy breaks into short ragged lines while space pools at the foot of the sheet.
A flat Fog panel with a 3pt navy rule down its left edge and nothing else. Emphasis is a rule and a lead-in, never a filled box.
| Sample row | Count | Basis |
|---|---|---|
| First item | 000 | Sample |
| Second item | 000 | Sample |
| Total | 000 |
A note carries a caveat, the arithmetic behind a figure, or the thing a reader has to confirm. It never carries new facts.
Interior page. Running head with the crest at 22pt over a 1.5pt navy rule, eyebrow, h2, body, and the footer pinned 0.18in off the bottom with a mono page number.
The rem and clamp() scale in tokens.css is the screen scale; it is sized against a viewport and is meaningless on a fixed sheet. Documents declares its own point scale, and every font-size in the class resolves to one of these. The floors in the last column are minimums, not targets.
| Token | Value | Where it goes | Floor |
|---|---|---|---|
| --text-doc-hero | calc(290cqi / --mast-chars) | Cover h1, Fabiola, once per document, optional | 32pt to 36pt |
| --text-doc-h2 | 22pt | Section opener, Inter 900 | 20pt |
| --text-doc-step | 19pt | Step numeral, tabular, navy | 19pt |
| --text-doc-part | 15pt | Run-in part bar, not a section opener | 15pt |
| --text-doc-h3 | 13pt | Subhead, and the step body subhead | 12pt |
| --text-doc-lede | 11.5pt | Cover standfirst and page lede | 11.5pt |
| --text-doc-h4 | 11pt | Fourth-level head, closing block org line | 11pt |
| --text-doc-body | 10.5pt | Body, table cells, notes, captions | 10.5pt |
| --text-doc-label | 10pt | Eyebrows, table heads, callout labels | 10pt |
| --text-doc-chrome | 9pt | Running head tag, footer, page number | 9pt, absolute |
The one sheet variant adds four more, --text-sheet-title, --text-sheet-body, --text-sheet-note, and --text-sheet-chrome. Nothing outside .sheet may use them. Body holds at 10pt there and chrome may run to 8pt, because a lookup table is not continuous reading. An 8pt body was rejected outright.
Never a filled box. A navy patterned block floating on the paper is banned in every variation, at every size, at every opacity. When a shape keeps failing on rework, delete the shape rather than iterating on it.
Flat Fog panel, 3pt navy rule on the left edge, uppercase label. No border on the other three sides, no shadow, no radius.
Green rides the rule, never the lead-in text. Triumph Green does not carry small type on white paper, so the label stays navy. One per page at most.
Callout, accent, hint, quote. The four emphasis shapes in the class. There is no fifth.
No navy ground behind body copy. No weave fill at any opacity. No border on the other three sides of a callout. No shadow. No radius, here or anywhere: the system radius is 0.
Nothing on the paper touches the running head or the footer. A block set flush to a rule reads as one broken shape with a notch cut in it.
Figures sit straight on the white page: no frame, no rule, no shadow. The one exception is .figure.shot, a UI screenshot, which is white to its own edge and takes a 0.5pt hairline. Four widths ship, 5.2in, 5.6in, 6.3in, and 7.0in; pick the one that keeps the source above roughly 190dpi at print scale.
Mist head with a navy 0.75pt underrule, hairline rows, Fog on even rows, mono right-aligned figures, a quiet trailing column for classification, and a total row bounded by two 1pt navy rules. One value per cell. Never post a total whose arithmetic a reader cannot follow line by line.
| Line item | Units | Each | Sample total | Basis |
|---|---|---|---|---|
| First sample line | 000 | 000 | 000 | Placeholder |
| Second sample line | 000 | 000 | 000 | Placeholder |
| Third sample line | 000 | 000 | 000 | Placeholder |
| Sample total | 000 | 000 |
Basis. Every figure on this sample is a placeholder. Table headers wrap; a nowrap header widens the widest table past the page and Chromium then shrink-to-fit scales the whole PDF, which drops every size below the print floor at once.
Table. Head, rows, and the total row bounded by two navy rules.
A procedural guide runs on .part dividers and .steps rows. A part bar is a run-in divider, not a shrunken h2, and a document uses part bars or h2 sections at a given level, never both. The step number is navy, because green does not carry small type on white paper.
The copy centres against the screenshot. A two line instruction beside a 3in portrait shot leaves a dead white block under every step, which is why the row is centred rather than top aligned.
A hairline separates them. Nothing stretches to fill the sheet, because an evenly stretched step list reads as a table with the rules taken out.
Part bar and steps. .part at 15pt, .step-n at 19pt navy, .step-body h3 at 13pt.
Link the three sheets in this order, always. There is no pattern.css in this folder and there is no components.css: the Print v2 components are screen and flyer atoms, and a document uses the classes in document.css.
tokens.cssByte copy of print/tokens.css. The seven brand colours, the ink ramp, and the Fabiola and Inter metric overrides. Never edited here.logos.cssByte copy of print/logos.css. The lockups and the GE Vernova Park padding crop.document.cssThe grammar this system owns: page box, cover bar, running chrome, the point scale, headings, tables, callouts, figures, contents, step rows, and the one sheet variant._ds.