--- name: Movement description: A flyposted bill — acid stock, two inks, and the green that only exists where they overprint. colors: stock: "#f0e34a" bone: "#f7f4e6" ink: "#17140f" blue: "#1b2a8f" blue-strong: "#121d68" cyan: "#14a0c8" overprint: "#2f6b46" dim-on-stock: "#6b5f14" dim-on-bone: "#6a6455" faint: "#8b8574" rule: "rgba(23, 20, 15, 0.22)" rule-on-stock: "rgba(23, 20, 15, 0.3)" rule-strong: "rgba(23, 20, 15, 0.55)" negative-fg: "#8e2417" negative-bg: "rgba(158, 42, 26, 0.14)" typography: shout: fontFamily: "Big Shoulders, Haettenschweiler, Arial Narrow, sans-serif" fontSize: "clamp(4rem, 16vw, 10.5rem)" fontWeight: 800 lineHeight: 0.84 letterSpacing: "-0.02em" headline: fontFamily: "Big Shoulders, Haettenschweiler, Arial Narrow, sans-serif" fontSize: "clamp(1.9rem, 5vw, 3.25rem)" fontWeight: 800 lineHeight: 0.92 letterSpacing: "normal" title: fontFamily: "Big Shoulders, Haettenschweiler, Arial Narrow, sans-serif" fontSize: "clamp(1.35rem, 3vw, 1.9rem)" fontWeight: 800 lineHeight: 1 letterSpacing: "normal" body: fontFamily: "Public Sans, ui-sans-serif, system-ui, -apple-system, sans-serif" fontSize: "clamp(1rem, 1.15vw, 1.125rem)" fontWeight: 400 lineHeight: 1.55 letterSpacing: "normal" reply: fontFamily: "Public Sans, ui-sans-serif, system-ui, -apple-system, sans-serif" fontSize: "clamp(1.0625rem, 1.3vw, 1.1875rem)" fontWeight: 400 lineHeight: 1.62 letterSpacing: "normal" label: fontFamily: "Public Sans, ui-sans-serif, system-ui, -apple-system, sans-serif" fontSize: "0.8125rem" fontWeight: 700 lineHeight: 1.3 letterSpacing: "0.06em" stamp: fontFamily: "Public Sans, ui-sans-serif, system-ui, -apple-system, sans-serif" fontSize: "0.875rem" fontWeight: 700 lineHeight: 1.2 letterSpacing: "0.14em" rounded: none: "0" spacing: hair: "0.35rem" tight: "0.5rem" field: "1.35rem" block: "1.25rem" gutter: "clamp(1.5rem, 4vw, 3.5rem)" band: "clamp(1.75rem, 4vw, 3rem)" page-x: "clamp(1.25rem, 4vw, 3.5rem)" page-y: "clamp(1.25rem, 3vw, 2.5rem)" components: stamp: backgroundColor: "{colors.blue}" textColor: "{colors.stock}" typography: "{typography.stamp}" rounded: "{rounded.none}" padding: "0.85rem 1.75rem" stamp-hover: backgroundColor: "{colors.blue-strong}" textColor: "{colors.stock}" stamp-disabled: backgroundColor: "transparent" textColor: "{colors.dim-on-bone}" rounded: "{rounded.none}" tab: backgroundColor: "{colors.stock}" textColor: "{colors.ink}" typography: "{typography.headline}" rounded: "{rounded.none}" padding: "0.9rem 1.1rem 1rem" height: "clamp(5rem, 7vw, 6.5rem)" field-input: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: "0.45rem 0" field-textarea: backgroundColor: "rgba(23, 20, 15, 0.05)" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: "0.55rem 0.7rem" notice-negative: backgroundColor: "{colors.negative-bg}" textColor: "{colors.negative-fg}" rounded: "{rounded.none}" padding: "0.75rem 0.9rem" ---

Design System: Movement

Overview

Creative North Star: "The Flyposted Bill"

This is a sheet pasted on a wall, photographed as it is: cheap coloured stock, two inks, a heavy impression, and the halftone dots of a job that was printed rather than rendered. Nothing here is a card floating on a canvas. The stock is the surface — full-bleed acid yellow on the bill itself — and the reading surfaces drop to bone because acid yellow is a shout and a shout cannot also be a paragraph. Depth is ink and perforation. The one exception is a tear-off tab lifting off the wall, which is a thing paper actually does.

