@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/.llm/digest/button.md

@@ -31,7 +31,7 @@ Triggers the one action a section asks for, such as signing up
   - `lg` — A hero, or a full-width conversion band that is the only control in view. …
 - **tone** `enum` · default "default"
   - `default` — The page's own ground, which sets the ink this component was drawn against — every button on a white page
-  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a hero, a navigation bar at the top of one, a footer — which is the same near-black in light and dark. …
+  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a hero, a navigation bar at the top of one, a footer — which is near-black in light and dark alike — slate.900 in light, a step deeper in dark. …
   - `brand` — The control stands on the coral band, color.bg.brand — CtaBanner and CtaBannerSlider — which is the same coral in light and dark, so nothing on it switches either. …
 - **href** `string` · optional — The press goes somewhere with a URL of its own — the ordinary case for a call to action on a marketing page. It makes this an anchor rather than a button, which is what gives a visitor cmd-click, a visible destination and a copyable link. …
   - never: A placeholder while the destination is undecided — a # or an empty string is a control that looks live, takes focus and goes nowhere. Nor javascript: or a handler dressed as a URL: leave href out and pass onClick, and this renders a button that does the work in place

package/.llm/digest/buttonicon.md

@@ -43,7 +43,7 @@ Triggers an action with an icon alone
   - never: Making one of a set stand out. Two of these side by side at different steps read as a control and its afterthought, and a carousel whose next is larger than its previous has said the path runs one way
 - **tone** `enum` · default "default"
   - `default` — The control is on a light ground, which is every surface this package paints by default
-  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is the same near-black in light and dark. …
+  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is near-black in light and dark alike — slate.900 in light, a step deeper in dark. …
 - **icon** `node` · required — Always — the glyph is the whole control, so it is required rather than a slot that may be empty. …
   - never: A glyph whose meaning the visitor has to be taught, and never a second glyph — one control, one action, one shape. …
 - **label** `string` · required — Always. It is the entire accessible name, because nothing on screen carries one — the words that would have been the label if there had been room for one. …

package/.llm/digest/documentlink.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from documentlink.contract.json. Do not edit. -->
+
+# DocumentLink
+
+One document a reader can open or save: its mark, its title, and an optional second link beside it
+
+`import { DocumentLink } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A document on a legal, regulatory or help page — a policy, a key information document, a licence, a form
+- Many documents of one kind, listed or laid in a grid inside a Documents block
+
+## Something else, when
+
+- One to four related pages or documents at the end of a section → **ResourceBanner**
+- A link inside a sentence, or a page rather than a document → **Link**
+
+## Never
+
+- Navigation between pages of the site. A document chip says a file is behind it
+- A document whose title alone does not say which it is. Two chips both reading "Key information document" are the same chip twice
+
+## Props
+
+- **variant** `enum` · default "chip" — How much the document stands out from the page around it
+  - `chip` — The default: the document on a surface of its own, for a list of documents grouped under headings
+  - `plain` — The mark and the title on the page itself, for a grid of many short entries — a licence per country, each behind its flag
+  - never: Mixing the two in one list. A list is one kind of thing; chips beside plain entries read as two
+- **href** `string` · required — Always. Where the document is: a URL, usually a PDF
+  - never: A page on the site. A page is a Link
+- **external** `boolean` · default false — The document is hosted off the site — opens in a new tab, and its accessible name ends with `externalLabel`
+  - never: A document on this site, which opens in place
+- **download** `boolean` · default false — The link saves the file rather than opening it — its accessible name ends with `downloadLabel`
+  - never: A document a browser opens to read, which most PDFs are. A file on another site. Browsers ignore `download` across origins and open the file instead, so the name would promise a download that does not happen; such a file is `external`
+- **mark** `node` · optional — What kind of document it is, as a glyph — FilePdfSolidIcon for a PDF, FileShieldSolidIcon for a policy, or a country's flag from `@deriv-com/dds-marketing/icons/flag` (`MaltaIcon`, `GermanyIcon`) for one country's licence. …
+  - never: Saying what the title does not. The mark is decoration and is never read out
+- **action** `node` · optional — A second link beside the document — "Choose language" — drawn at the far end of the row as its own target
+  - never: A second document. Each document is its own DocumentLink
+- **externalLabel** `string` · default "(opens in a new tab)" — What an external document's accessible name ends with. Never drawn. Translate it with the page
+  - never: Anything a sighted reader needs; it is never shown
+- **downloadLabel** `string` · default "(downloads a file)" — What a download's accessible name ends with. Never drawn. Translate it with the page
+  - never: Naming the file's format, which belongs in the title where it matters
+
+## Inside it
+
+- Takes only text.
+- Renders 5 parts: root, link, mark, title, action.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/documentlink.md`.

