@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/.llm/digest/checkbox.md

@@ -0,0 +1,63 @@
+<!-- GENERATED from checkbox.contract.json. Do not edit. -->
+
+# Checkbox
+
+Records a single on-or-off choice that is submitted with the form around it rather than applied the moment it is ticked
+
+`import { Checkbox } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A choice the user makes now and confirms later — the form's Save or Continue is what applies it
+- Agreeing to something before proceeding — terms, a risk disclosure, a confirmation the user must actively give
+- One of several independent choices, each of which can be on or off without affecting the others
+
+## Something else, when
+
+- Choosing exactly one option from a short set, where picking one unpicks the others → **SegmentedControl**
+- Performing an action rather than recording a choice → **Button**
+
+## Never
+
+- A setting that takes effect the moment it is ticked. A checkbox is a value the form around it submits, and one that applied immediately would misreport itself — the reader looks for Save, finds nothing waiting, and cannot tell whether the change took. Marketing has no immediate-apply toggle to send them to
+- Destructive or irreversible changes — a checkbox is a value in a form, and a tick is not a confirmation step
+- A choice the user cannot see the label of. The label is required and always rendered: a bare box states nothing about what ticking it agrees to
+
+## Props
+
+- **tone** `enum` · default "standard"
+  - `standard` — The default, and almost always right — the ticked box fills with the neutral that outranks everything around it, so the choice is legible before any colour is read and it is the fill every other chosen control in this package takes, which is what lets a form of them read as one set of answers …
+  - `accent` — The checkbox is the brand moment of the view — a single consent the design is deliberately drawing the eye to — and the surrounding design already carries brand red
+- **checked** `enum` · default "unchecked"
+  - `unchecked` — The default — the choice has not been made, or has been made against
+  - `checked` — The user has made this choice, or it arrives pre-made and they may change it
+  - `indeterminate` — A box that summarises others, where some but not all of them are ticked — a Select all above a partly selected list
+  - never: A pending or loading state. Indeterminate means partly chosen, not not-yet-known, and a user who ticks it expects the group to follow
+- **status** `enum` · default "none"
+  - `none` — The default — the choice has not been judged, or it passed and there is nothing to say
+  - `error` — The box had to be ticked and was not, or what ticking it asks for is not accepted
+  - `warning` — The choice is accepted but has a consequence the user should see before submitting
+  - `success` — The choice was checked against something and passed, and confirming that is worth the room
+  - never: A box in a set where something above it already asks the question and reports the error. The message answers for the whole set, and a box repeating it states the same failure twice. This prop is for the box that stands alone, which is the case a group cannot cover: a single consent has nothing above it to carry the error. …
+- **label** `string` · required — Always — it states what ticking the box agrees to, and the box shows nothing on its own. A phrase the user can read as a claim they are agreeing with: "Send me trade confirmations", not "Confirmations". …
+  - never: The consequence or the rule, which belongs beside the form rather than inside the choice — a label that explains has stopped naming the thing being agreed to, and there is a description for what it was trying to say. …
+- **showLabel** `boolean` · default true — Drawing the words, which is nearly always. A checkbox on its own is a question, and a question with no words is not one
+  - never: Deciding whether the box has a label. It always has one and it is always announced — this only says whether the label is drawn. Off is clipped, not removed, so a screen reader still reads it
+- **description** `string` · optional — Ticking the box commits the user to something the label cannot carry without becoming a sentence — what it costs, how often it happens, what it applies to. …
+  - never: Guidance about the form as a whole, or the rule behind the choice, which belongs beside the form rather than under one of its controls. A note repeated under every box is describing the set, and putting it on one of them says it is true of that one only
+- **statusMessage** `string` · optional — Whenever the status is an error or a warning — the words are what the user acts on, and the colour alone is not available to everyone
+  - never: Restating the label. The message says what happened and what to do, not what the choice was
+
+## The type refuses
+
+- status="error" with statusMessage=null — An error with no explanation leaves the user stuck
+- status="warning" with statusMessage=null — A warning with no explanation is a choice the user cannot act on
+
+## Inside it
+
+- 2 components are refused inside it; the list and the reasons are in the long document.
+- Renders 9 parts: root, control, box, field, indicator, text, label, description-text, message.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/checkbox.md`.

package/.llm/digest/ctabanner.md

