@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/.llm/digest/footer.md

@@ -0,0 +1,57 @@
+<!-- GENERATED from footer.contract.json. Do not edit. -->
+
+# Footer
+
+The band that closes a marketing page, and the sections every one of them is made of: whose site this is, where else it goes, what the law obliges it to say, and the line that closes it. …
+
+`import { Footer } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A marketing page needs its closing band — the mark, the site's other destinations, the regulatory text and the copyright line
+- The same footer has to hold its content to the page's measure and gutter without the page restating either
+- The regulatory or legal wording has to sit in a consistent place across every page of the site
+
+## Something else, when
+
+- The content closes a card or a panel rather than the page → **Card**
+- The navigation is the page's primary one, at the top → **Navbar**
+- What is needed is a horizontal rule between two blocks of content → **Divider**
+
+## Never
+
+- A sticky bar of actions at the bottom of the viewport. This closes the document and scrolls away with it; an action rail that follows the reader is a different component and a different landmark
+- A second navigation landmark competing with the top bar. The destinations here are the ones a reader looks down for rather than up for — the company, the legal pages, the secondary sections
+- Page content. A band that closes the document is not a section to put a feature list in, and a reader who meets real content below the copyright line has been told the page ended and then found it had not
+
+## Props
+
+- **label** `string` · required — Always — it names the navigation landmark, and a page with two unnamed ones tells a screen-reader user there is navigation in both places without saying how they differ. …
+  - never: A visible heading. Nothing draws this. The band needs no title, and a page that wants one composes a heading into the section itself
+- **columns** `enum` · default "4" — How many columns the destinations fall into at full width. Four is the ceiling, and with the rail beside them that is five regions across — which is as many as a band can hold before a reader stops scanning columns and starts reading a wall. …
+  - `2` — A short footer, or one whose sets run long
+  - `3` — The middle case, and the one a site with a rail beside its columns often wants
+  - `4` — The default, and the widest the band goes. With the rail beside them that is five regions across
+  - never: Forcing a layout on a phone. Nothing here holds at a phone's width — the grid drops to a single column and this value is not read
+- **copyright** `string` · optional — The line the band closes on, where the site carries one. Pass the sentence the site uses, the year included: this formats nothing and computes nothing. Optional, which it did not used to be. …
+  - never: The regulatory text. A disclaimer is paragraphs and belongs in `disclaimer`, where it is set at a readable measure; squeezed into the closing line it becomes a wall of small print across the foot of the strip
+- **brand** `node` · optional — The footer opens with the site's mark, which is the common case — usually the logo, often with a line about the company under it
+  - never: The page's heading. This is the site's mark, not the page's title
+- **social** `node` · optional — The accounts the company keeps elsewhere, at the head of the band beside the mark. They are about the company rather than about the site, which is why they sit with the mark and not among the destinations
+  - never: Destinations. Anything that goes to a section of the site belongs in the children, where the navigation landmark announces it as one
+- **endorsement** `node` · optional — A mark somebody else awarded — an accreditation, a standard the company holds. At the far end of the masthead, away from the company's own mark, because a badge beside a logo reads as part of the logo
+  - never: The company's own mark, or anything that links into the site. This end of the row is for what a third party said, and a destination put here is one a reader will not look for
+- **aside** `node` · optional — The rail beside the destinations: the app cards, a download, a partner mark. The one part of the band that is an offer rather than a way onward, which is why it is kept out of the columns instead of being a set among them
+  - never: Another set of links. A column of destinations belongs in the navigation landmark, where a screen reader announces it as one — put here it is outside the landmark and outside the order a reader is reading the columns in
+- **disclaimer** `node` · optional — The site is obliged to carry regulatory or legal wording — the risk warning, the licensing statement, the entity that holds the licence. Passed as nodes rather than a string because it runs to paragraphs and usually carries links
+  - never: Marketing copy. This section is set muted and small, which is right for text nobody chose to read and wrong for anything the page is trying to say
+
+## Inside it
+
+- Takes only FooterGroup, Stack, Link.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 12 parts: root, inner, masthead, brand, social, endorsement, body, nav, aside, bottom, disclaimer, copyright.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/footer.md`.

package/.llm/digest/footergroup.md

