@deriv-com/dds-marketing 1.0.2 → 1.1.0

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`.

package/.llm/digest/tiers.md

@@ -0,0 +1,50 @@
+<!-- GENERATED from tiers.contract.json. Do not edit. -->
+
+# Tiers
+
+A partnership-tier section: a centred heading over an ordered row of tiers, each a medal, a name and the stage it stands for, a card stating what the tier gives, and the bar a partner clears to reach it — with an optional way on under the row. …
+
+`import { Tiers } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A partner, affiliate or introducing-broker programme explains its tiers and what each one earns
+- Rewards grow with performance in two to four steps — commission bonuses, loyalty levels, a VIP ladder — and each step has a bar to clear
+- A partner landing page needs the progression shown at a glance, with a link on to the programme's full terms
+
+## Something else, when
+
+- The items have no order — they are things a product includes, or reasons to choose it → **FeatureCards**
+- The items are things a reader does, one after another, to get started → **Steps**
+- Plans a reader chooses between, each with the same rows of terms → **ComparisonCards**
+
+## Never
+
+- More than four tiers. The row holds four at full width and the track through the medals has nowhere to go past that; a longer ladder wants a table
+- Plans or prices a reader picks between. A tier is reached, not bought, and a row that reads as a progression tells a reader the cheaper plan is a step on the way to the dearer one
+- A tier promised without its bar. A benefit with no stated qualification on anything above the entry tier is a claim the page cannot stand behind
+
+## 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. The benefit cards are Card's recessed grey on it
+  - `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 tier section wearing it is a page with two calls to action, one of which does nothing
+- **title** `string` · required — Always. What the tiers add up to, in the fewest words that say it — 'Growing rewards as you scale'
+  - never: A sentence. The line under it is for the sentence
+- **description** `string` · optional — A line saying how the tiers work, when the title alone does not — 'Our tiered partnership model rewards performance.'
+  - never: A paragraph, or a summary of every tier. The tiers say what they give; this only says why they are a ladder
+- **tiers** `data` · required — Always. The tiers, lowest first — two to four, four for a partnership programme. …
+  - never: Tiers in any order but lowest to highest. The track through the medals reads start to end, and a ladder drawn out of order is one a reader climbs the wrong way
+- **link** `node` · optional — A way on to the programme's full terms — 'Learn more about partner tiers'. A standalone Link, under the row
+  - never: A button, or the sign-up itself. The section explains the ladder; asking a reader to join is the job of the band that does nothing else
+
+## Inside it
+
+- 10 components are refused inside it; the list and the reasons are in the long document.
+- Renders 19 parts: root, inner, header, title, description, list, tier, medal-row, line-start, medal, line-end, heading, name, stage, benefit, benefit-title, benefit-description, qualification, footer.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tiers.md`.

package/.llm/index.md

@@ -9,7 +9,7 @@ need — loading all of them dilutes the relevant one.
 Paths here are from the package root, so they resolve whether this file is read in place
 or its content handed over on its own.
 
-Sections: Core (54) · Layout (5) · Blocks (14)
+Sections: Core (54) · Layout (5) · Blocks (30)
 
 
 ## Core
@@ -98,17 +98,33 @@ The sections a page is built from, and the rhythm between them.
 
 | Component | Use when | Not for |
 |---|---|---|
+| Awards | Building credibility with the industry awards a company has won — a “Why choose us”, about-us or trust page · Six awards or more, enough that the phone's row reads as running on past the band's edge and the rows from the fold read as a field | One to three awards, or a few figures that make the case → `FeatureCards` · Partners, integrations or payment methods rather than awards → `LogoRows` · Reviews from customers rather than recognition from the industry → `TestimonialRow` |
+| ComparisonCards | Two or three products, accounts or plans that answer the same few questions differently — what you hold, what it costs, how far you can lose — and the difference is the point of the section · A "What you can trade" band: Spot against Futures, Options against Multipliers, each with its own rows and its own risk note | Five or more options, or rows that are the same for every option and read down a column → `ComparisonTable` · The options are features rather than alternatives — each a heading and a sentence, with nothing to compare row by row → `FeatureCards` · One option and the list of what it includes → `FeatureBullets` |
+| ComparisonTable | Comparing two or three options — platforms, plans, operating systems — on the same handful of features, where the reader reads across a row as often as down a column · A product page's "Web terminal, desktop or mobile": the same few features, each option's answer in a word or a short line · Schedule-style rows, where a cell may hold a short list of lines — a market's trading sessions, the days a rate applies | Each option has more to say than a cell holds — a sentence of its own, a footnote, a way on → `ComparisonCards` · A large dataset — many instruments, many columns — that a reader searches, sorts or pages through → `DataTable` · One option and the list of what it includes → `FeatureBullets` |
 | CtaBanner | A short, high-contrast promotion with one clear action — open an account, start trading, download the app · The band that closes a page, or breaks a long one, on the action the page exists to produce | Two or three promotions to rotate between → `CtaBannerSlider` · The band that opens the page → `LandingHero` · A message that needs a picture beside it → `FeatureSplit` |
 | CtaBannerSlider | Rotating between two or three genuinely different promotions without a hero's weight — open an account, try a tool, download the app | One promotion → `CtaBanner` · The band that opens the page → `LandingHero` · A message with more than a headline, a line and a button or two → `FeatureSplit` |
