@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/.llm/components/accordion.md

@@ -2,6 +2,10 @@
 
 # Accordion
 
+A stack of headings whose detail expands when the reader asks for it.
+
+## Why it is built this way
+
 A stack of rows whose headings stay and whose detail is put away until the reader asks for it. It exists so a long page can be read as a short one: the headings are the page, and each row is something the reader may or may not want. Two rows at least — a set is what makes it work, because a heading earns its place by being scanned against the ones around it. One row is open at a time and that is not configurable here: a marketing page is read by scrolling, and a set that could hold every row open is the long page the accordion was put there to shorten.
 
 ## Use when
@@ -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/accordionitem.md

@@ -2,6 +2,10 @@
 
 # AccordionItem
 
+One row of an Accordion: a heading that stays, and detail that expands.
+
+## Why it is built this way
+
 One row of an Accordion: a heading that is always there, and the detail under it that is not. The heading is the whole of the target — the words and the chevron are one control, because a reader aiming at a row is aiming at the row rather than at the mark on the end of it. The chevron says which way the row is about to move rather than which way it just moved, so it is a promise rather than a report.
 
 ## Use when
@@ -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/aspectratio.md

@@ -2,6 +2,10 @@
 
 # AspectRatio
 
+Holds its content to a fixed shape and reserves the space before it loads.
+
+## Why it is built this way
+
 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. It draws nothing — no fill, no corner, no edge — and owns one decision: the proportion. What it holds fills it and is cropped to fit, because a box asked for a shape and given something a different shape has to answer which of the two wins, and the box is the one the layout was built on.
 
 It exists because the alternative is every page doing the arithmetic. A row of cards whose images arrive at three different shapes is a row that settles on its tallest, and a hero whose art loads late is a page that jumps once the browser learns how tall it is. Both are the same fault: the shape was known and nothing said it.
@@ -96,6 +100,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/awards.md

@@ -2,6 +2,10 @@
 
 # Awards
 
+Lists the industry awards a company has won, each framed between two laurels.
+
+## Why it is built this way
+
 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. From the fold the badges wrap into rows centred under the heading, five at most to a row and fewer as the band narrows, a short last row centred rather than left at the start. On a phone they run in one row across the band that moves along on its own, a loop with no seam.
 
 The reference design's FeatureAwards, phone marquee included, at motion.duration.ticker per award. It holds still while a pointer rests on it, while it has focus — it is a tab stop named by the heading while it runs — and while it is pressed; a reader who asked for less motion gets the row still, to swipe.
@@ -94,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.

package/.llm/components/background.md

@@ -2,21 +2,32 @@
 
 # Background
 
+A patterned ground for a page's one standout band, drawn as its first layer.
+
+## Why it is built this way
+
 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. It moves slowly at rest, answers the pointer and carries no meaning; what the band holds sits on top of it.
 
 ## Use 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. Prefer those to a hand-built section
 
 ## Do not use
 
-- The band only needs separating from the page around it → nothing here 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`
+- 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
 
 ## Anatomy
@@ -48,10 +59,11 @@ Apply these classes from the generated `backgroundParts` constant rather than wr
 
 ## Props
 
-### tone — `dark` | `light` | `brand` (default `brand`)
+### tone — `dark` | `light` | `subtle` | `brand` (default `brand`)
 
 - `dark` — The band the halftone was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. Reach for it for the band a page opens or closes on, where the glow gives the band a centre
 - `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. The glow reads as warmth rather than light, so keep it for a section that is not competing with a dark one nearby
+- `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. The same coral as the light tone; only the ground under it is the band's grey rather than the page's white.
 - `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. The heading is white too, and the glow rises from the foot of the band towards it, so check the words read on the coral alone — the pattern can only add to what is behind them
 
 Use when: 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
@@ -105,6 +117,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.
@@ -166,9 +184,29 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ## Anti-examples
 