@@ -0,0 +1,42 @@
+<!-- GENERATED from footergroup.contract.json. Do not edit. -->
+
+# FooterGroup
+
+A named handful of destinations in the footer: a word over a short list. It is the footer's repeating unit and the only thing inside it that repeats — everything else in a footer appears once. …
+
+`import { FooterGroup } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A set of a footer's destinations belong under one word — Markets, Support, Legal
+- The footer has enough links that a reader scanning it needs sets rather than a list
+
+## Something else, when
+
+- The destinations are the ones a visitor most likely wants → **Navbar**
+- The group is a named set inside a navigation panel → **NavbarMenuGroup**
+- There is one link rather than a set → **Link**
+
+## Never
+
+- A heading over prose. The list holds destinations; a paragraph in it is a paragraph a screen reader announces as a list item
+- Nesting. A group inside a group is a second disclosure, and a reader who has opened one thing to find another has been given a menu rather than a footer
+- A set long enough to need scrolling. Eleven destinations under one word is a group that should be two
+
+## Props
+
+- **expanded** `boolean` · default false — Whether the set is open, on a page narrow enough for it to close. Left alone the group holds this itself, which is what a footer of eleven groups wants — the page has no reason to know which ones a reader has opened
+  - never: Forcing a group open on a wide page. There is nothing to force: above the footer's own breakpoint every list is open and this value is not read
+- **label** `string` · required — Always — it is the word the set is under, and the control that opens it on a narrow page. One or two words naming a kind: 'Markets', 'Partner with us'
+  - never: A sentence, or a destination. The label names the set and goes nowhere; a reader who presses it on a phone expects the set, and on a wide page it is not pressable at all
+- **onExpandedChange** `callback` · optional — Told when a set opens or shuts, for a page that drives them from outside — one open at a time, or a set opened by a link somebody followed
+
+## Inside it
+
+- Takes only Link.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 6 parts: root, heading, trigger, label, marker, list.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/footergroup.md`.

package/.llm/digest/grid.md

