@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/.llm/components/testimonialslider.md

@@ -2,6 +2,10 @@
 
 # TestimonialSlider
 
+Customer quotes shown one at a time, each with who said it.
+
+## Why it is built this way
+
 A section that lets the people who use the product say what it did for them: a heading over one quote at a time, in a card, with the name of who said it. Two or more quotes rotate in place — one in view, the next fading in where it stood — and dots show where the reader is and move to any quote pressed.
 
 The reference design's Testimonial in its quote form. Its review-row form — rated reviews collected by a review service — is TestimonialRow.
@@ -51,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.**
@@ -131,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

@@ -2,6 +2,10 @@
 
 # TextArea
 
+A field for a longer message, such as on a contact form.
+
+## Why it is built this way
+
 A field for what a visitor wants to say in their own words — the message on a contact form, the 'tell us about your project' on an enquiry, the reason someone is applying to partner. One value still, like TextInput, but a value with no shape the page can guess at.
 
 That is the whole reason it is not TextInput with a taller box. A single line shows a reader a sliver of what they wrote and no way to read it back, and the one place they most want to check themselves is the paragraph they are about to send a stranger. So it grows as they type, up to a limit, and past that limit it scrolls rather than pushing the submit button off the screen.
@@ -188,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

@@ -2,6 +2,10 @@
 
 # TextInput
 
+A single-line text field.
+
+## Why it is built this way
+
 One line of text a visitor types before they are a customer. A marketing page asks for very little and has no standing to ask for more: an email for a newsletter, a name and a message on a contact form, a work address to book a demo. Every one of those is a stranger deciding whether the thing on offer is worth handing something over for, and the field is where that decision gets made or lost.
 
 That is the whole difference from a field in an application, and it is why this is not Product's TextInput with fewer props. An app's field is filled by someone who has already signed up, inside a task they have committed to, and can afford to ask for an account number in a particular format. A landing page's field is filled by someone with no account, no stake, and a back button — so it asks for one thing, says what it will do with it, and is legible enough at a glance that nobody has to work out what goes in it.
@@ -241,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.
@@ -438,7 +448,7 @@ Ornaments and furniture, none of which is the label. A glyph names nothing and a
 
 ```tsx
 import { TextInput } from '@deriv-com/dds-marketing'
-import { EnvelopeRegularIcon, LockRegularIcon } from '@deriv-com/quill-icons-web'
+import { EnvelopeRegularIcon, LockRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // prefix — a head you should not have to type
 <TextInput label="Website" type="url" prefix="https://" placeholder="example.com" />

package/.llm/components/textscroll.md

@@ -2,6 +2,10 @@
 
 # TextScroll
 
+One large statement whose words brighten as the reader scrolls.
+
+## Why it is built this way
+
 A full-width section holding one large statement — a mission, a brand message — whose words brighten one after another as the reader scrolls past, from dimmed to full strength, so the sentence is read at the pace the page is moved.
 
 The reference design's TextScroll. The reveal is scrubbed by the scroll itself rather than timed: each word runs down the section's own view timeline a step behind the one before it, forward as the reader scrolls down and back again as they scroll up, and stands still while the page does. The sentence is in the page's first HTML as one paragraph of real words and spaces, so a reader with no script, a browser with no scroll timeline and a reader who asked for less movement all get the whole statement at full strength from the start; the dim is only ever something the scroll applies.
@@ -76,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

@@ -2,6 +2,10 @@
 
 # Tiers
 
+A row of partnership tiers, each with what it offers and how to reach it.
+
+## Why it is built this way
+
 A partnership-tier section: a centred heading over an ordered row of tiers, each a medal, a name and the stage it stands for, a card stating what the tier gives, and the bar a partner clears to reach it — with an optional way on under the row.
 
 It shows how rewards grow with performance, Bronze to Platinum, and the order is the argument: each tier is a step up from the one before it. The tiers are a real ordered list, so the count and each tier's place reach a screen reader too. At full width they share one row and a rule runs through the medals, joining them into one track; below that they fall to two columns and then one, where each tier's words start at the edge.
@@ -44,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.
@@ -79,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`
@@ -115,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.
@@ -193,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
@@ -206,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
@@ -220,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

@@ -2,6 +2,10 @@
 
 # Typography
 
+Sets text in one of the type roles.
+
+## Why it is built this way
+
 Copy, set in one of the page's type roles. It is the component that finally separates what a line of text is in the document from how large it is drawn — `as` says the first and `variant` says the second, and neither implies the other.
 
 That separation is the whole reason it exists. Every heading role in this package carries the same sentence — a size, not an instruction — because a page that wants a hero-sized line reaches for h1 and gets an <h1>, and the second one on the page is a document with two top-level headings. Here the scale is a prop and the element is a different prop, so a section heading set at hero scale is `as="h2" variant="h1"` and says exactly that.