@@ -0,0 +1,44 @@
+<!-- GENERATED from ctabanner.contract.json. Do not edit. -->
+
+# CtaBanner
+
+A full-bleed coral band carrying one short promotion and the action it asks for — the strip that breaks a long page with the one thing the page wants done, or closes it. …
+
+`import { CtaBanner } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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
+
+## Something else, when
+
+- Two or three promotions to rotate between → **CtaBannerSlider**
+- The band that opens the page → **LandingHero**
+- A message that needs a picture beside it → **FeatureSplit**
+
+## Never
+
+- Two banners in one view — two coral strips are two demands, and the second makes the first one ordinary
+- More than a headline, a line and two buttons
+
+## Props
+
+- **title** `string` · required — Always — the message, in a few words. Short enough to take in at a glance; a line break goes where the words pause, not where the box runs out
+  - never: A sentence. The description is for the sentence; the title is what a reader takes in on the way past
+- **headingLevel** `enum` · default "h2" — Matching the outline of the page around the banner. Size does not change with it — the headline is drawn at font.h1 at either level, the scale and the level being separate decisions
+  - `h2` — The default: a banner is a section of the page, under the page's own h1
+  - `h3` — A banner nested inside a section that already carries the h2 it belongs to
+- **description** `string` · optional — A line saying why the action is worth taking — what the reader gets, or how little it costs them
+  - never: A paragraph. A banner is read at a glance, on the way down a page; copy a reader has to work through is copy they scroll past
+- **actions** `node` · optional — The one action the message asks for, or two at most. …
+  - never: A third action, or a primary Button: coral on the coral ground is a button nobody can see
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 7 parts: root, inner, content, text, title, description, actions.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/ctabanner.md`.

package/.llm/digest/ctabannerslider.md

@@ -0,0 +1,45 @@
+<!-- GENERATED from ctabannerslider.contract.json. Do not edit. -->
+
+# CtaBannerSlider
+
+CtaBanner's layout with a slider in it: the same full-bleed coral band, rotating between two or three short promotions. …
+
+`import { CtaBannerSlider } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Rotating between two or three genuinely different promotions without a hero's weight — open an account, try a tool, download the app
+
+## Something else, when
+
+- 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**
+
+## Never
+
+- A single message — that is CtaBanner
+- Messages that say the same thing twice, rotated to look like more
+- A slider beside a CtaBanner in the same view — two coral strips are two demands
+
+## Props
+
+- **slides** `data` · required — Always. The messages, in the order they rotate — two or three. …
+  - never: One message — that is CtaBanner — or a set padded out to rotate. Every slide is a few seconds of a reader's attention, and one that says what another said is a few seconds taken for nothing
+- **headingLevel** `enum` · default "h2" — Matching the outline of the page around the banner, for every slide's headline at once. Size does not change with it — every headline is drawn at font.h1, the scale and the level being separate decisions
+  - `h2` — The default: a banner is a section of the page, under the page's own h1
+  - `h3` — A banner nested inside a section that already carries the h2 it belongs to
+- **autoplay** `boolean` · default false — Whether it advances on its own, holding each slide for motion.duration.dwell. Off by default, so a slider nobody configured stays still. …
+  - 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
+- **label** `string` · default "Promotions" — The name the banner is announced by — a region a screen reader can jump to and skip. Name what it holds, not that it is a banner: 'Promotions', 'Offers'. Translate it with the page
+- **controlsLabel** `string` · default "Slides" — The name the dots are announced by, as a group inside the banner. Its own name rather than the banner's, so a screen reader moving into the dots hears what they are rather than 'Promotions' a second time. …
+- **slideLabel** `string` · default "Slide" — The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 9 parts: root, inner, track, slide, text, title, description, actions, controls.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/ctabannerslider.md`.