package/.llm/digest/documents.md

@@ -0,0 +1,51 @@
+<!-- GENERATED from documents.contract.json. Do not edit. -->
+
+# Documents
+
+A section of documents to open or save — grouped under headings that expand, or laid in a grid beside its heading
+
+`import { Documents } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A legal or regulatory page's documents — key information documents grouped by product, policies, terms
+- A document per country, region or entity, each behind its flag or mark — `layout="grid"`
+- Any list of more documents than a ResourceBanner's four
+
+## Something else, when
+
+- One to four documents or pages at the end of a section → **ResourceBanner**
+- Questions and their answers → **FaqAccordion**
+
+## Never
+
+- Documents the reader must see before acting — a risk warning on the page it governs. A folded group is one most readers never open
+- Navigation between the site's pages. Each entry is a document; a page is a Link
+- Mixing the two shapes in one section. Groups of chips beside a grid of flags is two sections
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice — the reference design's slate FAQ. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left
+- **layout** `enum` · default "groups" — How the documents are laid out: grouped under headings, or as one grid of entries
+  - `groups` — The default: the documents under headings that expand, one group open at a time — AccordionItem children, each holding DocumentLink chips, two to a row from the fold. …
+  - `grid` — Many short entries of one kind — a document per country, each behind its flag — DocumentLink children with `variant="plain"`, in a grid beside the heading from 62rem and under it below. …
+  - never: Choosing by how many documents there are alone. Groups are for documents of different kinds; a grid is for many of one kind
+- **title** `string` · required — Always. What the documents are, in a few words — "Regulatory documents", "Licences by country". It names the section
+  - never: A sentence. The line under it says more
+- **description** `string` · optional — A line under the heading saying what the documents are for or who they apply to
+  - never: Instructions a reader must follow; they belong on the page the documents govern
+
+## Inside it
+
+- Takes only AccordionItem, DocumentLink.
+- At least 1, no ceiling — fewer is not this component and more is a different one.
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, title, header, description, body, list, item.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/documents.md`.

package/.llm/digest/downloadbanner.md

@@ -26,7 +26,7 @@ Promotes the app with a heading and links to each app store
 - **ground** `enum` · default "page" — Which of the page's grounds the section paints, and with it the card's fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band — TestimonialRow's three and the reference design's light, light-2 and dark. …
   - `page` — The default, and the page's own white. The card is the recessed gray that sets it off — the reference design's light-2
   - `subtle` — The grey band, with the card white on it — the reference design's light. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
-  - `strong` — `color.bg.brand-strong`, the dark band, with the card at color.bg.surface-card-strong and white words on it — the reference design's dark. …
+  - `strong` — `color.bg.brand-strong`, the dark band, with the card at color.bg.surface-card-strong-on-brand-strong and white words on it — the reference design's dark. …
   - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left
 - **variant** `enum` · default "standard" — How much the banner asks for. The standard card sits with the page; the featured card is the page's moment for the app, and one per page
   - `standard` — The default: the card in the ground's own fill, quiet beside the sections around it — the reference design's banner

package/.llm/digest/featurecards.md

@@ -30,6 +30,13 @@ A heading over a grid of feature cards
   - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
   - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. …
   - never: 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. …
