@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/.llm/components/tablebody.md

@@ -79,6 +79,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/tablecell.md

@@ -105,6 +105,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/tablehead.md

@@ -89,6 +89,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/tableheadercell.md

@@ -157,6 +157,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/tablerow.md

@@ -105,6 +105,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/tablist.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/teamgrid.md

@@ -128,6 +128,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/testimonialrow.md

@@ -27,7 +27,7 @@ The reference design's Testimonial in its review-row form. It names no review pl
 
 TestimonialRow renders 20 elements. A token binding names the part it applies to.
 
-- `root` — `<section>`, class `dds-testimonialrow`. The section. It paints the ground and the ink to go with it — see `ground` — and asks its own width, which is what the row's breakout and the cards' share of it are measured against. A region named by its heading.
+- `root` — `<section>`, class `dds-testimonialrow`. The section. It paints the ground and the ink to go with it — see `ground` — and asks its own width, which is what the row's breakout and the cards' share of it are measured against. A region named by its heading. 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-testimonialrow__inner`. The measure and the gutter, the same column every band holds its content in.
 - `header` — `<div>`, class `dds-testimonialrow__header`. The heading and the overall rating under it, FeatureCards' header and its arrangement: ranged to the start on a phone and centred from the fold. It sets no gap: each part's own margin is the step.
 - `title` — `<h2>`, class `dds-testimonialrow__title`. Whose reviews these are. `h2`, ranged to the start on a phone and centred from the fold with the rating under it, as every other block's heading is.
@@ -61,11 +61,22 @@ Apply these classes from the generated `testimonialRowParts` constant rather tha
 
 - `page` — The default, and the page's own white. The cards are the recessed gray that sets them off
 - `subtle` — The grey band, the reference design's ground for this section. The cards turn white on it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
-- `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading, the summary and the cards' words turn white, and the cards take color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode — so the band reads as a dark-mode section in either theme. The arrows take ButtonIcon's inverse tone
+- `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading, the summary and the cards' words turn white, and the cards take color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, a step lighter than the band — so the band reads as a dark-mode section in either theme. The arrows take ButtonIcon's inverse tone
 
-Use when: Which of the page's grounds the section paints, and with it the cards' fill: the recessed surface on the page, the raised white on the grey band — the reference design's slate band — and the strong card on the dark band, gray.900 in both themes.
+Use when: Which of the page's grounds the section paints, and with it the cards' fill: the recessed surface on the page, the raised white on the grey band — the reference design's slate band — and the strong card on the dark band, slate.850 in light and slate.900 in dark, a step above the band in both.
 Never for: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never a dark card on the dark band: a few sentences of white on dark gray is a paragraph a reader works through rather than a quote they take in.
 
+### 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. Whose reviews these are, in a few words — "What our customers say".
@@ -133,6 +144,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.
@@ -242,3 +259,26 @@ import { TestimonialRow } from '@deriv-com/dds-marketing'
 // ground="strong"
 <TestimonialRow title="What our customers say" reviews={[{"quote":"Trading with Deriv has been great. Low spreads, and withdrawals reach me quickly.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/1","detail":"United Kingdom"},{"quote":"An easy, smooth trading experience — the platform does what I need without getting in the way.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/2","detail":"Malaysia"},{"quote":"Support answered my question about deposits within minutes, in my own language.","name":"A Deriv customer","rating":4.5,"href":"https://example.com/reviews/3","detail":"South Africa"},{"quote":"I have used a few brokers. This is the one I stayed with, mostly for the range of markets.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/4","detail":"Brazil"},{"quote":"Clear charts, fast execution and no surprises in the fees.","name":"A Deriv customer","rating":4,"href":"https://example.com/reviews/5","detail":"Nigeria"},{"quote":"Opening an account took a few minutes, and verifying it took less than a day.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/6","detail":"Indonesia"}]} summary={{"label":"Rated 4.5 out of 5 by our customers","href":"https://example.com/reviews"}} ground="strong" />
 ```