The two inks are the whole colour theory. Ultramarine is the first ink; cyan is the second; the green is not a chosen colour at all but the consequence of cyan multiplied into yellow stock, offset a couple of pixels off true because a two-colour job never registers perfectly. That misregistration is the tell that the thing was printed, and it is load-bearing: remove the offset or swap the blend and the world stops being a press and becomes a gradient.

Typographically it is a condensed display face shouting in caps against a plain grotesque doing the reading. The composition is hard: ruled columns, ruled underlines for fields, square dashes, zero radius anywhere. It refuses the centred single-field waitlist page — the page sorts you before it asks you for anything, and the primary action on the first surface is tearing off a tab, not pressing a button.

Key Characteristics:

• Drenched stock, not accented white; two paper colours, never a screen white
• Two inks that build where they cross; green only as a product of overprint
• Zero radius everywhere — a printed sheet has corners
• Perforations, dashed rules and torn edges instead of borders and shadows
• Condensed uppercase display against a quiet body grotesque
• Self-hosted faces only; no third-party font origin exists in this world

Colors

Two paper stocks and two inks, plus the third colour the inks make between them.

Primary

• Ultramarine Ink ({colors.blue}): the first ink. Every headline that carries a claim, every outbound link's 3px underline, the stamp button's ground, the caret, the selection ground, and the focus outline. It is the voice of the press.
• Press Cyan ({colors.cyan}): the second ink, and never used as a flat colour on its own. It exists only as an overprint band multiplied into whatever is underneath: the stripe across the shout, the strike across the stamp's face, the mark struck across a receipt's top rule.

Secondary

• Overprint Green ({colors.overprint}): what cyan makes of yellow stock. Recorded as a token because status tones are tinted from it, but it is a result, not a paint. Where it appears on a surface it is produced by multiply, not painted on.

Neutral

• Acid Stock ({colors.stock}): the bill's paper. Full-bleed on the first surface, and the ground of every tear-off tab and every torn stub carried onto a later page. Also the text colour on ultramarine.
• Bone ({colors.bone}): the reading paper. Every stance sheet, receipt, sign-in and ledger sits on it. Warm, never white.
• Press Ink ({colors.ink}): body text, perforations, table head rules, field underlines.
• Thinned Ink on Stock ({colors.dim-on-stock}) and Thinned Ink on Bone ({colors.dim-on-bone}): secondary text, one per stock. The bill page swaps the muted token to the yellow-safe one on its own surface.
• Rules ({colors.rule}, {colors.rule-on-stock}, {colors.rule-strong}): hairlines and column rules; the stock variant is heavier because yellow swallows a light rule.

Named Rules

The Overprint Rule. Green is never picked from a swatch. Wherever ink crosses ink, the upper layer is mix-blend-mode: multiply so the inks build and darken. screen is a defect in this world, not an option; it lightens and turns a press into a light-box.

The Misregistration Rule. Every overprint band sits 1–2px off true (transform: translateY(2px) on the shout, 1px on the stamp). The offset is the evidence of a two-colour job. It is not a rendering bug and must not be "corrected".

The Two-Stock Rule. There are exactly two grounds: acid stock for the bill and its tabs, bone for everything meant to be read. No third surface colour, and no white anywhere — white is a screen colour and this is a printed thing.

Typography

Display Font: Big Shoulders 800 (with Haettenschweiler, Arial Narrow) Body Font: Public Sans 400/700 (with ui-sans-serif, system-ui)

Character: A tall condensed grotesque shouting in uppercase against a plain, unfussy text face that never raises its voice. The display face is only ever used at weight 800, uppercase, with negative tracking and sub-1 line height, so it sets as a solid block of ink rather than a line of letters.

The ramp

Nine steps, declared once in theme.css. Four display and five text. Nothing in the app sets a literal font size — a bill has a handful of sorts in the case, not a continuum.

| Token | Value | Used by | |---|---|---| | --t-shout | clamp(4rem, 16vw, 10.5rem) | the first-viewport headline, and nothing else | | --t-display-1 | clamp(2rem, 5vw, 3.25rem) | ledger title, receipt mark | | --t-display-2 | clamp(1.5rem, 3.2vw, 2.75rem) | tab word, torn stub's word | | --t-display-3 | clamp(1.35rem, 3vw, 1.9rem) | the slip's heading above a form | | --t-lede | clamp(1.0625rem, 1.3vw, 1.1875rem) | stance reply, receipt body, tear instruction | | --t-body | clamp(1rem, 1.15vw, 1.125rem) | the bill's two-column argument | | --t-base | 0.9375rem | ledger table | | --t-sm | 0.875rem | imprint line, stamp label | | --t-xs | 0.8125rem | field labels, tab addresses, status lines | | --t-xxs | 0.75rem | ledger column heads |