+- **background** `enum` · optional — The page's one patterned band, between its hero and its closing call to action — a band a reader should stop at. …
+  - `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
+  - never: 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. …
 - **title** `string` · required — Always. What the cards are, in the fewest words that name them — "Why trade with Deriv", "Markets you can trade"
   - never: A sentence. The line under it is for the sentence
 - **description** `string` · optional — A line saying what the set has in common, when the title alone does not

package/.llm/digest/featuretabs.md

@@ -0,0 +1,50 @@
+<!-- GENERATED from featuretabs.contract.json. Do not edit. -->
+
+# FeatureTabs
+
+A section that shows one version of something at a time behind tabs — a heading, a strip of tabs, and the content of the one selected
+
+`import { FeatureTabs } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Several versions of one thing a reader takes one at a time — a product's trade types, a platform's apps, the account types
+- A section whose versions each need a picture, a line and a way onward, and only one is worth showing at once
+
+## Something else, when
+
+- One claim and one picture, with nothing to list → **FeatureSplit**
+- Two or three plans or account types compared feature by feature → **ComparisonCards**
+- Showing the same section's content for a monthly or a yearly price → **TabList**
+
+## Never
+
+- Content a reader needs all of. Only one tab is on the page at a time, and most readers never open the others
+- Small print the reader must see. The footnote is the last thing read
+- More than six tabs. A strip longer than that scrolls, and a reader stops reading it
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice — the reference design's slate FAQ. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left
+- **title** `string` · required — Always. What the versions are of, in a few words — "Types of digital options". It names the section and the tabs
+  - never: A sentence. The line under it says more
+- **description** `string` · optional — A line under the heading saying what the tabs have in common
+  - never: Describing one tab. Each says that in its own description
+- **labels** `data` · required — Always. The tabs' names, in a word or two each, in the order of the children they choose between — the first names the first child. A name without a child is not drawn
+  - never: Sentences. A tab is read at a glance; what it shows says the rest
+- **footnote** `string` · optional — Small print every tab shares — that what is offered varies by platform or device
+  - never: A risk warning. Small print is the last thing a reader reads, and the one place a warning must never be
+
+## Inside it
+
+- At least 1, no ceiling — fewer is not this component and more is a different one.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, header, title, description, tabs, panel, footnote.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/featuretabs.md`.

package/.llm/digest/grid.md

@@ -38,6 +38,7 @@ Lays items out in equal columns with consistent spacing
   - `xl` — Between the parts of a card, taken as a field — cells that each hold a picture as well as words. Drops one step below 768px, a phone having a third of the width to spend
   - `2xl` — Between one section of a page and the next, laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
   - `3xl` — The largest gap, for separating whole movements of a page laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
+  - `gutter` — A row of cards — the gutter every card block (FeatureCards, ComparisonCards, Tiers, TeamGrid) sets between its cards, so a grid of cards composed on a page stands as those do. …
   - never: Reaching a cell width. The gap and the column count together decide how wide a cell lands, but the gap is a relationship between cells and not a way of sizing one. A cell that needs a particular width is a track floor, and past that it is a component with a size
 - **min** `enum` · default "md" — How narrow a track may get before the field drops a column. This is the whole of the component's responsiveness, and choosing it is choosing where the layout changes
   - `sm` — The narrow floor, for a cell holding a logo, an icon and a word, or one short claim. Six of these clear the page's measure with its gutter still on both sides

package/.llm/digest/illustrationcard.md

@@ -35,11 +35,16 @@ A glass card showing product information, used as an illustration
   - 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
+- **motion** `enum` · optional — The pane's own motion as it arrives, played once when it has landed and never again. Leave it out and the pane simply arrives with the band around it
+  - `frost` — The pane frosts over its photograph as it arrives: the glass blurs in over motion.duration.dramatic, and what it holds fades in a step of motion.duration.stagger apart once the glass is mostly there. …
+  - never: A pane whose parts already carry the lead motion — a figure that rolls, a story told with `then`. One lead motion per pane: two read as the pane fidgeting rather than the product working
+- **then** `node` · optional — A second state of the same product, played once after the first: the order goes in, then the position is open. …
+  - never: A slideshow, or a state that undoes the first. It plays once and ends on this, and a pane that kept changing would be a carousel nobody asked for. And not with `motion`, which is not played beside it — the story is the pane's lead motion
 
 ## Inside it
 
 - 2 components are refused inside it; the list and the reasons are in the long document.
-- Renders 2 parts: root, content.
+- Renders 3 parts: root, content, stage.
 
 ---
 

package/.llm/digest/illustrationcheck.md

@@ -0,0 +1,42 @@
+<!-- GENERATED from illustrationcheck.contract.json. Do not edit. -->
+
+# IllustrationCheck
+
+A drawn confirmation mark — a ring and a tick — for a picture of something done
+
+`import { IllustrationCheck } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A pane, or any picture of the product, showing that something has gone through — a deposit received, an identity verified
+- The moment of confirmation is the point of the picture, played once with `motion="resolve"`
+
+## Something else, when
+
+- Something is still loading on a real page → **Spinner**
+- A tick beside words in a list or a field → **Icon**
+
+## Never
+
+- Reporting the outcome of something the reader did on this page. A real confirmation is announced and stays; this is a picture, and its motion says nothing to a screen reader
+- More than one moving thing in a pane. One lead motion per pane
+
+## Props
+
+- **size** `enum` · default "xl" — How large the mark is drawn: one of the two largest icon sizes, because a mark smaller than that is a glyph beside words and an Icon
+  - `lg` — Thirty-two pixels, icon.size.lg. Beside a line of words in a pane
+  - `xl` — Forty-eight pixels, icon.size.xl, and the default. The mark as the subject of a pane
+  - never: Fitting a pane. A pane scales its whole picture down to fit; the mark keeps its size in it
+- **motion** `enum` · optional — The mark moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. At rest, and for a reader who asked for less movement, it is the finished mark
+  - `resolve` — The ring spins open like a Spinner for two turns, closes, and the tick draws in — the moment something goes through
+  - never: A mark beside another moving part in the same pane. One lead motion per pane
+- **label** `string` · optional — Only where the mark says something nothing beside it does — rarely. It names the mark as an image
+  - never: A mark inside an IllustrationCard, which is one image named by its own label; or repeating the words beside the mark
+
+## Inside it
+
+- Renders 3 parts: root, ring, tick.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/illustrationcheck.md`.

package/.llm/digest/illustrationchoice.md

@@ -0,0 +1,43 @@
+<!-- GENERATED from illustrationchoice.contract.json. Do not edit. -->
+
+# IllustrationChoice
+
+A drawn set of options with one picked, for a picture of the product making a choice
+
+`import { IllustrationChoice } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A pane, or any picture of the product, showing a choice — a demo account or a real one, a plan, a market
+- The choosing is the point of the picture, played once with `motion="pick"`
+
+## Something else, when
+
+- The reader makes the choice on this page → **SegmentedControl**
+- A choice between two or three short words, side by side → **SegmentedControl**
+
+## Never
+
+- A choice the reader makes. It is not focusable, not pressable and not announced as a control
+- More than four options. A picture of a long list is a list, and its outline would travel too far to read as one choice
+- More than one moving thing in a pane. One lead motion per pane
+
+## Props
+
+- **options** `data` · required — Always. Two to four options, each a name in a few words and a line under it where it needs one
+  - never: More than four, or options that are not alternatives to one another
+- **value** `string` · required — Always. The `value` of the option shown picked
+  - never: A value no option has. Nothing would be picked, and the picture would show a choice not made
+- **motion** `enum` · optional — The choice moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. At rest, and for a reader who asked for less movement, the option is simply picked
+  - `pick` — The outline starts on a neighbouring option and slides to the picked one, whose circle then fills — the product making the choice
+  - never: A choice beside another moving part in the same pane. One lead motion per pane
+- **label** `string` · optional — Where the picture stands on its own and its options say less than a sentence would — "Choosing an account: the demo account". It names the whole as one image
+  - never: A choice inside an IllustrationCard, which is one image named by its own label
+
+## Inside it
+
+- Renders 7 parts: root, option, radio, dot, label, description, outline.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/illustrationchoice.md`.

package/.llm/digest/illustrationcode.md

@@ -0,0 +1,41 @@
+<!-- GENERATED from illustrationcode.contract.json. Do not edit. -->
+
+# IllustrationCode
+
+A drawn row of code boxes, filled or not, for a picture of the product asking for a code
+
+`import { IllustrationCode } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A pane, or any picture of the product, showing a verification step — confirming it is you, two-step sign-in
+- The code going in is the point of the picture, played once with `motion="fill"`
+
+## Something else, when
+
+- The reader types a code on this page → **TextInput**
+
+## Never
+
+- A real code entry. Nothing in it can be focused or typed into, and it holds no digits — only dots, because a picture should never show a code
+- More than one moving thing in a pane. One lead motion per pane
+
+## Props
+
+- **length** `number` · default 6 — How many boxes: six, the default, for the usual verification code; four for a short one
+  - never: A code longer than eight. A row of more boxes than that is too narrow to read as boxes
+- **filled** `number` · optional — How many boxes are filled, from the start. Left out, all of them — a code entered
+  - never: Showing a code half typed with `motion="fill"`. The motion fills the boxes it is given; a picture of a code mid-entry is still, with no motion
+- **motion** `enum` · optional — The row moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. At rest, and for a reader who asked for less movement, the boxes are as filled as `filled` says
+  - `fill` — The boxes fill one after another, a step of motion.duration.stagger apart
+  - never: A row beside another moving part in the same pane. One lead motion per pane
+- **label** `string` · optional — Where the picture stands on its own — "A verification code, entered". It names the row as one image
+  - never: A row inside an IllustrationCard, which is one image named by its own label
+
+## Inside it
+
+- Renders 2 parts: root, box.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/illustrationcode.md`.

package/.llm/digest/illustrationlist.md

@@ -0,0 +1,38 @@
+<!-- GENERATED from illustrationlist.contract.json. Do not edit. -->
+
+# IllustrationList
+
+A drawn list of rows — a glyph and a name each — for a picture of the product listing things
+
+`import { IllustrationList } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A pane, or any picture of the product, listing a few things — the forex pairs on a platform, the documents a check needs
+- The list arriving is the point of the picture, played once with `motion="arrive"`
+
+## Something else, when
+
+- A list of benefits or features the page itself is making → **FeatureBullets**
+- A data table the reader compares across → **Table**
+
+## Never
+
+- More than five or six rows. A picture of a long list reads as a list to scroll, and its arrival as a page loading
+- Rows a reader acts on. Nothing in it can be pressed
+- More than one moving thing in a pane. One lead motion per pane
+
+## Props
+
+- **motion** `enum` · optional — The list moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. At rest, and for a reader who asked for less movement, the list is simply there
+  - `arrive` — The rows come in one after another, and each glyph pops in as its row lands
+  - never: A list beside another moving part in the same pane. One lead motion per pane
+
+## Inside it
+
+- 2 components are refused inside it; the list and the reasons are in the long document.
+- Renders 2 parts: root, row.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/illustrationlist.md`.

package/.llm/digest/illustrationscene.md

@@ -32,18 +32,20 @@ A photograph with an IllustrationCard laid over 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
   - `bottom` — The card centred along the foot of the frame, held off it by the card's own inset — for a photograph whose subject fills the top: a face, a person reaching up, a skyline
-  - never: Anything but keeping the photograph's subject clear. The card's size is fixed by the shape; placement moves it and nothing else
+  - never: Anything but keeping the photograph's subject clear. The card's width is fixed by the shape; placement moves it, and at the foot holds it to at most two fifths of the frame's height
 - **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
+- **shade** `boolean` · default false — The photograph is bright where the card sits — a sunny sky, a white wall — so the glass would come out mid-grey and the card's small lines would fall below AA. …
+  - never: A photograph already dark where the card sits, or darkening the whole photograph. The shade is for the card's type, and on a dark photograph it only takes light out of the scene
 
 ## 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.
+- Renders 3 parts: root, image, shade.
 
 ---
 

package/.llm/digest/imagebanner.md

@@ -29,12 +29,12 @@ A dark card pairing a headline and one action with a photograph
 - **ground** `enum` · default "page" — Which of the page's three grounds the band around the card paints. The card is dark whatever this says — that is what the block is — so this is about the rhythm of the page, white, grey or dark, and never about the card. …
   - `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
   - `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. …
-  - `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong so it still reads as a card. …
+  - `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong-on-brand-strong so it still reads as a card. …
   - never: Making the card darker. The card is dark on every ground; painting the band dark too spends the page's one dark band on a section that was already one
 - **variant** `enum` · default "split" — What the photograph does: beside the words, or behind them. Both carry one action — two of the reference design's layouts
   - `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. …
