@deriv-com/dds-marketing 1.0.0 → 1.0.2

package/.llm/rules.md

@@ -25,7 +25,7 @@ Guidance only — cannot be checked automatically.
 
 ### Never nest one interactive element inside another
 
-Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, Input and Switch simultaneously.
+Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
 
 Guidance only — cannot be checked automatically.
 
@@ -109,21 +109,25 @@ Guidance only — cannot be checked automatically.
 
 ## Component rules
 
-### Destructive actions require a confirmation step (`Button`) *(applies to something not built yet)*
+### Light weight needs size to survive, and the largest step wants it (`Icon`)
 
-An irreversible action taken by mis-click has no recovery path. The confirmation must name what will be lost, not merely ask whether the user is sure.
+Quill ships every system glyph three times — light, regular and solid — as separate components chosen at the import site. Icon has no weight prop and cannot have one, so nothing in this system can observe the choice, let alone enforce it.
+
+Size settles the light weight, from both ends. At xs its thinnest strokes fall below a pixel and drop out, leaving a shape that reads as broken rather than as light, so light belongs at md and above. At the top of the ramp it is the better weight rather than merely an allowed one: a glyph carries its stroke weight through any scale, so a regular glyph drawn for 24px renders its strokes at twice that width at xl, and reads as heavy rather than confident. A marketing page puts glyphs at that size — a callout, a highlighted block — where a product screen rarely does, which is why this half is Marketing's own. At rest, regular from sm through lg, and light at xl.
+
+What size does not settle is regular against solid. That is a question about what the glyph means, and icon-weight-within-a-set answers it. This rule previously claimed size decided all three, and named steps above xl that the ramp no longer has — the first is the fault Product's version of this rule was corrected for.
 
 Guidance only — cannot be checked automatically.
 
-### Solid weight means selected (`Icon`) *(applies to something not built yet)*
+### In a set of icons, weight marks the current one (`Icon`)
 
-Solid is not an alternative style, it is what a selected icon looks like. A tab or a navigation item renders regular at rest and swaps to solid when it becomes the current one, so the weight change is what carries the selection. The swap changes weight only — the same glyph at the same size, so the shape stays recognisable and just fills in. Marketing has fewer selected states than Product does, which is the reason to hold the meaning rather than to relax it: a solid glyph used decoratively here teaches a reader that solid means nothing, and they carry that into the product.
+Quill ships every system glyph three times — light, regular and solid — as separate components chosen at the import site, and Icon has no weight prop, so nothing here can observe the choice.
 
-Guidance only — cannot be checked automatically.
+Within a set of sibling icons — a row of tabs, a segmented control — the weight is what says which one is current: regular at rest, solid once selected, the same glyph at the same size so the shape stays recognisable and simply fills in. That is the one cue for selection that does not depend on colour, and it survives only while nothing else in the set is solid. Reaching for solid inside a set because it looks better spends it.
 
-### Match the glyph weight to the icon size (`Icon`) *(applies to something not built yet)*
+Outside a set there is nothing to distinguish, and solid claims nothing about selection. The arrow after a standalone link, a mark beside a heading, an icon in a button — none of these sit among siblings competing to be current, and a filled shape is recognised faster than an outlined one, which is the reason to show a glyph rather than words.
 
-Quill ships every system glyph three times — light, regular and solid — as separate components chosen at the import site. Icon has no weight prop and cannot have one, so nothing in this system can observe the choice, let alone enforce it. Size is what should decide it: a glyph carries its stroke weight through any scale, so a regular-weight glyph drawn for 24px renders its strokes at over three times that width when placed at display size, and reads as heavy rather than confident. At rest, use regular from sm through lg, and light at xl, 2xl and display — selection is the one thing that overrides this, and it only ever moves regular to solid.
+This replaces a rule that said solid means selected everywhere. Marketing has more lone glyphs than Product and fewer sets, so the broad version cost it most: Link's solid arrow had to be recorded as an exception to it, when the arrow was never the case the rule protects.
 
 Guidance only — cannot be checked automatically.
 
@@ -139,8 +143,14 @@ Guidance rather than a count. The bar is drawn with a second copy of an action i
 
 Guidance only — cannot be checked automatically.
 
-### At most one primary button per view (`Button`)
+### At most one primary button in a group of actions (`Button`)
+
+Two brand fills side by side ask the visitor to choose between two things that look equally urgent, and nothing tells them which one the page wants. So a group of actions — a hero's pair, a banner's pair, the buttons in a navigation bar — leads with at most one primary, and whatever sits beside it is secondary.
+
+The limit belongs to the group, not the page. A landing page asks for the same thing more than once on purpose: the sign-up in the bar, again under the opening claim, again in a banner halfway down and in the closing band. Each of those is one ask repeated where the reader has arrived, not a second ask competing with the first, and a rule that counted primaries across the page would forbid the thing a marketing page is built to do. This rule came from Product as one primary per view, and there it is right: a view is one screen with one task, and two primaries on it really are two tasks. On a page that scrolls through several sections the view is the wrong unit. The group is the one a reader compares.
+
+The group can lose its primary without a second one appearing. Inverse on the ordinary page ground carries roughly six times the contrast of the brand, so the primary beside it stops reading as the primary — the same fault, reached from the other side.
 
