@deriv-com/dds-marketing 1.0.0 → 1.0.2

package/.llm/components/searchinput.md

@@ -133,7 +133,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/segmentedcontrol.md

@@ -147,7 +147,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/segmentedcontrolitem.md

@@ -128,7 +128,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/select.md

@@ -268,7 +268,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/selectchip.md

@@ -153,7 +153,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/spinner.md

@@ -94,7 +94,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/stack.md

@@ -117,7 +117,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/statusdot.md

@@ -81,7 +81,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/subdomainnavbar.md

@@ -169,7 +169,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tab.md

@@ -39,7 +39,7 @@ Tab renders 7 elements. A token binding names the part it applies to.
   
   It takes the same ink as the label and changes with it, so a current tab is current in both. The size is Icon's: the tab hands it `sm` and an Icon arriving already sized is unwrapped rather than obeyed.
   
-  Solid when current and regular otherwise, which this component cannot do for you — a Quill glyph's weight is fixed at the import. That is the package's `icon-solid-marks-selection` rule, and it is a rule rather than an axis for exactly that reason. Rendered only when `icon` is set.
+  Solid when current and regular otherwise, which this component cannot do for you — a Quill glyph's weight is fixed at the import. That is the package's `icon-weight-within-a-set` rule — the tabs are the set — and it is a rule rather than an axis for exactly that reason. Rendered only when `icon` is set.
 - `label` — `<span>`, class `dds-tab__label`. The words, and where selection is actually carried. The ink steps from `fg.muted` to `fg.default` and the weight from `font.body.md` to `font.label.md` — 400 to 600.
   
   Product steps 400 to 500, because Product's type set has a medium. This one does not: Marketing has one weight per role and `label` is 600 throughout, so the step here is the larger of the two. It is the same decision — the current tab is heavier — landing on the only weight the package owns.
@@ -94,7 +94,7 @@ Never for: A sentence. The strip is scanned across, and a tab as wide as a claus
 Accepts: QuillSystemIcon
 Use when: The tabs are things a mark tells apart faster than a word does — a platform, a market class. Pass the glyph; the tab draws it at its own step.
 
-Solid when the tab is current and regular otherwise, which is the package's `icon-solid-marks-selection` rule. Nothing here can enforce it: a Quill glyph's weight is chosen at the import, so a page that wants the swap passes a different glyph per state
+Solid when the tab is current and regular otherwise, which is the package's `icon-weight-within-a-set` rule. Nothing here can enforce it: a Quill glyph's weight is chosen at the import, so a page that wants the swap passes a different glyph per state
 Never for: Carrying the label. A tab whose meaning is a shape is a tab a screen reader reads as nothing, and the words are what the strip is scanned by
 
 ### badge — `node` **Required when content=badge.**
@@ -150,7 +150,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/table.md

@@ -162,7 +162,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tablebody.md

@@ -73,7 +73,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tablecell.md

@@ -99,7 +99,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tablehead.md

@@ -83,7 +83,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tableheadercell.md

@@ -143,7 +143,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tablerow.md

@@ -99,7 +99,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tablist.md

@@ -96,7 +96,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/testimonialrow.md

@@ -122,7 +122,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/testimonialslider.md

@@ -116,7 +116,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/textarea.md

@@ -173,7 +173,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/textinput.md

@@ -226,7 +226,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/tooltip.md

@@ -117,7 +117,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/components/typography.md

@@ -90,7 +90,7 @@ This is the phone's breakpoint, size.breakpoint.md, and not the wider one that d
 
 What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
   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, Input and Switch simultaneously.
+- **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 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.
 

