@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/.llm/components/link.md

@@ -2,6 +2,10 @@
 
 # Link
 
+Takes the visitor to another page, inline or on its own.
+
+## Why it is built this way
+
 A destination named inside a sentence, or standing on its own under one. Inside a sentence it takes everything from the copy around it — the size, the face, the ink — and is told apart by an underline alone. On its own line it takes the brand ink and a mark instead, because there is no sentence to belong to.
 
 Button is the other half of this, and the two are the same act — go somewhere — at different volumes. A Button is a pill a reader aims at; a Link is words a reader is already reading. The test is whether taking it out would leave a hole in the sentence: if it would, it is a link, and if the sentence would read fine without it, the page wanted a Button.
@@ -46,7 +50,7 @@ Link renders 3 elements. A token binding names the part it applies to.
   
   The ink is `color.bg.brand`, which is a background role doing a foreground's job, and that is worth naming rather than hiding. `color.fg.brand` exists and is the readable one at 7.75:1 — but it is the dark red a Badge sets on a pale tint, not the coral the page is built from, and a link that did not match the buttons would read as a different kind of thing. The brand primary is one colour in this system and it is spelled `color.bg.brand`; a `fg` alias for the same value would be a second name for one decision.
   
-  A link whose ink is the ground's gets its underline back on hover, and only on hover. That covers a standalone link at `tone: inherit` — one on a brand card, a dark band, a scrim. The list variant has the same problem and answers it with its mark instead: a column whose rows underline one at a time reads as a table of contents being corrected. At rest they are told apart by position, which is what a column of links or a line of its own already provides; under the pointer there was nothing at all, because the colour cannot change when it belongs to the ground and there is no mark to move. Product reaches the same conclusion from the other side, keeping the underline at all times for `tone: inherit` — these designs do not have one at rest, so it arrives with the pointer instead. It is in the impl sheet because `structure` carries no state.
+  A standalone link at `tone: inherit` — one on a brand card, a dark band, a scrim — draws no underline either, at rest or under the pointer, the same as at `tone: brand`. Its colour belongs to the ground and so cannot change on hover; what answers the pointer is the mark, which moves along the way it already points, as it does on every standalone link. Product keeps an underline at `tone: inherit` at all times; these designs have none on a standalone link anywhere, and a line that appears on one tone and not the other would make the two read as different kinds of link.
 - `icon-leading` — `<span>`, class `dds-link__icon-leading`. A glyph before the words, when the destination has a mark a reader recognises faster than its name — a document, a download, a platform. Rare in running copy and ordinary in the standalone variant, which is where it earns its place.
   
   A box of the tab's own rather than the glyph itself, because Icon clones onto the SVG and this part is the place in the line. Drawn at `icon.size.xs` — sixteen, a step below what a control takes, because this sits beside words rather than inside a target and twenty next to a sixteen-pixel label outweighs the words it is there to qualify. The part carries the gap and nothing else: the colour comes from the link, which is what `fill="currentColor"` on the glyph is for.
