@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/dist/components/blocks/stats-carousel/stats-carousel-impl.css

@@ -0,0 +1,233 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * The header starts on a phone and is centred from the fold, over the card it names — Stats' rule
+ * and its reason: a centred line starts at a different edge each time, which costs little across a
+ * wide measure and a great deal across a narrow one.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__header {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__description {
+    margin-inline: auto;
+  }
+}
+
+/* A title with nothing under it carries no step under it. */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The card and the awards. Below 62rem the card is over the awards, their two columns side by side
+ * under it — the reference's two-up grid. From 62rem the columns stand either side of the card, its
+ * own column the card's size. `62rem` longhand because `var()` is not permitted in a container query
+ * condition; it is the reference's 992px.
+ *
+ * The card is square, as wide as size.grid.track-lg and the card's inset either side, or the column
+ * it is in where that is narrower. It holds its square whatever the turn inside it needs: the list
+ * keeps the room it leaves above and below the figure in place, centred in the card and clipped by it.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__stage {
+  --dds-statscarousel-card-size: min(100%, calc(var(--size-grid-track-lg) + 2 * var(--space-inset-xl)));
+
+  grid-template-areas:
+    'card card'
+    'start end';
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  inline-size: 100%;
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__stage {
+    grid-template-areas: 'start card end';
+    grid-template-columns: minmax(0, 1fr) var(--dds-statscarousel-card-size) minmax(0, 1fr);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__card {
+  aspect-ratio: var(--aspect-square);
+  grid-area: card;
+  inline-size: var(--dds-statscarousel-card-size);
+  min-block-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list {
+  inline-size: 100%;
+}
+
+/*
+ * Still — a reader who asked for less movement, or a single figure — the figures stand two to a row
+ * in the card, at font.h4: a square card's width holds two figures, not four, and at the turn's size
+ * "168M+" broke over two lines.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list:not([data-wheel]) {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list:not([data-wheel]) .dds-statscarousel__value {
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4-size);
+  font-weight: var(--font-h4-weight);
+  letter-spacing: var(--font-h4-letter-spacing);
+  line-height: var(--font-h4-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list:not([data-wheel]) .dds-statscarousel__label {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+/*
+ * The turn, Stats' phone wheel (stats-impl.css) centred in the card: one figure in place, the one
+ * before it smaller above, the next smaller below, turning every motion.duration.hold over
+ * motion.duration.turn. useWheel sets `data-wheel` for two figures or more and never for a reader who
+ * asked for less movement.
+ *
+ * Every figure stands in the one cell and is moved off it; a step is a whole figure's height. The side
+ * figures stand at --dds-statscarousel-side of their size (0.65), the reference's scale, and fade into
+ * the card by a mask rather than an ink of their own, so the turn reads on every ground. The block
+ * padding is the room the side figures need above and below.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] {
+  --dds-statscarousel-item: calc(
+    var(--font-figure-lg-size) * var(--font-figure-lg-line-height) + var(--space-gap-sm) + var(--font-body-lg-size) *
+      var(--font-body-lg-line-height)
+  );
+  --dds-statscarousel-side: 0.65;
+  --dds-statscarousel-away: 0.4;
+  --dds-statscarousel-room: 0.85;
+  --dds-statscarousel-fade: 35%;
+
+  grid-template-columns: minmax(0, 1fr);
+  mask-image: linear-gradient(
+    transparent,
+    black var(--dds-statscarousel-fade),
+    black calc(100% - var(--dds-statscarousel-fade)),
+    transparent
+  );
+  padding-block: calc(var(--dds-statscarousel-item) * var(--dds-statscarousel-room));
+}
+
+/*
+ * A tab stop while it turns — focus holds it still — so it shows where focus is, as Stats' wheel
+ * does: the ring drawn inside, and the fade gone while it holds focus, since the mask would fade
+ * the ring's top and foot with the figures.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel]:focus-visible {
+  mask-image: none;
+  outline: var(--border-width-focus) solid var(--color-border-focus);
+  outline-offset: calc(-1 * var(--border-width-focus));
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="strong"] .dds-statscarousel__list[data-wheel]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > .dds-statscarousel__item {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  transform-origin: center;
+  transition-duration: var(--motion-duration-turn);
+  transition-property: opacity, scale, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > [data-slot='above'] {
+  scale: var(--dds-statscarousel-side);
+  translate: 0 -100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > [data-slot='below'] {
+  animation: dds-statscarousel-in var(--motion-duration-turn) var(--motion-easing-reveal);
+  scale: var(--dds-statscarousel-side);
+  translate: 0 100%;
+}
+
+/*
+ * Out of sight, a figure waits where the one above leaves to — risen and shrunk away — so leaving is
+ * a movement on, never back; it comes in below by an arrival of its own.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > [data-slot='hidden'] {
+  opacity: var(--opacity-hidden);
+  scale: var(--dds-statscarousel-away);
+  translate: 0 -100%;
+}
+
+@keyframes dds-statscarousel-in {
+  from {
+    opacity: var(--opacity-hidden);
+    scale: var(--dds-statscarousel-away);
+    translate: 0 200%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > .dds-statscarousel__item {
+    animation: none;
+    transition: none;
+  }
+}
+
+/*
+ * The award columns. Each fills its side of the stage — centred, as the stage centres its items, a
+ * column shrank to its words — with its badges centred below 62rem and leaning toward the card from
+ * there, as the reference's do.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards {
+  justify-self: stretch;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="start"] {
+  grid-area: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="end"] {
+  grid-area: end;
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="start"] {
+    align-items: flex-end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="end"] {
+    align-items: flex-start;
+  }
+}
+
+/* The badges, as the Awards block draws them (awards-impl.css), each its column's width up to theirs. */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award {
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel {
+  block-size: auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-copy {
+  flex: 1 1 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel[data-side="trailing"],
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel[data-side="leading"]:dir(rtl) {
+  scale: -1 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel[data-side="trailing"]:dir(rtl) {
+  scale: none;
+}

package/dist/components/blocks/sticky-cards/sticky-cards-impl.css

@@ -73,6 +73,13 @@
   background-color: var(--color-bg-surface-card-strong-raised);
 }
 
+:where([data-dds-context="marketing"])
+  .dds-stickycards[data-ground="strong"]
+  .dds-stickycards__item
+  > .dds-card[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
+}
+
 /*
  * ── compact ──────────────────────────────────────────────────────────────────────────────────
  *
@@ -140,6 +147,7 @@
 :where([data-dds-context="marketing"]) .dds-stickycards .dds-card[data-variant="accent"] { --dds-stickycards-fill: var(--color-bg-brand); }
 :where([data-dds-context="marketing"]) .dds-stickycards .dds-card[data-variant="surface-light"] { --dds-stickycards-fill: var(--color-bg-surface-card-light); }
 :where([data-dds-context="marketing"]) .dds-stickycards[data-ground="subtle"] .dds-card[data-variant="accent-strong"] { --dds-stickycards-fill: var(--color-bg-surface-card-strong-raised); }
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="strong"] .dds-card[data-variant="accent-strong"] { --dds-stickycards-fill: var(--color-bg-surface-card-strong-on-brand-strong); }
 :where([data-dds-context="marketing"]) .dds-stickycards[data-ground="subtle"] .dds-card[data-variant="surface-light"] { --dds-stickycards-fill: var(--color-bg-surface-card-light-raised); }
 
 :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__body {

package/dist/components/blocks/testimonial-row/TestimonialRow.css

@@ -213,7 +213,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__item {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
   color: var(--color-fg-on-brand-strong);
 }
 

package/dist/components/blocks/testimonial-row/TestimonialRow.d.ts

@@ -1,6 +1,7 @@
 import "./TestimonialRow.css";
 import "./testimonial-row-impl.css";
 import "../block-reveal.css";
+import "../block-pattern.css";
 import { type TestimonialRowProps } from "./TestimonialRow.types.js";
 export type { TestimonialRowProps };
 /**
@@ -17,4 +18,4 @@ export type { TestimonialRowProps };
  * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
  * by its heading.
  */
-export declare function TestimonialRow({ ground, title, reviews, summary, ratingLabel, label, externalLabel, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;
+export declare function TestimonialRow({ ground, background, title, reviews, summary, ratingLabel, label, externalLabel, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;

package/dist/components/blocks/testimonial-row/TestimonialRow.js

@@ -5,11 +5,14 @@ import { ChevronLeftRegularIcon, ChevronRightRegularIcon, StarSolidIcon } from "
 import "./TestimonialRow.css";
 import "./testimonial-row-impl.css";
 import "../block-reveal.css";
+import "../block-pattern.css";
 import { given } from "../../given.js";
 import { ButtonIcon } from "../../core/button-icon/ButtonIcon.js";
 import { Link } from "../../core/link/Link.js";
 import { visuallyHidden } from "../../visually-hidden.js";
 import { arriving, useReveal } from "../use-reveal.js";
+import { Background } from "../../core/background/Background.js";
+import { PATTERN_TONE } from "../pattern-tone.js";
 import { testimonialRowDefaults, testimonialRowParts, } from "./TestimonialRow.types.js";
 /**
  * Five stars, filled to a score out of five.
@@ -46,7 +49,7 @@ const AT_END = 2;
  * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
  * by its heading.
  */
-export function TestimonialRow({ ground = testimonialRowDefaults.ground, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, externalLabel = testimonialRowDefaults.externalLabel, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
+export function TestimonialRow({ ground = testimonialRowDefaults.ground, background, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, externalLabel = testimonialRowDefaults.externalLabel, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const row = useRef(null);
@@ -114,16 +117,16 @@ export function TestimonialRow({ ground = testimonialRowDefaults.ground, title,
     const scrolls = ends.back || ends.on;
     // Button's secondary, as a circle; on the dark band its inverse tone turns the tint white.
     const arrow = { variant: "secondary", tone: ground === "strong" ? "inverse" : "default" };
-    return (_jsx("section", { className: testimonialRowParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: testimonialRowParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: testimonialRowParts.header, children: [_jsx("h2", { className: testimonialRowParts.title, id: titleId, ...arriving(0), children: title }), summary === undefined ? null : (_jsx("p", { className: testimonialRowParts.summary, ...arriving(1), children: summary.href !== undefined && given(summary.href) ? (
-                            // A link on its own line, so the standalone one: brand ink and a mark. On the dark
-                            // band it takes the band's ink, where coral is the wrong colour for words.
-                            _jsxs(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: [summary.label, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] })) : (_jsx("span", { children: summary.label })) }))] }), _jsxs("div", { className: testimonialRowParts.carousel, children: [_jsx("div", { ref: row, className: testimonialRowParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: reviews.map((each, at) => {
-                                // A review's position is its identity: the set is a list, and nothing reorders it.
-                                const card = (_jsxs("figure", { className: testimonialRowParts.item, children: [each.rating === undefined ? null : (
-                                        // Named by the score it is drawn at, so a 4.3 is heard as the 4.5 a reader
-                                        // sees rather than as a number the stars do not show.
-                                        _jsx(Rating, { score: each.rating, label: ratingLabel?.(toHalves(each.rating)) ?? `Rated ${toHalves(each.rating)} out of 5` })), _jsx("blockquote", { className: testimonialRowParts.quote, children: each.quote }), _jsx("figcaption", { className: testimonialRowParts.author, children: _jsxs("span", { children: [_jsx("span", { className: testimonialRowParts.name, children: each.name }), given(each.detail) ? (_jsx("span", { className: testimonialRowParts.detail, children: each.detail })) : null] }) })] }, at));
-                                // The review is on a service the page does not own, so it opens beside the page.
-                                return given(each.href) ? (_jsxs("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: [card, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] }, at)) : (card);
-                            }) }), reviews.length > 1 ? (_jsx("div", { className: testimonialRowParts.footer, ...arriving(3), children: _jsxs("div", { className: testimonialRowParts.nav, hidden: !scrolls, children: [_jsx("span", { ref: back, className: testimonialRowParts["nav-slot"], "data-available": ends.back, inert: !ends.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => step(-1) }) }), _jsx("span", { ref: on, className: testimonialRowParts["nav-slot"], "data-available": ends.on, inert: !ends.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => step(1) }) })] }) })) : null] })] }) }));
+    return (_jsxs("section", { className: testimonialRowParts.root, "data-ground": ground, "data-background": background, "aria-labelledby": titleId, children: [background ? _jsx(Background, { tone: PATTERN_TONE[ground], pattern: background, children: null }) : null, _jsxs("div", { className: testimonialRowParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: testimonialRowParts.header, children: [_jsx("h2", { className: testimonialRowParts.title, id: titleId, ...arriving(0), children: title }), summary === undefined ? null : (_jsx("p", { className: testimonialRowParts.summary, ...arriving(1), children: summary.href !== undefined && given(summary.href) ? (
+                                // A link on its own line, so the standalone one: brand ink and a mark. On the dark
+                                // band it takes the band's ink, where coral is the wrong colour for words.
+                                _jsxs(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: [summary.label, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] })) : (_jsx("span", { children: summary.label })) }))] }), _jsxs("div", { className: testimonialRowParts.carousel, children: [_jsx("div", { ref: row, className: testimonialRowParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: reviews.map((each, at) => {
+                                    // A review's position is its identity: the set is a list, and nothing reorders it.
+                                    const card = (_jsxs("figure", { className: testimonialRowParts.item, children: [each.rating === undefined ? null : (
+                                            // Named by the score it is drawn at, so a 4.3 is heard as the 4.5 a reader
+                                            // sees rather than as a number the stars do not show.
+                                            _jsx(Rating, { score: each.rating, label: ratingLabel?.(toHalves(each.rating)) ?? `Rated ${toHalves(each.rating)} out of 5` })), _jsx("blockquote", { className: testimonialRowParts.quote, children: each.quote }), _jsx("figcaption", { className: testimonialRowParts.author, children: _jsxs("span", { children: [_jsx("span", { className: testimonialRowParts.name, children: each.name }), given(each.detail) ? (_jsx("span", { className: testimonialRowParts.detail, children: each.detail })) : null] }) })] }, at));
+                                    // The review is on a service the page does not own, so it opens beside the page.
+                                    return given(each.href) ? (_jsxs("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: [card, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] }, at)) : (card);
+                                }) }), reviews.length > 1 ? (_jsx("div", { className: testimonialRowParts.footer, ...arriving(3), children: _jsxs("div", { className: testimonialRowParts.nav, hidden: !scrolls, children: [_jsx("span", { ref: back, className: testimonialRowParts["nav-slot"], "data-available": ends.back, inert: !ends.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => step(-1) }) }), _jsx("span", { ref: on, className: testimonialRowParts["nav-slot"], "data-available": ends.on, inert: !ends.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => step(1) }) })] }) })) : null] })] })] }));
 }

package/dist/components/blocks/testimonial-row/TestimonialRow.types.d.ts

@@ -3,9 +3,17 @@ export interface TestimonialRowOwnProps {
     /**
      * `page` — The default, and the page's own white. The cards are the recessed gray that sets them off
      * `subtle` — The grey band, the reference design's ground for this section. The cards turn white on it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
-     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading, the summary and the cards' words turn white, and the cards take color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode — so the band reads as a dark-mode section in either theme. The arrows take ButtonIcon's inverse tone
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading, the summary and the cards' words turn white, and the cards take color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, a step lighter than the band — so the band reads as a dark-mode section in either theme. The arrows take ButtonIcon's inverse tone
      */
     ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `halftone` — A field of coral dots that grow towards a soft glow at the band's foot and settle to a fine screen away from it.
+     * `aurora` — Curtains of the brand's light rising from the band's foot and swaying slowly.
+     * `mesh` — The band in the brand's reds folded into one another like a liquid — the loudest of the five, for a dark band.
+     * `grid` — Hairlines a pitch apart rising from a soft bloom at the band's foot — the quietest, and the one to reach for first.
+     * `rings` — Hairline circles spreading out from the middle of the band's foot.
+     */
+    background?: 'halftone' | 'aurora' | 'mesh' | 'grid' | 'rings';
     /** Always. Whose reviews these are, in a few words — "What our customers say". */
     title: string;
     /** Always. The reviews, in the order they run along the row — five to ten of a sentence or two, each with the reviewer's name, its `rating` and, where there is one, the `href` of the review itself. An empty list draws nothing. */

package/dist/components/blocks/testimonial-slider/TestimonialSlider.css

@@ -157,7 +157,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="strong"] .dds-testimonialslider__item {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
   color: var(--color-fg-on-brand-strong);
 }
 

package/dist/components/blocks/testimonial-slider/TestimonialSlider.types.d.ts

@@ -3,7 +3,7 @@ export interface TestimonialSliderOwnProps {
     /**
      * `page` — The default, and the page's own white. The card is the recessed gray that sets it off
      * `subtle` — The grey band, the reference design's ground for this section. The card turns white on it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
-     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the quote turn white and the card takes color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the quote turn white and the card takes color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, a step lighter than the band, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
      */
     ground?: 'page' | 'subtle' | 'strong';
     /** Always. Whose words these are, in a few — "What our partners say", "What our customers say". */

package/dist/components/blocks/tiers/Tiers.types.d.ts

@@ -11,7 +11,7 @@ export interface TiersOwnProps {
     title: string;
     /** A line saying how the tiers work, when the title alone does not — 'Our tiered partnership model rewards performance.' */
     description?: string;
-    /** Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and — on every tier above the entry one — the `qualification` that reaches it, with a line break before the amount. The order of the list is the order of the ladder, so reordering it reorders the tiers. */
+    /** Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and the `qualification` that reaches it, with a line break before the amount — the entry tier's too, saying what it takes to join, so every tier's card has the same line under it. The order of the list is the order of the ladder, so reordering it reorders the tiers. */
     tiers: TiersItem[];
     /** A way on to the programme's full terms — 'Learn more about partner tiers'. A standalone Link, under the row. */
     link?: ReactNode;

package/dist/components/core/background/Background.css

@@ -85,6 +85,25 @@
   background-color: var(--color-bg-page);
 }
 
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] .dds-background__canvas {
+  color: var(--color-bg-brand);
+  outline-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] .dds-background__content {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] .dds-background__mesh {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+}
+
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-background,
   :where([data-dds-context="marketing"]) .dds-background * { transition: none !important; }

package/dist/components/core/background/Background.types.d.ts

@@ -3,9 +3,10 @@ export interface BackgroundOwnProps {
     /**
      * `dark` — The band the halftone was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. Reach for it for the band a page opens or closes on, where the glow gives the band a centre
      * `light` — Coral dots on the page's own ground, for a light page that wants one moment of brand colour without a solid coral band. The glow reads as warmth rather than light, so keep it for a section that is not competing with a dark one nearby
+     * `subtle` — The light pattern on the subtle band's grey — color.bg.band-subtle laid over the page, the grey a block's `ground="subtle"` paints — for a block that carries a pattern on that ground. The same coral as the light tone; only the ground under it is the band's grey rather than the page's white.
      * `brand` — The default: the brand's own coral, the ground the mesh was made for and the one a call to action stands on. White dots on it for the halftone. The heading is white too, and the glow rises from the foot of the band towards it, so check the words read on the coral alone — the pattern can only add to what is behind them
      */
-    tone?: 'dark' | 'light' | 'brand';
+    tone?: 'dark' | 'light' | 'subtle' | 'brand';
     /**
      * `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it, over a faint wash of their own ink. The glow's edge wanders from a plain ellipse as it drifts, so it reads as light on a surface rather than a spotlight. The default, and the one that moves most
      * `aurora` — Curtains of light rising from the band's foot: sheets of the brand's colour swaying and folding, with a ragged crest and fine rays running up through them — light falling through folds rather than pools of colour. Drawn by a shader with a grain over it; before it has drawn, and where it cannot, soft pools of the same colour painted by the stylesheet. At rest the curtains sway over motion.duration.drift; on an interactive band the pointer bends them towards it and brightens them. Reach for it where the halftone would be too busy — an opening band with a picture or a product on it, where dots behind the picture fight it and a wash of light does not

package/dist/components/core/background/background-impl.css

@@ -33,6 +33,29 @@
   position: relative;
 }
 
+/*
+ * The ground a light pattern is drawn on, as one solid colour: the page's own on the light tone, and
+ * the subtle band's grey on the subtle tone, so a block on its grey band can carry a pattern without
+ * the band turning white under it.
+ *
+ * The patterns are drawn by shaders that take their ground as one opaque colour, and the subtle band
+ * is a tint laid over the page — gray.50 in light mode, which is already solid, and white at six over
+ * the near-black page in dark mode, which is not. So in dark mode the grey is mixed out solid: the
+ * band's white at its own six percent into the page, which is the colour the tint comes to.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] {
+  --dds-background-ground: var(--color-bg-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='subtle'] {
+  --dds-background-ground: var(--color-bg-band-subtle);
+}
+
+:where([data-theme='dark']) :where([data-dds-context="marketing"]) .dds-background[data-tone='subtle'],
+:where([data-dds-context="marketing"][data-theme='dark']) .dds-background[data-tone='subtle'] {
+  --dds-background-ground: color-mix(in srgb, var(--color-fg-on-brand-strong) 6%, var(--color-bg-page));
+}
+
 /*
  * A Background with nothing to hold is a layer: it fills the band it is placed in, behind that
  * band's own content, which is how a block draws the pattern under itself without its layout
@@ -85,9 +108,9 @@
  * and the aurora's pools are there: a third of color.bg.brand, about as strong as the grey it
  * replaces, so the grid stays quiet but reads as the brand's. It lights up to the full coral.
  */
-:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light'] {
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']):is([data-tone='light'], [data-tone='subtle']) {
   --dds-background-rule: color-mix(in srgb, var(--color-bg-brand) 35%, transparent);
-  --dds-background-fade: var(--color-bg-page);
+  --dds-background-fade: var(--dds-background-ground);
 }
 
 /*
@@ -130,6 +153,15 @@
     left calc(var(--dds-background-shift, 0%) * -1);
 }
 
+/*
+ * On the subtle tone the band's tint is the root's background-image, which the grid's and the
+ * rings' own images replace — so the band would fall to the page's white under them, in the frame
+ * before the shader draws or wherever it cannot. The ground goes under them as a colour instead.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-tone='subtle']:is([data-pattern='grid'], [data-pattern='rings']) {
+  background-color: var(--dds-background-ground);
+}
+
 /*
  * The rings: circles at size.rings.pitch, centred on the middle of the band's foot, so they spread
  * up and out from where the halftone's glow would rest.
@@ -220,7 +252,7 @@
   background-image: var(--dds-background-rings);
 }
 
-:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light']::before {
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']):is([data-tone='light'], [data-tone='subtle'])::before {
   --dds-background-lit: var(--color-bg-brand);
 }
 
@@ -266,7 +298,7 @@
   --dds-background-hover: 0.25;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='light'] {
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']:is([data-tone='light'], [data-tone='subtle']) {
   --dds-background-pool-deep: var(--color-bg-brand-hover);
   --dds-background-strength: 0.22;
   --dds-background-hover: 0.3;
@@ -475,7 +507,7 @@
   --dds-background-mesh-strength: 0.6;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] .dds-background__mesh {
+:where([data-dds-context="marketing"]) .dds-background:is([data-tone='light'], [data-tone='subtle']) .dds-background__mesh {
   --dds-background-mesh-1: var(--color-bg-brand-subtle);
   --dds-background-mesh-2: var(--color-bg-brand);
   --dds-background-mesh-3: var(--color-bg-brand-subtle);
@@ -620,7 +652,7 @@
   --dds-background-gl-grain: 0.05;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] {
+:where([data-dds-context="marketing"]) .dds-background:is([data-tone='light'], [data-tone='subtle']) {
   --dds-background-gl-grain: 0.025;
 }
 
@@ -654,11 +686,11 @@
   --dds-background-gl-strength: 0.85;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='light'] {
-  --dds-background-gl-ink0: var(--color-bg-page);
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']:is([data-tone='light'], [data-tone='subtle']) {
+  --dds-background-gl-ink0: var(--dds-background-ground);
   --dds-background-gl-ink1: var(--color-bg-brand);
   --dds-background-gl-ink2: var(--color-bg-brand-hover);
-  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 50%, var(--color-bg-page));
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 50%, var(--dds-background-ground));
   --dds-background-gl-strength: 0.35;
 }
 
@@ -689,8 +721,8 @@
   --dds-background-gl-strength: 0.35;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='light'] {
-  --dds-background-gl-ink0: var(--color-bg-page);
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh']:is([data-tone='light'], [data-tone='subtle']) {
+  --dds-background-gl-ink0: var(--dds-background-ground);
   --dds-background-gl-ink1: var(--color-bg-brand-subtle);
   --dds-background-gl-ink2: var(--color-bg-brand);
   --dds-background-gl-ink3: var(--color-bg-brand-subtle);
@@ -730,11 +762,11 @@
   --dds-background-gl-ink3: var(--color-bg-brand-deep);
 }
 
-:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light'] {
-  --dds-background-gl-ink0: var(--color-bg-page);
-  --dds-background-gl-ink1: color-mix(in srgb, var(--color-bg-brand) 28%, var(--color-bg-page));
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']):is([data-tone='light'], [data-tone='subtle']) {
+  --dds-background-gl-ink0: var(--dds-background-ground);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-bg-brand) 28%, var(--dds-background-ground));
   --dds-background-gl-ink2: var(--color-bg-brand);
-  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 12%, var(--color-bg-page));
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 12%, var(--dds-background-ground));
 }
 
 /*

package/dist/components/core/background/halftone.js

@@ -37,7 +37,7 @@
  * the glow's heart outshone the words standing on it. The light and the coral grounds keep most of
  * theirs, where the dots are closer to the ground they sit on.
  */
-const OPACITY = { dark: 0.55, light: 0.85, brand: 0.85 };
+const OPACITY = { dark: 0.55, light: 0.85, subtle: 0.85, brand: 0.85 };
 const SETTINGS = {
     // A third opaque at the faintest: the edge of the glow is a dim field of dots rather than a
     // fade to nothing, so the pattern reaches the band's edges without competing with its heart.

package/dist/components/core/button/Button.css

@@ -136,16 +136,16 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="brand"] {
-  background-color: var(--color-bg-subtle-on-brand-strong);
+  border-color: var(--color-border-strong-inverse);
   color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"] {
-  background-color: var(--color-bg-subtle);
+  border-color: var(--color-border-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"] {
-  background-color: var(--color-bg-subtle-on-brand-strong);
+  border-color: var(--color-border-strong-inverse);
   color: var(--color-fg-on-brand-strong);
 }
 
@@ -158,7 +158,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"]:hover:where(:not(:disabled)) {
-  background-image: linear-gradient(var(--color-bg-hover), var(--color-bg-hover));
+  background-color: var(--color-bg-hover);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"]:hover:where(:not(:disabled)) {
@@ -174,7 +174,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"]:active {
-  background-image: linear-gradient(var(--color-bg-active), var(--color-bg-active));
+  background-color: var(--color-bg-active);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"]:active {

package/dist/components/core/button-icon/ButtonIcon.types.d.ts

@@ -15,7 +15,7 @@ export interface ButtonIconOwnProps {
     size?: 'sm' | 'md' | 'lg';
     /**
      * `default` — The control is on a light ground, which is every surface this package paints by default
-     * `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is the same near-black in light and dark. The ink and the tints move to the band's fixed roles; nothing else does
+     * `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is near-black in light and dark alike — slate.900 in light, a step deeper in dark. The ink and the tints move to the band's fixed roles; nothing else does
      */
     tone?: 'default' | 'inverse';
     /** Always — the glyph is the whole control, so it is required rather than a slot that may be empty. Pass the glyph itself, from the icon package, rather than one already sized: the size a mark takes in this circle is this component's decision, at icon.control.md on md and icon.control.lg on lg, and the width and height the glyph shipped with are overridden by the class this component clones onto it. */