@@ -0,0 +1,62 @@
+<!-- GENERATED from grid.contract.json. Do not edit. -->
+
+# Grid
+
+A field of equal tracks, and one measure between them. …
+
+`import { Grid } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Several things of the same kind are read across and down, and a cell has to line up with the cell above it — a field of stat cards, a set of tiles, a gallery
+- The count is more than a line holds and the page cannot say what width it will be read at. …
+- The cells must finish level regardless of how much is in each. …
+
+## Something else, when
+
+- The things sit on one line and there is no second row to agree with → **Row**
+- The things are read one above the next → **Stack**
+- The set must stay on one line and the reader moves along it → **Scroller**
+- The cells are the fields of one record, repeated down the page → **Table**
+
+## Never
+
+- Page layout with named regions — a hero beside a picture, a header above both. Those regions are different things at different widths and a grid here has no way to say so: every track is the same size as every other, which is what this is and is exactly wrong for a page frame
+- Padding. It sets space between its cells and none at all around them, so a grid reached for to inset a region leaves the surface that should have carried the padding with none
+- One child. A field of one is the child, drawn a second time — the tracks are inert, and what is left is an element that renders, costs a node, and explains nothing
+- Reaching a width. It is as wide as whatever holds it and declares no size of its own. The track floor is a floor and not a width: it says when a column drops, never how wide a cell ends up
+- Cells of different kinds. Every track is the same width, so a grid holding a wide thing and a narrow thing gives both the wide one's measure and the narrow one all that space to sit in. Things that differ belong on a Row, which lets each be what it is
+
+## Props
+
+- **gap** `enum` · default "lg" — The measure between cells, in both directions. One value rather than two, because a field whose rows and columns are differently spaced reads as rows first and stops being a grid
+  - `none` — No gap at all, for a field whose cells are meant to read as one object rather than as a set. The only step here that is a decision rather than a measure
+  - `xs` — The tightest gap between related elements, for a field read as one texture rather than as separate cells
+  - `sm` — The step the token names for sibling controls — a field of small tiles, where the tightness makes the set read as one block
+  - `md` — The step the token names for stacked items, taken as a field: cells close enough to be scanned in one pass rather than weighed one at a time
+  - `lg` — The default, and what the token names for feature cards in a grid, footer columns and pricing plans. Reach for this unless the cells are smaller or larger than a card
+  - `xl` — Between the parts of a card, taken as a field — cells that each hold a picture as well as words. Drops one step below 768px, a phone having a third of the width to spend
+  - `2xl` — Between one section of a page and the next, laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
+  - `3xl` — The largest gap, for separating whole movements of a page laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
+  - never: Reaching a cell width. The gap and the column count together decide how wide a cell lands, but the gap is a relationship between cells and not a way of sizing one. A cell that needs a particular width is a track floor, and past that it is a component with a size
+- **min** `enum` · default "md" — How narrow a track may get before the field drops a column. This is the whole of the component's responsiveness, and choosing it is choosing where the layout changes
+  - `sm` — The narrow floor, for a cell holding a logo, an icon and a word, or one short claim. Six of these clear the page's measure with its gutter still on both sides
+  - `md` — The default floor, for a feature card: a heading and a line or two beneath it. Four fit the page's measure, so a field of three has room to spare
+  - `lg` — The wide floor, for a cell holding a picture as well as words, or a pricing plan with a list under it. Three fit the page's measure and four do not
+  - never: Setting a cell's width. It is a floor and never a measure: a cell lands as wide as the region and the column count leave it, which is almost always wider than this. A grid whose floor was picked to make a cell a particular size is a width written where a threshold belongs, and it is the wrong width at every other viewport
+- **align** `enum` · default "stretch" — How cells of different heights meet within a row. The default is what makes a field of cards look like a field
+  - `start` — Cells keep their own height and sit against the top of their row, so a short cell beside a tall one ends early rather than being drawn out
+  - `center` — Cells keep their own height and sit in the middle of their row
+  - `end` — Cells keep their own height and sit against the bottom of their row
+  - `stretch` — The default. Every cell takes the full height of its row, so a field of cards finishes level however much is in each — which is the reason most fields are a grid rather than a wrapped line
+  - never: Giving a row a height. Every value here arranges cells within the height the tallest cell in that row establishes; none adds any
+- **columns** `enum` · default "3" — How many cells sit across at full width. A ceiling rather than a promise: fewer are drawn as the region narrows, which is what makes this responsive without a breakpoint
+  - `2` — Two across — cells that hold enough to be read rather than scanned, or a field beside a picture
+  - `3` — The default, and what most fields of feature cards want. Three is the most a reader takes in as a set rather than as a list
+  - `4` — Four across, for cells holding a claim and a line — a field of benefits, a set of tiles
+  - `6` — Six across, for marks rather than cards — partner logos, payment methods, regulator badges. A field this wide is read as a texture
+  - never: Guaranteeing a count. A track squeezed below its floor is not drawn, so a field asked for six may hand back three — which is the behaviour, not a failure. Where exactly n must be on screen at every width, no grid can promise it and a Scroller is the honest answer. …
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/grid.md`.

package/.llm/digest/icon.md

@@ -0,0 +1,45 @@
+<!-- GENERATED from icon.contract.json. Do not edit. -->
+
+# Icon
+
+Renders a Quill system glyph at a token size, taking its colour from the text around it. The glyph is imported from @deriv-com/quill-icons-web and passed as the only child. …
+
+`import { Icon } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A glyph stands beside words to speed recognition — a mark on a feature card, a chevron on a row, a separator in a trail
+- A page is composing something a component offers a slot for, and the slot takes a mark rather than a component that draws one
+
+## Something else, when
+
+- The mark identifies a company or a product — a payment method, an app store, a social network → **Logo (not built yet)**
+- The artwork is a scene rather than a symbol → **Illustration (not built yet)**
+
+## Never
+
+- Flag, market, currency or payment glyphs — they carry fixed brand colour, and tinting them corrupts the mark while still rendering. Render one bare, outside an Icon: it keeps its own colour and its own proportions, which is what a mark is
+- Information that appears nowhere else. A glyph a reader has to interpret unaided is a label the page failed to write, and a marketing page has room for the words
+- The picture in a card. A mark is a symbol at a step on this ramp; a photograph or a render is CardBody's `src`, which reaches the card's edges and is measured by the card rather than by a scale of glyph sizes
+
+## Props
+
+- **size** `enum` · default "md" — The step the glyph is drawn at. It is a size and not an instruction: what a mark means comes from where it is, and this decides only how large it is drawn there
+  - `xs` — Inline and supporting content — a separator in a trail, a mark against small text
+  - `sm` — A mark beside text that must not outweigh it: the chevron on a list row, an affordance next to a label
+  - `md` — The default. Body content and lists, where the glyph sits with the words rather than above them
+  - `lg` — Cards and content sections — the mark a feature card leads with, read before its title is
+  - `xl` — The largest step, for a callout or a highlighted block where the glyph does as much work as the copy
+  - never: Setting the step of a glyph you are handing to a component. A slot takes the glyph and its component draws it at the step its own contract names, so an Icon arriving there is a call site written against something else — it is unwrapped and the outer step is what draws. …
+- **label** `string` · optional — The glyph is the only thing naming its control — an icon-only button, a mark with no words beside it
+  - never: A glyph beside a label that already says the same thing, which makes a screen reader announce it twice
+
+## Inside it
+
+- Takes only QuillSystemIcon.
+- At least 1, at most 1 — fewer is not this component and more is a different one.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/icon.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`.