package/.llm/digest/divider.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from divider.contract.json. Do not edit. -->
+
+# Divider
+
+A rule between things, and the quietest way to say that what is on one side of it belongs to a different group from what is on the other. …
+
+`import { Divider } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two groups inside one container that nothing else is separating — a footer's link columns, the tiers inside a pricing card, a card's summary above its detail. …
+- A row of items holding one that belongs to a different set from its neighbours — the vertical case. …
+- A word between two rules, where that word is the entire content of the divide: OR between two ways of signing up, and little else. …
+
+## Something else, when
+
+- The groups have names → **Typography**
+- The space between the groups already separates them → **nothing in this system does this**
+- The line wanted is the edge of a surface → **Card**
+- The line wanted is the rail under a tab strip → **TabList**
+
+## Never
+
+- Room. It draws a line and owns no space around it, so the air either side is the layout's — only the thing holding the groups knows how much air they deserve. A rule that carried margins of its own would be a rule nobody could put anywhere, because every place it went would need them different
+- A line under every heading. A page ruled off at each of its headings reads as a form to be filled rather than as prose to be read, and the rules stop meaning anything once they are everywhere — which is the state a divider cannot recover from, since it has only one thing to say. …
+- Two rules with nothing between them, or a rule at the start or end of a set. A separator separates, so one with a group on only one side of it is a line drawn around nothing — and at the edge of a container it is the container's own border, moved inward by a pixel and drawn in the wrong ink
+- Structure a reader navigates by. A screen reader announces a separator where it helps and skips it where it does not; what makes a group findable is a heading or a list, and a rule is neither. If a group has to be reachable, give it something with a name
+- Carrying a status, a warning, or any other meaning through colour. There is one ink here and it is the quietest one this package has, deliberately: a red rule is a message nobody can read, and the message belongs in words on the surface the rule divides
+
+## Props
+
+- **orientation** `enum` · default "horizontal" — The axis the groups are arranged on. A rule across a stack is horizontal; a rule down a row is vertical
+  - `horizontal` — The default, and nearly every divider: a rule across a stack, separating what is above it from what is below. …
+  - `vertical` — A rule down a row, separating items beside one another. …
+  - never: Turning a rule to fit a layout that has not decided what it is. The orientation follows the axis the groups are arranged on — a vertical rule between two stacked groups says they sit side by side, which is a claim about the layout that the layout will contradict. …
+- **label** `string` · optional — The divide has a word, and the word is short: OR between two ways of signing up, and very little else. …
+  - never: A sentence, or a heading. The word sits between two rules in the width of a container, so anything longer takes the rules with it: at a phrase there is little line left on either side, and at a sentence the divider has become a caption drawn in the wrong ink. …
+- **decorative** `boolean` · default false — The grouping this rule draws is already announced some other way — the rows either side are list items, the sections either side have headings of their own. …
+  - never: A rule that is the only thing saying the groups are different. That is the ordinary case, which is why it is the default: where the line carries the grouping for the reader who can see it, the separator role is what carries the same grouping for the reader who cannot, and hiding it takes the structure away from exactly one audience
+
+## The type refuses
+
+- decorative=true with label="*" — A labelled divider is not a separator — the word is content, and content is why the role is given up. …
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, line, label.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/divider.md`.

package/.llm/digest/dropdownmenu.md