@@ -30,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.
 
@@ -68,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
@@ -92,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.
@@ -165,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
@@ -251,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/accordion.md

@@ -2,7 +2,7 @@
 
 # Accordion
 
-A stack of rows whose headings stay and whose detail is put away until the reader asks for it. …
+A stack of headings whose detail expands when the reader asks for it
 
 `import { Accordion } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/accordionitem.md

@@ -2,7 +2,7 @@
 
 # AccordionItem
 
-One row of an Accordion: a heading that is always there, and the detail under it that is not. …
+One row of an Accordion: a heading that stays, and detail that expands
 
 `import { AccordionItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/aspectratio.md

@@ -2,7 +2,7 @@
 
 # AspectRatio
 
-A box that holds one shape whatever is put in it, so a page reserves the room a picture will take before the picture arrives. …
+Holds its content to a fixed shape and reserves the space before it loads
 
 `import { AspectRatio } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/awards.md

@@ -2,7 +2,7 @@
 
 # Awards
 
-A section of social proof that lists the industry awards a company has won, each a badge between two laurels: a laurel, the award's name and its issuer, and the same laurel mirrored. …
+Lists the industry awards a company has won, each framed between two laurels
 
 `import { Awards } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/background.md

@@ -2,26 +2,33 @@
 
 # Background
 
-A ground a section or a block sits on, painted with a pattern rather than a flat fill — a halftone, an aurora, a mesh, a rule grid or rings. …
+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 ground a section or a block sits on, painted with a pattern rather than a flat
 - **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/badge.md

@@ -2,7 +2,7 @@
 
 # Badge
 
-A short word marking something as new, chosen or reduced. …
+A short label marking something as new, chosen or reduced
 
 `import { Badge } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/bottomsheet.md

@@ -2,7 +2,7 @@
 
 # BottomSheet
 
-A panel that rises from the bottom edge to hold a single focused task on small screens. …
+A panel that rises from the bottom edge for one focused task on small screens
 
 `import { BottomSheet } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/breadcrumb.md

@@ -2,7 +2,7 @@
 
 # Breadcrumb
 
-The trail of ancestors above the current page on a marketing site, showing the visitor where they are in the site hierarchy. …
+Shows where the current page sits in the site, with links back up
 
 `import { Breadcrumb } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/breadcrumbitem.md

@@ -2,7 +2,7 @@
 
 # BreadcrumbItem
 
-One level in a Breadcrumb on a marketing site. It renders either a link back to that level or, for the level the visitor is already on, plain text marked as the current page. …
+One level in a Breadcrumb
 
 `import { BreadcrumbItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/button.md

@@ -2,7 +2,7 @@
 
 # Button
 
-Drives a visitor toward a conversion goal — a signup page, a pricing page, a demo booking — or performs the one action a section asks for, such as sending a newsletter form or opening a video. …
+Triggers the one action a section asks for, such as signing up
 
 `import { Button } from '@deriv-com/dds-marketing'`
 
@@ -31,7 +31,7 @@ Drives a visitor toward a conversion goal — a signup page, a pricing page, a d
   - `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

@@ -2,7 +2,7 @@
 
 # ButtonIcon
 
-One press carried by a glyph alone, in the space a label would need. …
+Triggers an action with an icon alone
 
 `import { ButtonIcon } from '@deriv-com/dds-marketing'`
 
@@ -43,7 +43,7 @@ One press carried by a glyph alone, in the space a label would need. …
   - 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/card.md

@@ -2,7 +2,7 @@
 
 # Card
 
-A surface that holds content belonging together. …
+A surface that groups related content
 
 `import { Card } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/cardbody.md

@@ -2,7 +2,7 @@
 
 # CardBody
 
-Everything a card holds: the words inset from its edges and the picture that reaches them, in one region. The surface around it keeps a fill and a corner and nothing else. …
+The content area of a Card, holding its text and picture
 
 `import { CardBody } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/cardbutton.md

@@ -2,7 +2,7 @@
 
 # CardButton
 
-A card that responds to a press. …
+A card that acts on press
 
 `import { CardButton } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/checkbox.md

@@ -2,7 +2,7 @@
 
 # Checkbox
 
-Records a single on-or-off choice that is submitted with the form around it rather than applied the moment it is ticked
+Records an on-or-off choice that is submitted with its form
 
 `import { Checkbox } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/comparisoncards.md

@@ -2,7 +2,7 @@
 
 # ComparisonCards
 
-A section that sets two to four options side by side under a heading, each a card of its own that repeats the same short rows — a label and this option's value — so a reader compares the options line by line: Spot against Futures, one account type against another. …
+Sets two to four options side by side as cards, so readers compare them row by row
 
 `import { ComparisonCards } from '@deriv-com/dds-marketing'`