@@ -175,6 +179,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.
@@ -349,7 +359,7 @@ Standalone only, and solid like the arrow — every glyph on a standalone link t
 
 ```tsx
 import { Link } from '@deriv-com/dds-marketing'
-import { FileShieldSolidIcon, WalletSolidIcon } from '@deriv-com/quill-icons-web'
+import { FileShieldSolidIcon, WalletSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // A destination with a mark of its own
 <Link href="/licence" iconLeading={<FileShieldSolidIcon />}>Read the licence</Link>

package/.llm/components/logocolumns.md

@@ -2,6 +2,10 @@
 
 # LogoColumns
 
+Backs a claim with two columns of logos that scroll in opposite directions.
+
+## Why it is built this way
+
 A section that backs one claim with the names behind it: a heading, a line, an optional disclaimer and a way onward, beside a wall of logo tiles in two columns that run in opposite directions as the reader scrolls past — one rising, one falling — fading out at the wall's top and bottom edge so the set reads as longer than the space it is shown in.
 
 The reference design's LogoMarquee, renamed for what it is: FeatureSplit's arrangement with a logo wall where the picture goes, rather than a marquee, which is a strip that runs sideways on its own. The movement is the scroll's — it never moves while the page is still, and never for a reader who asked for less motion.
@@ -50,7 +54,7 @@ Apply these classes from the generated `logoColumnsParts` constant rather than w
 
 - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
 - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
-- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
 
 Use when: Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. The dark band is the default, the reference design's: logos are most often drawn as white wordmarks for a dark ground, and a set of them reads as one wall there.
 Never for: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly.
@@ -117,6 +121,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/logorows.md

@@ -2,6 +2,10 @@
 
 # LogoRows
 
+Backs a claim with two rows of logos that slide in opposite directions.
+
+## Why it is built this way
+
 A section that backs one claim with the names behind it, stacked: a heading, a line and a way onward, centred, over two rows of logo tiles across the band's full width that slide sideways in opposite directions as the reader scrolls past — fading out at both of their ends, so the set reads as longer than the band.
 
 LogoColumns' horizontal form, for a page where the claim leads and the logos sign it off: the words over the rows rather than beside a wall. The movement is the scroll's — it never moves while the page is still, and never for a reader who asked for less motion.
@@ -23,7 +27,7 @@ LogoColumns' horizontal form, for a page where the claim leads and the logos sig
 
 LogoRows renders 10 elements. A token binding names the part it applies to.
 
-- `root` — `<section>`, class `dds-logorows`. The section. It paints the ground and the ink to go with it — see `ground` — and asks its own width. A region named by its heading. It clips with `overflow: clip` rather than `hidden`, which would make it a scroll container and freeze the row's scroll-driven movement.
+- `root` — `<section>`, class `dds-logorows`. The section. It paints the ground and the ink to go with it — see `ground` — and asks its own width. A region named by its heading. It clips with `overflow: clip` rather than `hidden`, which would make it a scroll container and freeze the row's scroll-driven movement. 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-logorows__inner`. The measure and the gutter, the same column every band holds its content in, and the step from the words to the rows: space.heading.content.
 - `header` — `<div>`, class `dds-logorows__header`. The heading, the line under it and the way on. Ranged to the start on a phone and centred from the fold, FeatureCards' arrangement.
 - `title` — `<h2>`, class `dds-logorows__title`. The claim the logos back. `h2`, because a section sits under the page's own heading.
@@ -47,13 +51,24 @@ Apply these classes from the generated `logoRowsParts` constant rather than writ
 
 - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
 - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
-- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+- `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
 
 Use when: Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. The dark band is the default, the reference design's: logos are most often drawn as white wordmarks for a dark ground, and a set of them reads as one row there.
 Never for: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly.
 
 And never the brand's own coral, `color.bg.brand`, which is not offered here. That ground belongs to the band that asks a reader to do something — the one place on a page where the brand colour is the point rather than decoration — and a feature section wearing it is a page with two calls to action, one of which does nothing. It is `color.bg.brand-strong` that this offers: the dark brand ground, which is a band breaking a page rather than a band asking for something.
 
+### 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. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide".
@@ -101,6 +116,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.
@@ -210,3 +231,26 @@ import { Link, LogoRows } from '@deriv-com/dds-marketing'
 // ground="subtle"
 <LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} ground="subtle" />
 ```
+
+### 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 { Link, LogoRows } from '@deriv-com/dds-marketing'
+
+// grid on page
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="grid" ground="page" />
+
+// rings on subtle
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="rings" ground="subtle" />
+
+// halftone on strong
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="halftone" ground="strong" />
+
+// aurora on strong
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="aurora" ground="strong" />
+
+// mesh on strong
+<LogoRows title="Trusted by leading platforms worldwide" description="Deposit and withdraw with the payment methods your business already relies on." link={<Link variant="standalone" href="#partners">View all partners</Link>} logos={[{"name":"Visa","src":"/sample-card-image.svg"},{"name":"Mastercard","src":"/sample-card-image.svg"},{"name":"Skrill","src":"/sample-card-image.svg"},{"name":"Neteller","src":"/sample-card-image.svg"},{"name":"Perfect Money","src":"/sample-card-image.svg"},{"name":"Jeton","src":"/sample-card-image.svg"},{"name":"Sticpay","src":"/sample-card-image.svg"},{"name":"Bitcoin","src":"/sample-card-image.svg"},{"name":"Ethereum","src":"/sample-card-image.svg"},{"name":"Tether","src":"/sample-card-image.svg"}]} background="mesh" ground="strong" />
+```

package/.llm/components/menuitem.md

@@ -2,6 +2,10 @@
 
 # MenuItem
 
+One item in a DropdownMenu.
+
+## Why it is built this way
+
 One command in a menu. Pressing it does something and the menu shuts — it holds no value and carries no mark, so there is nothing about it to find on reopening.
 
 It ships ahead of its host, and that is worth saying plainly: its role is menuitem, which means nothing to a screen reader outside an element whose role is menu. On its own it is a row that looks right and announces wrong. DropdownMenu is what makes it a component rather than a fragment, and until that lands this is a contract and a stylesheet waiting for one.
@@ -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.
@@ -175,7 +185,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { MenuItem } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 <MenuItem onSelect={() => { /* your handler */ }} icon={<GlobeRegularIcon />}>English</MenuItem>
 ```