-❌ Background for: The band only needs separating from the page around it
-   A plain fill — color.bg.band-subtle, or color.bg.brand-strong for a dark band — separates a section at no cost to the eye. A pattern is decoration that has to earn its place, and a page where every band has one has none that stand out
-   → nothing in this system does this. Not a gap waiting to be filled — the case belongs outside it.
+❌ Background for: The band is a set of features with a picture each
+   Its `background` prop draws this pattern as the section's first layer, under its own ground and content; wrapping it in Background instead hides the pattern under the ground it paints
+   → use `FeatureCards` instead.
+
+❌ Background for: The band is three to five headline numbers
+   Its `background` prop draws this pattern as the section's first layer; wrapped, its ground covers the pattern
+   → use `Stats` instead.
+
+❌ Background for: The band is a row of short reviews
+   Its `background` prop draws this pattern as the section's first layer; wrapped, its ground covers the pattern
+   → use `TestimonialRow` instead.
+
+❌ Background for: The band is a strip of partner or payment logos
+   Its `background` prop draws this pattern as the section's first layer; wrapped, its ground covers the pattern
+   → use `LogoRows` instead.
+
+❌ Background for: The band opens the page
+   The hero carries its own pattern through its `background` prop, as PageHeader does for a company page; the page's one patterned band is a different band, further down
+   → use `LandingHero` instead.
+
+❌ Background for: The band asks the reader to act
+   The closing call to action carries its own grid, as CtaBannerSlider and DownloadBanner carry theirs; the page's one patterned band sits before it, not on it
+   → use `CtaBanner` instead.
 
 ❌ Background for: The ground is a picture or a video
    Art is content, sized and cropped by the layout. This draws a pattern from tokens and has no picture to hold
@@ -210,6 +248,11 @@ import { Background, Typography } from '@deriv-com/dds-marketing'
 <Background tone="light">
   <Typography variant="h3">Trade the markets that move you</Typography>
 </Background>
+
+// subtle
+<Background tone="subtle">
+  <Typography variant="h3">Trade the markets that move you</Typography>
+</Background>
 ```
 
 ### The halftone moving

package/.llm/components/badge.md

@@ -2,6 +2,10 @@
 
 # Badge
 
+A short label marking something as new, chosen or reduced.
+
+## Why it is built this way
+
 A short word marking something as new, chosen or reduced. It is promotion rather than state: a marketing page badges the plan it wants read first and the feature it shipped last week, where an app badges what an account is currently doing. That difference decides everything else here — there is no success or warning ground, because nothing on a landing page has a status, and the colour a badge takes says how loudly the page is asking rather than what it is reporting.
 
 Use it sparingly, and this is not a nicety. A badge works by being the one thing on a card that is not the copy; a page with a badge on every card has a row of ordinary labels in coloured pills and nothing marked at all.
@@ -111,6 +115,12 @@ What this is not about is every row of controls. A set of filter chips, a pagina
   Guidance only — cannot be checked automatically.
 - **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
   Guidance only — cannot be checked automatically.
+- **A page has at most one patterned band, between its hero and its closing call to action** — A patterned ground — the halftone, the aurora, the mesh, the grid or the rings — is what makes a band the one a reader stops at, and it only works by being the exception. So a page has at most one, placed between its hero and its closing call to action; the hero's and the call to action's own patterns are theirs and do not count, and the band never goes on either of them.
+
+The pattern is the band's first layer, under its content and over nothing. A block that can carry one says so with its own `background` prop — FeatureCards, Stats, TestimonialRow and LogoRows — and draws it there; a section built by hand places a Background with nothing in it as its first child. Never wrap a block in a Background: the block paints its own ground over the pattern and hides it.
+
+Only a band whose content is stacked can carry one. Every pattern rises from the band's foot, so the band needs a heading over what it introduces, centred, with the foot left open. A band whose content runs side by side — words beside a picture, a split, columns reaching the foot — puts the glow behind the picture or under the words; it stays on its flat ground.
+  Guidance only — cannot be checked automatically.
 - **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
 
 color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
@@ -184,7 +194,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { Badge } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 <Badge label="For platforms" icon={<GlobeRegularIcon />} />
 ```
