@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/.llm/digest/imagebanner.md

@@ -0,0 +1,64 @@
+<!-- GENERATED from imagebanner.contract.json. Do not edit. -->
+
+# ImageBanner
+
+A dark card in the middle of a page, pairing a headline and a line under it with a photograph — beside it or behind it, with one action. …
+
+`import { ImageBanner } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Driving a single mid-page or end-of-page action with a photograph to carry it — a community, a hub, a platform
+- A dark, editorial break between lighter sections
+
+## Something else, when
+
+- The section opens the page → **ProductHero**
+- The point wants the page's own light ground rather than a dark card → **FeatureSplit**
+- There is no photograph, only a headline and an action → **CtaBanner**
+- The section says what a programme or a product comes with, as a list of features → **FeatureBullets**
+
+## Never
+
+- The page's opening band. A dark card at the top of a page competes with the navigation above it and the hero it should be
+- More than one action. The card asks for one thing, and a second button beside it is a second demand on a card already set apart from the page
+- A picture carrying words a reader needs. The cover photograph sits under a scrim and the text, and the split's is cropped to fill its half
+
+## Props
+
+- **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. …
+  - 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
+- **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
+  - never: Aligning the words to the far edge. They start where their column starts on either side, because a heading beside content starts with it
+- **title** `string` · required — Always. The one thing the card says, in under eight words — "Join our global community"
+  - never: A sentence. The description under it carries the argument
+- **headingLevel** `enum` · default "h2" — Matching the outline of the page around the card, so the headline keeps its place in the hierarchy rather than skipping a level — CtaBanner's and ResourceBanner's prop. The level only: the size stays font.h2
+  - `h2` — The default: the card is a section of the page, under the page's own h1
+  - `h3` — The card sits inside a section that already carries the h2 it belongs to
+  - never: Making the headline bigger or smaller. The card decides the size; this decides only where the headline sits in the page's outline
+- **description** `string` · optional — The line under the headline saying what it means for the reader, in one or two sentences
+  - never: A paragraph. Past about two hundred characters the words run longer than the photograph beside them, which is the reference design's limit as well
+- **action** `node` · optional — The one thing the card asks for. The card is dark in both themes, so a Button here takes tone="inverse": the primary is the coral fill and it is the card's one primary. On a phone it fills the width of the card
+  - never: A second action. The card asks for one thing
+- **media** `node` · required — Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration
+  - 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 false — The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift 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
+
+## Inside it
+
+- 10 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, card, content, title, description, action, media.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/imagebanner.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/navbaritem.md

@@ -38,6 +38,7 @@ One place the site has, in the bar across the top of it. An anchor with a target
   - never: Decoration on every item. A glyph beside each of five destinations costs the width the destinations need and tells a reader nothing they were not already reading
 - **external** `boolean` · default false — The destination leaves the site. It draws the mark, opens in a new context, and the implementation extends the accessible name to say so in words — a glyph alone is a warning only sighted readers get
   - never: A different area of the same site. A subdomain the reader experiences as one place is not a change of context, and marking it as one teaches them to ignore the mark where it matters
+- **externalLabel** `string` · default "(opens in a new tab)" — What a screen reader hears after an external destination's name, since the arrow that shows it to everyone else is hidden. Translate it with the page
 
 ## The type refuses
 

package/.llm/digest/pageheader.md

@@ -38,6 +38,10 @@ 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` · default "grid" — The band is the page's one standout moment and wants more than a flat fill. Leave it out and the band draws the lit grid
+  - `grid` — The default: the band's rule grid, lit — hairlines a pitch apart rising from a soft bloom at the band's foot, a brighter point where two lines cross and a short dash of light running along every few, brightening around the pointer. …
+  - `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/digest/paginationdots.md

@@ -32,7 +32,9 @@ A row of marks, one per position in a short sequence — the slides of a slider,
   - never: A sequence the reader has to work through — a walkthrough, a form in steps. Moving it for them takes away the one thing they came to control
 - **paused** `boolean` · default false — Whatever holds the row wants the rotation held for now — while the pointer is over the slide or focus is inside it, so a reader is never moved on mid-sentence. It lets go when this goes false
 - **label** `string` · default "Slides" — The name the row is announced by, as a group. Name what the positions are: 'Slides', 'Steps'. Translate it with the page
-- **itemLabel** `string` · default "Slide" — The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first is the reason a sentence template would be better, and the reason this is not yet one
+- **itemLabel** `string` · default "Slide" — The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first, or writes it in its own digits, passes positionLabel instead
+- **positionLabel** `callback` · optional — Each mark's accessible name as a sentence, given its position counting from one and how many there are — for a language whose order is not the word then the number, or whose digits are not these. Wins over itemLabel where both are given
+  - never: Visible text. It names the marks to assistive technology and is never drawn
 
 ## Inside it
 

package/.llm/digest/producthero.md

@@ -38,7 +38,9 @@ The band that opens a product or a market page: the one thing the page is about,
   - 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
-- **media** `node` · optional — The product itself, under the claim and the actions — in the column, capped to the measure, and whole
+- **image** `data` · optional — The product itself, under the claim and the actions, drawn at the picture's own proportions — a square screenshot stays square, a tall phone stays tall — and only held to the screen's limit: no taller than aspect.portrait of the column on a phone, no taller than half the band from the fold. …
+  - 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
@@ -46,7 +48,7 @@ The band that opens a product or a market page: the one thing the page is about,
 ## Inside it
 
 - 8 components are refused inside it; the list and the reasons are in the long document.
-- Renders 9 parts: root, inner, content, text, eyebrow, title, description, actions, media.
+- Renders 10 parts: root, inner, content, text, eyebrow, title, description, actions, media, image.
 
 ---
 

package/.llm/digest/resourcebanner.md

@@ -0,0 +1,53 @@
+<!-- GENERATED from resourcebanner.contract.json. Do not edit. -->
+
+# ResourceBanner
+
+A dark panel at the end of an informational section that points readers at related guides, policies or reference pages — the "here's where to read more" block. …
+
+`import { ResourceBanner } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Pointing readers at related guides, policies, or reference pages at the end of an informational section — the 'here's where to read more' block
+- A section of a legal, help or safety page has said what it has to and the detail lives elsewhere — the full terms, a risk disclosure, a help-centre article
+
+## Something else, when
+
+- The block asks the reader to do something — open an account, start trading → **CtaBanner**
+- The resources are a set of destinations each worth a heading and a sentence → **FeatureCards**
+- The reader's questions have short answers that can be given on the page → **FaqAccordion**
+
+## Never
+
+- A call to action. Nothing here is a button, and a resource the page wants pressed more than the others is not a resource
+- More than four or five links. Past that the stack competes with the words beside it, and the set is a page of links of its own
+- Links whose words only make sense beside the heading — "Read more", "Here". The stack is read as a list, and a screen reader lists links on their own
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds the section paints behind the panel. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it
+  - `subtle` — The reference design's arrangement: the dark panel on the light grey band. The one to reach for when the section ends a run of white ones and wants to read as its close. …
+  - `strong` — `color.bg.brand-strong`, the dark band. …
+  - never: Marking importance. A list of further reading is the quietest thing on a page, and painting the band dark to make it louder is a page with its emphasis in the wrong place. And never the brand's coral, `color.bg.brand`, which is not offered. …
+- **title** `string` · required — Always. What the links are for, in a few words — "Learn more about staying safe", "Read more about trading risks"
+  - never: A sentence. The description is for the sentence; the title names what the reader will find
+- **headingLevel** `enum` · default "h2" — Matching the outline of the page around the block, so the heading keeps its place in the hierarchy rather than skipping a level. …
+  - `h2` — The default: the block is a section of the page, under the page's own h1
+  - `h3` — The block closes a section that already carries the h2 it belongs to
+  - `h4` — The block closes a subsection under an h3, on a long legal or help page whose outline runs that deep
+- **description** `string` · optional — One sentence introducing the links — what the reader will find there, or why it is worth reading
+  - never: A summary of the links. They say what they are; this says why they are together. A second sentence is copy the reader passes on the way to the list
+- **links** `data` · required — Always. The resources, in the order they are read — one to four, each named for what is there: the guide, the policy, the page. …
+  - never: A link that is the page's call to action, or a label that only makes sense beside the heading. Each one is heard on its own in a screen reader's list of links
+- **externalLabel** `string` · default "(opens in a new tab)" — What an external link's accessible name ends with, so a reader who cannot see the up-right mark is told before their tab changes. Never drawn — the mark says it to everyone else. Translate it with the page
+- **downloadLabel** `string` · default "(downloads a file)" — What a download's accessible name ends with, so a reader who cannot see the file mark knows the link saves something rather than opening a page. Never drawn. …
+
+## Inside it
+
+- 9 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, panel, content, title, description, list, item.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/resourcebanner.md`.

package/.llm/digest/scenescroll.md

@@ -0,0 +1,49 @@
+<!-- GENERATED from scenescroll.contract.json. Do not edit. -->
+
+# SceneScroll
+
+A full-screen section of two scenes — each a photograph filling the band with a heading and a line over it — that change over as the reader scrolls: the screen holds still while the second photograph dissolves in over the first and the first scene's words give way to the second's. …
+
+`import { SceneScroll } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two states of one thing a page wants felt rather than listed — the markets by day and by night, a trader's screen before and after, a market open around the clock …
+- One immersive moment on a product or campaign page, between lighter sections, where two photographs carry the argument and the words are a heading and a line each …
+- The opening band of a campaign page built around that change, at headingLevel h1
+
+## Something else, when
+
+- 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**
+- One statement on its own, revealed as the reader scrolls → **TextScroll**
+
+## Never
+
+- 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
+
+## Props
+
+- **headingLevel** `enum` · default "h2" — Where the first scene's title sits in the page's outline. The second scene's title takes the level under it — h2 under an h1, h3 under an h2 — because it is the second half of the section the first one names, not a section of its own. …
+  - `h2` — The default: the section sits under the page's own h1, and the scenes' titles are drawn at font.h2
+  - `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
+  - never: Making a mid-page section look like a hero. h1 is the page's heading, and a page has one
+- **first** `data` · required — Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. …
+  - 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
+
+## 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.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/scenescroll.md`.