+| DataTable | Trading instruments and their specifications — contract size, minimum size, volume limits — on a market page · Trading conditions a reader looks up rather than reads through: spreads, leverage, margin, swaps · An MT5 or Deriv X specification page, where the set runs to dozens of rows and a reader is hunting for the one they trade | Three or four plans or accounts compared feature by feature, where every row is read rather than searched → `ComparisonTable` · A handful of rows with no need to search or page — a fee schedule of four lines → `Table` |
+| DownloadBanner | Promoting an app across the stores and platforms it ships on — App Store, Google Play, AppGallery, a desktop download, the web · A trading platform's page, near its end, once the product has been explained and the next thing a reader wants is to get it | One download, or the web alone → `Button` · A promotion that has to argue for the download in a headline and a sentence → `CtaBanner` |
 | FaqAccordion | The questions a reader asks before acting — fees, limits, how long a withdrawal takes — near the end of a landing page or on a help page · Objections a page has to answer without making every reader read every answer | The answers are short enough to read all at once → `FeatureBullets` · Each item is a feature, not a question → `FeatureCards` |
 | FeatureBullets | A page has to list what a product or a plan includes, and the list is the argument · Several benefits are each one line long and are read by scanning rather than reading · A claim needs something beside it, and a picture is the only thing there is to put there | The items are two or three words and belong on one line → `Badge` · Each item needs a heading and a paragraph of its own → `Card` · The section opens the page → `ProductHero` |
-| FeatureCards | Three or four things a product does, each a heading and a sentence, read side by side and compared at a glance · A set of destinations — markets, platforms, tools — each a card a reader presses to go there · One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground | Each item is one line, and the list is the argument → `FeatureBullets` · One claim beside a picture, with no card around it → `FeatureSplit` · The items are read in order, one leading to the next → `FeatureScroll` |
+| FeatureCards | Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance — the first choice for a set of three. The picture is CardBody's `src`, drawn below the words by default · A set of destinations — markets, platforms, tools — each a card a reader presses to go there · One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground | Each item is one line, and the list is the argument → `FeatureBullets` · One claim beside a picture, with no card around it → `FeatureSplit` · The items are read in order, one leading to the next → `FeatureScroll` |
+| FeatureCardsCarousel | A "what you get" band of five or six authored cards, each a benefit with a line and a picture, too many for one row of a grid, where one card in focus with a peek of the next is the point. Three or four cards are FeatureCards, which shows the whole set at once · A platform or product page whose feature cards are too many for one row of a grid and too equal to be a sequence | Three or four cards — the set a grid shows in one row → `FeatureCards` · The cards are read in order, one leading to the next → `FeatureScroll` · Two or three promotions on the brand's coral, one at a time → `CtaBannerSlider` |
 | FeatureScroll | A page has three or more things of the same kind to explain, each with a picture worth a screen — the markets a broker offers, the platforms it runs, the steps of an account opening · The set is meant to be walked through rather than compared, and a reader is expected to scroll it · The set comes from somewhere — a CMS, a registry, a filtered list — rather than being written out by hand | There are three or four items a reader is meant to compare → `FeatureCards` · The set is lines rather than things — what an account includes → `FeatureBullets` · There is one point to make → `FeatureSplit` · The section opens the page → `LandingHero` |