package/.llm/digest/link.md

@@ -0,0 +1,59 @@
+<!-- GENERATED from link.contract.json. Do not edit. -->
+
+# Link
+
+A destination named inside a sentence, or standing on its own under one. …
+
+`import { Link } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A term inside running copy has a page of its own — a market named in a paragraph, a fee mentioned in a sentence, a product referred to in passing
+- The page must offer a destination without pushing it: terms, a full fee schedule, a regulatory notice. …
+- A second destination beside the call to action, where a second pill would be two things asking to be pressed and a reader would have to choose between them before reading either …
+
+## Something else, when
+
+- The destination is the step the page was built to produce → **Button**
+- Pressing it does something on this page rather than going somewhere → **nothing in this system does this**
+- The whole card or panel is the target rather than some words in it → **CardButton**
+
+## Never
+
+- The page's main call to action. That is Button, and a page whose primary step is a link in a paragraph has hidden it in the copy
+- Words that do not name the destination — 'click here', 'read more', 'this page'. The words are the link's accessible name, and a screen reader offering a list of links reads that list on its own: a page of 'read more' is a menu of identical entries
+- A disabled or pending state. There is none, for the reason Button has none: the browser owns a navigation in flight, and an anchor cannot be honestly disabled — stripping the href is the only thing that truly stops it, and that costs the link role and the focus with it
+- Opening a new tab because the page would rather keep the reader. `external` exists for a destination that is genuinely elsewhere; taking over tab management for its own sake is a decision that belongs to the reader
+
+## Props
+
+- **variant** `enum` · default "standalone"
+  - `standalone` — The default, and what a marketing page mostly has: a link on its own line — under a card, at the foot of a section, beside a call to action. …
+  - `list` — One of a column of links — a footer sitemap, a navigation menu, a set of related pages under a heading. It takes the ink around it, because a column of coral is a column nobody reads. …
+  - `inline` — Inside a sentence, and it takes the sentence's type and the sentence's colour. …
+  - never: Making a link louder or quieter. The three are positions rather than volumes: standalone is alone on its line, list is one of a column, and inline is part of a sentence. None of them means important
+- **tone** `enum` · default "brand" — Which ink a standalone link takes. It reaches no other variant: an inline link takes the paragraph's colour and a list link takes the column's, which are decisions those positions have already made — the same shape `showIcon` has here
+  - `brand` — The default. …
+  - `inherit` — A standalone link on a ground that has already set its ink — a brand card, a dark band, a scrim over an image. …
+  - never: Reaching an inline link. One takes the paragraph's colour already and there is nothing here to choose — this prop governs a standalone link and no other
+- **external** `boolean` · default false — The destination is off this site. Sets `target="_blank"` and `rel="noopener noreferrer"` together — the rel is not optional and not the consumer's job, which is how a page ends up handing `window.opener` to a site it does not control. …
+  - never: A new tab on a destination that is not external. Taking over tab management is a decision the reader has already made in their own browser, and a page that overrides it has told them their back button is not to be trusted
+- **href** `string` · required — Always. …
+- **iconLeading** `node` · optional — A mark the destination is known by, before its name — a document, a download. Pass the glyph; the link draws it at sixteen, which is icon.size.xs. The solid weight, always: `FileSolidIcon` rather than `FileRegularIcon` or `FileLightIcon`. …
+  - never: Naming the destination. The words are the accessible name and the glyph is announced as nothing, so a link whose meaning is its mark is a link with no meaning at all to a screen reader. The regular or light weights. …
+- **showIcon** `boolean` · optional — Whether the link carries a mark after its words. It reaches both variants: a standalone link on its own line, and an inline one that wants the arrow inside a sentence. …
+  - never: Suppressing the external mark. Leaving the site is a fact about the destination rather than a flourish, so `external` marks itself whatever this says — a page that could turn it off could hand a reader a new tab with no warning
+
+## The type refuses
+
+- variant="inline" with iconLeading="*" — An inline link is part of a sentence and a glyph mid-line breaks the run of words it belongs to. …
+
+## Inside it
+
+- Takes only text.
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, icon-leading, icon-trailing.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/link.md`.

