@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/.llm/digest/comparisontable.md

@@ -2,7 +2,7 @@
 
 # ComparisonTable
 
-A comparison-table section for short, fixed column sets. It renders a rounded card with a light header row, horizontal dividers only, a bold first-column label, and two or three value columns. …
+Compares a short, fixed set of options in a table
 
 `import { ComparisonTable } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/ctabanner.md

@@ -2,7 +2,7 @@
 
 # CtaBanner
 
-A full-bleed coral band carrying one short promotion and the action it asks for — the strip that breaks a long page with the one thing the page wants done, or closes it. …
+A full-bleed band with one short promotion and the action it asks for
 
 `import { CtaBanner } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/ctabannerslider.md

@@ -2,7 +2,7 @@
 
 # CtaBannerSlider
 
-CtaBanner's layout with a slider in it: the same full-bleed coral band, rotating between two or three short promotions. …
+A full-bleed promotional band that rotates between two or three offers
 
 `import { CtaBannerSlider } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/datatable.md

@@ -2,7 +2,7 @@
 
 # DataTable
 
-A full-width data-table section for instrument and market-style listings. …
+A full-width table for instrument and market listings
 
 `import { DataTable } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/divider.md

@@ -2,7 +2,7 @@
 
 # Divider
 
-A rule between things, and the quietest way to say that what is on one side of it belongs to a different group from what is on the other. …
+A rule that separates one group of content from another
 
 `import { Divider } from '@deriv-com/dds-marketing'`
 

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

@@ -2,7 +2,7 @@
 
 # DownloadBanner
 
-A section promoting the app's downloads: a card holding a heading and the stores' own badges, each a link to the product in that store. …
+Promotes the app with a heading and links to each app store
 
 `import { DownloadBanner } from '@deriv-com/dds-marketing'`
 
@@ -26,7 +26,7 @@ A section promoting the app's downloads: a card holding a heading and the stores
 - **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/dropdownmenu.md

@@ -2,7 +2,7 @@
 
 # DropdownMenu
 
-A button that opens a short set of destinations. Pressing one goes somewhere and the menu shuts — it holds no value and reports no answer, so there is nothing about it to find on reopening. …
+A button that opens a short list of links
 
 `import { DropdownMenu } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/estimator.md

@@ -0,0 +1,66 @@
+<!-- GENERATED from estimator.contract.json. Do not edit. -->
+
+# Estimator
+
+Sets the page's own fields beside the figures worked out from them: a trading calculator, a converter, an income estimate
+
+`import { Estimator } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A page lets a reader work something out before they act — a margin, a pip value, a swap charge, a conversion, an income estimate
+- The figures change as the reader types or picks, and should be announced as they do
+- The same tool appears on several pages in several forms — the margin, pip and swap calculators are one layout with different fields and figures
+
+## Something else, when
+
+- The figures are fixed facts rather than the result of anything the reader enters → **Stats**
+- Options are compared side by side rather than worked out from an input → **ComparisonCards**
+- The tool is a form that sends something — a sign-up, a contact request → **FeatureSplit**
+
+## Never
+
+- Fetching or calculating anything. The block has no data source and no formula: a page that wants live prices or a margin computes them and passes the figures in, so the block stays the same on every page and in every test
+- A form that submits. Nothing here is sent anywhere; the way onward is a link or a button to the page that does the real thing
+- A table of many figures. Past six or so results the panel stops being an answer and becomes a listing, which is what DataTable is for
+
+## 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 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. …
+- **layout** `enum` · default "stacked" — How the heading and the tool share the section at full width. On a phone both are one column whichever is chosen: the heading, then the card, the inputs above the results
+  - `stacked` — The default. The heading centred above a wide card, the inputs beside the results — a calculator with several fields and several figures, where the two panels each need room
+  - `split` — The heading and a few lines beside the card, the inputs above the results inside it — a compact tool a page introduces in its own words, a converter or a single estimate
+  - never: Varying between two tools on one page. Pick the layout the tool's size calls for, and the page reads as one system
+- **title** `string` · required — Always. What the tool works out, in a few words — 'Trading calculator', 'Buy crypto in seconds', 'Estimate your earnings'
+  - never: Instructions. How to use the tool is the fields' own labels, not the heading
+- **description** `string` · optional — A line or two under the title saying what the figures are for or where they come from — 'Live prices, updated every few seconds'
+  - never: A disclaimer the results depend on. That is a result's `note`, read beside the figure it qualifies
+- **inputsLabel** `string` · optional — A heading over the inputs panel, where the two panels need naming — 'Calculator' over the fields and 'Results' over the figures. Leave both out for a tool whose fields name themselves
+  - never: One panel only. Name both or neither
+- **inputs** `node` · required — Always. The fields the reader fills in — Select, TextInput, SearchInput, SegmentedControl, a slider — in the order they are filled. The page owns their values and works the results out from them
+  - never: A submit button. The results update as the fields change; the way onward is `action`
+- **inputActions** `node` · optional — A tool that works its figures out when asked rather than as the reader types — a calculation too slow or too costly to run on every keystroke, or one where half-filled fields would show figures that mislead. …
+  - never: A tool whose figures already follow the fields. A button that does what typing already did is a step the reader has to find and press for nothing
+- **onCalculate** `callback` · optional — Whenever inputActions holds a Calculate button: Enter in any of the fields calls it, as the button's own press does — wire the button's onClick to the same function. …
+  - never: Sending anything. The form never leaves the page; a tool that submits to a server is a form section, not this
+- **resultsLabel** `string` · optional — A heading over the results panel, with inputsLabel — 'Results', 'You receive'
+  - never: One panel only. Name both or neither
+- **results** `data` · required — The figures the inputs produce, in reading order — a `label`, a `value` written exactly as it is to be read, and an optional `note`. Pass an empty list until the inputs are complete, and the panel shows `emptyMessage` instead. …
+  - never: A value the page has not worked out. Pass nothing rather than a placeholder figure: a wrong number on a trading page is worse than none
+- **emptyMessage** `string` · optional — What the results panel says before there are figures to show — 'Choose an instrument to see the results'. Translate it with the page
+  - never: An error. A failed feed is the page's to say, in a result's note or its own message
+- **action** `node` · optional — The one thing a reader does once they have their figures — 'Open an account', 'Trade now', 'Become a partner'. Under the results, where the reader's eye already is
+  - never: More than one action. One tool, one next step
+
+## Inside it
+
+- 9 components are refused inside it; the list and the reasons are in the long document.
+- Renders 19 parts: root, inner, header, title, description, tool, panels, inputs, inputs-label, results, results-label, list, result, result-label, result-value, result-note, empty, action, input-actions.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/estimator.md`.

package/.llm/digest/faqaccordion.md

@@ -2,7 +2,7 @@
 
 # FaqAccordion
 
-A section of questions and answers: a heading over an Accordion, one question open at a time. …
+A section of questions and answers, one open at a time
 
 `import { FaqAccordion } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurebullets.md