package/.llm/digest/select.md

@@ -71,6 +71,11 @@ A control for choosing one answer from a set the reader scans. …
   - never: Marking every optional control on a form where most are optional — a marker on almost every label is noise
 - **statusMessage** `string` · optional — Saying what the status means: what is wrong and how to fix it, what to look at, or what was confirmed
   - never: Restating the status. "Error" beside a red control says nothing the colour has not, and the colour is the part a colour-blind reader may not get
+- **requiredLabel** `string` · default "required" — The word drawn beside the label when requiredMark is text. Translate it with the page: the mark exists to say what it means in the reader's own language, which an English default does not
+- **optionalLabel** `string` · default "optional" — The word drawn beside the label of an optional field. Translate it with the page, as requiredLabel is
+- **labelTooltipLabel** `string` · optional — The accessible name of the button that opens labelTooltip. Without it the button is named "About" and the label; pass it to translate that with the page
+  - never: Visible text. It names the button to assistive technology and is never drawn
+- **searchLabel** `string` · optional — The name and placeholder of the search field a searchable list opens with. Without it the field reads "Search" and the label; pass it to translate that with the page
 
 ## The type refuses
 

package/.llm/digest/stats.md

@@ -0,0 +1,46 @@
+<!-- GENERATED from stats.contract.json. Do not edit. -->
+
+# Stats
+
+A trust and credibility section of key numbers: a heading, a line under it where the heading needs one, and the figures — each a number and the few words that say what it counts. …
+
+`import { Stats } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Three to five headline numbers that prove scale or credibility — traders, markets, years, the smallest deposit — where the set is the point — read along a row from the fold, turned through one at a time on a phone …
+- A break between two heavier sections, when the numbers alone tell the story
+
+## Something else, when
+
+- Each item needs a sentence of its own, or a picture → **FeatureCards**
+- The number is part of a claim the page is making in words → **FeatureSplit**
+
+## Never
+
+- Numbers that change while the page is open — a price, a live count. The figures are written once and counted once. The phone's wheel turns between them, but no figure changes once written — a value that does is a ticker this does not draw
+- A number nobody can stand behind. The figures are claims in the company's name; keep each one in step with its source
+- More than six figures. Past two rows the set stops being taken in at a glance
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, FeatureCards' axis and its reason: a band that wants to be seen as a band takes one of the other two, and the page decides the rhythm. …
+  - `page` — The default, and the page's own white. A row of figures between two sections that need nothing to separate them
+  - `subtle` — The grey band, for a row of figures that should read as a section of its own without changing the page's voice. …
+  - `strong` — `color.bg.brand-strong`, the dark band, for a set of figures a reader should arrive at — a home page's "Trade with confidence". …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never the brand's own coral, which is not offered: that ground belongs to the band that asks a reader to do something
+- **title** `string` · required — Always. What the numbers prove, in the fewest words — "Trade with confidence", "Deriv in numbers"
+  - never: A figure. The figures are the content; the heading says what they add up to
+- **description** `string` · optional — A line under the heading, when the heading alone does not say whose numbers these are or since when — "For over 25 years, a trusted partner of traders worldwide."
+  - never: A paragraph, or the figures again in words
+- **stats** `data` · required — Always. The figures, in the order they are read along the row — three to five, each a short `value` exactly as it is to be read and a `label` of a few words. …
+  - never: A long value. "2.5M+" holds a row; "over two and a half million" breaks it on a phone. And a label longer than one line on a phone: the wheel steps by one figure's height, measured with a one-line label, so a label that wraps runs into the figure beside it
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 13 parts: root, inner, header, title, description, list, dots, dot, item, value, amount, count, label.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/stats.md`.

