Marketing.

The ~20-role marketing surface palette + the `data-tone` convention + the attribute-flipped dark variant.

PP Supply Mono ultralight display + tracked mono eyebrows + Bai Jamjuree body, and the canonical copy unit.

Container, full-bleed-to-edge, alternating copy↔media rows, and the mobile blow-out fix.

The alternating paper / cream / ink / cobalt band cadence.

Reveal-on-scroll, ambient loops, smooth in-page anchors — all reduced-motion-safe.

The copy-led opener: a short cobalt rule beside a mono eyebrow, an extralight display headline, a lede, a CTA pair, and a trust line. Centred in one column by default; splits into copy + a `visual` slot at xl when `hasVisual` is set.

The start-aligned opener for a product or solution page: a filled jade eyebrow chip, a display headline that rises line by line from behind a mask with an optional muted second line, a lede, and a CTA pair — over two soft cobalt and jade gradient panels, closing on an 80px jade bleed.

The full-viewport dark opener: a #04060b band under a jade aurora and horizon, a headline that rises character by character, a lede, a rail of process chips with one highlighted, up to two CTAs, and a brand lockup pinned to the bottom edge.

The canonical section header: a tracked mono eyebrow, a PP Supply Mono ultralight display heading with its trailing phrase in an accent span, and a body paragraph. Reusable on every section.

An oversized pull-quote that fills its own band: a jade "Customer voice" eyebrow, a PP Supply Mono weight-200 quote that reveals word by word on scroll, and a name plus an optional role line. Four tones — paper, cream, ink (default), jade.

A horizontally scrolling, infinitely looping band of uppercase mono phrases separated by a jade glyph. A duplicated track translates -50% on a linear CSS keyframe; the band is ruled top and bottom with a hairline, always mask-fades its edges, and stops entirely under reduced motion.

A tone-owning section with an optional header over a `<dl>` of three or four equal stat cells, divided by hairline rules that flip from horizontal to vertical at 768px. Each cell is an optional jade rule + mono kicker, a `clamp(48px,6vw,88px)` tabular display value, and a 14px label — with an opt-in count-up on the value.

The icon-card feature grid that recurs across dash.fi product pages — a grid stepping 1 → 2 → 3 columns at 640px and 1024px, each cell a `.mk-card` padded 28px stacking a 48px duotone glyph in the accent, a 17px/700 title, and a 14px muted blurb.

A tone-owning section: eyebrow + display headline over a fixed three-track grid of bordered, white-filled cards that lift on hover. Each card stacks a mono eyebrow, an optional oversized metric, a title, and a short paragraph.

A bare 2- or 3-column grid of feature blocks — each a 22px title over a 16px body, capped at a 40ch measure, with an optional 3px jade accent bar on the left edge. No section chrome: it inherits whatever band you drop it into.

Three equal peer cards that are each a link — a display-face title, a muted body that flexes to fill the card, and an accent "go" line with an arrow that slides 3px on hover. The card for the current page takes `data-current` and an `--m-accent-soft` fill.

A three-up card row led by an oversized index numeral — 44px, weight 700, zero-padded, painted `--m-fg-subtle` at 0.5 opacity so it ghosts behind the copy. Each card carries a 17px title and a 14px description; one card per row may take `data-accent` for a jade fill with white type.

A numbered process block with two layouts. `timeline` (default) stacks 44px rounded step tiles down a 1px hairline rail, each with a "Step n" eyebrow, display title, body copy and optional nested sub-blocks. `flow` lays the same steps out as a 2/3/4-column card grid with a dotted connector and a per-card accent bar. Accent is cobalt or jade.

The tone-dotted capability list inside a platform panel — a single column of rows, each an 8px round `data-tone` dot beside a bold label and a muted description line. The four tones (accent, positive, warn, negative) let one list mix what the module does with what it catches.

A pinned horizontal tile track: an eyebrow + two-line display headline over a flex row of product tiles that a GSAP/ScrollTrigger timeline scrubs sideways while the section is pinned, ending with a jade CTA card that expands to fill the viewport. Below 1024px the timeline is skipped and the track is a native CSS scroll-snap carousel.

A tone-owning section: eyebrow + display headline over a 1 / 2 / 4 grid of hover-lift cards. Each card reserves a fixed 140px slot for one of four built-in animated mono graphics (bars, flow, tree, agents), then a display title and a 14px body.

Pill tabs that auto-rotate: the active tab's background fills left→right as a progress bar, advancing on a timer and locking on click. Deep-linkable via a global var + CustomEvent.

A hairline-divided list of question/answer rows — one open at a time. Each question has a mono "Q." marker, a rotating "+" toggle, and an answer that reveals with a grid-rows height animation. Used to close most marketing pages, and the on-page source for FAQPage JSON-LD.

A slider-driven estimator section — an intro column (eyebrow, headline, qualifier chips) beside a card with a range slider that drives a live result. The recurring "move the slider to your spend" moment (recovery / savings / cashback calculators).

A feature matrix with one emphasized "us" column, built as CSS-grid rows (not a semantic table) on /corporate-card and /expense-management: a fixed 4-column layout (row label + Dash.fi + Brex + Ramp), free-text cells (no check/dash glyphs), alternating-row tint, and a horizontal-scroll wrapper below the table's own min-width. A second, real-<table> variant with boolean check/x cells exists once on /rewards.

