@deriv-com/dds-marketing 1.1.3 → 1.2.1

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

package/.llm/digest/button.md

@@ -31,7 +31,7 @@ Triggers the one action a section asks for, such as signing up
   - `lg` — A hero, or a full-width conversion band that is the only control in view. …
 - **tone** `enum` · default "default"
   - `default` — The page's own ground, which sets the ink this component was drawn against — every button on a white page
-  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a hero, a navigation bar at the top of one, a footer — which is the same near-black in light and dark. …
+  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a hero, a navigation bar at the top of one, a footer — which is near-black in light and dark alike — slate.900 in light, a step deeper in dark. …
   - `brand` — The control stands on the coral band, color.bg.brand — CtaBanner and CtaBannerSlider — which is the same coral in light and dark, so nothing on it switches either. …
 - **href** `string` · optional — The press goes somewhere with a URL of its own — the ordinary case for a call to action on a marketing page. It makes this an anchor rather than a button, which is what gives a visitor cmd-click, a visible destination and a copyable link. …
   - never: A placeholder while the destination is undecided — a # or an empty string is a control that looks live, takes focus and goes nowhere. Nor javascript: or a handler dressed as a URL: leave href out and pass onClick, and this renders a button that does the work in place

package/.llm/digest/buttonicon.md

@@ -43,7 +43,7 @@ Triggers an action with an icon alone
   - never: Making one of a set stand out. Two of these side by side at different steps read as a control and its afterthought, and a carousel whose next is larger than its previous has said the path runs one way
 - **tone** `enum` · default "default"
   - `default` — The control is on a light ground, which is every surface this package paints by default
-  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is the same near-black in light and dark. …
+  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is near-black in light and dark alike — slate.900 in light, a step deeper in dark. …
 - **icon** `node` · required — Always — the glyph is the whole control, so it is required rather than a slot that may be empty. …
   - never: A glyph whose meaning the visitor has to be taught, and never a second glyph — one control, one action, one shape. …
 - **label** `string` · required — Always. It is the entire accessible name, because nothing on screen carries one — the words that would have been the label if there had been room for one. …

package/.llm/digest/documentlink.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from documentlink.contract.json. Do not edit. -->
+
+# DocumentLink
+
+One document a reader can open or save: its mark, its title, and an optional second link beside it
+
+`import { DocumentLink } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A document on a legal, regulatory or help page — a policy, a key information document, a licence, a form
+- Many documents of one kind, listed or laid in a grid inside a Documents block
+
+## Something else, when
+
+- One to four related pages or documents at the end of a section → **ResourceBanner**
+- A link inside a sentence, or a page rather than a document → **Link**
+
+## Never
+
+- Navigation between pages of the site. A document chip says a file is behind it
+- A document whose title alone does not say which it is. Two chips both reading "Key information document" are the same chip twice
+
+## Props
+
+- **variant** `enum` · default "chip" — How much the document stands out from the page around it
+  - `chip` — The default: the document on a surface of its own, for a list of documents grouped under headings
+  - `plain` — The mark and the title on the page itself, for a grid of many short entries — a licence per country, each behind its flag
+  - never: Mixing the two in one list. A list is one kind of thing; chips beside plain entries read as two
+- **href** `string` · required — Always. Where the document is: a URL, usually a PDF
+  - never: A page on the site. A page is a Link
+- **external** `boolean` · default false — The document is hosted off the site — opens in a new tab, and its accessible name ends with `externalLabel`
+  - never: A document on this site, which opens in place
+- **download** `boolean` · default false — The link saves the file rather than opening it — its accessible name ends with `downloadLabel`
+  - never: A document a browser opens to read, which most PDFs are. A file on another site. Browsers ignore `download` across origins and open the file instead, so the name would promise a download that does not happen; such a file is `external`
+- **mark** `node` · optional — What kind of document it is, as a glyph — FilePdfSolidIcon for a PDF, FileShieldSolidIcon for a policy, or a country's flag from `@deriv-com/dds-marketing/icons/flag` (`MaltaIcon`, `GermanyIcon`) for one country's licence. …
+  - never: Saying what the title does not. The mark is decoration and is never read out
+- **action** `node` · optional — A second link beside the document — "Choose language" — drawn at the far end of the row as its own target
+  - never: A second document. Each document is its own DocumentLink
+- **externalLabel** `string` · default "(opens in a new tab)" — What an external document's accessible name ends with. Never drawn. Translate it with the page
+  - never: Anything a sighted reader needs; it is never shown
+- **downloadLabel** `string` · default "(downloads a file)" — What a download's accessible name ends with. Never drawn. Translate it with the page
+  - never: Naming the file's format, which belongs in the title where it matters
+
+## Inside it
+
+- Takes only text.
+- Renders 5 parts: root, link, mark, title, action.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/documentlink.md`.

package/.llm/digest/documents.md

@@ -0,0 +1,51 @@
+<!-- GENERATED from documents.contract.json. Do not edit. -->
+
+# Documents
+
+A section of documents to open or save — grouped under headings that expand, or laid in a grid beside its heading
+
+`import { Documents } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A legal or regulatory page's documents — key information documents grouped by product, policies, terms
+- A document per country, region or entity, each behind its flag or mark — `layout="grid"`
+- Any list of more documents than a ResourceBanner's four
+
+## Something else, when
+
+- One to four documents or pages at the end of a section → **ResourceBanner**
+- Questions and their answers → **FaqAccordion**
+
+## Never
+
+- Documents the reader must see before acting — a risk warning on the page it governs. A folded group is one most readers never open
+- Navigation between the site's pages. Each entry is a document; a page is a Link
+- Mixing the two shapes in one section. Groups of chips beside a grid of flags is two sections
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice — the reference design's slate FAQ. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left
+- **layout** `enum` · default "groups" — How the documents are laid out: grouped under headings, or as one grid of entries
+  - `groups` — The default: the documents under headings that expand, one group open at a time — AccordionItem children, each holding DocumentLink chips, two to a row from the fold. …
+  - `grid` — Many short entries of one kind — a document per country, each behind its flag — DocumentLink children with `variant="plain"`, in a grid beside the heading from 62rem and under it below. …
+  - never: Choosing by how many documents there are alone. Groups are for documents of different kinds; a grid is for many of one kind
+- **title** `string` · required — Always. What the documents are, in a few words — "Regulatory documents", "Licences by country". It names the section
+  - never: A sentence. The line under it says more
+- **description** `string` · optional — A line under the heading saying what the documents are for or who they apply to
+  - never: Instructions a reader must follow; they belong on the page the documents govern
+
+## Inside it
+
+- Takes only AccordionItem, DocumentLink.
+- At least 1, no ceiling — fewer is not this component and more is a different one.
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, title, header, description, body, list, item.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/documents.md`.