@@ -197,7 +207,7 @@ Both are a tint carrying the colour and dark ink carrying the words. Brand makes
 
 ```tsx
 import { Badge } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // accent — the plan the page wants read first
 <Badge variant="accent" label="Most popular" icon={<GlobeRegularIcon />} />
@@ -212,7 +222,7 @@ The mark says what the badge is about faster than its word does. It is decorativ
 
 ```tsx
 import { Badge } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // With a glyph
 <Badge label="For platforms" icon={<GlobeRegularIcon />} />

package/.llm/components/bottomsheet.md

@@ -2,6 +2,10 @@
 
 # BottomSheet
 
+A panel that rises from the bottom edge for one focused task on small screens.
+
+## Why it is built this way
+
 A panel that rises from the bottom edge to hold a single focused task on small screens. It owns the way out, the controls ranged above it and the row that names the task; what the task looks like is the consumer's.
 
 ## Use when
@@ -210,6 +214,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.
@@ -309,7 +319,7 @@ A sheet says how to leave it once: a handle to pull, or a close button to press.
 
 ```tsx
 import { BottomSheet, ButtonIcon } from '@deriv-com/dds-marketing'
-import { PenSolidIcon } from '@deriv-com/quill-icons-web'
+import { PenSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // The handle alone, which is the default
 <BottomSheet onOpenChange={(open, reason) => { /* your handler */ }} open title="Filter results">Markets, date range and contract type</BottomSheet>
@@ -330,7 +340,7 @@ It ranges to the start and stays there, whatever is at either end of the row. Th
 
 ```tsx
 import { BottomSheet, ButtonIcon } from '@deriv-com/dds-marketing'