+
+### 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 { TestimonialRow } from '@deriv-com/dds-marketing'
+
+// grid on page
+<TestimonialRow title="What our customers say" reviews={[{"quote":"Trading with Deriv has been great. Low spreads, and withdrawals reach me quickly.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/1","detail":"United Kingdom"},{"quote":"An easy, smooth trading experience — the platform does what I need without getting in the way.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/2","detail":"Malaysia"},{"quote":"Support answered my question about deposits within minutes, in my own language.","name":"A Deriv customer","rating":4.5,"href":"https://example.com/reviews/3","detail":"South Africa"},{"quote":"I have used a few brokers. This is the one I stayed with, mostly for the range of markets.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/4","detail":"Brazil"},{"quote":"Clear charts, fast execution and no surprises in the fees.","name":"A Deriv customer","rating":4,"href":"https://example.com/reviews/5","detail":"Nigeria"},{"quote":"Opening an account took a few minutes, and verifying it took less than a day.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/6","detail":"Indonesia"}]} summary={{"label":"Rated 4.5 out of 5 by our customers","href":"https://example.com/reviews"}} background="grid" ground="page" />
+
+// rings on subtle
+<TestimonialRow title="What our customers say" reviews={[{"quote":"Trading with Deriv has been great. Low spreads, and withdrawals reach me quickly.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/1","detail":"United Kingdom"},{"quote":"An easy, smooth trading experience — the platform does what I need without getting in the way.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/2","detail":"Malaysia"},{"quote":"Support answered my question about deposits within minutes, in my own language.","name":"A Deriv customer","rating":4.5,"href":"https://example.com/reviews/3","detail":"South Africa"},{"quote":"I have used a few brokers. This is the one I stayed with, mostly for the range of markets.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/4","detail":"Brazil"},{"quote":"Clear charts, fast execution and no surprises in the fees.","name":"A Deriv customer","rating":4,"href":"https://example.com/reviews/5","detail":"Nigeria"},{"quote":"Opening an account took a few minutes, and verifying it took less than a day.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/6","detail":"Indonesia"}]} summary={{"label":"Rated 4.5 out of 5 by our customers","href":"https://example.com/reviews"}} background="rings" ground="subtle" />
+
+// halftone on strong
+<TestimonialRow title="What our customers say" reviews={[{"quote":"Trading with Deriv has been great. Low spreads, and withdrawals reach me quickly.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/1","detail":"United Kingdom"},{"quote":"An easy, smooth trading experience — the platform does what I need without getting in the way.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/2","detail":"Malaysia"},{"quote":"Support answered my question about deposits within minutes, in my own language.","name":"A Deriv customer","rating":4.5,"href":"https://example.com/reviews/3","detail":"South Africa"},{"quote":"I have used a few brokers. This is the one I stayed with, mostly for the range of markets.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/4","detail":"Brazil"},{"quote":"Clear charts, fast execution and no surprises in the fees.","name":"A Deriv customer","rating":4,"href":"https://example.com/reviews/5","detail":"Nigeria"},{"quote":"Opening an account took a few minutes, and verifying it took less than a day.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/6","detail":"Indonesia"}]} summary={{"label":"Rated 4.5 out of 5 by our customers","href":"https://example.com/reviews"}} background="halftone" ground="strong" />
+
+// aurora on strong
+<TestimonialRow title="What our customers say" reviews={[{"quote":"Trading with Deriv has been great. Low spreads, and withdrawals reach me quickly.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/1","detail":"United Kingdom"},{"quote":"An easy, smooth trading experience — the platform does what I need without getting in the way.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/2","detail":"Malaysia"},{"quote":"Support answered my question about deposits within minutes, in my own language.","name":"A Deriv customer","rating":4.5,"href":"https://example.com/reviews/3","detail":"South Africa"},{"quote":"I have used a few brokers. This is the one I stayed with, mostly for the range of markets.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/4","detail":"Brazil"},{"quote":"Clear charts, fast execution and no surprises in the fees.","name":"A Deriv customer","rating":4,"href":"https://example.com/reviews/5","detail":"Nigeria"},{"quote":"Opening an account took a few minutes, and verifying it took less than a day.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/6","detail":"Indonesia"}]} summary={{"label":"Rated 4.5 out of 5 by our customers","href":"https://example.com/reviews"}} background="aurora" ground="strong" />
+
+// mesh on strong
+<TestimonialRow title="What our customers say" reviews={[{"quote":"Trading with Deriv has been great. Low spreads, and withdrawals reach me quickly.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/1","detail":"United Kingdom"},{"quote":"An easy, smooth trading experience — the platform does what I need without getting in the way.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/2","detail":"Malaysia"},{"quote":"Support answered my question about deposits within minutes, in my own language.","name":"A Deriv customer","rating":4.5,"href":"https://example.com/reviews/3","detail":"South Africa"},{"quote":"I have used a few brokers. This is the one I stayed with, mostly for the range of markets.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/4","detail":"Brazil"},{"quote":"Clear charts, fast execution and no surprises in the fees.","name":"A Deriv customer","rating":4,"href":"https://example.com/reviews/5","detail":"Nigeria"},{"quote":"Opening an account took a few minutes, and verifying it took less than a day.","name":"A Deriv customer","rating":5,"href":"https://example.com/reviews/6","detail":"Indonesia"}]} summary={{"label":"Rated 4.5 out of 5 by our customers","href":"https://example.com/reviews"}} background="mesh" ground="strong" />
+```

package/.llm/components/testimonialslider.md

@@ -55,9 +55,9 @@ Apply these classes from the generated `testimonialSliderParts` constant rather
 
 - `page` — The default, and the page's own white. The card is the recessed gray that sets it off
 - `subtle` — The grey band, the reference design's ground for this section. The card turns white on it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
-- `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the quote turn white and the card takes color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
+- `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the quote turn white and the card takes color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, a step lighter than the band, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
 
-Use when: Which of the page's grounds the section paints, and with it the card's fill: the recessed surface on the page, the raised white on the grey band — the reference design's slate testimonial — and the strong card on the dark band, gray.900 in both themes, so the card has an edge on each.
+Use when: Which of the page's grounds the section paints, and with it the card's fill: the recessed surface on the page, the raised white on the grey band — the reference design's slate testimonial — and the strong card on the dark band, slate.850 in light and slate.900 in dark, a step above the band in both, so the card has an edge on each.
 Never for: Marking importance. Every section on a page painted a ground is a page with no emphasis left.
 
 ### title — `string` **Required.**
@@ -135,6 +135,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/textarea.md

@@ -192,6 +192,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/textinput.md

@@ -245,6 +245,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/textscroll.md

@@ -80,6 +80,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/tiers.md

@@ -48,7 +48,7 @@ Tiers renders 19 elements. A token binding names the part it applies to.
 - `benefit` — `<div>`, class `dds-tiers__benefit`. Inside the page's own Card: the card's inset and the benefit's headline and sentence, held together at a card's title-to-description step. The Card grows to the tallest in the row, so the cards end level and the qualifications under them start on one line.
 - `benefit-title` — `<p>`, class `dds-tiers__benefit-title`. What the tier gives, as a headline. A paragraph rather than a heading: the tier's name is the heading, and this is what is under it.
 - `benefit-description` — `<p>`, class `dds-tiers__benefit-description`. What the benefit means, in a sentence.
-- `qualification` — `<p>`, class `dds-tiers__qualification`. What it takes to reach the tier, under its card. A line break in it is kept, so the measure and the amount sit on lines of their own. Drawn only for a tier that has one — the entry tier has nothing to clear.
+- `qualification` — `<p>`, class `dds-tiers__qualification`. What it takes to reach the tier, under its card. A line break in it is kept, so the measure and the amount sit on lines of their own. Every tier carries one, the entry tier included — what it takes to join — so the row ends on one line under every card.
 - `footer` — `<div>`, class `dds-tiers__footer`. The way on, under the row. At the start on a phone and centred from the fold, under the centred heading. It adds no step of its own: the gap from the tiers is the inner column's, the one between a heading and what it introduces. Rendered only when `link` is set.
 
 Apply these classes from the generated `tiersParts` constant rather than writing the strings by hand.
@@ -83,7 +83,7 @@ Never for: A paragraph, or a summary of every tier. The tiers say what they give
 
 ### tiers — `data` `TiersItem[]` **Required.**
 
-Use when: Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and — on every tier above the entry one — the `qualification` that reaches it, with a line break before the amount. The order of the list is the order of the ladder, so reordering it reorders the tiers.
+Use when: Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and the `qualification` that reaches it, with a line break before the amount — the entry tier's too, saying what it takes to join, so every tier's card has the same line under it. The order of the list is the order of the ladder, so reordering it reorders the tiers.
 Never for: Tiers in any order but lowest to highest. The track through the medals reads start to end, and a ladder drawn out of order is one a reader climbs the wrong way.
 
 ### link — `node`
@@ -119,6 +119,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.
@@ -197,7 +203,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 ```tsx
 import { Tiers, Link } from '@deriv-com/dds-marketing'
 