package/.llm/digest/steps.md

@@ -0,0 +1,55 @@
+<!-- GENERATED from steps.contract.json. Do not edit. -->
+
+# Steps
+
+A two-column how-it-works section pairing a supporting picture with a numbered, ordered list of steps, each a title and a line describing it. …
+
+`import { Steps } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A page explains a get-started or onboarding flow — opening an account, funding it, starting to trade
+- A process has three to six steps that a reader follows in one order, each a short imperative and a sentence
+- A setup or a how-to page — a platform's install, a deposit or a withdrawal — needs its sequence shown beside one picture
+- The same how-it-works list, walked through on its own: with `autoplay` each step takes its turn, its rule filling as it holds, and the picture changes to that step's — a sequence shown in sequence rather than all at once …
+
+## Something else, when
+
+- The items have no order a reader follows — they are things a product includes → **FeatureBullets**
+- Three or four things side by side, each with its own picture → **FeatureCards**
+- Each stage needs a screen and a picture of its own → **FeatureScroll**
+
+## Never
+
+- A list without an order. Numbers against items that could be read in any sequence claim a sequence the page does not have, and a reader follows them anyway
+- A sequence longer than six steps. Past that the list runs well past the picture beside it, and a process that long wants a page of its own rather than a section
+- An article or a guide's body. This is a section in the middle of a marketing page, and carries no navigation of its own
+
+## 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
+  - `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 paints this section grey, and a page following it closely takes this. …
+  - `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 never the brand's own coral, `color.bg.brand`, which is not offered here: that ground belongs to the band that asks a reader to do something, and a how-it-works section wearing it is a page with two calls to action, one of which does nothing
+- **mediaPosition** `enum` · default "start" — Which side the picture takes at full width. Alternating it against the split sections around it is what stops two in a row reading as one long column, and it is the page's decision rather than this section's. …
+  - `start` — The default, and the reference design's: the picture first, then the steps it introduces
+  - `end` — The steps first, for a section sitting under a split whose picture is already at the start
+  - never: Moving the picture on a phone. There is one column there and the picture leads it
+- **autoplay** `boolean` · default false — Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. …
+  - never: Steps whose descriptions take longer to read than motion.duration.dwell — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it
+- **title** `string` · required — Always. What the steps get a reader to, in the fewest words that say it — 'Get started in 3 steps'
+  - never: A sentence. The steps underneath are the argument; this only has to name where they lead
+- **steps** `data` · required — Always. The steps, in the order a reader takes them — three or four is right, six the most. Each is a short imperative and a sentence under about two hundred characters. …
+  - never: Items that could be taken in any order, or a step that is two steps. Each number is a claim that this comes after the one above it and is one thing to do
+- **media** `node` · optional — The one picture beside the steps, where they have no pictures of their own — a screenshot, a photograph. …
+  - never: Anything a reader has to read or press. It is held to a square and cropped to fill it, so words in it are cropped too
+
+## Inside it
+
+- 10 components are refused inside it; the list and the reasons are in the long document.
+- Renders 15 parts: root, inner, split, media, image, content, title, list, step, number, body, step-title, trigger, step-description, progress.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/steps.md`.