-import { PenSolidIcon } from '@deriv-com/quill-icons-web'
+import { PenSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // The title alone
 <BottomSheet onOpenChange={(open, reason) => { /* your handler */ }} open showClose={false} showHandle={false} title="Filter results">Markets, date range and contract type</BottomSheet>
@@ -348,7 +358,7 @@ A sheet reached from another sheet needs the step before it. Back takes the lead
 
 ```tsx
 import { BottomSheet, ButtonIcon } from '@deriv-com/dds-marketing'
-import { ArrowLeftRegularIcon, PenSolidIcon } from '@deriv-com/quill-icons-web'
+import { ArrowLeftRegularIcon, PenSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // The way back, opposite the way out
 <BottomSheet onOpenChange={(open, reason) => { /* your handler */ }} open showClose showHandle={false} back={<ButtonIcon variant="plain" size="sm" label="Back to filters" icon={<ArrowLeftRegularIcon />} />} title="Choose markets">Forex, Commodities, Stock indices, Cryptocurrencies</BottomSheet>

package/.llm/components/breadcrumb.md

@@ -2,6 +2,10 @@
 
 # Breadcrumb
 
+Shows where the current page sits in the site, with links back up.
+
+## Why it is built this way
+
 The trail of ancestors above the current page on a marketing site, showing the visitor where they are in the site hierarchy. Every level but the last is a link back to that section; the last is where they already are. On a marketing site the trail is often the only structural cue a visitor has — they may have arrived from a search result or a campaign link and have no mental model of the site yet. It renders every level it is given and wraps rather than collapsing, because hiding levels describes a shallower hierarchy than the one the visitor is in.
 
 ## Use when
@@ -68,6 +72,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/breadcrumbitem.md

@@ -2,6 +2,10 @@
 
 # BreadcrumbItem
 
+One level in a Breadcrumb.
+
+## Why it is built this way
+
 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. It knows nothing about the levels around it — what order they come in and what sits between them belongs to the trail, not to any level in it.
 
 ## Use when
@@ -82,6 +86,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/button.md

@@ -2,6 +2,10 @@
 
 # Button
 
+Triggers the one action a section asks for, such as signing up.
+
+## Why it is built this way
+
 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. An `<a>` when given an href and a `<button>` when not, so a CTA that goes somewhere gets the browser's navigation and one that acts in place answers Space and does what the page says.
 
 ## Use when
@@ -36,7 +40,7 @@ Apply these classes from the generated `buttonParts` constant rather than writin
 ### variant — `primary` | `secondary` | `inverse` (default `primary`)
 
 - `primary` — The step the page was built to produce. Carries the brand fill, which is what makes it findable at a glance and what makes it meaningless once there are two — a section offering two brand fills has said nothing about either.
-- `secondary` — A real destination that is not the one being pushed — compare plans, read the docs, talk to sales. The lightest tint the ramp offers, color.bg.subtle, the same fill product's secondary carries, so a CTA and its alternative read as one family across both packages. Hover and press are layered over the fill as a background-image rather than replacing it, which is how product darkens a tint that has no hover partner of its own. On the dark band, tone="inverse" keeps the fill and turns it white.
+- `secondary` — A real destination that is not the one being pushed — compare plans, read the docs, talk to sales. On the page's own ground an outline rather than a quiet fill: no fill at rest, an edge in color.border.strong, and color.bg.hover and color.bg.active washed in under a pointer and a press, so it keeps the shape, the inset and the target size of the primary beside it and gives up only the fill. Outlined on every ground: on the dark band (tone="inverse") and the coral one (tone="brand") the words turn white and the edge is color.border.strong-inverse, with the band's own hover and press washes.
 - `inverse` — A section that paints its own ground — a brand-coloured hero, a photo band, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral edge is the wrong ink, so the only thing that reads is a solid at the far end of the neutral ramp: pure black in light, pure white in dark. It outranks everything near it, which is what makes it right there and wrong anywhere else.
 
 Use when: Deciding how much of the section a destination claims. Primary is the default and the one to spend deliberately.
@@ -53,8 +57,8 @@ Use when: Matching the control to the density of the band it sits in, which on a
 ### tone — `default` | `inverse` | `brand` (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. The secondary keeps its filled shape: a six-percent white tint with hover and press layered over it, and the label in color.fg.on-brand-strong. Every value is fixed, because the band is.
-- `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. variant="inverse" is a near-black pill with a white label in both themes, rather than turning white in dark beside a white secondary; the secondary is the same six-percent white tint it is on the dark band. Hover, press and the focus ring are the dark band's fixed values.
+- `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. The secondary stays an outline: no fill at rest, an edge in color.border.strong-inverse, hover and press washed in over it, and the label in color.fg.on-brand-strong. Every value is fixed: white and white washes read on the band at either depth.
+- `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. variant="inverse" is a near-black pill with a white label in both themes, rather than turning white in dark beside a white secondary; the secondary is the same white outline it is on the dark band. Hover, press and the focus ring are the dark band's fixed values.
 
 ### href — `string`
 
@@ -120,6 +124,12 @@ Guidance rather than a count. The bar is drawn with a second copy of an action i
   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.
 - **At most one primary button in a group of actions** — Two brand fills side by side ask the visitor to choose between two things that look equally urgent, and nothing tells them which one the page wants. So a group of actions — a hero's pair, a banner's pair, the buttons in a navigation bar — leads with at most one primary, and whatever sits beside it is secondary.
 
 The limit belongs to the group, not the page. A landing page asks for the same thing more than once on purpose: the sign-up in the bar, again under the opening claim, again in a banner halfway down and in the closing band. Each of those is one ask repeated where the reader has arrived, not a second ask competing with the first, and a rule that counted primaries across the page would forbid the thing a marketing page is built to do. This rule came from Product as one primary per view, and there it is right: a view is one screen with one task, and two primaries on it really are two tasks. On a page that scrolls through several sections the view is the wrong unit. The group is the one a reader compares.

package/.llm/components/buttonicon.md

@@ -2,6 +2,10 @@
 
 # ButtonIcon
 
+Triggers an action with an icon alone.
+
+## Why it is built this way
+
 One press carried by a glyph alone, in the space a label would need. What the press does decides the element: an `<a>` when it is given an href, a `<button>` when it is not — the fork CardButton already settled in this package, and for the same reason, that a control going to a page and a control the page handles itself are the same gesture with different destinations, and the element is what tells a browser which. The glyph is decorative to a screen reader; the name the control is announced by comes from `label`, which is never drawn, so the control is named for everyone whether or not the shape happens to be legible to them. This is the gap Button names in its own guidance: Button's words are both its accessible name and its destination, and a glyph alone has nowhere to put either.
 
 ## Use when
@@ -79,7 +83,7 @@ Never for: Making one of a set stand out. Two of these side by side at different
 ### tone — `default` | `inverse` (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. The ink and the tints move to the band's fixed roles; nothing else does
+- `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. The ink and the tints move to the band's fixed roles; nothing else does
 
 ### icon — `node` **Required.**
 
@@ -145,6 +149,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.
@@ -226,7 +236,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { PlaySolidIcon } from '@deriv-com/quill-icons-web'
+import { PlaySolidIcon } from '@deriv-com/dds-marketing/icons'
 
 <ButtonIcon label="Play the product tour" icon={<PlaySolidIcon />} />
 ```
@@ -239,7 +249,7 @@ How much of the section one press claims. Primary for the press a band is built
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { PlaySolidIcon, XmarkRegularIcon } from '@deriv-com/quill-icons-web'
+import { PlaySolidIcon, XmarkRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // Primary — the press a band is built around
 <ButtonIcon variant="primary" label="Play the product tour" icon={<PlaySolidIcon />} />
@@ -260,7 +270,7 @@ Three squares from the control ramp, each holding the mark Button gives its own
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { ChevronLeftRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChevronLeftRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // sm — a dense row, desktop only
 <ButtonIcon size="sm" variant="secondary" label="Previous market" icon={<ChevronLeftRegularIcon />} />
@@ -278,7 +288,7 @@ href decides the element. With one it is an anchor and the browser navigates; wi
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { BarsRegularIcon, LinkedinInIcon } from '@deriv-com/quill-icons-web'
+import { BarsRegularIcon, LinkedinInIcon } from '@deriv-com/dds-marketing/icons'
 
 // With href — an anchor. Cmd-click opens a tab
 <ButtonIcon variant="secondary" href="https://www.linkedin.com/company/deriv" label="Deriv on LinkedIn" icon={<LinkedinInIcon />} />
@@ -293,7 +303,7 @@ Social accounts in a footer: several at once, all one tier. One drawn heavier wo
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { FacebookFIcon, InstagramIcon, LinkedinInIcon } from '@deriv-com/quill-icons-web'
+import { FacebookFIcon, InstagramIcon, LinkedinInIcon } from '@deriv-com/dds-marketing/icons'
 
 // LinkedIn
 <ButtonIcon variant="secondary" href="https://www.linkedin.com/company/deriv" label="Deriv on LinkedIn" icon={<LinkedinInIcon />} />
@@ -311,7 +321,7 @@ Plain paints nothing of its own, so what is behind it decides whether the mark c
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { PlaySolidIcon } from '@deriv-com/quill-icons-web'
+import { PlaySolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // default — a light surface
 <ButtonIcon label="Play the product tour" icon={<PlaySolidIcon />} variant="plain" />

package/.llm/components/card.md

@@ -2,6 +2,10 @@
 
 # Card
 
+A surface that groups related content.
+
+## Why it is built this way
+
 A surface that holds content belonging together. The marketing page is white and this is a step off it, so a card is told apart by being recessed rather than by floating — a column of them reads as a set of things rather than a stack of panels. It holds a fill and a corner and nothing else: it does not pad what is inside it, and what is inside it is the page's to compose. One variant holds no fill either: `plain` paints nothing and lets whatever is beneath it through, for an editorial card that is told apart by its picture and its headline rather than by a ground.
 
 ## Use when
@@ -94,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.
@@ -249,7 +259,7 @@ The mark is inset with the copy and sized to sit above a heading, which is what
 
 ```tsx
 import { Card, CardBody, Icon } from '@deriv-com/dds-marketing'
-import { MemoCircleCheckRegularIcon } from '@deriv-com/quill-icons-web'
+import { MemoCircleCheckRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // surface-raised — a mark, and no picture
 <Card variant="surface-raised">