-  - `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. …
-  - never: Choosing by how busy the page looks. Cover hides part of the photograph under the scrim; it is a decision about the photograph, not decoration
+  - `cover` — The photograph fills the whole card, with the words over it on a shade that darkens the words' own column and fades out just past it, leaving the rest of the photograph clear. …
+  - never: Choosing by how busy the page looks. Cover lays the words on part of the photograph behind a shade; it is a decision about the photograph, not decoration
 - **mediaPosition** `enum` · default "end" — Which side the photograph takes, and in cover, which side it shows clear on with the words on the other. Alternating it with the section above is the page's decision, not this one's
   - `end` — The default. The words lead and the photograph follows, which is the order the card argues in
   - `start` — The photograph leads — the second of two cards on a page, or a photograph whose subject faces the words. A split card puts it above the words on a phone as well, as the reference design does
@@ -53,6 +53,12 @@ A dark card pairing a headline and one action with a photograph
   - never: Artwork with words in it. The cover photograph sits under a scrim and the text, and the split crops to fill
 - **parallax** `boolean` · default true — The photograph drifts against the scroll as the card passes through the view, the drift every block's picture shares — drawn at motion.scale.parallax and moved from motion.translate.parallax-from to motion.translate.parallax-to over the whole pass — so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
   - never: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll
+- **stackOnPhone** `boolean` · default false — A cover photograph whose subject a phone's crop would put under the words or cut off — a person, a face, hands. …
+  - never: A split card, which stacks on a phone already, or a photograph that is setting rather than subject. Stacked, the phone loses the cover look, so keep it for the photograph that would otherwise lose its subject
+
+## The type refuses
+
+- variant="split" with stackOnPhone=true — A split card already stacks its words and its photograph on a phone; there is nothing for this to change
 
 ## Inside it
 

package/.llm/digest/logocolumns.md

@@ -28,7 +28,7 @@ Backs a claim with two columns of logos that scroll in opposite directions
 - **ground** `enum` · default "strong" — 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. …
   - `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. …