-Two primary actions compete for attention; the user cannot tell which one the system wants them to take.
+A navigation bar is the group with the tightest limit, and navbar-actions-are-a-pair states it: two buttons at most, one of each.
 
 Machine-checkable — `dds lint` will enforce this once built.

package/.llm/tokens.md

@@ -45,6 +45,7 @@ one value at every width.
 - `--color-bg-surface-card-raised` — A card lifting off the ground behind it, e.g. a Card or CardButton on a color.bg.subtle band. White in light, white at six in dark, so a dark card tints the band instead of sitting on it as grey. Menus and popovers take color.bg.surface-raised.
 - `--color-bg-surface-card-strong` — The dark fill of a card weightier than its neighbours, e.g. an accent-strong Card or CardButton. gray.900 in both modes, a step lighter than color.bg.brand-strong so it reads as a card, not a band.
 - `--color-bg-surface-card-strong-raised` — The strong card on a subtle band. gray.900 in light mode, the strong card's own fill, which already stands off the gray.50 band; gray.800 in dark, where the band is a near-black tint the strong card would blend into. Pair with color.fg.on-brand-strong.
+- `--color-bg-surface-glass` — A pane of glass over whatever is behind it, e.g. an IllustrationCard on a band. Light glass in light mode, a faint frosted white in dark, with a blur behind it in both; ink is color.fg.default.
 - `--color-bg-surface-inverse` — The quieter of the two surfaces on a dark ground, for a panel rather than a pill. color.bg.surface-raised-inverse is the stronger lift and is right on a control the size of a navbar's; at that weight a card-sized box reads as a pale patch rather than a surface.
 - `--color-bg-surface-modal` — A surface that covers the page behind a scrim — dialogs, drawers, bottom sheets. The topmost plane there is, so it stays white in light where color.bg.surface is recessed. For one that floats without dimming what is under it use color.bg.surface-raised.
 - `--color-bg-surface-raised` — A surface that lifts off the one behind it, e.g. a dropdown, a popover, a card on a color.bg.subtle band. A card on the page itself takes color.bg.surface, which reads as recessed against it instead.
@@ -66,6 +67,8 @@ one value at every width.
 - `--color-border-focus-inverse` — The focus ring on a ground that runs against the mode. color.border.focus is near-black, which is invisible on a dark bar — and a focus ring that cannot be seen is the one affordance a keyboard reader has nothing to fall back on.
 - `--color-border-focus-on-brand-strong` — The focus ring on color.bg.brand-strong, e.g. a navigation bar's controls on a dark hero, a footer's links. White in both modes, because the band does not change. For a surface that flips with the mode use color.border.focus-inverse.
 - `--color-border-info` — Informational accent border, e.g. info banner edge, highlighted section.
+- `--color-border-pattern` — The resting lines of a decorative rule grid on the page's ground. A step above color.border.subtle, which a hairline across a whole band thins to nothing; well below the default border, so the grid reads as texture.
+- `--color-border-pattern-inverse` — The resting lines of a decorative rule grid on a dark or coral ground. White at a quarter in both modes, as those grounds are; a step above color.border.subtle-inverse, which a hairline grid thins to nothing.
 - `--color-border-strong` — Emphasised border for active or prominent elements, e.g. active input, selected card edge.
 - `--color-border-subtle` — A quiet separator, e.g. dividers, table rules. Alpha-based — works on any surface.
 - `--color-border-subtle-inverse` — A quiet rule on a dark ground. The counterpart to color.border.subtle, which is black at 5% and invisible on one.
@@ -127,6 +130,7 @@ one value at every width.
 
 ## size
 
+- `--size-aurora-spotlight` — How far the pool of light trailing the pointer across an aurora reaches, as a radius. Small enough to read as light the pointer carries rather than a wash over the band.
 - `--size-avatar` — A person's picture beside their words — the author of a testimonial. Forty-eight, round: large enough to recognise a face, small enough to stay a signature under the quote rather than a portrait above it.
 - `--size-backdrop-blur` — How far a see-through surface blurs what is behind it, e.g. the navigation bar over the page it scrolls across. Enough that the words behind it stop reading as words, so the bar's own stay legible.
 - `--size-band-compact` — The least height an opening band takes when it is not a screen tall — a company, legal or support page, where a full viewport would be a wall before the first sentence. Deep enough that the band reads as a band rather than a gap the title fell into.
@@ -143,6 +147,8 @@ one value at every width.
 - `--size-grid-track-lg` — For a cell holding a picture as well as words, or a pricing plan with a list under it. Three fit the page's measure and four do not, which is what makes this the floor for a grid meant to read as three across.
 - `--size-grid-track-md` — The default track floor, for a feature card: a heading and a line or two beneath it. Four of these fit the page's measure, so a grid asking for three has room to spare and drops to two on a tablet rather than at the first sign of pressure.
 - `--size-grid-track-sm` — The narrowest a grid track goes before the grid drops a column. For a cell holding a logo, an icon and a word, or one short claim — six of them clear the page's measure with the page gutter still on both sides.