@@ -0,0 +1,67 @@
+<!-- GENERATED from dropdownmenu.contract.json. Do not edit. -->
+
+# DropdownMenu
+
+A button that opens a short set of destinations. Pressing one goes somewhere and the menu shuts — it holds no value and reports no answer, so there is nothing about it to find on reopening. …
+
+`import { DropdownMenu } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A set of destinations too long for the navigation bar and too short to be a page of its own — languages, regions, the parts of a long index
+- The set is short enough to read at a glance, where a visitor is choosing rather than searching
+
+## Something else, when
+
+- The set reports a choice the visitor should find marked when they return → **nothing in this system does this**
+- The destinations belong in the page's navigation → **nothing in this system does this**
+- It is one destination rather than one of a set → **nothing in this system does this**
+- The set is long enough that a visitor would rather type than read → **nothing in this system does this**
+
+## Never
+
+- Anything that destroys. Marketing has no destructive tone by decision — a page navigates a visitor toward a conversion and never deletes on their behalf
+- The page's main action. A menu is a set of supporting destinations, and the one step a page was built to produce is a Button in the open where it can be seen without a press
+- Carrying the words a visitor needs before choosing. A row is a short label; what a choice means belongs on the page, where it can be read without opening anything
+
+## Props
+
+- **variant** `enum` · default "outlined"
+  - `outlined` — The control stands on its own — a switcher in a toolbar, a filter above a table, anywhere a reader has to find it before they can use it. The edge is what says there is something here to press
+  - `plain` — The control sits among others that have already said what they are — a locale beside a row of sections in a navigation bar, where every neighbour is words and a mark and an edge around one of them would make it the loudest thing in the set. …
+- **size** `enum` · default "md" — Match it to the controls it stands beside. Two steps and no third: this package's control ramp runs sm then md, and the step above them is being retired rather than offered here
+  - `sm` — Beside body copy rather than above it — a language picker in a navigation bar or a footer, where the trigger is one item in a row of links and should not outweigh them
+  - `md` — The default, and nearly every other page. The same height as a default Button, so the two line up when they sit in the same band
+  - never: Making the menu itself bigger. This sizes the trigger and the rows in it; how wide the panel runs is its longest destination's business, and how tall it gets before scrolling is size.menu.max at either step
+- **alignment** `enum` · default "start"
+  - `start` — The menu's leading edge lines up with the trigger's. The default, because a visitor reads from that edge and the destinations begin where the button's own words began
+  - `end` — Its trailing edge lines up instead, which is what a trigger near the end of a row needs — a footer's language picker aligned to the start would run off the screen
+- **tone** `enum` · default "default"
+  - `default` — The control is on a light ground, which is every surface this package paints by default
+  - `inverse` — The control is on a ground that runs against the mode — a navigation bar standing on a dark hero. …
+- **label** `string` · required — Always — the words on the trigger, and the whole of what a visitor has to go on before they press it. "Language", "Region", "More pages". …
+  - never: A sentence. This sits in a row of other things and does not wrap — words long enough to need the room are words that belong on the page
+- **icon** `node` · optional — A mark before the trigger's words, where the set is read by shape as much as by reading — a globe beside "Language", a flag beside the region a visitor is already in
+  - never: The chevron, which this component draws itself and is not a slot. And saying what the menu holds when the words already do: a mark beside "Language" is recognised faster, a mark beside "Choose where you are reading from" is decoration in front of a sentence
+- **chevron** `boolean` · default true — A chevron in the trigger, pointing down while the menu is shut and up while it is open. …
+  - never: A trigger standing on its own. Without an edge or a chevron there is nothing left saying the control opens anything, and a reader finds out by pressing it. Turn it off only where the neighbours say it — a locale in a row of sections that each carry one, where a third chevron is the repetition rather than the signal
+- **openOnHover** `boolean` · default false — The menu is one of several things on a bar that open, and the others open on hover — a switcher beside a row of navigation sections, where a reader who has learned that the sections open under the pointer meets one control that does not and reads it as broken. …
+  - never: A menu whose rows do something on the spot rather than go somewhere. Hover is an accident as often as it is an intention, and a set opened by accident is one a reader can act on by accident
+- **trigger** `node` · optional — A control this component should open rather than draw — one whose mark is the whole of it, with no words to read. …
+  - never: Anything that is not a button. A menu opened by a div is a menu a keyboard cannot reach, and one opened by this package's Button with an href is a link that does not navigate — Button was an anchor always when this component drew its own trigger, which is why it did. …
+- **open** `boolean` · optional — The page holds whether the menu is open, and this component stops holding it. For the case where something outside has to shut it — a navigation bar that closes its menu when another one opens. …
+  - never: Opening it on arrival. A menu that opens itself is a panel the visitor did not ask for, over content they came to read — and the browser scrolls whatever takes focus into view, so it moves the page as well
+- **defaultOpen** `boolean` · optional — A specimen — a documentation page, the preview's own stage — where the menu has to be on screen to be looked at. This component still holds the state afterwards
+  - never: A real page. It is the same objection as open's, without even a prop the page could use to close it again
+- **onOpenChange** `callback` · optional — Something outside has to know — a navigation bar shutting its other menus, a page that dims behind an open one. Required in practice alongside open, which is the only way a driven menu ever closes
+  - never: Running what the row does. That is the row's own onSelect, and a menu cannot tell you which one was pressed — it only knows that it shut
+
+## Inside it
+
+- Takes only MenuItem.
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 6 parts: root, trigger, icon, label, chevron, surface.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/dropdownmenu.md`.

package/.llm/digest/faqaccordion.md

