@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/.llm/components/tooltip.md

@@ -169,6 +169,14 @@ The target and the mark are separate decisions, and conflating them is what prod
 
 Declared rather than emergent. Padding plus contents does clear 24px in several components today, and it is the weaker statement: it is a size nobody wrote down, so it moves when the type scale or the glyph does, and nothing says it was meant to be a target at all.
   Guidance only — cannot be checked automatically.
+- **A component is written along the reading axis, not along the page's left and right** — Every measure, inset and placement in this package names an axis rather than a side: inline-size and block-size, padding-inline and padding-block, inset-inline-start and inset-block-end, margin-inline: auto, text-align: start. Written that way a component follows whichever direction the page is read in, and a band whose claim ranges to the leading edge with its subject on the trailing one is the same composition in Arabic as in English, mirrored, with nothing restated. Written as left and right it is the same pixels in both, which is a layout nobody designed for the second language.
+
+The enum values follow the same rule and for the same reason. A prop that names where a picture sits takes start and end, never left and right — FeatureSplit, FeatureBullets and FeatureScroll all declare mediaPosition that way, and the flex directions they generate flip on their own because row already means the reading order. A value called left would have to be re-read as right by every author working in a mirrored page, which is a translation this system should be doing rather than asking for.
+
+The guidance a contract carries is part of the component, so it follows too. Describing a claim as ranging left is describing one of the two languages, and it was written that way here for a while: three of the opening bands said so in their own intent. A reader in a mirrored page meets that sentence and has to decide whether the component is wrong or the sentence is, and neither answer is one documentation should force.
+
+Two things genuinely have no logical form and are not covered by this. A CSS gradient takes a physical direction — there is no to inline-end — so a pattern that must mirror has to be stated twice under a direction query, and one that is periodic and centred, like PageHeader's rule grid, does not need to. A glyph that points the way onward is the other: an arrow is a picture of a direction, and mirroring it belongs to the icon set rather than to the component holding it.
+  Guidance only — cannot be checked automatically.
 
 ## Anti-examples
 

package/.llm/components/typography.md

@@ -142,6 +142,14 @@ The target and the mark are separate decisions, and conflating them is what prod
 
 Declared rather than emergent. Padding plus contents does clear 24px in several components today, and it is the weaker statement: it is a size nobody wrote down, so it moves when the type scale or the glyph does, and nothing says it was meant to be a target at all.
   Guidance only — cannot be checked automatically.
+- **A component is written along the reading axis, not along the page's left and right** — Every measure, inset and placement in this package names an axis rather than a side: inline-size and block-size, padding-inline and padding-block, inset-inline-start and inset-block-end, margin-inline: auto, text-align: start. Written that way a component follows whichever direction the page is read in, and a band whose claim ranges to the leading edge with its subject on the trailing one is the same composition in Arabic as in English, mirrored, with nothing restated. Written as left and right it is the same pixels in both, which is a layout nobody designed for the second language.
+
+The enum values follow the same rule and for the same reason. A prop that names where a picture sits takes start and end, never left and right — FeatureSplit, FeatureBullets and FeatureScroll all declare mediaPosition that way, and the flex directions they generate flip on their own because row already means the reading order. A value called left would have to be re-read as right by every author working in a mirrored page, which is a translation this system should be doing rather than asking for.
+
+The guidance a contract carries is part of the component, so it follows too. Describing a claim as ranging left is describing one of the two languages, and it was written that way here for a while: three of the opening bands said so in their own intent. A reader in a mirrored page meets that sentence and has to decide whether the component is wrong or the sentence is, and neither answer is one documentation should force.
+
+Two things genuinely have no logical form and are not covered by this. A CSS gradient takes a physical direction — there is no to inline-end — so a pattern that must mirror has to be stated twice under a direction query, and one that is periodic and centred, like PageHeader's rule grid, does not need to. A glyph that points the way onward is the other: an arrow is a picture of a direction, and mirroring it belongs to the icon set rather than to the component holding it.
+  Guidance only — cannot be checked automatically.
 
 ## Anti-examples
 

package/.llm/digest/button.md

@@ -2,7 +2,7 @@
 
 # Button
 
-Drives a visitor toward a conversion goal by navigating them to the next step in a funnel — a signup page, a pricing page, a demo booking. …
+Drives a visitor toward a conversion goal — a signup page, a pricing page, a demo booking — or performs the one action a section asks for, such as sending a newsletter form or opening a video. …
 
 `import { Button } from '@deriv-com/dds-marketing'`
 
@@ -14,8 +14,8 @@ Drives a visitor toward a conversion goal by navigating them to the next step in
 
 ## Something else, when
 
-- The action happens on the current page — submitting a form, toggling a setting, opening a dialog, removing something → **nothing in this system does this**
-- The words belong inside a sentence or a paragraph of body copy → **nothing in this system does this**
+- The action belongs to an application surface — a trade form, a settings panel, a confirmation that removes something → **nothing in this system does this**
+- The words belong inside a sentence or a paragraph of body copy → **Link**
 - The control is a glyph alone, with no words → **ButtonIcon**
 
 ## Props