+- `--size-halftone-dot` — The widest a halftone dot grows, at the brightest point of the glow. Six against size.halftone.pitch's twenty, so even the largest dots stand well apart and the pattern reads as a fine screen of light rather than a field of discs.
+- `--size-halftone-pitch` — How far apart a halftone background's dots sit, centre to centre. A pitch rather than a gap, as size.rule-grid.pitch is: how often a decorative mark recurs. Twenty, against a six-pixel dot: a fine screen that reads as a tone across a band.
 - `--size-heading-group-max` — How wide an eyebrow, a title and a description may run as a block. Independent or centred groups take this; one that has to sit on the grid takes eight columns instead, which is a span rather than a measure.
 - `--size-logo-columns-height` — How much of a LogoColumns wall shows at once, from the fold. Tall enough that a column reads as running on past both edges; half of it on a phone.
 - `--size-logo-rows-tile` — The width of a tile on a LogoRows, from the fold; three quarters of it on a phone. Wide enough for a wordmark, narrow enough that a row shows several at once.
@@ -156,7 +162,10 @@ one value at every width.
 - `--size-menu-panel-min` — The shortest a section's menu panel gets, whatever it holds. A bar's sections rarely have the same number of destinations, and panels that each took their own height would change size as the reader moved along the row.
 - `--size-menu-max` — The tallest a menu's surface gets before its commands scroll. Product's measure, and counted in rows: five whole and part of a sixth at either size. Neither lands on a row boundary — a ceiling cutting clean at the last full row looks like the whole set.
 - `--size-review-card-min` — The shortest a TestimonialRow card gets. A floor, not a height: a one-line review keeps a card's shape, and a longer one still grows it.
+- `--size-rings-pitch` — How far apart the rings on a band sit, counted out from the middle of its foot. A pitch, as size.rule-grid.pitch is; tighter than the grid's, because rings spaced that wide read as a target rather than a ripple.
+- `--size-rings-spotlight` — How far the pointer's light reaches on the rings: the radius within which they brighten around the pointer and fade to the resting rings. The rule grid's reach, so the two answer the pointer alike.
 - `--size-rule-grid-pitch` — How often the rule grid repeats on a band that paints one. A pitch rather than a gap: it is how far apart a decorative line recurs, not the space between two things a reader is comparing.
+- `--size-rule-grid-spotlight` — How far the pointer's light reaches on a rule grid: the radius within which the lines brighten around the pointer and fade to the resting grid. A little over a square either way: light under the pointer, not a lit band.
 - `--size-sheet-handle-height` — The thickness of that handle. At the smallest step the scale has, because a grab bar is a hint that the sheet moves rather than a part of what it holds.
 - `--size-sheet-handle-width` — The width of the grab handle at the top of a BottomSheet. Wide enough to take hold of, narrow enough to read as a grip rather than as a rule across the sheet.
 - `--size-sheet-max` — The widest a BottomSheet gets before it stops growing and centres. A sheet is a small-screen pattern, and one running the width of a desktop is a dialog that arrived from the wrong edge.
@@ -349,6 +358,7 @@ one value at every width.
 
 - `--motion-distance-drift` — How far decoration travels against the scroll while its section passes through the view, one way or the other. Far enough to be seen moving as the reader scrolls past, so it reads as depth.
 - `--motion-duration-dramatic` — Editorial hero entrances for visual impact, e.g. hero headline revealing, landing page title appearing. Not for scroll reveals — use motion.duration.reveal.
+- `--motion-duration-drift` — One way of a slow drift that runs while something is on screen — an aurora wandering along a band's foot and back. Ten seconds, so the movement is felt rather than watched.
 - `--motion-duration-dwell` — How long a rotating message holds before the next one moves in, e.g. a CTA banner's slides. Long enough to read a headline and a line under it; the reference site's 2000 moved before a reader reached the button.
 - `--motion-duration-fast` — Direct user actions that should feel instant, e.g. hover, press, toggle.
 - `--motion-duration-instant` — A change the reader has already moved past — a tooltip leaving once the pointer is elsewhere. Not a short duration but no duration: animating a dismissal keeps a thing on screen after the reason for it has gone.
@@ -360,6 +370,7 @@ one value at every width.
 - `--motion-duration-slow` — Large UI transitions, e.g. accordions expanding, page transitions, interactive demos.
 - `--motion-duration-spinner` — One full rotation of a spinner. Fast enough to read as working, slow enough that the stroke does not blur into a solid ring.
 - `--motion-duration-stagger` — The step between one part of a section arriving and the next. A gap rather than a length: five parts at this step trail the first by less than half a second, so a block still arrives as one thing rather than assembling itself while a reader waits.