package/.llm/digest/logocolumns.md

@@ -0,0 +1,55 @@
+<!-- GENERATED from logocolumns.contract.json. Do not edit. -->
+
+# LogoColumns
+
+A section that backs one claim with the names behind it: a heading, a line, an optional disclaimer and a way onward, beside a wall of logo tiles in two columns that run in opposite directions as the reader scrolls past — one rising, one falling — fading out at the wall's top and bottom edge so the set reads as longer than the space it is shown in. …
+
+`import { LogoColumns } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Showing the partners, integrations or payment methods behind a claim — the names a reader recognises, as evidence for what the words say
+- Eight or more logos, enough that each column reads as running on past both edges of the wall
+
+## Something else, when
+
+- A handful of logos a reader should be able to count and compare → **Grid**
+- One picture beside the claim → **FeatureSplit**
+- Each logo needs to be pressed — a partner directory → **FeatureCards**
+
+## Never
+
+- Logos the brand has not been given the right to show. A partner's mark is a claim made in the partner's name
+- A few logos. Three repeated to fill a wall read as three repeated; a short set belongs in a still grid
+- Anything a reader has to press or read in full. Every tile moves with the scroll and is clipped at the wall's edge
+
+## Props
+
+- **ground** `enum` · default "strong" — Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. …
+  - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
+  - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. …
+  - `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the wall is a set of tiles a step lighter than the band. …
+  - 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 "start" — Which side the wall takes at full width. Never a promise about a phone: below the fold the words are always first, because a reader on a phone came for them
+  - `start` — The default, the reference design's: the wall at the start, the claim beside it at the end
+  - `end` — The second of two on a page, or after a FeatureSplit whose picture is at the start, so the two do not read as one column
+  - never: Moving the wall on a phone. There is one column there and the words lead it
+- **title** `string` · required — Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide"
+  - never: A list of the names. The logos are the names; the heading says what they prove
+- **description** `string` · optional — The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on
+  - never: A paragraph. Past about two hundred characters the text column runs longer than the wall 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
+- **disclaimer** `string` · optional — Small print the claim needs — "*Availability varies by region." Under the description, quieter than it
+  - never: A second description. Anything a reader should take in belongs in the description; this is the line a regulator asks for
+- **link** `node` · optional — The way onward — a standalone Link, "View all partners", usually. Under the words, never on the wall: the tiles move
+  - 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
+- **logos** `data` · required — Always. The logos, in the order the wall deals them into its two columns — the first to the first column, the second to the second, and so on. Eight or more, so each column runs on past both edges. …
+  - never: A set split by hand into two. The wall deals them; a page that wants a logo in a particular column orders the list
+
+## Inside it
+
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 12 parts: root, inner, split, content, title, description, disclaimer, link, media, column, logo, logo-image.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/logocolumns.md`.

package/.llm/digest/logorows.md

@@ -0,0 +1,48 @@
+<!-- GENERATED from logorows.contract.json. Do not edit. -->
+
+# LogoRows
+
+A section that backs one claim with the names behind it, stacked: a heading, a line and a way onward, centred, over two rows of logo tiles across the band's full width that slide sideways in opposite directions as the reader scrolls past — fading out at both of their ends, so the set reads as longer than the band. …
+
+`import { LogoRows } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Showing the partners, integrations or payment methods behind a claim under it, where the words lead and the logos follow
+- Eight or more logos, enough that each of the two rows reads as running on past both edges of the band
+
+## Something else, when
+
+- The logos should stand beside the claim, as a wall that is half the section → **LogoColumns**
+- A handful of logos a reader should be able to count and compare → **Grid**
+
+## Never
+
+- Logos the brand has not been given the right to show. A partner's mark is a claim made in the partner's name
+- A few logos. Three repeated to fill a row read as three repeated; a short set belongs in a still grid
+- Anything a reader has to press or read in full. Every tile moves with the scroll and is clipped at the band's edge
+
+## Props
+
+- **ground** `enum` · default "strong" — Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. …
+  - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
+  - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. …
+  - `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. …
+  - 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. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide"
+  - never: A list of the names. The logos are the names; the heading says what they prove
+- **description** `string` · optional — The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on
+  - never: A paragraph. The heading and this line are read on the way to the logos; copy a reader has to work through is copy they scroll past
+- **link** `node` · optional — The way onward — a standalone Link, "View all partners", usually. Under the line, never on the row: the tiles move
+  - never: A button. The section's claim is made by the logos; a call to action over them is a second, louder one
+- **logos** `data` · required — Always. The logos, in the order the section deals them into its two rows — the first to the first row, the second to the second, and so on. Eight or more, so each row runs on past both edges of the band. …
+  - never: A set split or repeated by hand. The section deals the rows and repeats them; a page passes each logo once, ordering the list to place one in a particular row
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 10 parts: root, inner, header, title, description, link, rail, track, logo, logo-image.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/logorows.md`.