@@ -0,0 +1,43 @@
+<!-- GENERATED from faqaccordion.contract.json. Do not edit. -->
+
+# FaqAccordion
+
+A section of questions and answers: a heading over an Accordion, one question open at a time. …
+
+`import { FaqAccordion } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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
+
+## Something else, when
+
+- The answers are short enough to read all at once → **FeatureBullets**
+- Each item is a feature, not a question → **FeatureCards**
+
+## Never
+
+- Content a reader must see — terms, risk warnings, anything the page is obliged to show. A folded answer is one most readers never open
+- Navigation. A row that opens to a list of links is a menu wearing a question
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice — the reference design's slate FAQ. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left
+- **title** `string` · required — Always. What the questions are about, in the fewest words — "Frequently asked questions", "Withdrawals"
+  - never: A question. The rows are the questions; the heading is what they share
+
+## Inside it
+
+- Takes only AccordionItem.
+- At least 2, no ceiling — fewer is not this component and more is a different one.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 4 parts: root, inner, title, list.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/faqaccordion.md`.

package/.llm/digest/featurebullets.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from featurebullets.contract.json. Do not edit. -->
+
+# FeatureBullets
+
+A section pairing a claim with a ruled list of what something includes, beside one picture. …
+
+`import { FeatureBullets } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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
+
+## Something else, when
+
+- 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**
+
+## Never
+
+- A comparison. Every line here is included and marked so; a list where some items are absent needs a mark for absence, which this has no way to say
+- Running prose broken into lines. A check against a sentence claims the sentence is a feature
+- The page's opening or closing band. This is a section in the middle of a 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 — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+  - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **mediaPosition** `enum` · default "end" — Which side the picture takes at full width. Alternating it down a page is what stops three of these in a row reading as one long column, and it is the page's decision rather than this section's — which is why it is a prop and not a rule. …
+  - `end` — The default. The list is read first, which is the order the section argues in
+  - `start` — The second of two on a page, so the two do not read as one column with a picture stuck to one side
+  - never: Moving the picture on a phone. There is one column there and the list leads it
+- **title** `string` · required — Always. What the list is a list of, in the fewest words that say it
+  - never: A sentence. The list underneath is the argument; this only has to name it
+- **bullets** `data` · required — Always. One line per thing included, each short enough to take in at a glance. Strings rather than nodes, because every line is marked the same way and a line free to bring its own mark is a list that stops being one
+  - never: A sentence per line, or a line that is not included in what the title names. The mark against each one is a claim the page is making
+- **media** `node` · required — Always. The picture that sits beside the list — a screenshot, a photograph, an illustration. …
+  - 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
+
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 10 parts: root, inner, split, content, title, list, item, mark, text, media.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/featurebullets.md`.

package/.llm/digest/featurecards.md

@@ -0,0 +1,49 @@
+<!-- GENERATED from featurecards.contract.json. Do not edit. -->
+
+# FeatureCards
+
+A section that opens with a heading and sets a grid of cards under it — the shape a marketing page uses for “why choose us” and “what you get”. …
+
+`import { FeatureCards } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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
+
+## Something else, when
+
+- 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**
+
+## Never
+
+- More than eight cards. Past two rows a grid stops being compared and starts being scanned, and that is a page of its own
+- 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. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. …
+  - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **title** `string` · required — Always. What the cards are, in the fewest words that name them — "Why trade with Deriv", "Markets you can trade"
+  - never: A sentence. The line under it is for the sentence
+- **description** `string` · optional — A line saying what the set has in common, when the title alone does not
+  - never: A paragraph, or a summary of every card. The cards say what they are; this only says why they are together
+- **link** `node` · optional — A way on to the page the whole set belongs to — "See all markets". A standalone Link, under the line
+  - never: A button. The cards are the actions here, and a Button over them would be a second, louder one
+
+## Inside it
+
+- Takes only Card, CardButton.
+- At least 1, at most 8 — fewer is not this component and more is a different one.
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, header, title, description, link, grid, item.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/featurecards.md`.