+- `--motion-duration-trail` — How long something takes to catch up with a pointer it trails — a background's glow following the pointer across a band. Half a second, so the light drifts after the hand rather than sticking to it: a trail is felt, a cursor is tracked.
 - `--motion-easing-enter` — UI elements arriving on screen — decelerates into place, e.g. dropdown opening, tooltip appearing.
 - `--motion-easing-exit` — UI elements leaving the screen — accelerates away, e.g. menu closing, notification dismissing.
 - `--motion-easing-media-hover` — Art moving inside a frame that holds still. Symmetric, unlike easing.standard: a hover runs forward on enter and backward on leave, so a one-way curve that settles hard reads as a snap going one way and a drift the other.

package/AGENTS.md

@@ -58,13 +58,12 @@ a component you give `onChange` or `onClick` to goes in a file of your own that
 - **A section that paints a ground sets the ink to go with it**
 - **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone**
 - **Anything a pointer has to hit is at least 24px in both directions**
-- **At most one primary button per view**
-- **Destructive actions require a confirmation step**
+- **At most one primary button in a group of actions**
 - **Every gap inside a section names the relationship it expresses, and the same relationship keeps its measure when it turns on its side**
 - **Never nest one interactive element inside another**
 - **On a phone a section's actions stack and each fills the width, including when there is only one**
-- **Match the glyph weight to the icon size** *(guidance)*
-- **Solid weight means selected** *(guidance)*
+- **In a set of icons, weight marks the current one** *(guidance)*
+- **Light weight needs size to survive, and the largest step wants it** *(guidance)*
 
 Reasons and the cases each one turns on: `.llm/rules.md`.
 
@@ -81,6 +80,7 @@ screen is built in is not something to reach for while building a control.
 
 - **Accordion** — Questions a reader asks near a decision
 - **AccordionItem** — One row inside an Accordion
+- **Background** — A band that has to stand apart from the page around it with more than a change of fill
 - **Badge** — One of a set is the one the page wants read first
 - **BottomSheet** — A task needs the screen's full width and the reader's undivided attention
 - **Breadcrumb** — The page sits inside a section hierarchy, and the levels above it are places the visitor can navigate to
@@ -97,6 +97,8 @@ screen is built in is not something to reach for while building a control.
 - **Footer** — A marketing page needs its closing band
 - **FooterGroup** — A set of a footer's destinations belong under one word
 - **Icon** — A glyph stands beside words to speed recognition
+- **IllustrationCard** — Product information laid over a photograph or a piece of art
+- **IllustrationScene** — Product information shown over a photograph
 - **Link** — A term inside running copy has a page of its own
 - **MenuItem** — A row in a menu of destinations
 - **Navbar** — A marketing page needs its top-level navigation
@@ -168,7 +170,7 @@ saying what to mount and where.
 ## Reading order
 
 1. This file.
-2. `.llm/rules.md` before writing anything — 1,500 tokens, and it is where the constraints
+2. `.llm/rules.md` before writing anything — 5,200 tokens, and it is where the constraints
    that no single component can state live.
 3. `.llm/digest/<name>.md` for every component you are using — **all of it, not the part
    you were looking for**. Around 1,400 tokens each: what it is for, what to reach for

package/dist/components/blocks/cta-banner/CtaBanner.d.ts

@@ -19,4 +19,4 @@ export type { CtaBannerProps };
  * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
  * brings the headline, the line and the actions up a step apart once the band is in view.
  */
-export declare function CtaBanner({ title, headingLevel, description, actions, }: CtaBannerProps): import("react").JSX.Element;
+export declare function CtaBanner({ title, headingLevel, description, actions, background, }: CtaBannerProps): import("react").JSX.Element;

package/dist/components/blocks/cta-banner/CtaBanner.js

@@ -6,6 +6,7 @@ import './cta-banner-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
+import { Background } from '../../core/background/Background.js';
 import { ctaBannerDefaults, ctaBannerParts } from './CtaBanner.types.js';
 /**
  * A full-bleed coral band carrying one promotion and the action it asks for.
@@ -23,9 +24,9 @@ import { ctaBannerDefaults, ctaBannerParts } from './CtaBanner.types.js';
  * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
  * brings the headline, the line and the actions up a step apart once the band is in view.
  */