package/.llm/digest/menuitem.md

@@ -0,0 +1,46 @@
+<!-- GENERATED from menuitem.contract.json. Do not edit. -->
+
+# MenuItem
+
+One command in a menu. Pressing it does something and the menu shuts — it holds no value and carries no mark, so there is nothing about it to find on reopening. …
+
+`import { MenuItem } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A row in a menu of destinations — a language, a region, a page number an index skipped
+- A set short enough to read at a glance, where a reader is choosing rather than searching
+
+## Something else, when
+
+- The row reports a choice the reader should find marked when they return → **nothing in this system does this**
+- The destination belongs in the page's navigation → **nothing in this system does this**
+- It is one action rather than one of a set → **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
+- Carrying the words a reader 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
+
+- **size** `enum` · default "md" — Set by the menu that holds the row, not by the page. DropdownMenu passes its own size down to every row it renders, which is the only way a set stays one set — this prop exists so that it can, and a row written on its own takes the default
+  - `sm` — The row of a small menu — one opened from a navigation bar or a footer, where the trigger sits in a row of links
+  - `md` — The default, and the row of every other menu
+  - never: Making one row bigger than its neighbours. A menu is read by running an eye down its left edge, and a row at a different measure reads as a heading rather than as one of the set
+- **disabled** `boolean` · default false — The command cannot be used from here — a language not published yet, a page beyond the set. It stays and recedes, because a menu whose rows come and go is a menu a reader cannot learn
+  - never: A command that is simply not applicable to this object at all, which belongs in a different menu rather than a dimmed row in this one. …
+- **icon** `node` · optional — A mark before the words, for a set read by shape as much as by reading — a flag beside a language, a glyph beside a region. All of them or none: one row with a mark in a set without them reads as the important one
+  - never: Saying what the command does when the words already do. A mark beside "Delete" is recognised faster; a mark beside "Export to CSV as a background job" is decoration in front of a sentence
+- **onSelect** `callback` · required — Always, and it is required for that reason — running something is the whole of what a command is, and this is the only way it does
+  - never: Shutting the menu. That happens on its own, before this is called — a command that had to close its own menu would be a command every page closed differently. …
+
+## Inside it
+
+- Takes only text.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, icon, label.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/menuitem.md`.

package/.llm/digest/navbar.md

