@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/.llm/components/statusdot.md

@@ -2,6 +2,10 @@
 
 # StatusDot
 
+A small dot marking an item as notable or in a different state.
+
+## Why it is built this way
+
 A small coloured circle that marks one thing in a list of otherwise equal things — either because it is worth noticing, or because it is in a state the others are not. The accent one draws attention and says nothing about a condition; the four beside it each name one. It never carries the meaning on its own: the words next to it do, because a colour is not readable to everyone who has to read it.
 
 ## Use when
@@ -21,7 +25,7 @@ A small coloured circle that marks one thing in a list of otherwise equal things
 
 StatusDot renders one element.
 
-- `root` — `<span>`, class `dds-statusdot`. The colored circle. Carries the variant and optional pulse animation, and the description when it has one.
+- `root` — `<span>`, class `dds-statusdot`. The colored circle. Carries the variant and optional pulse animation, and the description when it has one. Given `from`, it moves once on arrival (`data-arrival`), from that state to its own.
 
 Apply these classes from the generated `statusDotParts` constant rather than writing the strings by hand.
 
@@ -54,6 +58,17 @@ Never for: Repeating the words already beside it, which is what makes a screen r
 Use when: The state has a meaning the colour and the adjacent label together still do not explain — why a service is degraded, what "away" counts as. A few words, revealed on hover and on keyboard focus
 Never for: A sentence the reader must have, or anything longer than a phrase. Setting this puts the dot in the tab order, because a description no keyboard can reach is one this system does not ship — so a tooltip on every dot in a list of twenty is twenty new tab stops, and worth spending only where the explanation is
 
+### from — `accent` | `success` | `warning` | `error` | `info`
+
+- `accent` — Starts as accent before becoming its own state.
+- `success` — Starts as success before becoming its own state.
+- `warning` — Starts as warning before becoming its own state.
+- `error` — Starts as error before becoming its own state.
+- `info` — Starts as info before becoming its own state.
+
+Use when: The state the dot starts in, which it leaves once on arrival — info's "Opening…" becoming success's "Position open". It holds the first state for motion.duration.hold, the same hold Typography's `from` gives the words beside it, then turns in one step; a pulsing dot starts pulsing only then. At rest, and for a reader who asked for less movement, the dot is its own state
+Never for: A state the reader must notice. The first state is on screen for a second and never read out; and never more than one change — a dot that kept changing would be a live feed the page does not have
+
 Also accepts everything from `HTMLAttributes<HTMLSpanElement>`.
 
 ## Accessibility