-  - `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. …
+  - `strong` — The default. …
   - never: 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. …
 - **mediaPosition** `enum` · default "start" — Which side the wall takes at full width. Never a promise about a phone: below the fold the words are always first, because a reader on a phone came for them
   - `start` — The default, the reference design's: the wall at the start, the claim beside it at the end

package/.llm/digest/logorows.md

@@ -27,8 +27,15 @@ Backs a claim with two rows of logos that slide in opposite directions
 - **ground** `enum` · default "strong" — 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. …
   - `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. …
-  - `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. …
+  - `strong` — The default. …
   - never: 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. …
+- **background** `enum` · optional — The page's one patterned band, between its hero and its closing call to action — a band a reader should stop at. …
+  - `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
+  - never: 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. …
 - **title** `string` · required — Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide"
   - never: A list of the names. The logos are the names; the heading says what they prove
 - **description** `string` · optional — The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on

package/.llm/digest/producthero.md

@@ -42,8 +42,14 @@ Opens a product or market page with a centred headline over a dark background
   - never: The background — that is `backgroundImage`. And beside `media`: one product, one picture. Given both, `image` is drawn and `media` ignored
 - **media** `node` · optional — A product picture in a shape the page fixes on purpose — an AspectRatio box, which keeps its ratio across the column. Prefer `image`, which keeps the picture's own shape and adapts to it
   - never: The background. A photograph filling the band is `backgroundImage`; this sits in front of it, in the column, and is never cropped