@@ -31,12 +31,17 @@ Drives a visitor toward a conversion goal by navigating them to the next step in
   - `lg` — A hero, or a full-width conversion band that is the only control in view. …
 - **tone** `enum` · default "default"
   - `default` — The page's own ground, which sets the ink this component was drawn against — every button on a white page
-  - `inherit` — A section that painted its own ground and set its own ink: a dark hero, a brand band, a photo. …
-- **href** `string` · required — Always. The destination is the component — an anchor without an href is not a link, is not reachable by keyboard, and is announced as plain text, so there is no default that could stand in for one. …
-  - never: A placeholder while the destination is undecided — a # or an empty string is a control that looks live, takes focus and goes nowhere. Nor javascript: or a handler dressed as a URL: an action that runs in place is product's Button, and this component's own guidance says so
+  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a hero, a navigation bar at the top of one, a footer — which is the same near-black in light and dark. …
+  - `brand` — The control stands on the coral band, color.bg.brand — CtaBanner and CtaBannerSlider — which is the same coral in light and dark, so nothing on it switches either. …
+- **href** `string` · optional — The press goes somewhere with a URL of its own — the ordinary case for a call to action on a marketing page. It makes this an anchor rather than a button, which is what gives a visitor cmd-click, a visible destination and a copyable link. …
+  - never: A placeholder while the destination is undecided — a # or an empty string is a control that looks live, takes focus and goes nowhere. Nor javascript: or a handler dressed as a URL: leave href out and pass onClick, and this renders a button that does the work in place
 - **showIcon** `boolean` · default false — Where the destination continues a sequence rather than being simply somewhere else to go — the hero CTA that starts a signup, the button at the foot of a step. …
   - never: Every button in a section. The mark says "this continues" and is worth something only while it points at the one control that does; on four at once it is decoration and the reader stops reading it
 
+## The type refuses
+
+- variant="primary" with tone="brand" — The primary is the coral fill, and tone="brand" says the button stands on the coral band: coral on coral is a button nobody can see. On the band the primary action is variant="inverse"
+
 ## Inside it
 
 - Takes only text.

package/.llm/digest/buttonicon.md

@@ -34,7 +34,7 @@ One press carried by a glyph alone, in the space a label would need. …
   - `primary` — The one glyph-alone press a section is built around — a play control over a hero, the single action a band exists for. …
   - `secondary` — The ordinary case for these, because they usually arrive several at a time — a footer's social row, a carousel's two directions, a bar's dismiss. …
   - `inverse` — A section that paints its own ground — a brand-coloured band, a photo, a dark takeover. …
-  - `plain` — The control sits on a surface that has already said what it is — the exit on a sheet, a step in a set of marks — and a ring around it would be the loudest thing there. …
+  - `plain` — The control sits on a surface that has already said what it is — the exit on a sheet, a step in a set of marks — and a tint behind it would be the loudest thing there. …
   - never: Ranking a row of these against each other. A footer's five social links are peers; one of them drawn heavier says the other four are lesser, which is not a thing anybody meant to say. …
 - **size** `enum` · default "md" — Matching the control to the density of the band it sits in, which on a marketing page is set by the section rather than by the control
   - `sm` — A dense row of controls — a filter bar, a utility strip, a compact carousel. A square of size.control.sm holding a mark at icon.control.sm. …
@@ -43,7 +43,7 @@ One press carried by a glyph alone, in the space a label would need. …
   - never: Making one of a set stand out. Two of these side by side at different steps read as a control and its afterthought, and a carousel whose next is larger than its previous has said the path runs one way
 - **tone** `enum` · default "default"
   - `default` — The control is on a light ground, which is every surface this package paints by default