package/.llm/digest/stickycards.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from stickycards.contract.json. Do not edit. -->
+
+# StickyCards
+
+A section whose cards pile up as the page scrolls: a heading, and under it a set of cards that each stop near the top of the window while the next one slides up over them, so the cards are read one at a time and the edges of the ones already read stay showing above the one being read. …
+
+`import { StickyCards } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A set of markets, products or benefits a page wants read one at a time as the reader scrolls — the reference design's "What we offer" — where each is a title and a sentence, and a picture or an animation is optional …
+- Three steps or benefits that each need a picture of their own — Sign up, Deposit, Trade — told as a sequence the reader scrolls through rather than a row they compare …
+
+## Something else, when
+
+- Three or four things a reader should compare side by side, at a glance → **FeatureCards**
+- Several things of the same kind, each with a picture worth a screen and room for more than a sentence → **FeatureScroll**
+- One or two items → **nothing in this system does this**
+
+## Never
+
+- Anything the reader must see at once — terms, prices compared across plans, a risk warning. A covered card is out of sight until the reader scrolls back to it
+- Cards a reader presses. The pile covers each card as the next arrives, and a control under another card is one the eye cannot find; a card's way on belongs in the section after it
+- The page's opening band. This sits under the page's heading, never in place of it
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, and with it the ink of the heading. The cards keep their own fills on every ground. …
+  - `page` — The default, and the page's own white. The reference design's sticky stacked cards sit on it
+  - `subtle` — A quiet step off the page — the reference design's slate band, which its market cards sit on. …
+  - `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never the brand's coral, `color.bg.brand`, which is not offered: that ground belongs to the band that asks a reader to do something
+- **layout** `enum` · default "compact" — Which pile this is: text-first cards in a narrow column, or a few large cards the width of the page with a picture each
+  - `compact` — The default — the reference design's StickyMarketCards and their animation sibling. …
+  - `feature` — The reference design's StickyStackedCards — about three large cards, each the width of the page and at least size.sticky-cards.feature-min tall, the title at the h3 step, its words beside a picture that runs to the card's edges and fills its half from the fold, under them on a phone. …
+- **title** `string` · required — Always. What the set is, in the fewest words — "What we offer", "Start trading in minutes". It names the section as a region, so a screen reader can jump to it and past it
+  - never: A sentence. The line under it is for the sentence
+- **description** `string` · optional — A line saying what the cards have in common, when the title alone does not
+  - never: A paragraph, or an introduction to each card. The cards say what each one is
+- **cards** `data` · required — Always. The cards, in the order the reader meets them — the first is the first one covered, the last ends the pile on top. …
+  - never: A card a reader has to press, or one or two cards. See the block's own guidance. Mixing cards with and without a picture in one pile. Give every card one, or none
+- **media** `callback` · optional — A card shows something the page plays itself — a Lottie animation, a video — in the place its picture would take, the reference design's StickyMarketCardsLottie. …
+  - never: A control that only works while its card is on top, or anything a reader must press to read the card. Whatever this returns is covered when the next card arrives; a focusable control in it brings its card to the top of the pile while it has focus, but a reader scrolling past never sees it. …
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 12 parts: root, inner, header, title, description, list, item, backdrop, body, media, image, scrim.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/stickycards.md`.

package/.llm/digest/tableheadercell.md

@@ -46,6 +46,10 @@ The name of a column, announced before every value under it. …
 - **headerCase** `enum` · default "upper"
   - `upper` — The house setting. Column names in capitals at font.overline — eleven pixels with wide tracking — which reads as a different texture from the values rather than a louder version of them. …
   - `title` — Names drawn as they were written, at font.label.sm — twelve pixels, medium, ordinary tracking. …
+- **scope** `enum` · default "col" — Which way the cell names: down its column, the usual case, or across its row. …
+  - `col` — The default. A name in the header row, announced before every value beneath it
+  - `row` — The first cell of a data row when that cell is what the row is about — an instrument, a plan, a country — rather than one more value in it. …
+  - never: A row header that can be sorted. Sorting orders rows by a column, so the control belongs on the column's name in the header row, never on the name of one row
 - **sortable** `boolean` · default false — The reader can order the table by this column. It draws the control and the mark; what pressing it does is the page's, reported through `onSort`
   - never: A column that only looks orderable. There is no state where the control is drawn and inert — a header that could be pressed to no effect is worse than one that was never offered
 - **onSort** `callback` · optional — Told the header was pressed. …

package/.llm/digest/teamgrid.md

@@ -0,0 +1,53 @@
+<!-- GENERATED from teamgrid.contract.json. Do not edit. -->
+
+# TeamGrid
+
+A section that sets out the people behind a company: a heading, and a grid of people under it — each a square photograph, their name, what they do and, where they have one, a link to a profile of theirs elsewhere. …
+
+`import { TeamGrid } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A leadership team, an advisory board or a regional management list on an about page
+- A responsive grid of person/profile cards — photo, name, role, and an optional external profile link — with an optional line under its heading and a "View all" that shows the rest of a longer list …
+
+## Something else, when
+
+- One person, spotlit, in their own words → **TestimonialSlider**
+- The items are not people — logos, features, figures → **FeatureCards**
+
+## Never
+
+- People who are not who the card says. A name, a face and a role are a claim about a real person — keep each in step with the person, and leave the profile link out unless it is theirs
+- The page's opening band. This sits under the page's heading, never in place of it
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, and with it the ink and the photographs' placeholder — the grey a picture sits on before it arrives, which follows the ground so it never vanishes into the band. …
+  - `page` — The default, and the page's own white. Most people sections have nothing to separate themselves from
+  - `subtle` — A quiet step off the page — the reference design's slate band — for a section that wants to read as its own. …
+  - `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never the brand's coral, `color.bg.brand`, which is not offered: that ground belongs to the band that asks a reader to do something
+- **title** `string` · required — Always. Who these people are, in the fewest words — "Meet our leadership team". It names the section as a region, so a screen reader can jump to it and past it
+  - never: A sentence. The line under it is for the sentence
+- **description** `string` · optional — A line saying who the set is, when the title alone does not — "The people steering Deriv's products, markets and teams"
+  - never: A paragraph, or an introduction to each person. The cards say who each one is
+- **people** `data` · required — Always. The people, in the order the page wants them read — by seniority or by relevance, the first `collapsedCount` of them showing at once. Each has a name, a role, a picture with its `alt`, and where there is one a `profile` link. …
+  - never: Anyone who has not agreed to be on the page, or a profile link that is not theirs
+- **collapsedCount** `number` · default 4 — How many people show before the rest are asked for. Four, the default, is one row at full width, so the button sits under a complete row. A list no longer than this has no button at all — there is nothing more to show
+  - never: Hiding one or two people behind a button. A person more than a row is better shown than asked for: raise this to the length of the list
+- **expandLabel** `string` · default "View all" — The button's words while the rest of the list is hidden. Translate it with the page, and keep it parallel to collapseLabel
+- **collapseLabel** `string` · default "View less" — The button's words once the whole list is showing, for the reason expandLabel exists
+- **profileName** `callback` · optional — The accessible name of a person's profile link, given the person. The visible word is the profile's own — "LinkedIn" — and it is the same on every card, so the link is named for its person too. …
+  - never: Visible text. It names the link to assistive technology and is never drawn
+- **externalLabel** `string` · default "(opens in a new tab)" — Said after every profile link's name, because a profile opens in a new tab and a reader should know before they press it — ResourceBanner's words for the same thing. Translate it with the page
+  - never: Visible text. It is added to the link's name for assistive technology and never drawn
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 14 parts: root, inner, header, title, description, people, list, item, media, text, name, role, profile, actions.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/teamgrid.md`.