-- **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
+- **backgroundImage** `string` · optional — A photograph filling the whole band. It is shown as it is — nothing is painted over it unless `shade` asks for a shade behind the words, so choose one dark enough where the words sit, or turn `shade` on for a bright one
+  - never: A flat colour, or a bright photograph left without `shade`. The band already paints its ground, and a pale photograph with nothing behind the words leaves the claim unreadable
+- **shade** `boolean` · default false — Under `backgroundImage`, when the photograph is bright where the words sit — a daylight sky — and the description or the actions would fall below AA on it. …
+  - never: A band with no photograph, or darkening the whole photograph. The band's own ground already carries the words, and a shade over all of it is the gloom a bright photograph was chosen to avoid
+
+## The type refuses
+
+- shade=true with backgroundImage=null — A shade is drawn between a photograph and the words; with no photograph it darkens the band's own ground, which the words were already set to read on
 
 ## Inside it
 

package/.llm/digest/progressbar.md

@@ -0,0 +1,56 @@
+<!-- GENERATED from progressbar.contract.json. Do not edit. -->
+
+# ProgressBar
+
+Shows how much of a task is done
+
+`import { ProgressBar } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A task has measurable completion and the user needs to see how much is done
+- A longer operation — uploads, setup, or processing — needs progress feedback to reassure the user
+
+## Something else, when
+
+- The work has no measurable end — connecting, waiting on a system that reports nothing → **Spinner**
+- The task finishes as fast as a reader can notice → **nothing in this system does this**
+
+## Never
+
+- Placing icons or labels inside the bar. The fill is a measurement: it is the width that carries the meaning, so anything sitting in it is clipped at one value and swimming at another, and the reader is left judging a number against a moving edge. Put them beside the bar, where they hold still
+- Stacking several bars for one operation. A reader sums what they see, and three bars at a third each read as three tasks rather than one — the one number that matters, how much of the whole is done, is the one nobody can work out. One bar, one task, and the value label says the rest
+- Standing in for a result. A bar at full says the work finished, not that it succeeded, and a failed upload that ends at 100% tells the reader the opposite of what happened. What came of it is a message, not a measurement
+
+## Props
+
+- **size** `enum` · default "md"
+  - `sm` — Dense layouts or inline indicators where vertical space is limited
+  - `md` — Default for standalone progress indicators in forms or dialogs
+- **variant** `enum` · default "default"
+  - `default` — The default, and neutral: no status and no brand. …
+  - `accent` — Brand-coloured, and asked for rather than arrived at. Reach for it where the page is drawing attention to this progress — the one thing on screen a reader is waiting on. …
+  - `success` — Indicating completion or a successful process
+  - `warning` — Progress that needs attention, such as approaching a limit
+  - `error` — Progress of a process that has encountered a problem
+  - `info` — Informational progress such as downloads, syncing, or data loading
+- **value** `number` · default 0 — The amount of work completed — a number between 0 and max. Defaults to 0, which is the honest rendering of nothing started
+  - never: A number outside the range this bar declares. It is held between nought and max before anything is drawn or announced, so a value past the end reads as full to the eye and to the ear alike — the clamp used to be on the width only, and a bar given 150 of 100 was drawn full while announcing 150 of 100
+- **max** `number` · default 100 — The total amount of work differs from the default of 100
+  - never: Nought or less. Nothing can be a fraction of nothing, so there is no percentage to state and the bar reads as empty rather than complete — which is the one answer that is certainly wrong. A task whose size is unknown is ProgressBarIndeterminate
+- **label** `string` · optional — Naming what is in progress, when the bar is not already named by what surrounds it. Omit it for a bar that is part of a labelled flow — an onboarding stepper under its own heading — and name the bar with aria-labelledby instead
+  - never: Displaying the numeric value, which belongs in the value label. And never leave the bar with no name at all: a progressbar announced without one is announced as nothing
+- **showLabel** `boolean` · default true — The label is visible. When false, the label is visually hidden but remains accessible to screen readers
+- **showValueLabel** `boolean` · default true — The numeric progress value is visible alongside the bar
+- **description** `string` · optional — Freeform context below the bar, such as a step count, status message, or time remaining
+- **motion** `enum` · optional — The bar moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. For a bar shown as a picture of progress. …
+  - `fill` — The bar fills from empty to its value once, on arrival, over motion.duration.dramatic — an account set-up three steps in, shown in a pane
+  - never: A bar reporting real, changing progress — an upload, a form being filled. That bar moves because the task does; filling it on arrival as well would show progress that did not happen
+
+## Inside it
+
+- Renders 6 parts: root, track, fill, label, value-label, description-text.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/progressbar.md`.