package/.llm/digest/featurescroll.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from featurescroll.contract.json. Do not edit. -->
+
+# FeatureScroll
+
+A section that gives a set of things one screen each, with the picture pinned beside the words while a reader is on them. …
+
+`import { FeatureScroll } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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
+
+## Something else, when
+
+- 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**
+
+## Never
+
+- Two items. A set given a screen each has to be worth the travel, and a pair is worth one screen with both on it
+- A list of links. The stops are things with pictures and sentences; a set of destinations belongs in a navigation panel or a footer's columns
+- Anything a reader has to act on. This is a walk through a set, and a form or a price in the middle of it is a decision asked at the point a reader is least ready to make one
+- A set whose stops each need their own arrangement. Every stop here is the same shape by construction, which is what makes the set a set — a page wanting one stop to differ wants several FeatureSplits instead
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+  - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **mediaPosition** `enum` · default "end" — Which side the pictures pin to, for every stop at once. …
+  - `end` — The default. The words are read first, which is the order a reader’s eye takes a two-up row in
+  - `start` — The pictures lead, for a section following one that put its own the other way — two scrolls facing the same way read as one very long column
+  - never: Moving the pictures on a phone. There is one column there, and the picture sits under each name whichever side this names
+- **title** `string` · required — Always. What the set is a set of, in the fewest words that say it — 'All your markets in one place'. It is the only thing a reader sees before committing to several screens of scrolling, so it has to say what is coming
+  - never: A claim about the first stop. The heading is over the whole set; an argument belongs in the stop it argues for
+- **steps** `data` · required — Always. The stops, in the order a reader meets them. Three at least — the section is built on each one having a screen, and a pair is worth one screen with both on it. …
+  - never: A set assembled to fill the section. Each stop costs a reader a screen of scrolling, so a stop that is there for symmetry is a screen nobody wanted
+
+## Inside it
+
+- 10 components are refused inside it; the list and the reasons are in the long document.
+- Renders 11 parts: root, inner, heading, steps, step, content, title, description, link, media, picture.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/featurescroll.md`.

package/.llm/digest/featuresplit.md

@@ -0,0 +1,54 @@
+<!-- GENERATED from featuresplit.contract.json. Do not edit. -->
+
+# FeatureSplit
+
+A section putting one claim, a line explaining it and a way onward beside a single picture. …
+
+`import { FeatureSplit } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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
+
+## Something else, when
+
+- 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**
+
+## Never
+
+- A list. Two sentences separated by a full stop is not a list, and a reader scanning for several things will miss the second — that is what FeatureBullets is for
+- The page's opening or closing band. This is a section in the middle of a page and carries no navigation of its own
+- A call to action. The way onward here is a link to somewhere that says more, not the thing the page wants a reader to do
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+  - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **mediaPosition** `enum` · default "end" — Which side the picture takes at full width. Alternating it down a page is what stops three of these in a row reading as one long column, and it is the page's decision rather than this section's — which is why it is a prop and not a rule. …
+  - `end` — The default. The claim is read first, which is the order the section argues in
+  - `start` — The second of two on a page, so the two do not read as one column with a picture stuck to one side
+  - never: Moving the picture on a phone. There is one column there and the words lead it
+- **title** `string` · required — Always. The one claim the section makes, in the fewest words that say it
+  - never: A sentence. The description underneath carries the argument; this only has to name it
+- **description** `string` · optional — The lines under the title that say what the claim above means, for a reader not convinced by the claim alone. …
+  - never: A paragraph. Past about two hundred characters the text column runs longer than the square beside it and the two halves stop lining up, which is the one thing a split has to get right. The reference design caps it at exactly that
+- **link** `node` · optional — The section has somewhere to send a reader who wants more than it says — the page this one is a summary of. …
+  - never: The page's main call to action. This is a way onward from a supporting point, and a primary button here competes with the one the page actually wants pressed
+- **media** `node` · required — Always. The picture that sits beside the claim — a screenshot, a photograph, an illustration. The section is a split and the picture is one half of it: without one the claim runs to a measure it was never sized for
+  - 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
+
+- 9 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, split, content, title, description, link, media.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/featuresplit.md`.

package/.llm/digest/filterchip.md