-<Tiers ground="subtle" title="Growing rewards as you scale" description="Our tiered partnership model rewards performance. As you grow, you unlock higher bonuses." tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join."},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} link={<Link href="/partners/tiers">Learn more about partner tiers</Link>} />
+<Tiers ground="subtle" title="Growing rewards as you scale" description="Our tiered partnership model rewards performance. As you grow, you unlock higher bonuses." tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join.","qualification":"To join:\nSign up as a partner"},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} link={<Link href="/partners/tiers">Learn more about partner tiers</Link>} />
 ```
 
 ## In use
@@ -210,10 +216,10 @@ A partnership ladder in four tiers, one row with a track through the medals; thr
 import { Link, Tiers } from '@deriv-com/dds-marketing'
 
 // Four tiers, with a way on
-<Tiers title="Growing rewards as you scale" description="Our tiered partnership model rewards performance. As you grow, you unlock higher bonuses." tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join."},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} link={<Link href="/partners/tiers">Learn more about partner tiers</Link>} />
+<Tiers title="Growing rewards as you scale" description="Our tiered partnership model rewards performance. As you grow, you unlock higher bonuses." tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join.","qualification":"To join:\nSign up as a partner"},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} link={<Link href="/partners/tiers">Learn more about partner tiers</Link>} />
 
 // Three tiers, no line or link
-<Tiers title="Earn more as your clients trade" tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Up to $10 per lot","description":"Earn on every lot your referred clients trade on CFDs."},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Up to $12 per lot","description":"A higher rate per lot once your clients trade more.","qualification":"Monthly volume:\n500 lots+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Up to $15 per lot","description":"Our highest rate, and a dedicated partner manager.","qualification":"Monthly volume:\n2,000 lots+"}]} />
+<Tiers title="Earn more as your clients trade" tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Up to $10 per lot","description":"Earn on every lot your referred clients trade on CFDs.","qualification":"To join:\nSign up as a partner"},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Up to $12 per lot","description":"A higher rate per lot once your clients trade more.","qualification":"Monthly volume:\n500 lots+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Up to $15 per lot","description":"Our highest rate, and a dedicated partner manager.","qualification":"Monthly volume:\n2,000 lots+"}]} />
 ```
 
 ### On the grey band and the dark one
