@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/.llm/components/illustrationscene.md

@@ -25,10 +25,11 @@ The photograph is the scene and the card is what it says. The card's `label` des
 
 ## Anatomy
 
-IllustrationScene renders 2 elements. A token binding names the part it applies to.
+IllustrationScene renders 3 elements. A token binding names the part it applies to.
 
-- `root` — `<div>`, class `dds-illustrationscene`. The frame, and the shape: one of three proportions — the aspect tokens, the same three IllustrationCard takes — holding radius.surface like a Card and clipping the photograph to it. It places the card it holds over the photograph, at a share of its width that depends on the shape, so every scene across a site composes the same way.
+- `root` — `<div>`, class `dds-illustrationscene`. The frame, and the shape: one of three proportions — the aspect tokens, the same three IllustrationCard takes — holding radius.surface like a Card and clipping the photograph to it. It places the card it holds over the photograph, at a share of its width that depends on the shape, so every scene across a site composes the same way. At the foot the card is a strip at most two fifths of the frame tall, and the UI in it is scaled down to fit that, as a centred card's already is — so a narrow column never has the card bury its photograph or run off the top of it. Inside a block's arrival the scene arrives in two beats: the photograph with whatever holds it, the card three steps of motion.duration.stagger later, rising onto it.
 - `image` — `<img>`, class `dds-illustrationscene__image`. The photograph, filling the frame and cropped to it from the centre. Decoration unless `alt` says otherwise: the card's `label` already describes the whole picture, so most scenes leave the photograph out of the accessibility tree. While it loads, the frame shows color.bg.surface, so the card is never left floating on nothing.
+- `shade` — `<div>`, class `dds-illustrationscene__shade`. Under `shade`, a shade of color.bg.overlay between the photograph and the card, under the card only: up from the foot to just above a card at the foot and clear above it, or an oval behind a centred card and clear at the frame's edges. It is there for the card's small type, which on the glass over a bright photograph comes out below 4.5:1; the shade darkens what the glass blurs rather than the whole photograph. Decoration, with nothing in it. Rendered only when `shade` is set.
 
 Apply these classes from the generated `illustrationSceneParts` constant rather than writing the strings by hand.
 
@@ -55,7 +56,7 @@ Never for: Fitting a particular photograph. The shape is a decision about the la
 - `bottom` — The card centred along the foot of the frame, held off it by the card's own inset — for a photograph whose subject fills the top: a face, a person reaching up, a skyline
 
 Use when: Where the card sits over the photograph, so the subject of the photograph stays clear of it
-Never for: Anything but keeping the photograph's subject clear. The card's size is fixed by the shape; placement moves it and nothing else
+Never for: Anything but keeping the photograph's subject clear. The card's width is fixed by the shape; placement moves it, and at the foot holds it to at most two fifths of the frame's height
 
 ### src — `string` **Required.**
 
@@ -67,6 +68,11 @@ Never for: A data URI holding a photograph. A scene's photograph is the heaviest
 Use when: Empty by default, because the card's `label` describes the whole picture and the photograph is decoration. Write one only where the photograph says something the label does not
 Never for: Repeating the card's label. A screen reader would hear the picture described twice
 
+### shade — `boolean` (default `false`)
+
+Use when: The photograph is bright where the card sits — a sunny sky, a white wall — so the glass would come out mid-grey and the card's small lines would fall below AA. A shade under the card only, following the card's placement, so the rest of the photograph keeps its light.
+Never for: A photograph already dark where the card sits, or darkening the whole photograph. The shade is for the card's type, and on a dark photograph it only takes light out of the scene.
+
 Also accepts everything from `HTMLAttributes<HTMLDivElement>`.
 
 ## Accessibility