@@ -0,0 +1,68 @@
+<!-- GENERATED from filterchip.contract.json. Do not edit. -->
+
+# FilterChip
+
+A token the reader turns on and off in place, standing for one narrowing of the set shown beside it. …
+
+`import { FilterChip } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- An index is long enough to be worth cutting down and its categories are few enough to show in full — a blog filtered by topic, a help centre filtered by product, a market list filtered by asset class …
+- The choice is small enough that a form control would be more machinery than it deserves — turning one topic on is not a question worth a checkbox and a label
+- What is chosen has to stay visible while the reader reads what it did, so the narrowing and the list it produced can be read together
+
+## Something else, when
+
+- The token stands for a narrowing already applied, which the reader drops rather than turns off → **RemovableChip**
+- The thing named cannot be acted on and is there to be read — a tag on an article, a status on a card → **Badge**
+- The chips are really the navigation of the page, and pressing one changes what the page is → **Tab**
+- Pressing it goes somewhere — a category page with its own address → **Link**
+
+## Never
+
+- An action. It is pressed to say a thing applies, and nothing else — one that submits or navigates is a button wearing a token's shape, and a reader cannot tell which they have until they press it
+- A set so long it wraps into several rows. Chips are read as a group at a glance, and past a handful the reading costs more than a list would
+- Carrying the chosen state in hue alone. Two colours of the same lightness are no difference to a reader who cannot separate them, which is why the chosen ground travels the whole way from the page's ground to the darkest one this package has rather than to a tint of the same weight
+
+## Props
+
+- **selected** `boolean` · default false — The narrowing currently applies. It is the consumer's to hold, because the list and the chip are one fact — a chip keeping its own copy is how the two come to disagree
+  - never: Marking something as important, or as the default. Chosen means the reader chose it, and one that arrives already on implies an act nobody took
+- **size** `enum` · default "sm" — How dense the row is, matched to whatever it sits beside. …
+  - `sm` — The default. A step under the button or field it stands beside rather than level with it, which is what keeps a row of narrowings from reading as a row of calls to action
+  - `md` — A touch-first layout, or a filter row in a hero band where the chips carry more weight. …
+  - never: Marking one chip in a row as more important. They are a set of equals and a row of mismatched heights reads as a mistake before it reads as emphasis
+- **content** `enum` · default "none" — What the chip carries after its words, where it carries anything. It names the kind rather than being inferred from which node arrived, so exactly one thing can be in the slot and a leftover prop is inert rather than fighting for the space
+  - `none` — Nothing after the words. Most chips, and the one to reach for unless something earns the space in a row read at a glance
+  - `icon` — A glyph qualifying the narrowing rather than naming it — a mark that a topic is new, or that it came from somewhere else. …
+  - `badge` — How many entries the narrowing would leave, which is the fact a reader wants before they press. …
+  - `custom` — The row needs a mark neither of the named kinds is. …
+  - never: Repeating the label, or naming the narrowing twice. The slot qualifies what the words already said; a chip whose trailing mark restates them has spent the space for nothing
+- **label** `string` · required — Always, and required on that account — it is the whole of what the chip says. Short enough to read at a glance: a token carrying a sentence has stopped being one
+  - never: Describing what pressing it does. The chip names the narrowing, and what happens is that the narrowing applies
+- **leadingIcon** `node` · optional — A glyph makes the kind of narrowing faster to recognise than its name alone. It sits before the words and never replaces them. …
+  - never: Decoration, or a second copy of what the word says. A row where every chip carries a mark that adds nothing reads more slowly than plain words would
+- **trailingIcon** `node` · optional — The glyph shown when content is icon. Sized and coloured with the chip rather than on its own terms, so a row of them reads as one set
+  - never: Filling the slot on its own. `content` decides what is shown, so this is inert until it names icon — which is what stops two marks arriving at once when a chip changes its mind about what it carries
+- **badge** `node` · optional — The count shown when content is badge. A Badge rather than bare type, so the number reads as a fact of its own rather than as part of the label — and so it carries its own colour, which the chip does not decide
+  - never: Filling the slot on its own. `content` decides what is shown, so this is inert until it names badge
+- **custom** `node` · optional — Whatever is shown when content is custom. Nothing here is described by the documentation or the library, which is the cost of the escape hatch
+  - never: Filling the slot on its own. `content` decides what is shown, so this is inert until it names custom
+- **onSelect** `callback` · optional — What hears the press. It reports what the chip is about to become rather than that it was pressed, so a consumer writes the value back without working out which way it went
+  - never: Reading the event. The signature is the new state because that is the decision the reader made; a handler reaching for the event recomputes what it was handed
+
+## The type refuses
+
+- content="icon" with trailingIcon=null — content is icon and there is nothing to show, which renders a gap where something was promised
+- content="badge" with badge=null — content is badge and there is nothing to show, which renders a gap where something was promised
+- content="custom" with custom=null — content is custom and there is nothing to show, which renders a gap where something was promised
+
+## Inside it
+
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 4 parts: root, icon, label, trailing.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/filterchip.md`.