@@ -188,7 +198,7 @@ The rows a marketing menu holds: short labels a reader chooses between, not oper
 
 ```tsx
 import { MenuItem } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // With a mark, for a set read by shape
 <MenuItem onSelect={() => { /* your handler */ }} icon={<GlobeRegularIcon />}>English</MenuItem>

package/.llm/components/navbar.md

@@ -2,6 +2,10 @@
 
 # Navbar
 
+The bar across the top of a marketing page: logo, links and actions.
+
+## Why it is built this way
+
 The bar across the top of a marketing page, and three regions: the mark that says whose site this is, the places the site has, and the things a reader reaches for rather than navigates to — the language, the theme, and what the site wants them to do.
 
 It holds no destinations of its own. What goes in it is the NavbarItems and NavbarMenus a page composes, because a marketing site's navigation is written by the site rather than enumerated by this system, and a component that took an array of routes would be a second router nobody asked for. What this owns is the bar: where it sits, what it is made of, and what happens when it runs out of room.
@@ -298,6 +302,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.
@@ -509,7 +519,7 @@ The language is a NavbarSwitcher in preferences. The theme is a toggle the bar d
 ```tsx
 import { Button, Navbar, NavbarSwitcher, NavbarSwitcherOption } 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'
 
 // Language only
 <Navbar label="Main" menuLabel="Menu" closeLabel="Close" brand={<DerivCoralWordmark />} utilities={<Button size="md" href="/signup">Open account</Button>} preferences={<NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<GlobeRegularIcon />} />}>{navbaritems}</Navbar>

package/.llm/components/navbaritem.md

@@ -2,6 +2,10 @@
 
 # NavbarItem
 
+One link in the Navbar.
+
+## Why it is built this way
+
 One place the site has, in the bar across the top of it. An anchor with a target around it, a mark for the section the reader is currently in, and nothing else.
 
 It exists rather than a Link being reused because a destination in a navigation bar carries something a Link cannot: which one the reader is on. That is `aria-current`, a target big enough to hit, and a resting shape the current one fills in — none of which belongs on the component a page also uses in the middle of a sentence. A Link is prose that leads somewhere; this is furniture.
@@ -121,6 +125,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/navbarmenu.md

@@ -2,6 +2,10 @@
 
 # NavbarMenu
 
+A Navbar item that opens a wide panel of links.
+
+## Why it is built this way
+
 A destination in the bar that opens rather than goes: a named trigger, and a wide panel beneath it holding the section's own destinations in columns, usually with something promotional beside them.
 
 It is a button and not a link, which is the whole of why it is a component rather than a NavbarItem with extra parts. Pressing it reveals something on the page the reader is already on — no navigation, no history entry, and the back button has nothing to undo. An item that opened a panel while claiming to be a link would be wrong to the browser, to the back button and to every assistive technology at once.
@@ -187,6 +191,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/navbarmenugroup.md

@@ -2,6 +2,10 @@
 
 # NavbarMenuGroup
 
+A titled list of links inside a NavbarMenu panel.
+
+## Why it is built this way
+
 A named handful of destinations inside a section's panel: a word over a short list, so a reader scanning a panel of twenty links is reading four sets of five rather than twenty of anything.
 
 The word is the whole point and it is not a heading. A panel opens inside a navigation landmark on a page that already has its own outline, and a heading element here would insert a level into that outline for something the reader never sees in the document — so what this draws is a label, and what it gives assistive technology is a named group. The two say the same thing by different means, which is the arrangement a panel like this has to reach for.
@@ -87,6 +91,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/navbarpanel.md

@@ -2,6 +2,10 @@
 
 # NavbarPanel
 
+The full site navigation for screens too narrow for the Navbar.
+
+## Why it is built this way
+
 The whole of a site's navigation at a width the bar cannot hold it: the mark and a way out across the top, the destinations down the middle, whatever the site wants across the foot.
 
 It is a surface that covers the page, and three things follow from that which nothing about its appearance suggests — focus is held inside it, Escape closes it, and the document beneath holds still. Those are why it is a component rather than a stretch of markup a page writes, and they live in a hook beside it that a site building its own covering surface can reach for.
@@ -157,6 +161,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/navbarswitcher.md

@@ -2,6 +2,10 @@
 
 # NavbarSwitcher
 