@@ -224,8 +230,8 @@ ground="subtle" sets the section apart and turns the cards white; ground="strong
 import { Link, Tiers } from '@deriv-com/dds-marketing'
 
 // Subtle ground
-<Tiers ground="subtle" title="Growing rewards as you scale" tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join."},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} />
+<Tiers ground="subtle" title="Growing rewards as you scale" tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join.","qualification":"To join:\nSign up as a partner"},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} />
 
 // Strong ground
-<Tiers ground="strong" title="Growing rewards as you scale" description="Our tiered partnership model rewards performance. As you grow, you unlock higher bonuses." tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join."},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} link={<Link href="/partners/tiers" tone="inherit">Learn more about partner tiers</Link>} />
+<Tiers ground="strong" title="Growing rewards as you scale" description="Our tiered partnership model rewards performance. As you grow, you unlock higher bonuses." tiers={[{"name":"Bronze","stage":"Launch","medal":"/sample-stop-amber.svg","benefit":"Full access from day one","description":"Every partner tool, report and marketing asset, from the day you join.","qualification":"To join:\nSign up as a partner"},{"name":"Silver","stage":"Grow","medal":"/sample-stop-teal.svg","benefit":"Commission + 4% bonus","description":"An extra 4% on top of your commission, paid every month.","qualification":"3-month average commission:\n$500+"},{"name":"Gold","stage":"Scale","medal":"/sample-stop-brand.svg","benefit":"Commission + 6% bonus","description":"Your monthly bonus grows to 6% to match your performance.","qualification":"3-month average commission:\n$1,000+"},{"name":"Platinum","stage":"Lead","medal":"/sample-stop-purple.svg","benefit":"Commission + 8% bonus","description":"A further quarterly bonus and invitations to our annual partner events.","qualification":"3-month average commission:\n$5,000+"}]} link={<Link href="/partners/tiers" tone="inherit">Learn more about partner tiers</Link>} />
 ```

package/.llm/components/tooltip.md

@@ -119,6 +119,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/typography.md

@@ -34,7 +34,7 @@ Typography renders one element.
   
   Its margin is unset. A browser gives <p> and every heading a margin of its own, which would arrive here as spacing nobody asked for and nothing in the contract could see — so the page's own gap is the only thing between two blocks of copy.
   
-  The figure variant is the one that sets a property no token holds. Its size and weight are font.figure like every other variant's are their own role, but tabular numerals are a literal here rather than a binding: a composite font token carries family, size, weight, line height and tracking and nothing else, and the numeric form is not a value that varies anyway. A figure is always tabular — that is most of what makes it a figure rather than a heading with a number in it, because a column of counts whose digits do not line up is a column the eye cannot compare.
+  The figure variant is the one that sets a property no token holds. Its size and weight are font.figure like every other variant's are their own role, but tabular numerals are a literal here rather than a binding: a composite font token carries family, size, weight, line height and tracking and nothing else, and the numeric form is not a value that varies anyway. A figure is always tabular — that is most of what makes it a figure rather than a heading with a number in it, because a column of counts whose digits do not line up is a column the eye cannot compare. Given `motion` or `from`, it is drawn by TypographyMotion, a client component, and moves once on arrival (`data-arrival`); the text it holds is still the text that is read.
 
 Apply these classes from the generated `typographyParts` constant rather than writing the strings by hand.
 
@@ -72,6 +72,18 @@ Never for: Picking an element. A variant is a size, and the element is `as`
 - `h6` — The deepest heading level
 Never for: Anything interactive. A link is Link and a control is Button — an element that responds to a click needs a name, a focus ring and a keyboard route, none of which this has
 
+### motion — `roll`
+
+- `roll` — A figure the reader would call their own — an amount in a pane, a deposit, a balance in an illustration — rolls into place once: each digit a reel from nought to its value, left to right, a step of motion.duration.stagger apart, over motion.duration.dramatic
+
+Use when: The figure moves once, on arrival — when it is well into view, when the block bringing it in has landed, or, in an IllustrationCard, when the pane has. Only the `figure` role, and only a figure given as plain text, since the digits are what roll. At rest, and for a reader who asked for less movement, the figure is simply its value; the value itself is what is read out
+Never for: A product term — a leverage, a spread, a payout rate, a price. A figure counting up reads as a live quote, so it rolls only an illustrative amount, and never a profit climbing upward. Nor more than one moving thing in a pane: one lead motion per pane
+
+### from — `string`
+
+Use when: The words this text starts as, which give way once to the words it is — "Opening…" to "Position open", "EUR/USD · Buy" to "EUR/USD · Sell". The first words hold for motion.duration.hold after arrival, rise away, and the text's own words come up into their place. Plain text only. Beside a StatusDot given `from` as well, the dot changes with the words
+Never for: Words a reader must read to act, or a sequence of more than two. The first words are on screen for a second and are not read out — what is read is the text's own words — so nothing the reader needs may live only in them. Nor beside `motion`, which wins: a figure that rolls draws no earlier words
+
 Also accepts everything from `HTMLAttributes<HTMLElement>`.
 
 ## Accessibility
@@ -96,6 +108,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.
@@ -169,6 +187,36 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
    The container. Colour is inherited here, margin is never set, and a component that owned either would disagree with the layout that placed it.
    → nothing in this system does this. Not a gap waiting to be filled — the case belongs outside it.
 
+❌ variant=h1 + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=h2 + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=h3 + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=h4 + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=h5 + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=subtitle + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=body-lg + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=body-md + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=body-sm + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
+❌ variant=eyebrow + motion is set
+   Only a figure rolls: the motion turns its digits, and a heading or a line of copy rolling digit by digit is a figure pretending to be words.
+
 ## Example
 
 ```tsx