@@ -2,7 +2,7 @@
 
 # FeatureBullets
 
-A section pairing a claim with a ruled list of what something includes, beside one picture. …
+Pairs a claim and a list of what is included with one picture
 
 `import { FeatureBullets } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurecards.md

@@ -2,7 +2,7 @@
 
 # FeatureCards
 
-A section that opens with a heading and sets a grid of cards under it — the shape a marketing page uses for “why choose us” and “what you get”. …
+A heading over a grid of feature cards
 
 `import { FeatureCards } from '@deriv-com/dds-marketing'`
 
@@ -30,6 +30,13 @@ A section that opens with a heading and sets a grid of cards under it — the sh
   - `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/featurecardscarousel.md

@@ -2,7 +2,7 @@
 
 # FeatureCardsCarousel
 
-A feature band that sets its cards in a row a reader moves along rather than a grid: a heading and a line over a row of the page's own cards, the next one's edge showing past the last in view, with dots saying where the reader is and two arrows stepping it a card at a time. …
+A heading over a row of feature cards the reader scrolls through
 
 `import { FeatureCardsCarousel } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurescroll.md

@@ -2,7 +2,7 @@
 
 # FeatureScroll
 
-A section that gives a set of things one screen each, with the picture pinned beside the words while a reader is on them. …
+Gives each feature a screen of its own, with its picture pinned beside the text
 
 `import { FeatureScroll } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featuresplit.md

@@ -2,7 +2,7 @@
 
 # FeatureSplit
 
-A section putting one claim, a line explaining it and a way onward beside a single picture. …
+One claim, a supporting line and a link, beside a single picture
 
 `import { FeatureSplit } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurestack.md

@@ -2,7 +2,7 @@
 
 # FeatureStack
 
-A section that leads with a statement and ends on a picture: a heading, a line under it where the heading needs one, a link on to more where the page has one, and a large illustration — a globe, a map, a product shot — standing on the band's foot. …
+A heading and supporting line above a large illustration
 
 `import { FeatureStack } from '@deriv-com/dds-marketing'`
 

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/filterchip.md

@@ -2,7 +2,7 @@
 
 # FilterChip
 
-A token the reader turns on and off in place, standing for one narrowing of the set shown beside it. …
+Turns one filter on or off, in place
 
 `import { FilterChip } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/footer.md

@@ -2,7 +2,7 @@
 
 # Footer
 
-The band that closes a marketing page, and the sections every one of them is made of: whose site this is, where else it goes, what the law obliges it to say, and the line that closes it. …
+The band that closes every marketing page: brand, links, legal text
 
 `import { Footer } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/footergroup.md

@@ -2,7 +2,7 @@
 
 # FooterGroup
 
-A named handful of destinations in the footer: a word over a short list. It is the footer's repeating unit and the only thing inside it that repeats — everything else in a footer appears once. …
+A titled list of links in the footer
 
 `import { FooterGroup } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/grid.md

@@ -2,7 +2,7 @@
 
 # Grid
 
-A field of equal tracks, and one measure between them. …
+Lays items out in equal columns with consistent spacing
 
 `import { Grid } from '@deriv-com/dds-marketing'`
 
@@ -38,6 +38,7 @@ A field of equal tracks, and one measure between them. …
   - `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/icon.md

@@ -2,7 +2,7 @@
 
 # Icon
 
-Renders a Quill system glyph at a token size, taking its colour from the text around it. The glyph is imported from @deriv-com/quill-icons-web and passed as the only child. …
+Renders a Quill glyph at a token size, in the colour of the text around it
 
 `import { Icon } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/illustrationcard.md

@@ -2,7 +2,7 @@
 
 # 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. …
+A glass card showing product information, used as an illustration
 
 `import { IllustrationCard } from '@deriv-com/dds-marketing'`
 
@@ -35,11 +35,16 @@ A pane of glass holding a piece of product information — a market's price, a b
   - 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`.