-export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, }) {
+export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, background, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h3' ? 'h3' : 'h2';
-    return (_jsx("section", { className: ctaBannerParts.root, "aria-labelledby": titleId, children: _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) }) }));
+    return (_jsxs("section", { className: ctaBannerParts.root, "data-background": background, "aria-labelledby": titleId, children: [background === undefined ? null : (_jsx(Background, { tone: "brand", pattern: background, children: null })), _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/cta-banner/CtaBanner.types.d.ts

@@ -11,6 +11,11 @@ export interface CtaBannerOwnProps {
     description?: string;
     /** The one action the message asks for, or two at most. The coral is the banner's ground, so the primary is Button variant="inverse" tone="brand" — a primary Button is coral on coral, and the tone keeps it near-black in both themes — and a second is Button variant="secondary" tone="brand" — a white tint with a white label, fixed in both themes like the band. */
     actions?: ReactNode;
+    /**
+     * `halftone` — A halftone drawn behind the band's content: white dots on the band's own coral, following the pointer over the band. Drawn by Background, placed as a layer under the content, so the band's own layout is untouched.
+     * `grid` — A fine rule grid behind the band's content: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. Drawn by Background as a layer under the band's own content, by the stylesheet alone — quieter than the halftone, and nothing runs at rest
+     */
+    background?: 'halftone' | 'grid';
 }
 export type CtaBannerProps = CtaBannerOwnProps;
 /** The class each part carries. Apply these — do not retype them. */

package/dist/components/blocks/cta-banner/cta-banner-impl.css

@@ -27,3 +27,11 @@
     justify-content: center;
   }
 }
+
+/*
+ * The banner's column, lifted over the pattern layer. It is not positioned otherwise — the banner
+ * has no other layer to clear — so it is lifted only where the pattern is drawn.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabanner[data-background] .dds-ctabanner__inner {
+  position: relative;
+}

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.d.ts

@@ -36,4 +36,4 @@ export type { CtaBannerSliderProps };
  * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
  * part do, so the outgoing words never travel.
  */
-export declare function CtaBannerSlider({ slides, headingLevel, autoplay, label, controlsLabel, slideLabel, }: CtaBannerSliderProps): import("react").JSX.Element | null;
+export declare function CtaBannerSlider({ slides, headingLevel, autoplay, label, controlsLabel, slideLabel, background, }: CtaBannerSliderProps): import("react").JSX.Element | null;

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.js

@@ -4,6 +4,7 @@ import './CtaBannerSlider.css';
 import './cta-banner-slider-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
+import { Background } from '../../core/background/Background.js';
 import { useRotation } from '../use-rotation.js';
 import { given } from '../../given.js';
 import { Button } from '../../core/button/Button.js';
@@ -42,7 +43,7 @@ import { ctaBannerSliderDefaults, ctaBannerSliderParts, } from './CtaBannerSlide
  * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
  * part do, so the outgoing words never travel.
  */
-export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults.headingLevel, autoplay = ctaBannerSliderDefaults.autoplay, label = ctaBannerSliderDefaults.label, controlsLabel = ctaBannerSliderDefaults.controlsLabel, slideLabel = ctaBannerSliderDefaults.slideLabel, }) {
+export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults.headingLevel, autoplay = ctaBannerSliderDefaults.autoplay, label = ctaBannerSliderDefaults.label, controlsLabel = ctaBannerSliderDefaults.controlsLabel, slideLabel = ctaBannerSliderDefaults.slideLabel, background, }) {
     const Title = headingLevel === 'h3' ? 'h3' : 'h2';
     const count = slides.length;
     // The band arriving on screen, as every block does; until then no slide has arrived.
@@ -54,7 +55,7 @@ export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults
     // leads a screen reader to an empty band.
     if (count === 0)
         return null;
-    return (_jsx("section", { ref: root, className: ctaBannerSliderParts.root, "aria-label": label, ...region, children: _jsxs("div", { className: ctaBannerSliderParts.inner, ref: band, children: [_jsx("div", { className: ctaBannerSliderParts.track, ...track, children: slides.map((slide, at) => (_jsxs("div", { className: ctaBannerSliderParts.slide, ...item(at), "data-revealed": revealed && !away(at), children: [_jsxs("div", { className: ctaBannerSliderParts.text, children: [_jsx(Title, { className: ctaBannerSliderParts.title, ...arriving(0), children: slide.title }), given(slide.description) ? (_jsx("p", { className: ctaBannerSliderParts.description, ...arriving(1), children: slide.description })) : null] }), slide.primaryAction ? (_jsxs("div", { className: ctaBannerSliderParts.actions, ...arriving(2), children: [_jsx(Button, { variant: "inverse", tone: "brand", href: slide.primaryAction.href, children: slide.primaryAction.label }), slide.secondaryAction ? (_jsx(Button, { variant: "secondary", tone: "brand", href: slide.secondaryAction.href, children: slide.secondaryAction.label })) : null] })) : null] }, at))) }), rotating ? (_jsx("div", { className: ctaBannerSliderParts.controls, children: _jsx(PaginationDots, { ...dots, 
-                        /* A dot pressed stops the dots' own rotation; the band's press handler stops this. */
-                        label: controlsLabel, itemLabel: slideLabel }) })) : null] }) }));
+    return (_jsxs("section", { ref: root, className: ctaBannerSliderParts.root, "aria-label": label, "data-background": background, ...region, children: [background === undefined ? null : (_jsx(Background, { tone: "brand", pattern: background, children: null })), _jsxs("div", { className: ctaBannerSliderParts.inner, ref: band, children: [_jsx("div", { className: ctaBannerSliderParts.track, ...track, children: slides.map((slide, at) => (_jsxs("div", { className: ctaBannerSliderParts.slide, ...item(at), "data-revealed": revealed && !away(at), children: [_jsxs("div", { className: ctaBannerSliderParts.text, children: [_jsx(Title, { className: ctaBannerSliderParts.title, ...arriving(0), children: slide.title }), given(slide.description) ? (_jsx("p", { className: ctaBannerSliderParts.description, ...arriving(1), children: slide.description })) : null] }), slide.primaryAction ? (_jsxs("div", { className: ctaBannerSliderParts.actions, ...arriving(2), children: [_jsx(Button, { variant: "inverse", tone: "brand", href: slide.primaryAction.href, children: slide.primaryAction.label }), slide.secondaryAction ? (_jsx(Button, { variant: "secondary", tone: "brand", href: slide.secondaryAction.href, children: slide.secondaryAction.label })) : null] })) : null] }, at))) }), rotating ? (_jsx("div", { className: ctaBannerSliderParts.controls, children: _jsx(PaginationDots, { ...dots, 
+                            /* A dot pressed stops the dots' own rotation; the band's press handler stops this. */
+                            label: controlsLabel, itemLabel: slideLabel }) })) : null] })] }));
 }

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.d.ts