@@ -83,6 +98,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
@@ -211,3 +232,26 @@ import { StatusDot } from '@deriv-com/dds-marketing'
 // Named, standing where no words say the state
 <StatusDot variant="error" label="Disconnected" />
 ```
+
+### Changing once on arrival
+
+The dot starts as another state and becomes its own, with the words beside it, once.
+
+```tsx
+import { StatusDot } from '@deriv-com/dds-marketing'
+
+// from="accent"
+<StatusDot variant="success" from="accent" pulse label="Position open" />
+
+// from="success"
+<StatusDot variant="success" from="success" pulse label="Position open" />
+
+// from="warning"
+<StatusDot variant="success" from="warning" pulse label="Position open" />
+
+// from="error"
+<StatusDot variant="success" from="error" pulse label="Position open" />
+
+// from="info"
+<StatusDot variant="success" from="info" pulse label="Position open" />
+```

package/.llm/components/steps.md

@@ -2,6 +2,10 @@
 
 # Steps
 
+A numbered list of steps beside a supporting picture.
+
+## Why it is built this way
+
 A two-column how-it-works section pairing a supporting picture with a numbered, ordered list of steps, each a title and a line describing it.
 
 It walks a reader through a sequence they are about to follow — opening an account, funding it, placing a first trade — and the numbers are the argument: they say the order matters and how far there is to go. The list is a real ordered list, so the count and the order reach a screen reader too, and the numbers drawn beside each step are the section's own rather than the page's.
@@ -140,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.

package/.llm/components/stickycards.md

@@ -2,6 +2,10 @@
 
 # StickyCards
 
+A heading over cards that stack on top of each other as the page scrolls.
+
+## Why it is built this way
+
 A section whose cards pile up as the page scrolls: a heading, and under it a set of cards that each stop near the top of the window while the next one slides up over them, so the cards are read one at a time and the edges of the ones already read stay showing above the one being read. A covered card draws back a little and darkens as the next one crosses it, which is what makes the pile read as depth.
 
 Two layouts. `compact` is the reference design's StickyMarketCards: text-first cards in a column held to the heading's measure, any number of them, a picture or an animation beside the words where a card has one, and at most four edges showing however long the set is. `feature` is its StickyStackedCards: a few large cards the width of the page, each its words beside a picture filling its half from the fold.
@@ -114,6 +118,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/subdomainnavbar.md

@@ -2,6 +2,10 @@
 
 # SubdomainNavbar
 
+The top bar for a subdomain such as docs or a product surface.
+
+## Why it is built this way
+
 The bar across the top of a subdomain — a documentation site, a playground, a product surface that lives beside the marketing site rather than inside it. Three regions in one line: the mark and what the product is called, the places that subdomain has, and what a reader reaches for at the far end.
 
 It is the plain sibling of Navbar, and the difference is a decision rather than an omission. A marketing bar gathers into a pill as the page moves, because a marketing page is a thing a reader travels down and the bar is asking to stay with them. A subdomain is somewhere a reader works: they are not being sold anything, the chrome should stop asking for attention, and a bar that rearranged itself while somebody read documentation would be motion answering nothing. So this one is flat, and stays exactly where it was put.
@@ -171,6 +175,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.
@@ -322,7 +332,7 @@ What a reader reaches for rather than navigates to. A real bar carries several o
 ```tsx
 import { Button, ButtonIcon, SubdomainNavbar } from '@deriv-com/dds-marketing'
 import { DerivCoralWordmark } from '@deriv-com/quill-logos-web'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // What the subdomain wants pressed
 <SubdomainNavbar label="Main" menuLabel="Menu" closeLabel="Close" brand={<DerivCoralWordmark />} utilities={<Button size="md" href="/dashboard">Dashboard</Button>}>{navbaritems}</SubdomainNavbar>

package/.llm/components/tab.md

@@ -2,6 +2,10 @@
 
 # Tab
 
+One option in a TabList.
+
+## Why it is built this way
+
 One item in a strip, naming a version of what the page is already about. It cannot stand on its own: selected means selected against something, and a tab with no siblings is a heading that highlights.
 
 It is a control and not a link. Pressing it changes which slice of this page is showing — it does not go anywhere, there is no route behind it, and nothing about the page is different afterwards except which of two comparable things the reader is looking at. That is the whole difference from Product's Tab, which names a facet of a view an app holds state for.
@@ -152,6 +156,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.
@@ -257,7 +267,7 @@ Solid when current, regular otherwise — the package rule, and the call site’
 
 ```tsx
 import { Tab } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, GlobeSolidIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, GlobeSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // Current — solid
 <Tab value="web" label="Web" selected icon={<GlobeSolidIcon />} />
@@ -286,7 +296,7 @@ One mark at most, after the name. `content` names which kind it is, so a node le
 
 ```tsx
 import { Badge, Tab } from '@deriv-com/dds-marketing'