@@ -0,0 +1,75 @@
+<!-- GENERATED from navbar.contract.json. Do not edit. -->
+
+# Navbar
+
+The bar across the top of a marketing page, and three regions: the mark that says whose site this is, the places the site has, and the things a reader reaches for rather than navigates to — the language, the theme, and what the site wants them to do. …
+
+`import { Navbar } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A marketing page needs its top-level navigation — the mark, the sections of the site, and whatever sits at the far end
+- The same bar has to persist while the page scrolls, so a reader deep in a long page can still leave it
+- The navigation has to work at a phone's width without the page writing a second version of it
+
+## Something else, when
+
+- The items are versions of one thing rather than places the site has → **TabList**
+- What is wanted is one section's panel rather than the bar it hangs from → **NavbarMenu**
+- The navigation runs down the side of an application rather than across the top of a page → **nothing in this system does this**
+
+## Never
+
+- A second bar further down the page. There is one landmark of this kind per page, and a reader who meets two has been told twice where they are and once too often which is authoritative
+- A toolbar. Controls that act on what is below them — a filter row, a sort row, a set of view switches — are not places, and putting them in the site's navigation landmark means a screen reader announces them as somewhere to go
+- A footer. The same links at the bottom of a page are a sitemap a reader reaches at the end, not a frame they navigate from, and they need none of the sticking or collapsing this does
+- An app shell. This sticks to the top of a document that scrolls; an application whose regions scroll independently needs a frame this cannot be, and the product package is where that lives
+
+## Props
+
+- **tone** `enum` · default "default"
+  - `default` — The page begins on a light ground, which is most marketing pages. The bar paints in ink and the pill is paper
+  - `inverse` — The first section of the page paints its own dark ground and the bar stands on it — a dark hero, a photograph, a brand-coloured takeover. …
+- **label** `string` · required — Always — it names the navigation landmark, and a page with an unnamed one tells a screen-reader user there is navigation here without saying which navigation. …
+  - never: A visible heading. Nothing draws this. A bar needs no title, and a page that wants one has a heading of its own below the bar
+- **menuLabel** `string` · required — Always — the trigger is an icon-only button and this is the only name it has, at the width where it is the only way through the site. …
+  - never: A tooltip or visible text. The trigger draws a glyph and nothing else; this is the name a screen reader reads
+- **closeLabel** `string` · required — Always — it names the panel's close button, which is the only visible way out of a surface covering the whole page. 'Close' is enough; the panel it closes is the only thing open
+  - never: The trigger's name. They are two controls in two places — the trigger is in the bar underneath the panel, and a reader cannot reach it while the panel is open
+- **brand** `node` · optional — Effectively always on a real site — the mark, and usually an anchor to the home page wrapped around it. It is drawn twice: in the bar, and again in the panel's header, where it is the only thing left saying whose site this is
+  - never: A heading for the page. This is the site's mark, not the page's title, and a reader who meets the page's `<h1>` in the bar has been told the name of somewhere they already are
+- **utilities** `node` · optional — The bar's trailing end has the site's actions in it: one Button, which is primary, or two — one primary and one secondary, the conversion beside the way back in. …
+  - never: More than two Buttons, a lone Button that is not primary, or a pair that is not one primary and one secondary — the bar's actions are a conversion and its alternative, and a third pill or a second of either rank makes the reader choose between things the bar should have ranked. A switcher is not a Button and does not count against the two. …
+- **compactAction** `node` · optional — The one thing a reader should still be able to do once the bar has collapsed and everything else has gone into the panel — a sign-up, usually. Drawn beside the control that opens the panel, and only at the widths where that control is drawn. …
+  - never: The whole of utilities. A phone has room for one action beside a mark and a menu button, and a bar handed two of them either wraps or pushes the mark off its own edge — the rest belong in utilities, which the panel lays out down its foot where there is room for all of them
+- **preferences** `node` · optional — A switcher that belongs with the destinations rather than with the conversion — a language picker, a theme toggle. It is drawn inside the pill, beside the sections, at every scroll position. …
+  - never: A conversion action. Those belong in utilities, at the trailing end of the bar where a reader looks for them, and drawing one inside the pill would put the thing the page most wants pressed in among the places it goes
+- **showThemeToggle** `boolean` · default false — The site offers light and dark and a reader can choose between them. …
+  - never: A site that ships one theme. A toggle that changes nothing is a control that lies about the page
+- **theme** `enum` · optional — Whenever showThemeToggle is — the theme in force. The page owns it, because what it switches is the page's data-theme rather than anything inside the bar; the bar only draws the toggle and reports presses
+  - `light` — The page is drawn in its light theme, so the toggle offers dark
+  - `dark` — The page is drawn in its dark theme, so the toggle offers light
+- **onThemeChange** `callback` · optional — Whenever showThemeToggle is. Called with the theme a press moves to; the page sets its data-theme from it and hands the new value back as theme
+  - never: Persisting a preference the page has not decided to keep. Remembering the choice across visits is the site's call, made where it sets data-theme
+- **themeToggleLabel** `string` · optional — Whenever showThemeToggle is — the toggle draws a glyph and no words, and this is the only name it has. …
+  - never: Visible text. Nothing is drawn beside the glyph; a toggle with words is a NavbarSwitcher
+- **menuOpen** `boolean` · optional — The page is holding whether the panel is open, because something else depends on it — a route change that should close it, a surface of its own that must not open at the same time. …
+  - never: Half of a controlled bar. A menuOpen passed without an onMenuOpenChange to move it is a panel that cannot be closed from its own close button — a trap around the whole page rather than a bar with a bug
+- **onMenuOpenChange** `callback` · optional — Whenever menuOpen is — together they are how a page holds the panel. It is called with the state being moved to, by the trigger, by the close button and by Escape, so a page listening to it hears every way the panel can change
+  - never: Navigation. This says whether the panel is showing; a page that also routed on it would close the panel by leaving, and a reader pressing a destination inside it would fire both
+
+## The type refuses
+
+- showThemeToggle=true with theme=null — A toggle that does not know which theme is in force cannot say which one a press moves to, and would draw the wrong glyph half the time
+- showThemeToggle=true with onThemeChange=null — A toggle with nothing to call answers the pointer and changes nothing — the one failure the affordance cannot disclose
+- showThemeToggle=true with themeToggleLabel=null — The toggle draws a glyph and no words, so without this it ships unnamed and a screen reader announces a button and nothing else
+
+## Inside it
+
+- Takes only NavbarItem, NavbarMenu.
+- 10 components are refused inside it; the list and the reasons are in the long document.
+- Renders 11 parts: root, inner, ground, brand, nav, preferences, utilities, compact-action, trigger, panel-host, cluster.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbar.md`.