@@ -17,6 +17,10 @@ export interface CtaBannerSliderOwnProps {
     controlsLabel?: string;
     /** The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English. */
     slideLabel?: string;
+    /**
+     * `grid` — A fine rule grid behind the slides: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. Drawn by Background as a layer under the band's content, by the stylesheet alone, so it holds still while the slides move and costs nothing at rest
+     */
+    background?: 'grid';
 }
 export type CtaBannerSliderProps = CtaBannerSliderOwnProps;
 /** The class each part carries. Apply these — do not retype them. */

package/dist/components/blocks/cta-banner-slider/cta-banner-slider-impl.css

@@ -71,3 +71,11 @@
     justify-content: center;
   }
 }
+
+/*
+ * The band's column, lifted over the pattern layer when `background` asks for one. Not positioned
+ * otherwise — the band has no other layer for it to clear.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabannerslider[data-background] .dds-ctabannerslider__inner {
+  position: relative;
+}

package/dist/components/blocks/landing-hero/LandingHero.d.ts

@@ -38,4 +38,4 @@ export type { LandingHeroProps };
  * title and the description; a photograph that carried meaning they do not would be a hero that
  * reads as empty to anyone who cannot see it, and the contract says so.
  */
-export declare function LandingHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, }: LandingHeroProps): import("react").JSX.Element;
+export declare function LandingHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, background, }: LandingHeroProps): import("react").JSX.Element;

package/dist/components/blocks/landing-hero/LandingHero.js

@@ -6,6 +6,7 @@ import './landing-hero-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
+import { Background } from '../../core/background/Background.js';
 import { landingHeroDefaults, landingHeroParts, } from './LandingHero.types.js';
 /**
  * The band that opens a marketing page.
@@ -42,13 +43,13 @@ import { landingHeroDefaults, landingHeroParts, } from './LandingHero.types.js';
  * title and the description; a photograph that carried meaning they do not would be a hero that
  * reads as empty to anyone who cannot see it, and the contract says so.
  */