@@ -92,6 +98,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
@@ -231,3 +243,17 @@ import { IllustrationScene } from '@deriv-com/dds-marketing'
 // bottom
 <IllustrationScene ratio="square" src="/sample-card-image.svg" placement="bottom">{illustrationcards}</IllustrationScene>
 ```
+
+### A shade for a bright photograph
+
+shade darkens under the card only, so its small type keeps AA over a bright photograph and the rest keeps its light.
+
+```tsx
+import { IllustrationScene } from '@deriv-com/dds-marketing'
+
+// bottom, shade
+<IllustrationScene ratio="square" src="/sample-banner-art.svg" placement="bottom" shade>{illustrationcards}</IllustrationScene>
+
+// center, shade
+<IllustrationScene ratio="square" src="/sample-banner-art.svg" placement="center" shade>{illustrationcards}</IllustrationScene>
+```

package/.llm/components/imagebanner.md

@@ -31,8 +31,8 @@ ImageBanner renders 8 elements. A token binding names the part it applies to.
 
 - `root` — `<section>`, class `dds-imagebanner`. The section. It paints one of the page's three grounds and the ink that goes with it — see `ground` — and asks its own width, so the card folds on the section's measure rather than the window's. A region named by its headline.
 - `inner` — `<div>`, class `dds-imagebanner__inner`. The measure and the gutter, the same column every band holds its content in. On a phone the card gives up the gutter and runs the width of the screen, as the reference design's does.
-- `card` — `<div>`, class `dds-imagebanner__card`. The dark card holding everything: color.bg.brand-strong, or color.bg.surface-card-strong on the dark band so it is still a card there, with white ink on both. It clips the photograph to its rounded corners. From 48rem the words and the photograph sit side by side, in the order `mediaPosition` names; below it they stack.
-- `content` — `<div>`, class `dds-imagebanner__content`. The headline, the line under it and the action, inset from the card's edge. It sets no gap of its own: the step from a title to its description and the step from a description to what follows are two roles, carried by each part's own margin.
+- `card` — `<div>`, class `dds-imagebanner__card`. The dark card holding everything: color.bg.brand-strong, or color.bg.surface-card-strong-on-brand-strong on the dark band so it is still a card there, with white ink on both. It clips the photograph to its rounded corners. From 48rem the words and the photograph sit side by side, in the order `mediaPosition` names; below it they stack.
+- `content` — `<div>`, class `dds-imagebanner__content`. The headline, the line under it and the action, inset from the card's edge. It sets no gap of its own: the step from a title to its description and the step from a description to what follows are two roles, carried by each part's own margin. On a cover card it lays the shade under its words: color.bg.overlay across the column the words take, fading to clear from the words' end to space.section.default past the column's edge toward the photograph — across from the fold, downward on a phone — and nothing beyond that, so the photograph keeps its light everywhere the words are not.
 - `title` — `<h2>`, class `dds-imagebanner__title`. The headline. `h2` by default because the card sits under the page's own heading; `headingLevel` moves the level and never the size. Drawn at font.h2.
 - `description` — `<p>`, class `dds-imagebanner__description`. The line under the headline, at the body step and the description measure. Rendered only when `description` is set.
 - `action` — `<div>`, class `dds-imagebanner__action`. The one action, under the line. On a phone it fills the width of the card; from 48rem it is its own size. Rendered only when `action` is set.
@@ -51,7 +51,7 @@ Apply these classes from the generated `imageBannerParts` constant rather than w
 
 - `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
 - `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. 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, with the card a step lighter at color.bg.surface-card-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
+- `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong-on-brand-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
 
 Use when: Which of the page's three grounds the band around the card paints. The card is dark whatever this says — that is what the block is — so this is about the rhythm of the page, white, grey or dark, and never about the card. The ink follows the ground and is not a second decision.
 Never for: Making the card darker. The card is dark on every ground; painting the band dark too spends the page's one dark band on a section that was already one.
@@ -59,10 +59,10 @@ Never for: Making the card darker. The card is dark on every ground; painting th
 ### variant — `split` | `cover` (default `split`)
 
 - `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. On a phone the card runs the width of the screen and the photograph stacks with the words
-- `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. For a photograph wide enough to be the band rather than half of it
+- `cover` — The photograph fills the whole card, with the words over it on a shade that darkens the words' own column and fades out just past it, leaving the rest of the photograph clear. For a photograph wide enough to be the band rather than half of it
 
 Use when: What the photograph does: beside the words, or behind them. Both carry one action — two of the reference design's layouts.
-Never for: Choosing by how busy the page looks. Cover hides part of the photograph under the scrim; it is a decision about the photograph, not decoration.
+Never for: Choosing by how busy the page looks. Cover lays the words on part of the photograph behind a shade; it is a decision about the photograph, not decoration.
 
 ### mediaPosition — `end` | `start` (default `end`)
 
@@ -107,6 +107,11 @@ Never for: Artwork with words in it. The cover photograph sits under a scrim and
 Use when: The photograph drifts against the scroll as the card passes through the view, the drift every block's picture shares — drawn at motion.scale.parallax and moved from motion.translate.parallax-from to motion.translate.parallax-to over the whole pass — so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button.
 Never for: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll.
 