@@ -255,3 +303,17 @@ import { Typography } from '@deriv-com/dds-marketing'
 // figure — a number, in fixed-width digits
 <Typography variant="figure" as="span">9,482</Typography>
 ```
+
+### Moving once on arrival
+
+A figure that rolls into place, and words that give way to the words they become. Both play once, then rest.
+
+```tsx
+import { Typography } from '@deriv-com/dds-marketing'
+
+// variant="figure" motion="roll"
+<Typography variant="figure" motion="roll">50 USD</Typography>
+
+// from — Opening… to Position open
+<Typography variant="body-sm" from="Opening…">Position open</Typography>
+```

package/.llm/digest/background.md

@@ -2,26 +2,33 @@
 
 # Background
 
-A patterned ground for a section to sit on
+A patterned ground for a page's one standout band, drawn as its first layer
 
 `import { Background } from '@deriv-com/dds-marketing'`
 
 ## Reach for it when
 
-- A band that has to stand apart from the page around it with more than a change of fill — the opening of a landing page, a call to action, a section that closes a long page …
-- A dark band that would otherwise be a flat slab. The glow gives it a centre for the eye, which is where the band's heading or its action should sit
-- A light page that wants one moment of brand colour without a coral block: the dots carry the colour at a fraction of the area a fill would
+- The page's one patterned band, between its hero and its closing call to action, on a section built by hand rather than from a block — a heading stacked over what it introduces, centred, with the band's foot left open, because every pattern rises from the foot …
+- Inside a block that offers it, as that block's `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows draw it as their first layer, and LandingHero, PageHeader, CtaBanner, CtaBannerSlider and DownloadBanner their own. …
 
 ## Something else, when
 