-import { ArrowUpRightRegularIcon } from '@deriv-com/quill-icons-web'
+import { ArrowUpRightRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // A badge — arguing for the tab that is not current
 <Tab value="yearly" label="Yearly" content="badge" badge={<Badge label="Save 20%" />} />

package/.llm/components/table.md

@@ -2,6 +2,10 @@
 
 # Table
 
+Shows structured data in rows and columns.
+
+## Why it is built this way
+
 Structured data in rows and columns, where every row has the same shape. It owns what the whole table shares — a row's air, the rule between rows, how the columns take their widths — and none of what a cell holds, which is the page's to compose.
 
 It remembers nothing. Which column is sorted outlives a render, so it arrives as a hook beside this component; the toolbar above and the footer beneath are the page's too, on the same surface. None of the three is a prop, and a table that grew one would hold a second copy of what the page already has.
@@ -164,6 +168,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/tablebody.md

@@ -2,6 +2,10 @@
 
 # TableBody
 
+The data rows of a Table.
+
+## Why it is built this way
+
 The rows of data, under the header. It is where the table's rules reach the rows: a line belongs between two data rows and nowhere else, so the section that holds only data is the one that hands them out.
 
 ## Use when
@@ -75,6 +79,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/tablecell.md

@@ -2,6 +2,10 @@
 
 # TableCell
 
+One value in a table row.
+
+## Why it is built this way
+
 One value in a row, under the column that names it. It is a slot: what goes in is the page's to compose, which is what lets a cell hold a badge, a link or a control rather than only text. What it decides is where the value sits in the column and whether its digits line up with the ones above and below.
 
 ## Use when
@@ -101,6 +105,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/tablehead.md

@@ -2,6 +2,10 @@
 
 # TableHead
 
+The header rows of a Table.
+
+## Why it is built this way
+
 The column names, above the data, and the filter row where there is one. It exists as a component rather than a wrapper because a screen reader announces a column's header before every value under it — which is the whole of how a reader knows what a number means without looking it up — and that only happens if the header is marked up as one rather than styled to look like one.
 
 A second row is allowed and a third is not. The second is the filter row: one control per column, sitting under the name of the column it narrows, which is the whole reason it is in here rather than in a toolbar above the table — a toolbar has to say which column each control acts on, and a row under the names has already said it. It gives up the inset above it, so the controls sit under the names rather than a gap of two insets away — the head is one thing, and each of its rows carrying its own air made it read as two. It is cells rather than header cells, because a control is not the name of a column and a screen reader announcing it as one would read a search box out before every value beneath it.
@@ -85,6 +89,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/tableheadercell.md

@@ -2,6 +2,10 @@
 
 # TableHeaderCell
 
+The name of one table column.
+
+## Why it is built this way
+
 The name of a column, announced before every value under it. That is the whole of why it is a component rather than a styled cell: a screen reader reads the header before each cell in the column, which is how a reader knows what a number means without looking it up — and it only happens if the header is a header in the markup.
 
 Where the column can be sorted, the header holds the control that sorts it. A button rather than a click handler on the cell, because sorting is an action: it has to be reachable by keyboard, announced as pressable, and able to say which way the column is currently ordered.
@@ -153,6 +157,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/tablerow.md

@@ -2,6 +2,10 @@
 
 # TableRow
 
+One row of a Table.
+
+## Why it is built this way
+
 One row of a table: the cells that answer the same questions in the same order as every other row. It owns the rule under it and whether it reads as picked, and nothing about what any cell holds.
 
 Being picked is drawn here rather than on the checkbox that sets it, because selection is a fact about the row: a reader scanning a table needs to see which rows are in the set without checking every box in the first column.
@@ -101,6 +105,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/tablist.md

@@ -2,6 +2,10 @@
 
 # TabList
 
+Switches between views of the same content.
+
+## Why it is built this way
+
 A strip of comparable versions of one thing, one of them showing at a time. What it says is that these are the same offer seen differently — a billing period, a platform, a market class — rather than places the site has. Two at least: selected means selected against something, and a strip of one is a heading that highlights.
 
 It holds which tab is current and nothing else. The content each tab reveals belongs to the page, because a marketing page already has all of it written and the strip is only deciding which slice shows. That is why there is no panel here and no ARIA tab role: role="tab" is a promise about a tabpanel this component cannot see, and a promise it cannot keep is worse than the group it actually is.
@@ -98,6 +102,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/teamgrid.md

@@ -2,6 +2,10 @@
 
 # TeamGrid
 
+A grid of the people behind a company, with photo, name and role.
+
+## Why it is built this way
+
 A section that sets out the people behind a company: a heading, and a grid of people under it — each a square photograph, their name, what they do and, where they have one, a link to a profile of theirs elsewhere. The first few show at once, and a button under the grid shows the rest and hides them again.
 
 One column on a phone, two from the fold and four at full width, so the first four people are one row on a desktop and the button under that row is what makes the list longer.
@@ -124,6 +128,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.

package/.llm/components/testimonialrow.md

@@ -2,6 +2,10 @@
 
 # TestimonialRow
 
+An overall rating over a scrollable row of customer reviews.
+
+## Why it is built this way
+
 A section that lets a review service's numbers back the page: a heading with the overall rating under it — and a way to where the reviews were collected — over a row of rated reviews the reader moves along, each a short review under its star rating with the reviewer's name, and two arrows under the row that step it a card at a time. Several are in view at once and nothing moves on its own.
 
 The reference design's Testimonial in its review-row form. It names no review platform: the score, its wording and where it links are the page's, so the same section serves whichever service the reviews came from.
@@ -23,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.
@@ -57,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".
@@ -129,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.
@@ -238,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" />
+```