+### stackOnPhone — `boolean` (default `false`)
+
+Use when: A cover photograph whose subject a phone's crop would put under the words or cut off — a person, a face, hands. On a phone the words stand on the card's own dark ground and the photograph follows them at the landscape shape, whole and clear; from the fold it is the cover card as before.
+Never for: A split card, which stacks on a phone already, or a photograph that is setting rather than subject. Stacked, the phone loses the cover look, so keep it for the photograph that would otherwise lose its subject.
+
 ## Accessibility
 
 Guaranteed by the component. Write none of it by hand: the ids these attributes point at are generated per instance, so an attribute set from outside either says the same thing twice or points at nothing.
@@ -132,6 +137,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
@@ -209,6 +220,9 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
    A list of features is the content there, ruled lines a reader goes down; this card is a photograph and one action
    → use `FeatureBullets` instead.
 
+❌ variant=split + stackOnPhone=true
+   A split card already stacks its words and its photograph on a phone; there is nothing for this to change.
+
 ## Example
 
 ```tsx
@@ -280,3 +294,14 @@ import { AspectRatio, ImageBanner, Link } from '@deriv-com/dds-marketing'
 // Inside a section that has its h2 — headingLevel h3
 <ImageBanner variant="split" parallax title="Life at Deriv" description="We combine human values with AI precision. Collaboration, integrity and continuous learning guide every project, in every office and every time zone." action={<Link href="/careers/culture" tone="inherit">Culture at Deriv</Link>} media={<AspectRatio ratio="landscape" />} headingLevel="h3" />
 ```
+
+### Stacked on a phone
+
+stackOnPhone: below the fold the words stand on the card and the photograph follows them whole, so a person framed for the desktop strip keeps their head.
+
+```tsx
+import { AspectRatio, Button, ImageBanner } from '@deriv-com/dds-marketing'
+
+// cover, stackOnPhone
+<ImageBanner variant="cover" title="Trade on Deriv MT5" description="Forex, stocks, commodities and derived indices on the platform professionals use, with charting and order types built in." action={<Button variant="primary" tone="inverse" href="/platforms/deriv-mt5">Open a Deriv MT5 account</Button>} media={<AspectRatio ratio="landscape" />} stackOnPhone />
+```

package/.llm/components/landinghero.md

@@ -137,6 +137,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/link.md

@@ -50,7 +50,7 @@ Link renders 3 elements. A token binding names the part it applies to.
   
   The ink is `color.bg.brand`, which is a background role doing a foreground's job, and that is worth naming rather than hiding. `color.fg.brand` exists and is the readable one at 7.75:1 — but it is the dark red a Badge sets on a pale tint, not the coral the page is built from, and a link that did not match the buttons would read as a different kind of thing. The brand primary is one colour in this system and it is spelled `color.bg.brand`; a `fg` alias for the same value would be a second name for one decision.
   
-  A link whose ink is the ground's gets its underline back on hover, and only on hover. That covers a standalone link at `tone: inherit` — one on a brand card, a dark band, a scrim. The list variant has the same problem and answers it with its mark instead: a column whose rows underline one at a time reads as a table of contents being corrected. At rest they are told apart by position, which is what a column of links or a line of its own already provides; under the pointer there was nothing at all, because the colour cannot change when it belongs to the ground and there is no mark to move. Product reaches the same conclusion from the other side, keeping the underline at all times for `tone: inherit` — these designs do not have one at rest, so it arrives with the pointer instead. It is in the impl sheet because `structure` carries no state.
+  A standalone link at `tone: inherit` — one on a brand card, a dark band, a scrim — draws no underline either, at rest or under the pointer, the same as at `tone: brand`. Its colour belongs to the ground and so cannot change on hover; what answers the pointer is the mark, which moves along the way it already points, as it does on every standalone link. Product keeps an underline at `tone: inherit` at all times; these designs have none on a standalone link anywhere, and a line that appears on one tone and not the other would make the two read as different kinds of link.
 - `icon-leading` — `<span>`, class `dds-link__icon-leading`. A glyph before the words, when the destination has a mark a reader recognises faster than its name — a document, a download, a platform. Rare in running copy and ordinary in the standalone variant, which is where it earns its place.
   
   A box of the tab's own rather than the glyph itself, because Icon clones onto the SVG and this part is the place in the line. Drawn at `icon.size.xs` — sixteen, a step below what a control takes, because this sits beside words rather than inside a target and twenty next to a sixteen-pixel label outweighs the words it is there to qualify. The part carries the gap and nothing else: the colour comes from the link, which is what `fill="currentColor"` on the glyph is for.
@@ -179,6 +179,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/logocolumns.md

@@ -54,7 +54,7 @@ Apply these classes from the generated `logoColumnsParts` constant rather than w
 
 - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
 - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
-- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
 
 Use when: Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. The dark band is the default, the reference design's: logos are most often drawn as white wordmarks for a dark ground, and a set of them reads as one wall there.
 Never for: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly.
@@ -121,6 +121,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/logorows.md

@@ -27,7 +27,7 @@ LogoColumns' horizontal form, for a page where the claim leads and the logos sig
 
 LogoRows renders 10 elements. A token binding names the part it applies to.
 
-- `root` — `<section>`, class `dds-logorows`. The section. It paints the ground and the ink to go with it — see `ground` — and asks its own width. A region named by its heading. It clips with `overflow: clip` rather than `hidden`, which would make it a scroll container and freeze the row's scroll-driven movement.
+- `root` — `<section>`, class `dds-logorows`. The section. It paints the ground and the ink to go with it — see `ground` — and asks its own width. A region named by its heading. It clips with `overflow: clip` rather than `hidden`, which would make it a scroll container and freeze the row's scroll-driven movement. Given `background`, it draws the page's one patterned band: a Background as its first layer, under everything it holds, in the tone of its ground.
 - `inner` — `<div>`, class `dds-logorows__inner`. The measure and the gutter, the same column every band holds its content in, and the step from the words to the rows: space.heading.content.
 - `header` — `<div>`, class `dds-logorows__header`. The heading, the line under it and the way on. Ranged to the start on a phone and centred from the fold, FeatureCards' arrangement.
 - `title` — `<h2>`, class `dds-logorows__title`. The claim the logos back. `h2`, because a section sits under the page's own heading.
@@ -51,13 +51,24 @@ Apply these classes from the generated `logoRowsParts` constant rather than writ
 
 - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
 - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
-- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
 
 Use when: Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. The dark band is the default, the reference design's: logos are most often drawn as white wordmarks for a dark ground, and a set of them reads as one row there.
 Never for: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly.
 
 And never the brand's own coral, `color.bg.brand`, which is not offered here. That ground belongs to the band that asks a reader to do something — the one place on a page where the brand colour is the point rather than decoration — and a feature section wearing it is a page with two calls to action, one of which does nothing. It is `color.bg.brand-strong` that this offers: the dark brand ground, which is a band breaking a page rather than a band asking for something.
 
+### background — `halftone` | `aurora` | `mesh` | `grid` | `rings`
+
+- `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.
+
+Use when: The page's one patterned band, between its hero and its closing call to action — a band a reader should stop at. The pattern is drawn by Background as the section's first layer, under its content and over nothing, in the tone of the ground: the light pattern on `page`, the same on the grey of `subtle`, the dark one on `strong`. Every pattern rises from the band's foot, which this block leaves open under its content. Leave it out and the band is its flat ground, as most bands on a page are.
+Never for: More than one band on a page, or a band that is already the hero or the call to action — those carry their own patterns. One pattern is what makes a band the one a reader remembers; two make neither, and a page of them is noise. Never wrap this block in a Background instead: it paints its own ground over whatever is behind it, so the pattern would be hidden, and the pattern belongs under the content, not around it.
+
 ### title — `string` **Required.**
 
 Use when: Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide".
@@ -105,6 +116,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
@@ -214,3 +231,26 @@ import { Link, LogoRows } from '@deriv-com/dds-marketing'
 // ground="subtle"
 <LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} ground="subtle" />
 ```
+
+### The page's one patterned band
+
+One band per page, between the hero and the closing call to action, its pattern drawn under the content in the tone of its ground.
+
+```tsx
+import { Link, LogoRows } from '@deriv-com/dds-marketing'
+
+// grid on page
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="grid" ground="page" />
+
+// rings on subtle
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="rings" ground="subtle" />
+
+// halftone on strong
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="halftone" ground="strong" />
+
+// aurora on strong
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="aurora" ground="strong" />
+
+// mesh on strong
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="mesh" ground="strong" />
+```

package/.llm/components/menuitem.md

@@ -102,6 +102,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/navbar.md

@@ -302,6 +302,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/navbaritem.md

@@ -125,6 +125,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/navbarmenu.md

@@ -191,6 +191,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/navbarmenugroup.md

@@ -91,6 +91,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/navbarpanel.md

@@ -161,6 +161,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/navbarswitcher.md

@@ -150,6 +150,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/navbarswitcheroption.md

@@ -74,6 +74,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/option.md

@@ -112,6 +112,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/pageheader.md

@@ -115,6 +115,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/pagination.md

@@ -155,6 +155,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/paginationdots.md

@@ -106,6 +106,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   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, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.