package/.llm/digest/scenescroll.md

@@ -14,6 +14,7 @@ Two full-screen photo scenes that cross-fade as the reader scrolls
 
 ## Something else, when
 
+- The two scenes are one claim with one word changed — "Trade all day", "Trade all night" → **SceneScrollWord**
 - There is one photograph, not two states of something → **ImageBanner**
 - Three or more things to show, each with a picture → **FeatureScroll**
 - The page's opening band, with an action to take → **LandingHero**
@@ -23,8 +24,8 @@ Two full-screen photo scenes that cross-fade as the reader scrolls
 
 - Words a reader must not miss — a price, a disclaimer, a legal line. Each scene's words are on screen for only part of the pass
 - Two of these on one page, or one beside another pinned section. Each holds the screen for a screen and a half of scrolling, and two make the page feel stuck
-- Photographs with words in them. The words are the headings and the lines, where a screen reader and a translation reach them; a photograph saying them is under a scrim and cropped to fill
-- An action. There is no slot for one: a button that dissolves away as the reader scrolls is one they cannot rely on, so the page's next section carries it
+- Photographs with words in them. The words are the headings and the lines, where a screen reader and a translation reach them; a photograph saying them is cropped to fill and has the scene's words set over it
+- Words over a busy or mid-toned stretch of photograph. Nothing lies between the words and the photograph, so the photograph has to leave the words a calm, light or dark stretch to sit on, and the scene's ink has to name which
 
 ## Props
 
@@ -36,13 +37,13 @@ Two full-screen photo scenes that cross-fade as the reader scrolls
   - never: A scene that says the same as the second with a different picture. The change-over is the argument; two scenes that agree have nothing to change between
 - **second** `data` · required — Always. The scene the section changes over to, in the same shape as the first. …
   - never: A continuation of the first scene's sentence. A reader who arrives by heading, or who scrolls past fast, reads each title on its own
-- **link** `node` · optional — A way on for the reader who wants more — "See trading hours", "Learn more". …
-  - never: A button, or a different link per scene. One way on for the section; something to press that changed under the pointer would be the one thing a reader could not rely on
+- **action** `node` · optional — One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. …
+  - never: Two actions, or a different one per scene. One thing to do for the section; something to press that changed under the pointer would be the one thing a reader could not rely on
 
 ## Inside it
 
 - 7 components are refused inside it; the list and the reasons are in the long document.
-- Renders 9 parts: root, stage, scene, media, image, content, title, description, link.
+- Renders 9 parts: root, stage, scene, media, image, content, title, description, action.
 
 ---