-- The band only needs separating from the page around it → **nothing in this system does this**
+- The band is a set of features with a picture each → **FeatureCards**
+- The band is three to five headline numbers → **Stats**
+- The band is a row of short reviews → **TestimonialRow**
+- The band is a strip of partner or payment logos → **LogoRows**
+- The band opens the page → **LandingHero**
+- The band asks the reader to act → **CtaBanner**
 - The ground is a picture or a video → **AspectRatio**
 
 ## Never
 
+- More than one band on a page. One patterned band, between the hero and the closing call to action, is what makes it the band a reader remembers; two make neither, and a page of them is noise. The hero's and the call to action's own patterns do not count against it, and it does not go on either of them
+- Wrapping a block. Every block paints its own ground over whatever is behind it, so a block inside a Background hides the pattern — and the pattern belongs under a band's content as its first layer, not around it as a frame. A block that can carry one has a `background` prop; one that has not is not a band for a pattern
+- A band whose content runs side by side — words beside a picture, a split, a row of columns reaching the foot. Every pattern rises from the band's foot, so it needs a heading stacked over content with the foot left open; laid across, the glow comes up behind the picture or under the words
+- Separating a band from the page. A block's `ground` — `subtle` for the grey band, `strong` for the dark one — does that with a flat fill at no cost to the eye; a pattern is decoration that has to earn its place
 - Carrying meaning. The pattern is hidden from assistive technology and reads differently on every screen size, so nothing a reader needs may depend on it — not a highlight, not a direction, not a state
 - Behind long reading. Dots behind a paragraph are texture under every word, and the brightest of them sit exactly where the eye is reading; put prose on a plain ground and keep this for the band that opens or closes it
-- Two in a row. Adjacent patterned bands lose the edge between them, and the reader sees one long busy surface rather than two sections
 - A card, a panel or any surface smaller than a band. At a few hundred pixels the glow has nowhere to fall off to, and the dots read as noise rather than light
 
 ## Props
@@ -29,6 +36,7 @@ A patterned ground for a section to sit on
 - **tone** `enum` · default "brand" — Which ground the dots are drawn on. It sets the flat colour under the pattern, the dots' ink — coral on the dark and light grounds, white on the coral one — and the ink of what sits on it
   - `dark` — The band the halftone was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. …
   - `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. …
+  - `subtle` — The light pattern on the subtle band's grey — color.bg.band-subtle laid over the page, the grey a block's `ground="subtle"` paints — for a block that carries a pattern on that ground. …
   - `brand` — The default: the brand's own coral, the ground the mesh was made for and the one a call to action stands on. White dots on it for the halftone. …
   - never: Matching the page's colour mode. Dark is dark in both modes — a band that should invert with the theme is a plain section on color.bg.page, not this
 - **pattern** `enum` · default "halftone" — Which pattern is drawn. The halftone is the default and the one that moves most; the aurora drifts slowly; the mesh flows across the whole band; the grid and the rings are the quietest, their lines rising and spreading at a band's pace. …