-  - `inverse` — The control is on a ground that runs against the mode — a mark in a navigation bar standing on a dark hero. The ink and the tints move together; nothing else does
+  - `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is the same near-black in light and dark. …
 - **icon** `node` · required — Always — the glyph is the whole control, so it is required rather than a slot that may be empty. …
   - never: A glyph whose meaning the visitor has to be taught, and never a second glyph — one control, one action, one shape. …
 - **label** `string` · required — Always. It is the entire accessible name, because nothing on screen carries one — the words that would have been the label if there had been room for one. …

package/.llm/digest/card.md

@@ -29,6 +29,7 @@ A surface that holds content belonging together. …
 
 - **variant** `enum` · default "surface"
   - `surface` — The default, and right for a card on the page. …
+  - `surface-light` — A light card among dark ones that has to stay light in both themes — a row mixing a dark, a coral and a grey card, where the grey one flipping to dark in dark mode would make two dark cards and break the set. …
   - `surface-raised` — The card sits on a color.bg.subtle band rather than on the page. …
   - `plain` — An editorial card — an article, a post, a story — where the picture and the headline are what separate one card from the next. …
   - `accent` — One card in a set is the promotional one and the page has already earned the colour. The coral is the loudest ground here, so a row of them is a row of nothing louder than the rest

package/.llm/digest/cardbody.md

@@ -46,6 +46,8 @@ Everything a card holds: the words inset from its edges and the picture that rea
   - never: The sentence explaining the card. That is description, which sits under this at a gap close enough that the two read as one block. A title that runs to a sentence leaves the copy with nothing to add
 - **description** `string` · optional — What the title means, usually a sentence or two. It takes the default body step, because a card's copy is copy rather than a caption. …
   - never: A control. This body holds two regions and neither is a place to act from — a card with a call to action puts it in the Card beneath this, where it is not wearing the body's copy styling
+- **link** `node` · optional — The card's own way on — "Learn more" — under the line, for a card in a Card rather than a CardButton: the card is read and the link is what is pressed. A standalone Link. …
+  - never: A card inside a CardButton. The whole card is already the link there, and a link inside a link is two destinations under one press — invalid HTML, and a screen reader announces both. Nor a Button: a card's way on is a destination, not an action
 - **mark** `node` · optional — The card leads with a glyph — a badge, a shield, a small piece of art that makes the feature recognisable before the title is read. …
   - never: A picture that should reach the card's edges. This is inset with the copy and sized to sit above a heading; a photograph put through it is a stamp in the corner of a wide margin. That is src, which renders the media region below or above this whole block rather than inside it
 - **src** `string` · optional — The card shows a picture — a photograph, a product render, a screenshot of the thing being described. Absent is the ordinary case: most cards are words
@@ -61,7 +63,7 @@ Everything a card holds: the words inset from its edges and the picture that rea
 ## Inside it
 
 - 2 components are refused inside it; the list and the reasons are in the long document.
-- Renders 9 parts: root, scrim, content, mark, eyebrow, title, description, media-frame, media.
+- Renders 10 parts: root, scrim, content, mark, eyebrow, title, description, link, media-frame, media.
 
 ---
 

package/.llm/digest/cardbutton.md

@@ -28,6 +28,7 @@ A card that responds to a press. …
 
 - **variant** `enum` · default "surface"
   - `surface` — The default, and right for a pressable card on the page. The same recessed step off the white page that Card takes, so a row mixing pressable and plain cards reads as one row
+  - `surface-light` — A light card among dark ones that has to stay light in both themes — a row mixing a dark, a coral and a grey card, where the grey one flipping to dark in dark mode would make two dark cards. …
   - `surface-raised` — The card sits on a color.bg.subtle band rather than on the page, where the recessed fill all but disappears and this one lifts off the band instead
   - `accent` — One card in a set is the promotional one and the page has already earned the colour
   - `accent-strong` — A card carrying more weight than its neighbours. The darkest of the four, and the one that takes white at 20.55:1 — the most legible ground a marketing card has

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

@@ -48,7 +48,7 @@ A button that opens a short set of destinations. Pressing one goes somewhere and
 - **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 is a link that does not navigate — Button is an anchor here, which is the reason this component drew its own trigger to begin with. …
+  - 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

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

@@ -0,0 +1,53 @@
+<!-- GENERATED from landinghero.contract.json. Do not edit. -->
+
+# LandingHero
+
+The band that opens a main landing page: the one thing the page is about, said once, at the top, over a ground dark enough that nothing above it competes. One of three opening bands, and the widest. …
+
+`import { LandingHero } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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
+
+## Something else, when
+
+- 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**
+
+## Never
+
+- A product, market, company or legal page. Each tier has its own band, and the reason they are separate components is so that this cannot be overridden
+- A second band further down the page. This is the page's opening and its `h1`; a page with two is a page that has told a reader twice what it is about
+- The navigation above it or the trail beneath that. The bar is a fixed layer the page mounts once and every band scrolls under; the breadcrumb is the page saying where it sits. Both are the page's and neither is the band's
+
+## Props
+
+- **eyebrow** `string` · optional — A word or two placing the page before its title names it — a product family, a market, a campaign
+  - never: A second sentence. This is the line a reader takes in without reading; at the length of a clause it is a description in the wrong place and at the wrong weight
+- **title** `string` · required — Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name
+  - never: A sentence with a full stop. A title that reads as prose is a description that has been set at eighty pixels
+- **headingLevel** `enum` · default "h1" — Which heading element the title renders as. The default is right for the band a page opens with, which is the only place this belongs. …
+  - `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+  - `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+  - never: Making the title look smaller. The level is what a screen reader builds its outline from, and nothing about it reaches the type
+- **description** `string` · optional — The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone
+  - 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 band's visual — the subject standing beside the claim, cropped by the band's own inline edge rather than floating clear of it
+  - never: The background. A photograph filling the band is `backgroundImage`; this sits in front of it and is placed against the band's edge
+- **backgroundImage** `string` · optional — A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it
+  - never: A flat colour, or a bright photograph. The band already paints its ground, and nothing here darkens an image on the page's behalf — a pale one leaves the claim unreadable
+
+## Inside it
+
+- 7 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.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/landinghero.md`.