package/.llm/digest/background.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from background.contract.json. Do not edit. -->
+
+# Background
+
+A ground a section or a block sits on, painted with a pattern rather than a flat fill — a halftone, an aurora, a rule grid or rings. …
+
+`import { Background } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A band that has to stand apart from the page around it with more than a change of fill — the opening of a landing page, a call to action, a section that closes a long page …
+- A dark band that would otherwise be a flat slab. The glow gives it a centre for the eye, which is where the band's heading or its action should sit
+- A light page that wants one moment of brand colour without a coral block: the dots carry the colour at a fraction of the area a fill would
+
+## Something else, when
+
+- The band only needs separating from the page around it → **nothing in this system does this**
+- The ground is a picture or a video → **AspectRatio**
+
+## Never
+
+- Carrying meaning. The pattern is hidden from assistive technology and reads differently on every screen size, so nothing a reader needs may depend on it — not a highlight, not a direction, not a state
+- Behind long reading. Dots behind a paragraph are texture under every word, and the brightest of them sit exactly where the eye is reading; put prose on a plain ground and keep this for the band that opens or closes it
+- Two in a row. Adjacent patterned bands lose the edge between them, and the reader sees one long busy surface rather than two sections
+- A card, a panel or any surface smaller than a band. At a few hundred pixels the glow has nowhere to fall off to, and the dots read as noise rather than light
+
+## Props
+
+- **tone** `enum` · default "dark" — Which ground the dots are drawn on. It sets the flat colour under the pattern, the dots' ink — coral on the dark and light grounds, white on the coral one — and the ink of what sits on it
+  - `dark` — The default, and the band the pattern was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. …
+  - `light` — Coral dots on the page's own ground, for a light page that wants one moment of brand colour without a solid coral band. …
+  - `brand` — White dots on the coral brand fill, for a call to action standing on it. …
+  - never: Matching the page's colour mode. Dark is dark in both modes — a band that should invert with the theme is a plain section on color.bg.page, not this
+- **pattern** `enum` · default "halftone" — Which pattern is drawn. The halftone is the default and the one that moves most; the aurora drifts slowly; the grid and the rings are the quietest, their lines rising and spreading at a band's pace. …
+  - `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it. The default, and the one that moves most
+  - `aurora` — Broad soft pools of the brand's colour rising from the band's foot and drifting slowly into one another — light as colour rather than as points. Drawn by the stylesheet: no canvas. …
+  - `grid` — A fine rule grid of hairlines, fading in towards the band's foot — the grid PageHeader paints, offered for any band. Drawn by the stylesheet: no canvas. …
+  - `rings` — Hairline circles spreading out from the middle of the band's foot, fading in towards it, at size.rings.pitch. Drawn by the stylesheet: no canvas. …
+  - never: Choosing per breakpoint. A pattern is the band's identity; one that changed between a phone and a desk would be two bands
+- **animated** `boolean` · default true — On by default: every pattern moves slowly at rest, whether or not anybody is pointing at it — the halftone's glow and the aurora's pools drift along the band's foot, the grid's rules rise and the rings spread outward, each over motion.duration.drift. …
+  - never: Holding still for readers who asked for less motion. Every pattern already holds still for them, whatever this says; this is the page's choice, not the reader's
+- **interactive** `boolean` · default true — On by default: the pattern answers a pointer over the band. …
+  - never: Guiding the reader to something. The glow follows the pointer rather than leading it, holds still on touch screens and for readers who asked for less motion, and so can point at nothing anybody can rely on
+
+## Inside it
+
+- 1 component is refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, canvas, content.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/background.md`.

package/.llm/digest/ctabanner.md

@@ -33,6 +33,10 @@ A full-bleed coral band carrying one short promotion and the action it asks for
   - never: A paragraph. A banner is read at a glance, on the way down a page; copy a reader has to work through is copy they scroll past
 - **actions** `node` · optional — The one action the message asks for, or two at most. …
   - never: A third action, or a primary Button: coral on the coral ground is a button nobody can see
+- **background** `enum` · optional — The band is the page's one standout moment and wants more than a flat fill. Leave it out and the band is its flat ground, as it always was
+  - `halftone` — A halftone drawn behind the band's content: white dots on the band's own coral, following the pointer over the band. …
+  - `grid` — A fine rule grid behind the band's content: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. …
+  - never: More than one band on a page. The pattern is what makes a band the one a reader remembers, and two of them make neither
 
 ## Inside it
 

package/.llm/digest/ctabannerslider.md

@@ -34,6 +34,9 @@ CtaBanner's layout with a slider in it: the same full-bleed coral band, rotating
 - **label** `string` · default "Promotions" — The name the banner is announced by — a region a screen reader can jump to and skip. Name what it holds, not that it is a banner: 'Promotions', 'Offers'. Translate it with the page
 - **controlsLabel** `string` · default "Slides" — The name the dots are announced by, as a group inside the banner. Its own name rather than the banner's, so a screen reader moving into the dots hears what they are rather than 'Promotions' a second time. …
 - **slideLabel** `string` · default "Slide" — The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English
+- **background** `enum` · optional — The band is the page's one standout promotion and wants more than a flat fill. Leave it out and the band is its flat coral, as it always was
+  - `grid` — A fine rule grid behind the slides: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. …
+  - never: More than one patterned band on a page. The pattern is what makes a band the one a reader remembers, and two of them make neither
 
 ## Inside it
 

package/.llm/digest/illustrationcard.md

@@ -0,0 +1,46 @@
+<!-- GENERATED from illustrationcard.contract.json. Do not edit. -->
+
+# IllustrationCard
+
+A pane of glass holding a piece of product information — a market's price, a balance, a status — in one of three shapes, used as a picture: laid over a photograph or a piece of art, or standing on its own as the image a section shows beside its words. …
+
+`import { IllustrationCard } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Product information laid over a photograph or a piece of art — a market's price and status over a picture of a trader, a balance over a device
+- A standalone image of the product beside a section's words, where a screenshot would be too literal: the pane is the picture the section shows
+- Several such pictures across a site that have to agree in shape and surface without each page deciding
+
+## Something else, when
+
+- A section has content to present — features, benefits, steps, a list → **FeatureCards**
+- The content is something a reader acts on — a link, a form, a set of options → **Card**
+- There is only a photograph → **AspectRatio**
+
+## Never
+
+- A section's content. Headings, descriptions, features and lists belong in the section's own blocks and type; a pane of them reads as a picture, and a reader skims past what the page meant them to read
+- A container for anything other than product information — a quote, a call to action, a form, navigation. It is an illustration of the product and nothing else
+- Live readings presented as a picture. What the pane shows is illustrative — a price, a status drawn to explain — and a reader takes a number in it at face value; anything relied on belongs in the page's text
+- Any other shape. The three ratios are the whole of the choice, so every picture on a site agrees; one that needed a fourth is a different component
+- A real interface a reader is meant to operate. The pane makes everything in it inert — a button in it is a picture of a button — so anything a reader must press belongs outside it, in the section's own actions
+
+## Props
+
+- **ratio** `enum` · default "landscape" — The panel's shape. One of three, so panels across a site agree
+  - `landscape` — Four by three, and the default. For a panel beside words in a wide section
+  - `square` — One by one. For a grid of panels, or a column no wider than it is tall
+  - `upright` — Three by four. For a phone, or a narrow column beside a tall run of words
+  - never: Fitting a particular piece of UI. The shape is a decision about the layout; the UI is laid out for it
+- **label** `string` · required — Always. What the picture shows, in a sentence — "Trade ticket: buy Gold to rise over 5 minutes, staking 10 USD". The pane is one image to assistive technology and this is its whole description; nothing inside it is read out on its own
+  - never: A title or a caption the page shows. It is never drawn; a heading the reader sees belongs to the section beside the picture
+
+## Inside it
+
+- 2 components are refused inside it; the list and the reasons are in the long document.
+- Renders 2 parts: root, content.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/illustrationcard.md`.

package/.llm/digest/illustrationscene.md

@@ -0,0 +1,51 @@
+<!-- GENERATED from illustrationscene.contract.json. Do not edit. -->
+
+# IllustrationScene
+
+A photograph with an IllustrationCard laid over it — the product shown in the hands of the people who use it: a trade ticket over a trader on the move, a balance over someone at a desk. …
+
+`import { IllustrationScene } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Product information shown over a photograph — a trade ticket, a balance, a market's status — where the photograph sets the scene and the card says what the product does …
+- A hero or a feature section needs a picture of the product in use rather than a screenshot or a photograph alone
+
+## Something else, when
+
+- The card stands on its own, with no photograph behind it → **IllustrationCard**
+- There is only a photograph → **AspectRatio**
+
+## Never
+
+- A section's content. Like the card it holds, the scene is a picture of the product, and what a section says belongs in its own blocks
+- More than one card over one photograph. A second card is a second picture competing for the same eye; two scenes side by side say two things clearly
+- A photograph whose subject sits where the card goes. The card covers the middle of the frame, or one side of it with `placement`; choose or crop the photograph so the person or the object stays clear of it
+
+## Props
+
+- **ratio** `enum` · default "square" — The scene's shape. One of three, the same three IllustrationCard takes, so scenes and cards across a site agree
+  - `landscape` — Four by three. A scene beside words in a wide section; the card takes a little under half the width
+  - `square` — One by one, and the default — the shape most such scenes are drawn in. The card takes a little over half the width
+  - `upright` — Three by four. A scene on a phone or in a narrow column; the card takes most of the width
+  - never: Fitting a particular photograph. The shape is a decision about the layout; the photograph is chosen or cropped for it
+- **placement** `enum` · default "center" — Where the card sits over the photograph, so the subject of the photograph stays clear of it
+  - `center` — The default: the card in the middle of the frame. For a photograph whose subject frames the middle — a person looking down at what the card shows
+  - `start` — The card towards the start edge, for a photograph whose subject is at the end
+  - `end` — The card towards the end edge, for a photograph whose subject is at the start
+  - never: Anything but keeping the photograph's subject clear. The card's size is fixed by the shape; placement moves it and nothing else
+- **src** `string` · required — Always. The photograph the scene is set in
+  - never: A data URI holding a photograph. A scene's photograph is the heaviest thing on its page and belongs in a file the browser can cache
+- **alt** `string` · default "" — Empty by default, because the card's `label` describes the whole picture and the photograph is decoration. Write one only where the photograph says something the label does not
+  - never: Repeating the card's label. A screen reader would hear the picture described twice
+
+## Inside it
+
+- Takes only IllustrationCard.
+- At least 1, at most 1 — fewer is not this component and more is a different one.
+- 2 components are refused inside it; the list and the reasons are in the long document.
+- Renders 2 parts: root, image.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/illustrationscene.md`.

package/.llm/digest/landinghero.md

@@ -42,6 +42,13 @@ The band that opens a main landing page: the one thing the page is about, said o
   - never: The background. A photograph filling the band is `backgroundImage`; this sits in front of it and is placed against the band's edge
 - **backgroundImage** `string` · optional — A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it
   - never: A flat colour, or a bright photograph. The band already paints its ground, and nothing here darkens an image on the page's behalf — a pale one leaves the claim unreadable
+- **background** `enum` · optional — The band is the page's one standout moment and wants more than a flat fill. Leave it out and the band is its flat ground, as it always was
+  - `halftone` — A halftone drawn behind the band's content: coral dots blending to white at the glow's heart, on the band's own dark ground, following the pointer over the band. …
+  - never: More than one band on a page. The pattern is what makes a band the one a reader remembers, and two of them make neither
+
+## The type refuses
+
+- background="halftone" with backgroundImage="*" — Two grounds on one band: the photograph would paint over the pattern, or the pattern over the photograph. A hero is a picture or a pattern, never both
 
 ## Inside it
 

package/.llm/digest/pageheader.md

@@ -38,6 +38,9 @@ The band that opens a company or a legal page: the page's name, a line saying wh
   - never: A paragraph. It is held to a readable measure and set at body size; past a couple of sentences a reader scrolls rather than reads, and the actions go under the fold
 - **actions** `node` · optional — The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site
   - never: A row of destinations. Three or more controls under a title is a menu, and a reader who has to choose between five things chooses none
+- **background** `enum` · optional — The band is the page's one standout moment and wants more than a flat fill. Leave it out and the band is its flat ground, as it always was
+  - `halftone` — A halftone drawn behind the band's content: coral dots blending to white at the glow's heart, on the band's own dark ground, following the pointer over the band. …
+  - never: More than one band on a page. The pattern is what makes a band the one a reader remembers, and two of them make neither
 
 ## Inside it
 

package/.llm/index.md

@@ -9,6 +9,8 @@ need — loading all of them dilutes the relevant one.
 Paths here are from the package root, so they resolve whether this file is read in place
 or its content handed over on its own.
 
+Sections: Core (54) · Layout (5) · Blocks (14)
+
 
 ## Core
 
@@ -19,6 +21,7 @@ Domain-neutral building blocks.
 | Component | Use when | Not for |
 |---|---|---|
 | AccordionItem | One row inside an Accordion — every row of a set is one of these · A single disclosure with no set around it: one topic whose detail is worth offering and not worth showing. The row is whole on its own, and it keeps its own open state when nothing is injecting one | The heading goes somewhere rather than opening something → `CardButton` |
+| Background | 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 band only needs separating from the page around it → nothing here · The ground is a picture or a video → `AspectRatio` |
 | Badge | One of a set is the one the page wants read first — the plan most people choose, the market most people start with · Something is new or has changed, and saying so is worth a word rather than a sentence · A number the page is promoting is worth marking as a saving rather than left in the copy — a percentage off, a period free | What it says is a state the reader's account is in → nothing here · The words are the point rather than the mark → `CardBody` |
 | Breadcrumb | The page sits inside a section hierarchy, and the levels above it are places the visitor can navigate to — a product page inside a markets section, a blog post inside a category · A visitor who arrived by search, social link or campaign URL needs to learn where they landed and how the site is organised around them | The visitor is moving through the stages of a sign-up or onboarding flow rather than standing in a hierarchy → nothing here · There is exactly one place to go back to, and it is the previous page rather than a parent section → nothing here |
 | BreadcrumbItem | Rendering one level of a Breadcrumb — every level in a trail is one of these · The level needs a short name the visitor recognises as a place: the section name, not a sentence about it | The destination is somewhere the visitor goes to act rather than a level they climb back to → nothing here |
@@ -32,6 +35,8 @@ Domain-neutral building blocks.
 | DropdownMenu | A set of destinations too long for the navigation bar and too short to be a page of its own — languages, regions, the parts of a long index · The set is short enough to read at a glance, where a visitor is choosing rather than searching | The set reports a choice the visitor should find marked when they return → nothing here · The destinations belong in the page's navigation → nothing here · It is one destination rather than one of a set → nothing here · The set is long enough that a visitor would rather type than read → nothing here |
 | FooterGroup | A set of a footer's destinations belong under one word — Markets, Support, Legal · The footer has enough links that a reader scanning it needs sets rather than a list | The destinations are the ones a visitor most likely wants → `Navbar` · The group is a named set inside a navigation panel → `NavbarMenuGroup` · There is one link rather than a set → `Link` |
 | Icon | A glyph stands beside words to speed recognition — a mark on a feature card, a chevron on a row, a separator in a trail · A page is composing something a component offers a slot for, and the slot takes a mark rather than a component that draws one | The mark identifies a company or a product — a payment method, an app store, a social network → `Logo` *(not built yet)* · The artwork is a scene rather than a symbol → `Illustration` *(not built yet)* |
+| IllustrationCard | Product information laid over a photograph or a piece of art — a market's price and status over a picture of a trader, a balance over a device · A standalone image of the product beside a section's words, where a screenshot would be too literal: the pane is the picture the section shows · Several such pictures across a site that have to agree in shape and surface without each page deciding | A section has content to present — features, benefits, steps, a list → `FeatureCards` · The content is something a reader acts on — a link, a form, a set of options → `Card` · There is only a photograph → `AspectRatio` |
+| IllustrationScene | Product information shown over a photograph — a trade ticket, a balance, a market's status — where the photograph sets the scene and the card says what the product does · A hero or a feature section needs a picture of the product in use rather than a screenshot or a photograph alone | The card stands on its own, with no photograph behind it → `IllustrationCard` · There is only a photograph → `AspectRatio` |
 | Link | A term inside running copy has a page of its own — a market named in a paragraph, a fee mentioned in a sentence, a product referred to in passing · The page must offer a destination without pushing it: terms, a full fee schedule, a regulatory notice. A pill would give it the weight of the thing the page is actually asking for · A second destination beside the call to action, where a second pill would be two things asking to be pressed and a reader would have to choose between them before reading either | The destination is the step the page was built to produce → `Button` · Pressing it does something on this page rather than going somewhere → nothing here · The whole card or panel is the target rather than some words in it → `CardButton` |
 | MenuItem | A row in a menu of destinations — a language, a region, a page number an index skipped · A set short enough to read at a glance, where a reader is choosing rather than searching | The row reports a choice the reader should find marked when they return → nothing here · The destination belongs in the page's navigation → nothing here · It is one action rather than one of a set → nothing here |
 | NavbarItem | A section of the site, in a Navbar — the ordinary case and what this is for · A destination that leaves the site, which it marks as a change of context rather than leaving the reader to find out · The same destination inside the panel a narrow bar collapses into: a page writes its navigation once, and what changes with the width is how it is drawn | The destination opens a panel of further destinations rather than going somewhere → `NavbarMenu` · The destination is a phrase inside a sentence, or a call to action beneath a paragraph → `Link` · The item is one of a set of alternatives rather than a place → `Tab` |
@@ -78,6 +83,7 @@ Domain-neutral building blocks.
 ## Layout
 
 Arrange other components and decide no appearance of their own.
+
 | Component | Use when | Not for |
 |---|---|---|
 | AspectRatio | A picture whose proportions have to match the ones beside it — a row of cards, a grid of markets, a set of logos. One shape asked for once is what keeps a row from settling on whichever image is tallest · Room that must be reserved before the thing filling it arrives — art loaded late, an embed, anything fetched. The box is the right height from the first paint, so the page under it never moves · An embed that brings its own proportion and no height — a video, a map, a third-party frame. The ratio is the only way to give it one without guessing a pixel measure that is wrong at some width | The picture is the media region of a card → `CardBody` · The thing inside has a size of its own and should keep it → nothing here · The shape changes with the viewport → nothing here |
@@ -89,6 +95,7 @@ Arrange other components and decide no appearance of their own.
 ## Blocks
 
 The sections a page is built from, and the rhythm between them.
+
 | Component | Use when | Not for |
 |---|---|---|
 | CtaBanner | A short, high-contrast promotion with one clear action — open an account, start trading, download the app · The band that closes a page, or breaks a long one, on the action the page exists to produce | Two or three promotions to rotate between → `CtaBannerSlider` · The band that opens the page → `LandingHero` · A message that needs a picture beside it → `FeatureSplit` |