Display steps carry weight 800, uppercase, negative tracking and sub-1 line height (0.84 on the shout, 0.9–1 below it). Text steps run 1.5–1.62.

Two relative multipliers are not steps and are allowed to stay relative: the stance reply's first paragraph at 1.15em, and the ledger's tally figure at 1.5em. Both size against their own context rather than against the ramp.

Named Rules

The Self-Hosted Faces Rule. Both families are served from static/fonts/*.woff2 with font-display: swap. This is a constraint, not a preference: the app ships default-src 'self', so a third-party font link is blocked at the browser. Never introduce a font CDN, and never add a face without vendoring the woff2.

The Display-Is-Caps Rule. The condensed face appears only uppercase, only at 800, and only for shouts, marks, titles and tab words. It is never used for running text, labels or numbers in prose — except the ledger's tally figures, where it sets the count as a struck number beside body-face copy.

The Nine Sorts Rule. Every size comes from the ramp above, as a --t-* token. A literal font-size anywhere in the app is a defect, not a local decision — the first version of this stylesheet had twenty-one of them across twelve unrelated values, and the ramp documented here did not exist until the design detector pointed out that the record described a system the code had never had. The two em multipliers named above are the only exceptions.

The No-Costume-Mono Rule. A monospace stack is declared but is not used on any surface. Monospace here would be a costume for "technical" on pages that are not about machines. Tabular figures in the ledger come from font-variant-numeric: tabular-nums, not from a mono face.

Layout

One column of measured width per surface, never a centred narrow strip. The bill and the stance sheet share a 78rem max width with fluid page padding ({spacing.page-y} {spacing.page-x}); the ledger sits at 66rem, the receipt at 46rem.

The bill fills the viewport (min-height: 100svh) only above 46rem wide and 40rem tall, so the tear strip lands near the fold on real screens without stranding it on short ones. Its argument sets in two hard columns divided by a 1px column rule, collapsing to one column below 46rem.

The stance sheet is a two-up grid under a single 2px rule: reply (minmax(0, 1.55fr)) beside slip (minmax(19rem, 1fr)), stacking below 60rem. The tear strip is three equal grid columns, stacking to one below 46rem where the tabs' vertical dashed dividers become horizontal ones.

Rhythm is fluid rather than stepped: clamp() bands do the vertical spacing ({spacing.band} between major blocks, {spacing.gutter} for gutters), with fixed small steps only inside components ({spacing.field} between fields, {spacing.hair} label-to-input).

Elevation & Depth

The system is flat. Depth is ink density, rules, perforation and torn edges — not layering. Both stocks carry an authored inline-SVG halftone: a two-dot screen at a 6px pitch, at 13% opacity on the acid stock and 7% on bone. It is a dot screen, not a texture image, and it is what makes the stock read as paper.

There is exactly one shadow, and it belongs to a tab lifting off the wall on hover or focus. It carries an offset and a blur because that is what a real shadow has.

Shadow Vocabulary

• Tab lift (box-shadow: 0 10px 30px rgba(23, 20, 15, 0.28→0.32), paired with translateY(-10px) over 260ms cubic-bezier(0.16, 1, 0.3, 1)): the only shadow any app surface may use. Suppressed below 46rem (where the tab tints to bone instead) and under prefers-reduced-motion: reduce.

Named Rules

The One Shadow Rule. A shadow exists in this world only to show paper leaving the wall. Nothing else is elevated: no panels, no menus, no hovering cards. A hard offset shadow with no blur belongs to a different world and is not this one.

The Halftone Rule. Paper texture is the 6px inline-SVG dot screen at low opacity, multiplied into the stock. Never a raster texture, never a bevel, emboss, gradient or inner shadow.

Shapes

Radius is zero, everywhere, on purpose: --rst-radius, --rst-radius-sm and --rst-radius-pill are all 0, and every app-authored control restates border-radius: 0. A printed sheet has corners.

Form language is drawn with rules, not boxes:

• Perforation: a 2px repeating-linear-gradient at 7px on / 7px off, so the dashes stay square. Not a dashed border.
• Dashed dividers: 2px dashed ink between tear-off tabs.
• Torn edge: a 28-point clip-path polygon giving the carried-over stub a ragged lower edge, because that is where the perforation gave.
• Rules: 2px solid ink for structural divisions (strip foot, sheet head, receipt top and bottom, table head); 1px translucent ink for column rules and table rows.
• Fields: ruled underlines, never outlined boxes.

Components

Stamp (the primary button)

A blue block with the second ink struck across its face.

• Shape: square (0)
• Primary: ultramarine ground, acid-stock lettering, uppercase 700 at 0.875rem with 0.14em tracking, padding 0.85rem 1.75rem; a 7px cyan bar multiplied across at 56% height and offset 1px.
• Hover: ground deepens to {colors.blue-strong} over 160ms ease-out.
• Disabled: ground drops out entirely to a 2px dashed ink outline with thinned lettering, and the cyan strike is removed — an unstruck stamp.

Tear-off Tab (signature component)

The primary action of the first surface: three equal tabs hanging off a perforation, each printed on the stock and carrying its own address.

• Shape: square, no border except the 2px dashed divider between tabs and a 2px solid rule closing the strip's foot.
• Content: the position word in display caps, and beneath it the URL that tab leads to in 0.8125rem blue label type. Nothing else.
• State: lifts -10px with the single system shadow on hover and focus-visible; on narrow screens it tints to bone instead of lifting.

The Equal Tabs Rule. Tabs are never numbered, ranked, ordered by emphasis, or given a "recommended" treatment. Three positions numbered 1-2-3 imply a rank; these three are equal by design, and the only differences between them are the word and the address.

The Tab Carries Its Address Rule. A tear-off tab exists to be the thing you walk away holding, so it prints its own destination. A separate "take one" call to action beside it says the same thing twice.

Fields

Ruled lines on paper, one grammar for all of them.

• Style: transparent ground, no border except a 2px solid ink underline, padding 0.45rem 0, radius 0. Label above in 700 0.8125rem with 0.06em tracking.
• Textarea: the one variation — a faint rgba(23,20,15,0.05) ink tint and boxed padding, present to show the field's extent, not as a fill. It keeps the same square corners and vertical-only resize.
• Focus: the global registration mark — a 3px ultramarine outline offset 2px, square.
• Error: a notice ruled 2px along its top edge in the negative tone over a tinted ground; never a left-border callout, never a rounded alert.

Receipt

The terminal surface for every send, confirm, dead link and sign-in: a bone block between two 2px ink rules, with a cyan mark struck across the top rule and the outcome set as a display-caps mark in ultramarine.

Ledger (admin)

The same hand, operating rather than persuading: display-caps title in ultramarine, tallies where the figure is set in the display face at 1.5em beside body-face copy, and a border-collapse table with a 2px ink head rule, 1px row rules, uppercase 0.75rem/0.12em column heads and tabular numerals.

Browser surfaces

Not decoration — the cheapest place to stay consistent. Selection is the inks swapped (ultramarine ground, stock lettering), caret is ultramarine, the scrollbar is thin ink on transparent, and focus is a square 3px ultramarine registration mark.

Do's and Don'ts

Do:

• Do build every ink-over-ink crossing with mix-blend-mode: multiply and a 1–2px offset, so the colour is produced by the press rather than picked.
• Do keep radius at 0 on every new surface and control, including restating border-radius: 0 on native controls.
• Do put new reading surfaces on bone and reserve the acid stock for the bill, its tabs, and stubs torn from it.
• Do draw dividers as perforations, dashed 2px rules, or solid 2px ink rules, and fields as ruled underlines.
• Do vendor any new face into static/fonts/ as woff2; the CSP serves default-src 'self' and an external font link is blocked at the browser.
• Do keep tokens.css byte-identical to the framework's copy and make all visual changes in theme.css (palette, faces, shape, browser surfaces) or bill.css (composition). internal/movementtest/vendored_test.go records that divergence deliberately.

Don't:

• Don't use screen, overlay, lighten, or a flat green fill to make the overprint colour. Cyan on its own is never a surface colour.
• Don't "fix" the 2px band offset, the ragged clip-path edge, or the square perforation dashes — each is authored, and each is the evidence that this was printed.
• Don't add a second shadow, an elevated panel, or a card. Elevation exists only as a tab leaving the wall.
• Don't number, rank or otherwise differentiate the three tabs.
• Don't introduce white (#fff) as a surface, or a third stock colour.
• Don't set running text, labels or UI copy in the monospace stack, and don't set the display face in anything but uppercase 800.
• Don't replace the halftone with a raster texture, a gradient, or a bevel.
• Don't centre a single email field as a surface strategy; forms sit beside the argument they belong to, in the sheet's two-up grid.