A ranked list of prioritized recommendations. Two real shapes exist on dash.fi: a rank-badged "report" row (rank, title, Effort/Timeline meta, unlabeled dollar value, full card chrome) on /parcel-analytics, and a hairline-divided "brief" row (label, unlabeled dollar amount, owner, status pill — no rank, no effort/timeline) on /ai-spend-audit.

The proof band — a full-width row that leads with one large rolling-counter metric, supports it with a set of pillar stats (value + label + sub), and grounds it with a carrier/logo strip plus a "live"/powered-by indicator. The standard "here is the evidence" moment on product pages.

A dense violations table ("Compliance Violations") rendered inside a screenshot-style product mockup — issue, severity badge, monthly/annual cost, description, ending in a highlighted Total row. Reused identically inside the ShipShotAudit mockup on /parcel-audit and /carrier-contract-management; framed by fake app chrome (tabs, sidebar, KPI cards, alert banner), not a bare marketing-surface table.

A bar chart (never a line chart — none exists in the grounded source) paired with explanatory copy. On /parcel-analytics it is a full 1180px product-screenshot mock (KPI cards, tabs, one chart panel) in a two-column split; on /ai-spend-audit it is a lighter unlabelled bar strip inside one tab of an interactive dashboard mock, with real range pills that update a KPI number elsewhere but never redraw the bars.

A product screenshot rebuilt as real DOM at a fixed 1180px natural width, then scaled to its container via `transform: scale()` recomputed on a window `resize` listener. Stays crisp at any size and recolours to the marketing accent.

One customer quote at a time, auto-rotating through a set — a large blockquote that reveals character by character on each change, pauses on hover, and shows a name plus a detail line. Prev/next arrows and one dot per quote sit below it as real controls. Realised on the live site as the ShipQuoteCarousel React island.

A self-contained, stat-led proof card — mono eyebrow, semibold sans title, optional description, a `<dl>` stat grid whose column count is picked from the stat count, and an optional strategy list under a fixed "Top strategies by annual impact" heading. Dark by default (ink), with jade and paper tones. It is a presentational block, not a link to a case-study page.

The customer-logo proof rail — a duplicated track of height-capped `<img>` marks scrolling on a 40s linear loop behind an edge mask, rendered grayscale at half opacity and lifting to full colour on hover, under a mono eyebrow. Ships on the homepage as `BrandMarquee`.

PROPOSED — no implementation on dash.fi. The intended "works with your stack" integration rail: a muted strip of the platforms customers connect, a logo plus an optional label per item. Nothing on the site renders it; the nearest built patterns are TrustStatBand (the carrier-coverage strip) and LogoRail (the brand marquee), and both are already specced.

A scroll-pinned narration section: the whole section is `position: sticky; top: 0` at 100dvh inside a wrapper several viewports tall, and scroll progress through that wrapper picks the active copy frame. Frames cross-fade in a single grid cell beside one fixed `visual` slot, and a progress bar tracks position. The visual never swaps — it listens for the `dash:frame-change` event instead.

Inline use of the Dash.fi wordmark on marketing surfaces. The canonical `logo-wordmark.svg` (viewBox 426×90, `currentColor` paths) is inlined with `set:html`, wrapped in a home link, sized by one of three fixed height steps, and coloured by a tone class — never redrawn, never stretched.

The two-path conversion block — exactly two peer option cards side by side under one centred headline, each with an icon, eyebrow, title, body and its own button (the first light-filled, the second ghosted). Sits inside the closing glow band, capped to a 900px column.

The inline end-of-section nudge — a hairline card at the foot of a content section holding one line of prompt copy and one solid accent button, split apart on a row above 640px and stacked below. No band of its own; the quiet counterpart to DarkCtaBand.

The full-viewport closer: a near-black band with a fixed "Now boarding" eyebrow, a display heading, and the Dash card itself as the call to action — a React island wrapped in a link to signup that tilts in 3D on hover. Its heading animation is driven by a separate prelude section elsewhere on the page.

The jade-glow closing band — a full-width dark section with a deep-jade radial glow rising from the bottom into a near-black teal base. Carries the page-closing call to action: eyebrow, ultralight display heading, lede, and a light-beige primary button. Reserved for the final CTA, one per page.

Two form mechanisms: a bespoke single-field email capture (GET-action, navigates to signup) seen on the shipping-audit hero and calculator CTA; and a third-party HubSpot form embed (an iframe) used inline on the partner page and inside a modal dialog on the Growth Network page.

The marketing CTA. A 6px squircle (`corner-shape: squircle`), no shadow, with an `active:scale(.98)` press. Accent (jade) primary, ink, and outline treatments.

A pill tag — `border-radius: 999px`, 1px border, soft-tinted background, mono-ish 12–13px. Styles four semantic ways via `data-tone`; a leading check icon reads as "included".

A two-layer icon: a filled silhouette at low opacity plus a stroked detail layer, both `currentColor`. The icon inherits its hue from the parent, and a per-item hue is allowed here — the only sanctioned multi-colour element.

An interactive product-mock island styled entirely off `--m-*` tokens so it re-themes with the surface (including `[data-mk-dark]`). All displayed figures — bars, counters, values — are derived from state; nothing is hardcoded to fake an update.

Astro scoped `<style>` does not reach the root element of a child component. Structural rules (grid / order / overflow / gap / display) put on a child component class silently no-op — the layout breaks with no error. Put them on a native element instead.