package/.llm/digest/testimonialrow.md

@@ -40,6 +40,8 @@ A section that lets a review service's numbers back the page: a heading with the
 - **label** `string` · default "Reviews" — The name the row is announced by. The row is a scrolling region a keyboard has to be able to reach, so it carries a tab stop and a name of its own — Scroller's rule. …
 - **previousLabel** `string` · default "Previous reviews" — The accessible name of the arrow stepping the row back. A glyph announces nothing, so this is the whole of the control's name. Translate it with the page, and keep it parallel to nextLabel
 - **nextLabel** `string` · default "Next reviews" — The accessible name of the arrow stepping the row on, for the reason previousLabel exists
+- **externalLabel** `string` · default "(opens in a new tab)" — Said after the summary link and every linked review, because both open on a service the page does not own, in a new tab, and a reader should know before they press — TeamGrid's and ResourceBanner's words for the same thing. …
+  - never: Visible text. It is added to the link's name for assistive technology and never drawn
 
 ## Inside it
 

package/.llm/digest/testimonialslider.md

@@ -40,6 +40,10 @@ A section that lets the people who use the product say what it did for them: a h
   - never: A banner whose slides carry more than a reader can take in during motion.duration.dwell — turn it off rather than shorten the copy to fit the timer
 - **controlsLabel** `string` · default "Testimonials" — The name the dots are announced by. Its own name rather than the section's, so a screen reader moving into the dots hears what they are. Translate it with the page
 - **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