-export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults.headingLevel, description, actions, media, backgroundImage, }) {
+export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults.headingLevel, description, actions, media, backgroundImage, background, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h2' ? 'h2' : 'h1';
-    return (_jsxs("section", { className: landingHeroParts.root, "aria-labelledby": titleId, 
+    return (_jsxs("section", { className: landingHeroParts.root, "data-background": background, "aria-labelledby": titleId, 
         /* The one inline style here, and it is a value rather than a decision: which photograph,
            supplied by the page. Everything about how it is drawn — the cover fit and the position — is in the stylesheet, where it can be reasoned about. A background shorthand
            would have reset those four properties every time the page passed an image. */
-        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/landing-hero/LandingHero.types.d.ts

@@ -15,10 +15,14 @@ export interface LandingHeroOwnProps {
     actions?: ReactNode;
     /** The band's visual — the subject standing beside the claim, cropped by the band's own inline edge rather than floating clear of it */
     media?: ReactNode;
-    /** A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it */
-    backgroundImage?: string;
 }
-export type LandingHeroProps = LandingHeroOwnProps;
+export type LandingHeroProps = LandingHeroOwnProps & ({
+    background?: 'halftone';
+    backgroundImage?: undefined;
+} | {
+    background?: undefined;
+    backgroundImage?: string;
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const landingHeroParts: {
     readonly root: "dds-landinghero";

package/dist/components/blocks/page-header/PageHeader.d.ts

@@ -31,4 +31,4 @@ export type { PageHeaderProps };
  * region landmark once it has a name, and a band that announced itself as an unnamed section is one
  * more thing a screen reader user walks through rather than a place they can skip to.
  */
-export declare function PageHeader({ eyebrow, title, headingLevel, description, actions, }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ eyebrow, title, headingLevel, description, actions, background, }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/blocks/page-header/PageHeader.js

@@ -6,6 +6,7 @@ import './page-header-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
+import { Background } from '../../core/background/Background.js';
 import { pageHeaderDefaults, pageHeaderParts } from './PageHeader.types.js';
 /**
  * The band that opens a company or a legal page.
@@ -35,9 +36,9 @@ import { pageHeaderDefaults, pageHeaderParts } from './PageHeader.types.js';
  * region landmark once it has a name, and a band that announced itself as an unnamed section is one
  * more thing a screen reader user walks through rather than a place they can skip to.
  */
-export function PageHeader({ eyebrow, title, headingLevel = pageHeaderDefaults.headingLevel, description, actions, }) {
+export function PageHeader({ eyebrow, title, headingLevel = pageHeaderDefaults.headingLevel, description, actions, background, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h2' ? 'h2' : 'h1';
-    return (_jsx("section", { className: pageHeaderParts.root, "aria-labelledby": titleId, children: _jsx("div", { className: pageHeaderParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: pageHeaderParts.content, children: [_jsxs("div", { className: pageHeaderParts.text, children: [given(eyebrow) ? (_jsx("p", { className: pageHeaderParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: pageHeaderParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: pageHeaderParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: pageHeaderParts.actions, ...arriving(3), children: actions })) : null] }) }) }));
+    return (_jsxs("section", { className: pageHeaderParts.root, "data-background": background, "aria-labelledby": titleId, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, _jsx("div", { className: pageHeaderParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: pageHeaderParts.content, children: [_jsxs("div", { className: pageHeaderParts.text, children: [given(eyebrow) ? (_jsx("p", { className: pageHeaderParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: pageHeaderParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: pageHeaderParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: pageHeaderParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/page-header/PageHeader.types.d.ts

@@ -13,6 +13,10 @@ export interface PageHeaderOwnProps {
     description?: string;
     /** The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site */
     actions?: ReactNode;
+    /**
+     * `halftone` — A halftone drawn behind the band's content: coral dots blending to white at the glow's heart, on the band's own dark ground, following the pointer over the band. Drawn by Background, placed as a layer under the content, so the band's own layout is untouched. It replaces the rule grid rather than joining it: two patterns on one band are texture fighting texture.
+     */
+    background?: 'halftone';
 }
 export type PageHeaderProps = PageHeaderOwnProps;
 /** The class each part carries. Apply these — do not retype them. */

package/dist/components/blocks/page-header/page-header-impl.css

@@ -174,3 +174,11 @@
     inline-size: auto;
   }
 }
+
+/*
+ * With the halftone the rule grid steps aside. Two patterns on one band are texture fighting
+ * texture, and the halftone is the one that was asked for.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader[data-background='halftone'] {
+  background-image: none;
+}

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

@@ -0,0 +1,69 @@
+/* GENERATED from background.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-background {
+  align-content: center;
+  display: grid;
+  inline-size: 100%;
+  isolation: isolate;
+  justify-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__content {
+  box-sizing: border-box;
+  inline-size: 100%;
+  text-align: center;
+  max-inline-size: var(--size-content-max);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__canvas {
+  transition-duration: var(--motion-duration-trail);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] {
+  background-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] .dds-background__canvas {
+  color: var(--color-fg-on-brand);
+  outline-color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] .dds-background__content {
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] {
+  background-color: var(--color-bg-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] .dds-background__canvas {
+  color: var(--color-bg-brand);
+  outline-color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] .dds-background__content {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] {
+  background-color: var(--color-bg-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] .dds-background__canvas {
+  color: var(--color-bg-brand);
+  outline-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] .dds-background__content {
+  color: var(--color-fg-default);
+}
+
+@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.d.ts

@@ -0,0 +1,21 @@
+import './Background.css';
+import './background-impl.css';
+import { type BackgroundProps } from './Background.types.js';
+export type { BackgroundProps };
+/**
+ * A ground a section or a block sits on, painted with a pattern.
+ *
+ * The band paints the tone's flat colour, the pattern is laid over it, and the content over that.
+ * The flat colour is what shows before anything has drawn — on a server-rendered page, until
+ * hydration — so the band is finished from the first paint and the pattern only ever adds to it.
+ *
+ * Four patterns. The halftone is drawn by script on a canvas, through `useHalftone`, which owns
+ * every question of its cost: it draws only while something moves, pauses out of view and holds
+ * the bitmap to twice the pixel density. The aurora, the grid and the rings are painted by the
+ * stylesheet, with no canvas; `useSpotlight` only tells them where the pointer is.
+ *
+ * With nothing to hold it is a layer: it fills its positioned parent behind that parent's own
+ * content, and listens for the pointer on the parent, because the content covers it. That is how a
+ * block draws a pattern under itself without its own layout changing.
+ */
+export declare function Background({ tone, pattern, animated, interactive, children, ...rest }: BackgroundProps): import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Background.css';
+import './background-impl.css';
+import { backgroundDefaults, backgroundParts } from './Background.types.js';
+import { useHalftone } from './use-halftone.js';
+import { useOffscreen } from './use-offscreen.js';
+import { useSpotlight } from './use-spotlight.js';
+/**
+ * A ground a section or a block sits on, painted with a pattern.
+ *
+ * The band paints the tone's flat colour, the pattern is laid over it, and the content over that.
+ * The flat colour is what shows before anything has drawn — on a server-rendered page, until
+ * hydration — so the band is finished from the first paint and the pattern only ever adds to it.
+ *
+ * Four patterns. The halftone is drawn by script on a canvas, through `useHalftone`, which owns
+ * every question of its cost: it draws only while something moves, pauses out of view and holds
+ * the bitmap to twice the pixel density. The aurora, the grid and the rings are painted by the
+ * stylesheet, with no canvas; `useSpotlight` only tells them where the pointer is.
+ *
+ * With nothing to hold it is a layer: it fills its positioned parent behind that parent's own
+ * content, and listens for the pointer on the parent, because the content covers it. That is how a
+ * block draws a pattern under itself without its own layout changing.
+ */
+export function Background({ tone = backgroundDefaults.tone, pattern = backgroundDefaults.pattern, animated = backgroundDefaults.animated, interactive = backgroundDefaults.interactive, children, ...rest }) {
+    // Nothing to hold: a layer under the parent's own content. See above.
+    const layer = children === undefined || children === null || children === false;
+    const [root, canvas] = useHalftone(pattern === 'halftone', interactive, animated, tone, layer);
+    // The patterns the stylesheet paints answer the pointer from where it is: the grid's lines and
+    // the rings brighten around it, and the aurora carries a pool of its light after it.
+    useSpotlight(root, pattern !== 'halftone' && interactive, layer);
+    // The patterns the stylesheet moves at rest wait while the band is off screen; the halftone's
+    // painter has its own observer.
+    useOffscreen(root, pattern !== 'halftone' && animated);
+    return (_jsxs("div", { ...rest, ref: root, className: backgroundParts.root, "data-tone": tone, "data-pattern": pattern, "data-animated": animated ? undefined : 'false', "data-layer": layer || undefined, "aria-hidden": layer || undefined, children: [pattern === 'halftone' ? (_jsx("canvas", { ref: canvas, className: backgroundParts.canvas, "aria-hidden": "true" })) : null, layer ? null : _jsx("div", { className: backgroundParts.content, children: children })] }));
+}

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

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface BackgroundOwnProps {
+    /**
+     * `dark` — The default, and the band the pattern 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
+     * `brand` — White dots on the coral brand fill, for a call to action standing on it. 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 dots can only add to what is behind them
+     */
+    tone?: 'dark' | 'light' | '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. The default, and the one that moves most
+     * `aurora` — Broad soft pools of the brand's colour rising from the band's foot and drifting slowly into one another — light as colour rather than as points. Drawn by the stylesheet: no canvas. At rest the pools wander, there and back, over motion.duration.drift; on an interactive band a smaller pool trails the pointer. 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 colour does not
+     * `grid` — A fine rule grid of hairlines, fading in towards the band's foot — the grid PageHeader paints, offered for any band. Drawn by the stylesheet: no canvas. On an interactive band the lines brighten in a soft circle around the pointer and fade back when it leaves; at rest the rules rise slowly, a pitch over motion.duration.drift. Reach for it where the band should read as deliberate and quiet rather than lit
+     * `rings` — Hairline circles spreading out from the middle of the band's foot, fading in towards it, at size.rings.pitch. Drawn by the stylesheet: no canvas. On an interactive band the rings brighten in a soft circle around the pointer and fade back when it leaves; at rest the rings spread slowly outward, a pitch over motion.duration.drift. As quiet as the grid, but round: reach for it where the band should feel open and centred rather than ruled — a call to action, a closing band with one thing to say
+     */
+    pattern?: 'halftone' | 'aurora' | 'grid' | 'rings';
+    /** On by default: every pattern moves slowly at rest, whether or not anybody is pointing at it — the halftone's glow and the aurora's pools drift along the band's foot, the grid's rules rise and the rings spread outward, each over motion.duration.drift. Turn it off for a band that should be still until somebody reaches for it — a band beside a video or an animation of its own, or one a page repeats further down — and the pattern rests where it is. What the pattern does under the pointer is `interactive`, which is set apart from this. */
+    animated?: boolean;
+    /** On by default: the pattern answers a pointer over the band. The halftone's glow follows it, gathers into a smaller pool and parts the dots it crosses, and a click sends a small ripple through them; the aurora sends a pool of its light after it; the grid's rules and the rings brighten around it. Turn it off for a band whose content is itself interactive enough that a moving ground would compete with it — a band of controls, a form — and the pattern ignores the pointer. Touch has no hover, so on a touch screen nothing follows a finger. Whether it moves at rest is `animated`, which is set apart from this. */
+    interactive?: boolean;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type BackgroundProps = BackgroundOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'tone' | 'pattern' | 'animated' | 'interactive'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const backgroundParts: {
+    readonly root: "dds-background";
+    readonly canvas: "dds-background__canvas";
+    readonly content: "dds-background__content";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const backgroundDefaults: {
+    readonly tone: "dark";
+    readonly pattern: "halftone";
+    readonly animated: true;
+    readonly interactive: true;
+};

package/dist/components/core/background/Background.types.js

@@ -0,0 +1,9 @@
+// GENERATED from background.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const backgroundParts = {
+    root: 'dds-background',
+    canvas: 'dds-background__canvas',
+    content: 'dds-background__content',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const backgroundDefaults = { tone: 'dark', pattern: 'halftone', animated: true, interactive: true };