package/.llm/digest/navbaritem.md

@@ -0,0 +1,54 @@
+<!-- GENERATED from navbaritem.contract.json. Do not edit. -->
+
+# NavbarItem
+
+One place the site has, in the bar across the top of it. An anchor with a target around it, a mark for the section the reader is currently in, and nothing else. …
+
+`import { NavbarItem } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A section of the site, in a Navbar — the ordinary case and what this is for
+- A destination that leaves the site, which it marks as a change of context rather than leaving the reader to find out
+- The same destination inside the panel a narrow bar collapses into: a page writes its navigation once, and what changes with the width is how it is drawn
+
+## Something else, when
+
+- The destination opens a panel of further destinations rather than going somewhere → **NavbarMenu**
+- The destination is a phrase inside a sentence, or a call to action beneath a paragraph → **Link**
+- The item is one of a set of alternatives rather than a place → **Tab**
+
+## Never
+
+- A control. This navigates and nothing else — a press that filtered, submitted or opened something would be a button the browser has been told is a link
+- The site's mark. That goes in Navbar's brand slot, where nothing gives it a target or a current state
+- A conversion action. Open an account is not a place the site has, and a reader tabbing the navigation landmark should not meet it there — that is Navbar's utilities slot
+- A list of every page on the site. A bar holds the sections a reader chooses between at a glance; a sitemap is a footer
+
+## Props
+
+- **current** `boolean` · default false — The reader is in this section of the site. It fills the item's shape in and sets `aria-current="page"`, so the mark is not the only thing saying it. …
+  - never: Emphasis. This is not the important destination or the one the site would rather you took; it is the one the reader is already on, and using it for anything else makes the mark mean nothing on every bar that uses it correctly
+- **tone** `enum` · default "default"
+  - `default` — The bar has a light ground under it, which is every bar on a marketing page today. The tints here are ink-based and read against paper
+  - `inverse` — The bar sits on a dark ground — a band, or art the page put behind it — and the ink runs light. …
+- **href** `string` · required — Always. This is a place, and a place has an address — an item with no href is a control drawn as a link, which is the one thing its intent says it is not
+  - never: A fragment standing in for behaviour. `href="#"` is how a link that does nothing gets written, and it navigates: the reader loses their scroll position and gains a history entry for a press meant to do something else
+- **icon** `node` · optional — The bar's sections are quicker to tell apart by a mark than by reading them, which is rare on a marketing site and usual in an application
+  - never: Decoration on every item. A glyph beside each of five destinations costs the width the destinations need and tells a reader nothing they were not already reading
+- **external** `boolean` · default false — The destination leaves the site. It draws the mark, opens in a new context, and the implementation extends the accessible name to say so in words — a glyph alone is a warning only sighted readers get
+  - never: A different area of the same site. A subdomain the reader experiences as one place is not a change of context, and marking it as one teaches them to ignore the mark where it matters
+
+## The type refuses
+
+- current=true with external=true — The section the reader is in, and a destination that leaves the site. …
+
+## Inside it
+
+- Takes only text.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 4 parts: root, icon, label, external.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbaritem.md`.