+- **roleDescription** `string` · default "carousel" — What a screen reader calls the set while it rotates — announced in place of a region, as the word for this kind of thing. …
+- **slideRoleDescription** `string` · default "slide" — What a screen reader calls each item while the set rotates, for the reason roleDescription exists. Translate it with the page
+- **positionLabel** `callback` · optional — The accessible name of each item while the set rotates, given its place in the set counting from one — so a reader hears where they are. …
+  - never: Visible text. It names the item to assistive technology and is never drawn
 
 ## Inside it
 

package/.llm/digest/textarea.md

@@ -60,6 +60,10 @@ A field for what a visitor wants to say in their own words — the message on a
   - never: Varying within one form. Whichever is chosen is a decision for the whole form: a page marking some labels with a word and others with a glyph reads as two conventions and teaches neither
 - **optional** `boolean` · default false — Most fields on the form are required, so the few that are not are worth marking instead
   - never: Marking every optional field on a form where most are optional — a marker on almost every label is noise, and the useful signal is whichever state is the exception
+- **requiredLabel** `string` · default "required" — The word drawn beside the label when requiredMark is text. Translate it with the page: the mark exists to say what it means in the reader's own language, which an English default does not
+- **optionalLabel** `string` · default "optional" — The word drawn beside the label of an optional field. Translate it with the page, as requiredLabel is
+- **labelTooltipLabel** `string` · optional — The accessible name of the button that opens labelTooltip. Without it the button is named "About" and the label; pass it to translate that with the page
+  - never: Visible text. It names the button to assistive technology and is never drawn
 
 ## The type refuses
 