-| FeatureSplit | A page needs one more point about something it has already introduced, with a picture to carry it · The point is a sentence rather than a list, and does not earn a set of cards · A section needs a way onward that is not a call to action — a link to the page that says more | The point is several things the reader gets, each one line long → `FeatureBullets` · There are three or four points and each needs its own picture → `FeatureCards` · The section opens the page → `ProductHero` |
+| FeatureSplit | A page needs one more point about something it has already introduced, with a picture to carry it · The point is a sentence rather than a list, and does not earn a set of cards · A section needs a way onward that is not a call to action — a link to the page that says more | The point is several things the reader gets, each one line long → `FeatureBullets` · There are three or four points and each needs its own picture → `FeatureCards` · The section opens the page → `ProductHero` · The picture is the section's weight, wide or tall enough to stand under the words rather than beside them → `FeatureStack` |
+| FeatureStack | A statement with a picture that carries it — a global reach shown on a globe, a platform shown on a device — where the picture is the section's weight and the words introduce it · Closing a page or a stretch of one on an image, with a way on for the reader who wants more | The picture belongs beside the words, the two read side by side → `FeatureSplit` · The section is a set of figures read as a set → `Stats` · The section asks the reader to do one thing, now → `CtaBanner` |
+| ImageBanner | 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 | 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` |
 | LandingHero | A main landing page needs its opening band — the front page, or a campaign page under it · The claim has room to range to the reading edge with a subject beside it, which is what the landing tier is for · The steps between an eyebrow, a title, a description and the actions under them have to be the same on every landing page | The page is a product or a market page → `ProductHero` · The page is a company or a legal one — contact, about, terms → `PageHeader` · The band closes the page rather than opening it → `Footer` |
 | LogoColumns | Showing the partners, integrations or payment methods behind a claim — the names a reader recognises, as evidence for what the words say · Eight or more logos, enough that each column reads as running on past both edges of the wall | A handful of logos a reader should be able to count and compare → `Grid` · One picture beside the claim → `FeatureSplit` · Each logo needs to be pressed — a partner directory → `FeatureCards` |
 | LogoRows | Showing the partners, integrations or payment methods behind a claim under it, where the words lead and the logos follow · Eight or more logos, enough that each of the two rows reads as running on past both edges of the band | The logos should stand beside the claim, as a wall that is half the section → `LogoColumns` · A handful of logos a reader should be able to count and compare → `Grid` |
 | PageHeader | A company, legal or support page needs its opening band — contact, about, terms, a regulatory notice · The page is read rather than acted on, so its opening should name it and then get out of the way · The steps between an eyebrow, a title and a description have to be the same on every such page | The page is the front page, or a campaign page under it → `LandingHero` · The page is a product or a market page → `ProductHero` · The band closes the page rather than opening it → `Footer` |
 | ProductHero | A product or a market page needs its opening band — a platform, an instrument, an asset class · The thing the page is about is worth showing whole, under the claim rather than beside it · The steps between an eyebrow, a title, a description and the actions under them have to be the same on every product page | The page is the front page, or a campaign page under it → `LandingHero` · The page is a company or a legal one — contact, about, terms → `PageHeader` · The band closes the page rather than opening it → `Footer` |
+| ResourceBanner | 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 | 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` |
+| SceneScroll | 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 | 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` |
+| Stats | 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 | 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` |
+| Steps | 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 | 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` |
+| StickyCards | 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 | 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 here |
+| TeamGrid | 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 | One person, spotlit, in their own words → `TestimonialSlider` · The items are not people — logos, features, figures → `FeatureCards` |
 | TestimonialRow | Five to ten short, rated reviews collected by a review service, where seeing several at once is the point and the overall score is worth stating · A page that has made its claims and wants customers' own ratings to back them — a homepage's "What our customers say" | Two to five quotes the page chose, from partners or customers, each a few sentences and read one at a time → `TestimonialSlider` · A single review → `FeatureSplit` |
 | TestimonialSlider | Two to five real quotes from partners or customers, each a few sentences, read one at a time · A page that has made its claims and wants someone other than the brand to back them | A single quote → `FeatureSplit` · Ratings and review counts from a review site → `TestimonialRow` |
+| TextScroll | 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 | 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` |
+| Tiers | A partner, affiliate or introducing-broker programme explains its tiers and what each one earns · Rewards grow with performance in two to four steps — commission bonuses, loyalty levels, a VIP ladder — and each step has a bar to clear · A partner landing page needs the progression shown at a glance, with a link on to the programme's full terms | The items have no order — they are things a product includes, or reasons to choose it → `FeatureCards` · The items are things a reader does, one after another, to get started → `Steps` · Plans a reader chooses between, each with the same rows of terms → `ComparisonCards` |