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 base hero primitive — eyebrow, display heading with an accent phrase, lede, and a CTA pair, start-aligned by default. CenteredHero, ProductHero, AsymmetricProductHero, and CosmicHero are specializations.

A product-forward opener: a centred copy unit with a framed, contained scale-to-fit product shot directly below. Stays on the content grid (no edge bleed) — the contained counterpart to AsymmetricProductHero.

A high-drama dark opener: an ink band with an ambient drifting accent glow behind an oversized display heading and a single CTA. Maximum atmosphere — reduced-motion-safe.

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 a band: a large PP Supply Mono weight-200 quote, an attribution line (name, title, company) in muted text, and an optional accent quote-mark. A connective beat between sections, often on cream or ink.

A horizontally scrolling, infinitely looping row of logos, words, or phrases. A duplicated track translates -50% on a CSS keyframe; it pauses on hover and stops entirely under reduced motion, with optionally mask-faded edges.

Three big stats in a row — each a large mono tabular-nums value (accent or strong) over an uppercase mono label in subtle text. Three minmax(0,1fr) tracks that collapse to a stacked column on mobile.

A responsive 2–3-column grid of feature cells — each a small duotone-style icon, a short title, and a body blurb. Drops onto any band and re-themes off the marketing roles.

2–4 equal feature columns side-by-side with no card chrome — just an icon, a heading, and text per column. Optional hairline dividers between columns carry the rhythm.

A dense vertical list of features — each a row of a leading check / positive icon, a title, and a one-line description. Built for long "everything included" rundowns; denser than cards.

Exactly three equal cards in a row — the classic three benefits / three products. Each card is a heading, a body paragraph, and an optional inline link, on the card surface with a hairline border and a soft lift shadow.

A row of cards each prefixed with a large mono number (01 / 02 / 03) in the accent colour — for ordered steps or ranked reasons. Each card carries a title and a body on the card surface with a soft lift shadow.

A vertical timeline of steps — a connector line runs through numbered nodes, each with a title and a description. For onboarding, "how it works", or any ordered process. A horizontal variant lays the nodes left-to-right.

A usually two-column bulleted list of platform capabilities. Each bullet pairs a leading positive-tone check icon with a short capability line, so the block reads as "what's included".

A richer platform section pairing a copy unit (eyebrow + heading + lede + a few PlatformBullets) on one side with a product visual or tile cluster on the other. Two-column and alternating-row friendly.

A dense responsive grid of small utility tiles — a leading icon plus a short label and an optional one-line sublabel. Reads as a capabilities or integrations grid.

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 natural width (e.g. 1180px), then scaled to the container via `transform: scale()` recomputed on a window `resize` listener (the source) — or a ResizeObserver. 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 word-by-word on each change, pauses on hover, and shows a name + role attribution. Realised on the live site as the ShipQuoteCarousel island.

A self-contained, stat-led proof card — eyebrow, title, optional description, a lead stat plus supporting stats (count-up animated), and an optional strategy list. Dark by default (ink), with jade and paper tones. It is a presentational block, not a link to a case-study page.

A horizontal, evenly-spaced rail of customer logos rendered muted and monochrome (low-opacity `--m-fg-subtle`), with an optional "Trusted by" eyebrow. Logos are `<img>` slots in production; previews use text or box placeholders.

A muted rail or grid of the platforms and integrations customers connect — a logo plus an optional label per item. Like LogoRail, but integration-flavoured: framed as "works with your stack", sat quietly on the surface in subtle/muted foreground.

A scroll-pinned showcase: a sticky product visual stays in view (`position: sticky`) while a column of copy or steps scrolls past it. An IntersectionObserver marks the active step as it enters, and the active step drives what the pinned visual shows.

Inline use of the Dash.fi wordmark on marketing surfaces — colourways per band, sizing, and clear-space. A single-source brand asset: the SVG is fetched from the canonical source (`marketing_get_logo` or the repo Wordmark component), never reconstructed or redrawn.

A two-column conversion block: copy unit on one side, an action panel (primary + secondary squircle buttons + optional reassurance chips) on the other. Sits on a cream or ink band.

A lightweight inline CTA that closes a content section: one line of copy + a single link or button, on the current surface (no band change). The quiet counterpart to CTASection.

The oversized page closer: a large display heading, one primary CTA (optional secondary), on a dark ink band with generous padding. The final beat of the homepage.

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-marketing-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.