+Sets a site preference from the Navbar, such as language or theme.
+
+## Why it is built this way
+
 Something a reader sets rather than somewhere they go: the language the page is read in, the region its prices are in, the theme it is drawn in. It sits in a navigation bar beside the destinations and takes two quite different forms depending on where it is drawn.
 
 In the bar it is a trigger and a menu hanging off it. In the collapsed panel it is a row that opens a page of its own, with a way back — because a menu inside a surface that already covers the screen is a surface inside a surface, and because a phone has room to show sixteen languages properly only if it stops showing everything else.
@@ -146,6 +150,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.
@@ -223,7 +233,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { NavbarSwitcher, NavbarSwitcherOption, Icon } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>
   <NavbarSwitcherOption current onSelect={() => { /* your handler */ }}>English</NavbarSwitcherOption>
@@ -244,7 +254,7 @@ import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
 ```tsx
 import { useState } from 'react'
 import { NavbarSwitcher, NavbarSwitcherOption, Icon } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // NavbarSwitcher holds nothing: open is the consumer's, and it does not move until
 // the value handed back by onOpenChange is written to it.
@@ -296,7 +306,7 @@ The container decides, not the page. In a bar the choices hang off the trigger;
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // floating — in the bar
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>} open>{navbarswitcheroptions}</NavbarSwitcher>
@@ -311,7 +321,7 @@ The trigger shows the choice in force rather than the name of the question — a
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // At rest — a mark and the current choice
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>{navbarswitcheroptions}</NavbarSwitcher>
@@ -326,7 +336,7 @@ Only the tints move. The words take the ink around them either way, which is how
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // default — a light bar
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>{navbarswitcheroptions}</NavbarSwitcher>
@@ -341,7 +351,7 @@ Off by default, because a switcher usually stands among destinations that each c
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // Without — among sections that have their own
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>{navbarswitcheroptions}</NavbarSwitcher>

package/.llm/components/navbarswitcheroption.md

@@ -2,6 +2,10 @@
 
 # NavbarSwitcherOption
 
+One choice in a NavbarSwitcher, such as a language or theme.
+
+## Why it is built this way
+
 One choice inside a NavbarSwitcher: a language, a region, a theme. A button rather than a link — choosing one changes how the page is drawn or worded, which is not navigation and must not carry an href, a history entry or anything for the back button to undo.
 
 It says which one is current. That is the whole reason this is a component rather than a MenuItem: a set of choices where the one in force is not marked is a set a reader has to remember the answer to, and the mark has to be readable as well as coloured — `aria-current` carries it for a reader who cannot see the ink.
@@ -70,6 +74,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/option.md

@@ -2,6 +2,10 @@
 
 # Option
 
+One choice in a list that opens from a control.
+
+## Why it is built this way
+
 One answer on offer inside a control that opens a list. It knows what it is worth and what to call itself, and nothing about where it sits — whether it is the answer, whether the arrow keys are on it, and how tall to be are all passed down, because only the control can see the set. One row for every such control rather than one per control: what differs between one chip and the next is the trigger, never the row.
 
 ## Use when
@@ -108,6 +112,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.
@@ -230,7 +240,7 @@ For a set the reader knows by sight, where recognising beats reading. It takes t
 
 ```tsx
 import { Option } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, CoinsRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, CoinsRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // A glyph the answer is known by
 <Option value="forex" leadingIcon={<ChartCandlestickRegularIcon />}>Forex</Option>

package/.llm/components/pageheader.md

@@ -2,6 +2,10 @@
 
 # PageHeader
 
+Opens a company or legal page with its title and one line of context.
+
+## Why it is built this way
+
 The band that opens a company or a legal page: the page's name, a line saying what it is, and nothing else.
 
 The third of three opening bands and the only one that is not a hero. It is capped rather than a screen tall, which is the whole difference — a reader arrives at Contact or Terms for the content, and a full-height band would be a wall in front of the first sentence.
@@ -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.

package/.llm/components/pagination.md

@@ -2,6 +2,10 @@
 
 # Pagination
 
+Moves the reader through a set too large to show at once.
+
+## Why it is built this way
+
 The control that moves a reader through a set too large to show at once. It sits beneath the index, archive or card set it governs, reports where in the sequence the reader stands, and offers the ways out of it — a step either side, a numbered target under one variant, a row of marks under another.
 
 What separates this from product's is what a press is. A page of an index has an address of its own: page two of a blog is a place, and one a search engine has to be able to reach, so the numbered variant draws links and is given the URL of each page. A slide in a carousel is not a place and has no address, so its marks are buttons and the page handles the press. That is not a setting to choose — it is which variant you reached for, and the two cases arrive at different ends of this component.
@@ -151,6 +155,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.