package/.llm/digest/textinput.md

@@ -78,6 +78,10 @@ One line of text a visitor types before they are a customer. …
   - never: Carrying the requirement on its own. The mark is decorative either way — aria-required on the field is what says it to a screen reader
 - **optional** `boolean` · default false — Most of the form is required and one field is not. Marking the exception is what tells the reader anything
   - never: Every field on a form where nothing is required. Marking all of them says the same as marking none, and costs a word on each
+- **requiredLabel** `string` · default "required" — The word drawn beside the label when requiredMark is text. Translate it with the page: the mark exists to say what it means in the reader's own language, which an English default does not
+- **optionalLabel** `string` · default "optional" — The word drawn beside the label of an optional field. Translate it with the page, as requiredLabel is
+- **labelTooltipLabel** `string` · optional — The accessible name of the button that opens labelTooltip. Without it the button is named "About" and the label; pass it to translate that with the page
+  - never: Visible text. It names the button to assistive technology and is never drawn
 
 ## The type refuses
 

package/.llm/digest/textscroll.md

@@ -0,0 +1,43 @@
+<!-- GENERATED from textscroll.contract.json. Do not edit. -->
+
+# TextScroll
+
+A full-width section holding one large statement — a mission, a brand message — whose words brighten one after another as the reader scrolls past, from dimmed to full strength, so the sentence is read at the pace the page is moved. …
+
+`import { TextScroll } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A mission or vision statement, on an About or Who we are page
+- One emphatic brand message between two heavier sections, where a moment of copy on its own gives the page room to breathe
+- A campaign or partner programme's manifesto, in one sentence or two short ones
+
+## Something else, when
+
+- The statement needs a heading over it, a line under it or a way onward → **FeatureSplit**
+- The message asks the reader to do something → **CtaBanner**
+
+## Never
+
+- Long-form copy, or more than one paragraph. Past about three hundred characters the reveal outlasts the section's pass and the last words are still dim as it leaves
+- Copy that must be legible the moment it is on screen — a disclaimer, a legal line, a price. Words below the reveal's front are dimmed until the reader scrolls to them
+- Two of these back to back. A second reveal straight after the first is the same moment twice, and the page loses the pause the first one made
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, the axis every block shares: a statement that wants to be seen as a band takes one of the other two, and the page decides the rhythm. …
+  - `page` — The default, and the page's own white. A statement between two sections that need nothing to separate them
+  - `subtle` — The grey band, for a statement that should read as a section of its own without changing the page's voice. …
+  - `strong` — `color.bg.brand-strong`, the dark band, for the statement a page is built around — the mission on an About page. The words turn white and dim toward the band
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never the brand's own coral, which is not offered: a paragraph on it misses the contrast running copy needs
+- **text** `string` · required — Always. The statement, as plain text — one sentence or two short ones, under about three hundred characters. Split into words on its whitespace, so a run of spaces or a line break is one space in what is drawn. …
+  - never: Markup, emphasis or a link. The words are drawn as text and nothing in the string is interpreted; a statement that needs a word set apart or a way onward is a FeatureSplit
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 4 parts: root, inner, text, word.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/textscroll.md`.