@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/.llm/digest/tiers.md

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

package/.llm/index.md

@@ -9,6 +9,8 @@ need — loading all of them dilutes the relevant one.
 Paths here are from the package root, so they resolve whether this file is read in place
 or its content handed over on its own.
 
+Sections: Core (54) · Layout (5) · Blocks (30)
+
 
 ## Core
 
@@ -19,6 +21,7 @@ Domain-neutral building blocks.
 | Component | Use when | Not for |
 |---|---|---|
 | AccordionItem | One row inside an Accordion — every row of a set is one of these · A single disclosure with no set around it: one topic whose detail is worth offering and not worth showing. The row is whole on its own, and it keeps its own open state when nothing is injecting one | The heading goes somewhere rather than opening something → `CardButton` |
+| Background | A band that has to stand apart from the page around it with more than a change of fill — the opening of a landing page, a call to action, a section that closes a long page · A dark band that would otherwise be a flat slab. The glow gives it a centre for the eye, which is where the band's heading or its action should sit · A light page that wants one moment of brand colour without a coral block: the dots carry the colour at a fraction of the area a fill would | The band only needs separating from the page around it → nothing here · The ground is a picture or a video → `AspectRatio` |
 | Badge | One of a set is the one the page wants read first — the plan most people choose, the market most people start with · Something is new or has changed, and saying so is worth a word rather than a sentence · A number the page is promoting is worth marking as a saving rather than left in the copy — a percentage off, a period free | What it says is a state the reader's account is in → nothing here · The words are the point rather than the mark → `CardBody` |
 | Breadcrumb | The page sits inside a section hierarchy, and the levels above it are places the visitor can navigate to — a product page inside a markets section, a blog post inside a category · A visitor who arrived by search, social link or campaign URL needs to learn where they landed and how the site is organised around them | The visitor is moving through the stages of a sign-up or onboarding flow rather than standing in a hierarchy → nothing here · There is exactly one place to go back to, and it is the previous page rather than a parent section → nothing here |
 | BreadcrumbItem | Rendering one level of a Breadcrumb — every level in a trail is one of these · The level needs a short name the visitor recognises as a place: the section name, not a sentence about it | The destination is somewhere the visitor goes to act rather than a level they climb back to → nothing here |
@@ -32,6 +35,8 @@ Domain-neutral building blocks.
 | DropdownMenu | A set of destinations too long for the navigation bar and too short to be a page of its own — languages, regions, the parts of a long index · The set is short enough to read at a glance, where a visitor is choosing rather than searching | The set reports a choice the visitor should find marked when they return → nothing here · The destinations belong in the page's navigation → nothing here · It is one destination rather than one of a set → nothing here · The set is long enough that a visitor would rather type than read → nothing here |
 | FooterGroup | 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 | 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` |
 | Icon | 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 | 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)* |
+| IllustrationCard | Product information laid over a photograph or a piece of art — a market's price and status over a picture of a trader, a balance over a device · A standalone image of the product beside a section's words, where a screenshot would be too literal: the pane is the picture the section shows · Several such pictures across a site that have to agree in shape and surface without each page deciding | A section has content to present — features, benefits, steps, a list → `FeatureCards` · The content is something a reader acts on — a link, a form, a set of options → `Card` · There is only a photograph → `AspectRatio` |
+| IllustrationScene | Product information shown over a photograph — a trade ticket, a balance, a market's status — where the photograph sets the scene and the card says what the product does · A hero or a feature section needs a picture of the product in use rather than a screenshot or a photograph alone | The card stands on its own, with no photograph behind it → `IllustrationCard` · There is only a photograph → `AspectRatio` |
 | Link | 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 pill would give it the weight of the thing the page is actually asking for · 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 | The destination is the step the page was built to produce → `Button` · Pressing it does something on this page rather than going somewhere → nothing here · The whole card or panel is the target rather than some words in it → `CardButton` |
 | MenuItem | 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 | The row reports a choice the reader should find marked when they return → nothing here · The destination belongs in the page's navigation → nothing here · It is one action rather than one of a set → nothing here |
 | NavbarItem | 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 | 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` |
@@ -78,6 +83,7 @@ Domain-neutral building blocks.
 ## Layout
 
 Arrange other components and decide no appearance of their own.
+
 | Component | Use when | Not for |
 |---|---|---|
 | AspectRatio | A picture whose proportions have to match the ones beside it — a row of cards, a grid of markets, a set of logos. One shape asked for once is what keeps a row from settling on whichever image is tallest · Room that must be reserved before the thing filling it arrives — art loaded late, an embed, anything fetched. The box is the right height from the first paint, so the page under it never moves · An embed that brings its own proportion and no height — a video, a map, a third-party frame. The ratio is the only way to give it one without guessing a pixel measure that is wrong at some width | The picture is the media region of a card → `CardBody` · The thing inside has a size of its own and should keep it → nothing here · The shape changes with the viewport → nothing here |
@@ -89,19 +95,36 @@ Arrange other components and decide no appearance of their own.
 ## Blocks
 
 The sections a page is built from, and the rhythm between them.
+
 | Component | Use when | Not for |
 |---|---|---|
+| Awards | Building credibility with the industry awards a company has won — a “Why choose us”, about-us or trust page · Six awards or more, enough that the phone's row reads as running on past the band's edge and the rows from the fold read as a field | One to three awards, or a few figures that make the case → `FeatureCards` · Partners, integrations or payment methods rather than awards → `LogoRows` · Reviews from customers rather than recognition from the industry → `TestimonialRow` |
+| ComparisonCards | Two or three products, accounts or plans that answer the same few questions differently — what you hold, what it costs, how far you can lose — and the difference is the point of the section · A "What you can trade" band: Spot against Futures, Options against Multipliers, each with its own rows and its own risk note | Five or more options, or rows that are the same for every option and read down a column → `ComparisonTable` · The options are features rather than alternatives — each a heading and a sentence, with nothing to compare row by row → `FeatureCards` · One option and the list of what it includes → `FeatureBullets` |
+| ComparisonTable | Comparing two or three options — platforms, plans, operating systems — on the same handful of features, where the reader reads across a row as often as down a column · A product page's "Web terminal, desktop or mobile": the same few features, each option's answer in a word or a short line · Schedule-style rows, where a cell may hold a short list of lines — a market's trading sessions, the days a rate applies | Each option has more to say than a cell holds — a sentence of its own, a footnote, a way on → `ComparisonCards` · A large dataset — many instruments, many columns — that a reader searches, sorts or pages through → `DataTable` · One option and the list of what it includes → `FeatureBullets` |
 | CtaBanner | A short, high-contrast promotion with one clear action — open an account, start trading, download the app · The band that closes a page, or breaks a long one, on the action the page exists to produce | Two or three promotions to rotate between → `CtaBannerSlider` · The band that opens the page → `LandingHero` · A message that needs a picture beside it → `FeatureSplit` |
 | CtaBannerSlider | Rotating between two or three genuinely different promotions without a hero's weight — open an account, try a tool, download the app | One promotion → `CtaBanner` · The band that opens the page → `LandingHero` · A message with more than a headline, a line and a button or two → `FeatureSplit` |
+| DataTable | Trading instruments and their specifications — contract size, minimum size, volume limits — on a market page · Trading conditions a reader looks up rather than reads through: spreads, leverage, margin, swaps · An MT5 or Deriv X specification page, where the set runs to dozens of rows and a reader is hunting for the one they trade | Three or four plans or accounts compared feature by feature, where every row is read rather than searched → `ComparisonTable` · A handful of rows with no need to search or page — a fee schedule of four lines → `Table` |
+| DownloadBanner | Promoting an app across the stores and platforms it ships on — App Store, Google Play, AppGallery, a desktop download, the web · A trading platform's page, near its end, once the product has been explained and the next thing a reader wants is to get it | One download, or the web alone → `Button` · A promotion that has to argue for the download in a headline and a sentence → `CtaBanner` |
 | FaqAccordion | The questions a reader asks before acting — fees, limits, how long a withdrawal takes — near the end of a landing page or on a help page · Objections a page has to answer without making every reader read every answer | The answers are short enough to read all at once → `FeatureBullets` · Each item is a feature, not a question → `FeatureCards` |
 | FeatureBullets | A page has to list what a product or a plan includes, and the list is the argument · Several benefits are each one line long and are read by scanning rather than reading · A claim needs something beside it, and a picture is the only thing there is to put there | The items are two or three words and belong on one line → `Badge` · Each item needs a heading and a paragraph of its own → `Card` · The section opens the page → `ProductHero` |
-| FeatureCards | Three or four things a product does, each a heading and a sentence, read side by side and compared at a glance · A set of destinations — markets, platforms, tools — each a card a reader presses to go there · One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground | Each item is one line, and the list is the argument → `FeatureBullets` · One claim beside a picture, with no card around it → `FeatureSplit` · The items are read in order, one leading to the next → `FeatureScroll` |
+| FeatureCards | Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance — the first choice for a set of three. The picture is CardBody's `src`, drawn below the words by default · A set of destinations — markets, platforms, tools — each a card a reader presses to go there · One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground | Each item is one line, and the list is the argument → `FeatureBullets` · One claim beside a picture, with no card around it → `FeatureSplit` · The items are read in order, one leading to the next → `FeatureScroll` |
+| FeatureCardsCarousel | A "what you get" band of five or six authored cards, each a benefit with a line and a picture, too many for one row of a grid, where one card in focus with a peek of the next is the point. Three or four cards are FeatureCards, which shows the whole set at once · A platform or product page whose feature cards are too many for one row of a grid and too equal to be a sequence | Three or four cards — the set a grid shows in one row → `FeatureCards` · The cards are read in order, one leading to the next → `FeatureScroll` · Two or three promotions on the brand's coral, one at a time → `CtaBannerSlider` |
 | FeatureScroll | A page has three or more things of the same kind to explain, each with a picture worth a screen — the markets a broker offers, the platforms it runs, the steps of an account opening · The set is meant to be walked through rather than compared, and a reader is expected to scroll it · The set comes from somewhere — a CMS, a registry, a filtered list — rather than being written out by hand | There are three or four items a reader is meant to compare → `FeatureCards` · The set is lines rather than things — what an account includes → `FeatureBullets` · There is one point to make → `FeatureSplit` · The section opens the page → `LandingHero` |
-| FeatureSplit | A page needs one more point about something it has already introduced, with a picture to carry it · The point is a sentence rather than a list, and does not earn a set of cards · A section needs a way onward that is not a call to action — a link to the page that says more | The point is several things the reader gets, each one line long → `FeatureBullets` · There are three or four points and each needs its own picture → `FeatureCards` · The section opens the page → `ProductHero` |
+| FeatureSplit | A page needs one more point about something it has already introduced, with a picture to carry it · The point is a sentence rather than a list, and does not earn a set of cards · A section needs a way onward that is not a call to action — a link to the page that says more | The point is several things the reader gets, each one line long → `FeatureBullets` · There are three or four points and each needs its own picture → `FeatureCards` · The section opens the page → `ProductHero` · The picture is the section's weight, wide or tall enough to stand under the words rather than beside them → `FeatureStack` |
+| FeatureStack | A statement with a picture that carries it — a global reach shown on a globe, a platform shown on a device — where the picture is the section's weight and the words introduce it · Closing a page or a stretch of one on an image, with a way on for the reader who wants more | The picture belongs beside the words, the two read side by side → `FeatureSplit` · The section is a set of figures read as a set → `Stats` · The section asks the reader to do one thing, now → `CtaBanner` |
+| ImageBanner | Driving a single mid-page or end-of-page action with a photograph to carry it — a community, a hub, a platform · A dark, editorial break between lighter sections | The section opens the page → `ProductHero` · The point wants the page's own light ground rather than a dark card → `FeatureSplit` · There is no photograph, only a headline and an action → `CtaBanner` · The section says what a programme or a product comes with, as a list of features → `FeatureBullets` |
 | LandingHero | A main landing page needs its opening band — the front page, or a campaign page under it · The claim has room to range to the reading edge with a subject beside it, which is what the landing tier is for · The steps between an eyebrow, a title, a description and the actions under them have to be the same on every landing page | The page is a product or a market page → `ProductHero` · The page is a company or a legal one — contact, about, terms → `PageHeader` · The band closes the page rather than opening it → `Footer` |
 | LogoColumns | Showing the partners, integrations or payment methods behind a claim — the names a reader recognises, as evidence for what the words say · Eight or more logos, enough that each column reads as running on past both edges of the wall | A handful of logos a reader should be able to count and compare → `Grid` · One picture beside the claim → `FeatureSplit` · Each logo needs to be pressed — a partner directory → `FeatureCards` |
 | LogoRows | Showing the partners, integrations or payment methods behind a claim under it, where the words lead and the logos follow · Eight or more logos, enough that each of the two rows reads as running on past both edges of the band | The logos should stand beside the claim, as a wall that is half the section → `LogoColumns` · A handful of logos a reader should be able to count and compare → `Grid` |
 | PageHeader | A company, legal or support page needs its opening band — contact, about, terms, a regulatory notice · The page is read rather than acted on, so its opening should name it and then get out of the way · The steps between an eyebrow, a title and a description have to be the same on every such page | The page is the front page, or a campaign page under it → `LandingHero` · The page is a product or a market page → `ProductHero` · The band closes the page rather than opening it → `Footer` |
 | ProductHero | A product or a market page needs its opening band — a platform, an instrument, an asset class · The thing the page is about is worth showing whole, under the claim rather than beside it · The steps between an eyebrow, a title, a description and the actions under them have to be the same on every product page | The page is the front page, or a campaign page under it → `LandingHero` · The page is a company or a legal one — contact, about, terms → `PageHeader` · The band closes the page rather than opening it → `Footer` |
+| ResourceBanner | Pointing readers at related guides, policies, or reference pages at the end of an informational section — the 'here's where to read more' block · A section of a legal, help or safety page has said what it has to and the detail lives elsewhere — the full terms, a risk disclosure, a help-centre article | The block asks the reader to do something — open an account, start trading → `CtaBanner` · The resources are a set of destinations each worth a heading and a sentence → `FeatureCards` · The reader's questions have short answers that can be given on the page → `FaqAccordion` |
+| SceneScroll | Two states of one thing a page wants felt rather than listed — the markets by day and by night, a trader's screen before and after, a market open around the clock · One immersive moment on a product or campaign page, between lighter sections, where two photographs carry the argument and the words are a heading and a line each · The opening band of a campaign page built around that change, at headingLevel h1 | There is one photograph, not two states of something → `ImageBanner` · Three or more things to show, each with a picture → `FeatureScroll` · The page's opening band, with an action to take → `LandingHero` · One statement on its own, revealed as the reader scrolls → `TextScroll` |
+| Stats | Three to five headline numbers that prove scale or credibility — traders, markets, years, the smallest deposit — where the set is the point — read along a row from the fold, turned through one at a time on a phone · A break between two heavier sections, when the numbers alone tell the story | Each item needs a sentence of its own, or a picture → `FeatureCards` · The number is part of a claim the page is making in words → `FeatureSplit` |
+| Steps | A page explains a get-started or onboarding flow — opening an account, funding it, starting to trade · A process has three to six steps that a reader follows in one order, each a short imperative and a sentence · A setup or a how-to page — a platform's install, a deposit or a withdrawal — needs its sequence shown beside one picture · The same how-it-works list, walked through on its own: with `autoplay` each step takes its turn, its rule filling as it holds, and the picture changes to that step's — a sequence shown in sequence rather than all at once | The items have no order a reader follows — they are things a product includes → `FeatureBullets` · Three or four things side by side, each with its own picture → `FeatureCards` · Each stage needs a screen and a picture of its own → `FeatureScroll` |
+| StickyCards | A set of markets, products or benefits a page wants read one at a time as the reader scrolls — the reference design's "What we offer" — where each is a title and a sentence, and a picture or an animation is optional · Three steps or benefits that each need a picture of their own — Sign up, Deposit, Trade — told as a sequence the reader scrolls through rather than a row they compare | Three or four things a reader should compare side by side, at a glance → `FeatureCards` · Several things of the same kind, each with a picture worth a screen and room for more than a sentence → `FeatureScroll` · One or two items → nothing here |
+| TeamGrid | A leadership team, an advisory board or a regional management list on an about page · A responsive grid of person/profile cards — photo, name, role, and an optional external profile link — with an optional line under its heading and a "View all" that shows the rest of a longer list | One person, spotlit, in their own words → `TestimonialSlider` · The items are not people — logos, features, figures → `FeatureCards` |
 | TestimonialRow | Five to ten short, rated reviews collected by a review service, where seeing several at once is the point and the overall score is worth stating · A page that has made its claims and wants customers' own ratings to back them — a homepage's "What our customers say" | Two to five quotes the page chose, from partners or customers, each a few sentences and read one at a time → `TestimonialSlider` · A single review → `FeatureSplit` |
 | TestimonialSlider | Two to five real quotes from partners or customers, each a few sentences, read one at a time · A page that has made its claims and wants someone other than the brand to back them | A single quote → `FeatureSplit` · Ratings and review counts from a review site → `TestimonialRow` |
+| TextScroll | A mission or vision statement, on an About or Who we are page · One emphatic brand message between two heavier sections, where a moment of copy on its own gives the page room to breathe · A campaign or partner programme's manifesto, in one sentence or two short ones | The statement needs a heading over it, a line under it or a way onward → `FeatureSplit` · The message asks the reader to do something → `CtaBanner` |
+| Tiers | A partner, affiliate or introducing-broker programme explains its tiers and what each one earns · Rewards grow with performance in two to four steps — commission bonuses, loyalty levels, a VIP ladder — and each step has a bar to clear · A partner landing page needs the progression shown at a glance, with a link on to the programme's full terms | The items have no order — they are things a product includes, or reasons to choose it → `FeatureCards` · The items are things a reader does, one after another, to get started → `Steps` · Plans a reader chooses between, each with the same rows of terms → `ComparisonCards` |

package/.llm/tokens.md

@@ -17,6 +17,7 @@ one value at every width.
 - `--color-bg-band-subtle` — A recessed band across the page, e.g. a section of steps or features set apart from the ones around it. gray.50 in light, white at six in dark. For a fill inside a control — a secondary button, a badge — use color.bg.subtle.
 - `--color-bg-brand` — Primary action surface, e.g. sign-up button, hero CTA, promotional banner. The same coral in light and dark; pair with color.fg.on-brand for text.
 - `--color-bg-brand-active` — Pressed state for color.bg.brand. One step further along the ramp than the hover, in the same direction, so a press reads as more of what the hover began.
+- `--color-bg-brand-deep` — The brand's darkest red, the same in both themes — a shade in a pattern drawn in the brand's reds, e.g. the deepest pool of Background's mesh. Not a ground for words: color.bg.brand-subtle is the tint that turns with the theme.
 - `--color-bg-brand-hover` — Hover state for color.bg.brand.
 - `--color-bg-brand-strong` — A dark surface, for a band breaking a long page or a card carrying more weight than its neighbours, e.g. a feature band, the footer. gray.950 in light and dark alike, so the band is the same wherever it is drawn. Pair with color.fg.on-brand-strong for text.
 - `--color-bg-brand-subtle` — A brand ground quiet enough to read dark ink on. The solid coral takes white at 3.39:1 and is waived for a word; this pairs with color.fg.brand well past the bar, so a mark can be brand-coloured without spending the waiver.
@@ -33,6 +34,7 @@ one value at every width.
 - `--color-bg-page` — The website's ground. A section that needs separating from it takes color.bg.subtle, color.bg.brand-strong or color.bg.brand, rather than the page carrying a tint of its own.
 - `--color-bg-readonly` — A field whose value is fixed but still worth reading. Lighter than the disabled ground and at full contrast, which is the distinction: readonly is legible and settled, disabled recedes because it is not actionable.
 - `--color-bg-selected` — The active or current item in a set of choices, e.g. selected nav item, current tab, highlighted row. Not for recessive areas — use color.bg.subtle.
+- `--color-bg-store-badge` — The ground of an app store's download badge: the black the stores' own badge artwork is drawn on, the same in both themes, so a badge chip and the artwork in it read as one badge.
 - `--color-bg-strong` — Inverted neutral fill for an action that has to outrank everything around it — near-black in light and pure white in dark, the highest contrast the page can carry. Not a section ground: a band takes bg.subtle, bg.brand-strong or bg.brand. Pair with color.fg.on-strong.
 - `--color-bg-strong-on-brand` — The solid fill of a control on color.bg.brand, e.g. the primary action on the coral band. Near-black in both modes, because the band does not change — unlike color.bg.strong, which turns white in dark.
 - `--color-bg-subtle` — A recessive fill inside a control or a small area, e.g. a secondary button, a neutral badge. For a band across the page use color.bg.band-subtle; for selected items, color.bg.selected.
@@ -45,6 +47,7 @@ one value at every width.
 - `--color-bg-surface-card-raised` — A card lifting off the ground behind it, e.g. a Card or CardButton on a color.bg.subtle band. White in light, white at six in dark, so a dark card tints the band instead of sitting on it as grey. Menus and popovers take color.bg.surface-raised.
 - `--color-bg-surface-card-strong` — The dark fill of a card weightier than its neighbours, e.g. an accent-strong Card or CardButton. gray.900 in both modes, a step lighter than color.bg.brand-strong so it reads as a card, not a band.
 - `--color-bg-surface-card-strong-raised` — The strong card on a subtle band. gray.900 in light mode, the strong card's own fill, which already stands off the gray.50 band; gray.800 in dark, where the band is a near-black tint the strong card would blend into. Pair with color.fg.on-brand-strong.
+- `--color-bg-surface-glass` — A pane of glass over whatever is behind it, e.g. an IllustrationCard on a band. Light glass in light mode, a faint frosted white in dark, with a blur behind it in both; ink is color.fg.default.
 - `--color-bg-surface-inverse` — The quieter of the two surfaces on a dark ground, for a panel rather than a pill. color.bg.surface-raised-inverse is the stronger lift and is right on a control the size of a navbar's; at that weight a card-sized box reads as a pale patch rather than a surface.
 - `--color-bg-surface-modal` — A surface that covers the page behind a scrim — dialogs, drawers, bottom sheets. The topmost plane there is, so it stays white in light where color.bg.surface is recessed. For one that floats without dimming what is under it use color.bg.surface-raised.
 - `--color-bg-surface-raised` — A surface that lifts off the one behind it, e.g. a dropdown, a popover, a card on a color.bg.subtle band. A card on the page itself takes color.bg.surface, which reads as recessed against it instead.
@@ -66,6 +69,8 @@ one value at every width.
 - `--color-border-focus-inverse` — The focus ring on a ground that runs against the mode. color.border.focus is near-black, which is invisible on a dark bar — and a focus ring that cannot be seen is the one affordance a keyboard reader has nothing to fall back on.
 - `--color-border-focus-on-brand-strong` — The focus ring on color.bg.brand-strong, e.g. a navigation bar's controls on a dark hero, a footer's links. White in both modes, because the band does not change. For a surface that flips with the mode use color.border.focus-inverse.
 - `--color-border-info` — Informational accent border, e.g. info banner edge, highlighted section.
+- `--color-border-pattern` — The resting lines of a decorative rule grid on the page's ground. A step above color.border.subtle, which a hairline across a whole band thins to nothing; well below the default border, so the grid reads as texture.
+- `--color-border-pattern-inverse` — The resting lines of a decorative rule grid on a dark or coral ground. White at a quarter in both modes, as those grounds are; a step above color.border.subtle-inverse, which a hairline grid thins to nothing.
 - `--color-border-strong` — Emphasised border for active or prominent elements, e.g. active input, selected card edge.
 - `--color-border-subtle` — A quiet separator, e.g. dividers, table rules. Alpha-based — works on any surface.
 - `--color-border-subtle-inverse` — A quiet rule on a dark ground. The counterpart to color.border.subtle, which is black at 5% and invisible on one.
@@ -122,11 +127,13 @@ one value at every width.
 - `--space-inset-sm` — Default padding inside controls, e.g. form inputs, dropdowns, sign-up fields.
 - `--space-inset-xl` **adapts** — Padding inside a card or a panel — the step most cards want, between the tight lg and the page's own gutter.
 - `--space-inset-xs` — Padding inside compact controls, e.g. buttons, nav items, form chips.
+- `--space-pile-peek` — How much of each covered card shows above the next in a StickyCards pile. Each card stops this much lower than the one under it, so the covered cards read as a stack of edges.
 - `--space-section-compact` **adapts** — The air above and below a section of supporting content, or one closely related to the section before it. Where the default step would read as a break rather than a step.
 - `--space-section-default` **adapts** — The air above and below a section, and the step most take. Adjacent sections each contribute their own; nothing adds a gap between them on top of it.
 
 ## size
 
+- `--size-aurora-spotlight` — How far the pool of light trailing the pointer across an aurora reaches, as a radius. Small enough to read as light the pointer carries rather than a wash over the band.
 - `--size-avatar` — A person's picture beside their words — the author of a testimonial. Forty-eight, round: large enough to recognise a face, small enough to stay a signature under the quote rather than a portrait above it.
 - `--size-backdrop-blur` — How far a see-through surface blurs what is behind it, e.g. the navigation bar over the page it scrolls across. Enough that the words behind it stop reading as words, so the bar's own stay legible.
 - `--size-band-compact` — The least height an opening band takes when it is not a screen tall — a company, legal or support page, where a full viewport would be a wall before the first sentence. Deep enough that the band reads as a band rather than a gap the title fell into.
@@ -138,12 +145,21 @@ one value at every width.
 - `--size-control-lg` — Height of a large control, for a hero or a conversion band. Twice space.control.lg, on the same reasoning as the default step.
 - `--size-control-md` — Height of a default-size control, the same measure product gives its own default. Twice space.control.md, so on a pill the corner radius and the side padding are one measure and a label starts where the curve stops.
 - `--size-control-sm` — Height of a small control — a picker in a navigation bar, a field in a filter row. Half of it is space.control.sm and a quarter is radius.control.sm, the ratio every step of this ramp holds. Desktop only: below what a finger reliably hits.
-- `--size-dot-current` — How wide the current mark in a row of dots stretches, against size.dot.diameter for the rest — a pill three dots long, so where the reader is reads by shape.
+- `--size-data-table-search` — The widest a DataTable's search runs beside its result count, from the fold. Room for a market's name and a symbol with the magnifier and the clear button either side; on a phone it takes the row.
+- `--size-dot-current` — How long the current mark in a set of dots stretches along the set, against size.dot.diameter for the rest — a pill three dots long, so where the reader is reads by shape. Wide in a row, tall in Stats' column standing on end.
 - `--size-dot-diameter` — The mark standing in for one page of a short sequence, or for a status beside a name. Eight: small enough that a row of ten reads as a row rather than as ten controls, and large enough to find at arm's length.
+- `--size-download-banner-badge` — The width every store badge on a DownloadBanner takes, so badges whose artwork differs in shape line up as one set.
+- `--size-download-banner-media` — The width of the app's image on a featured DownloadBanner — a phone held out beside the words rather than a slab across the card. The same width as size.grid.track-lg, for a different thing.
+- `--size-download-banner-qr` — The side of the QR code on a DownloadBanner, a square. Large enough to scan from a phone held at arm's length off a desktop screen, small enough to sit beside a heading.
+- `--size-feature-cards-carousel-card` — The width of a card on a FeatureCardsCarousel, from the fold, held to the column. Narrow enough that the row shows the next card's edge, which says there is more.
+- `--size-feature-stack-media` — The widest the picture a FeatureStack ends on runs, centred. Wider than the words above it, so the picture is the section's weight; narrower than the page, so it stays an illustration rather than a band.
 - `--size-grid-track-lg` — 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, which is what makes this the floor for a grid meant to read as three across.
 - `--size-grid-track-md` — The default track floor, for a feature card: a heading and a line or two beneath it. Four of these fit the page's measure, so a grid asking for three has room to spare and drops to two on a tablet rather than at the first sign of pressure.
 - `--size-grid-track-sm` — The narrowest a grid track goes before the grid drops a column. For a cell holding a logo, an icon and a word, or one short claim — six of them clear the page's measure with the page gutter still on both sides.
+- `--size-halftone-dot` — The widest a halftone dot grows, at the brightest point of the glow. Six against size.halftone.pitch's twenty, so even the largest dots stand well apart and the pattern reads as a fine screen of light rather than a field of discs.
+- `--size-halftone-pitch` — How far apart a halftone background's dots sit, centre to centre. A pitch rather than a gap, as size.rule-grid.pitch is: how often a decorative mark recurs. Twenty, against a six-pixel dot: a fine screen that reads as a tone across a band.
 - `--size-heading-group-max` — How wide an eyebrow, a title and a description may run as a block. Independent or centred groups take this; one that has to sit on the grid takes eight columns instead, which is a span rather than a measure.
+- `--size-image-banner-card` — The least height an ImageBanner's split and cover cards take, so the photograph has room to show beside or behind the words — the reference design's card. The same depth as size.band.compact, for a different thing: a card in the page rather than the band that opens it.
 - `--size-logo-columns-height` — How much of a LogoColumns wall shows at once, from the fold. Tall enough that a column reads as running on past both edges; half of it on a phone.
 - `--size-logo-rows-tile` — The width of a tile on a LogoRows, from the fold; three quarters of it on a phone. Wide enough for a wordmark, narrow enough that a row shows several at once.
 - `--size-measure-description` — How wide a supporting description runs. Wider than a title because it is read rather than taken in, and narrower than long-form because it sits under something.
@@ -155,8 +171,12 @@ one value at every width.
 - `--size-menu-panel-max` — The widest a section's menu panel gets. Narrower than the page's own measure on purpose: a panel is scanned across with a pointer already on it, and one as wide as the page leaves its last column a long way from the name that opened it.
 - `--size-menu-panel-min` — The shortest a section's menu panel gets, whatever it holds. A bar's sections rarely have the same number of destinations, and panels that each took their own height would change size as the reader moved along the row.
 - `--size-menu-max` — The tallest a menu's surface gets before its commands scroll. Product's measure, and counted in rows: five whole and part of a sixth at either size. Neither lands on a row boundary — a ceiling cutting clean at the last full row looks like the whole set.
+- `--size-mesh-blur` — How far a mesh background blurs its pools into one another. Enough that no pool keeps an edge, so the reds read as one liquid rather than shapes.
 - `--size-review-card-min` — The shortest a TestimonialRow card gets. A floor, not a height: a one-line review keeps a card's shape, and a longer one still grows it.
+- `--size-rings-pitch` — How far apart the rings on a band sit, counted out from the middle of its foot. A pitch, as size.rule-grid.pitch is; tighter than the grid's, because rings spaced that wide read as a target rather than a ripple.
+- `--size-rings-spotlight` — How far the pointer's light reaches on the rings: the radius within which they brighten around the pointer and fade to the resting rings. The rule grid's reach, so the two answer the pointer alike.
 - `--size-rule-grid-pitch` — How often the rule grid repeats on a band that paints one. A pitch rather than a gap: it is how far apart a decorative line recurs, not the space between two things a reader is comparing.
+- `--size-rule-grid-spotlight` — How far the pointer's light reaches on a rule grid: the radius within which the lines brighten around the pointer and fade to the resting grid. A little over a square either way: light under the pointer, not a lit band.
 - `--size-sheet-handle-height` — The thickness of that handle. At the smallest step the scale has, because a grab bar is a hint that the sheet moves rather than a part of what it holds.
 - `--size-sheet-handle-width` — The width of the grab handle at the top of a BottomSheet. Wide enough to take hold of, narrow enough to read as a grip rather than as a rule across the sheet.
 - `--size-sheet-max` — The widest a BottomSheet gets before it stops growing and centres. A sheet is a small-screen pattern, and one running the width of a desktop is a dialog that arrived from the wrong edge.
@@ -167,9 +187,13 @@ one value at every width.
 - `--size-spinner-lg` — Spinner diameter at size lg. For a section holding space for content that has not arrived — an embed, a demo, a band of live figures. Its job there is to be visible from where the reader is looking, which is the whole section rather than one control in it.
 - `--size-spinner-md` — Spinner diameter at size md. The default: large enough to be the one thing happening in a form or a card, small enough that it does not become the card's subject.
 - `--size-spinner-sm` — Spinner diameter at size sm. Sixteen, which is the size of the body copy it sits beside — an indicator in a line of text reads as part of the line rather than as something dropped into it.
+- `--size-sticky-cards-compact-max` — The widest a StickyCards pile of text-first cards runs, centred under its heading — the heading group's own measure, so pile and heading share a column.
+- `--size-sticky-cards-compact-min` — The shortest a text-first StickyCards card is drawn. A card a title and a sentence tall is a strip, and a pile of strips reads as a list rather than as cards laid over each other.
+- `--size-sticky-cards-feature-min` — The least height a StickyCards feature card takes — a chapter of the page rather than a tile, tall enough for its picture to be the card's half.
 - `--size-switcher-panel-width` — The width of a switcher's floating panel. Stated because the panel is out of flow and would otherwise shrink to the trigger it hangs from, wrapping every choice and running the set down the page.
 - `--size-target-min` — The smallest a thing a pointer has to hit may be. Bind it as a minimum on any control whose size would otherwise come from its contents — a pressable card is as big as its words, and one holding a single short line is smaller than a fingertip.
 - `--size-testimonial-art` — The decorative pictures in a TestimonialSlider's corners, as squares. Large enough to read as pictures, small enough to leave the card the quote's.
+- `--size-tiers-medal` — The medal over each tier's name in a Tiers section, as a square. Large enough to read as a medal rather than an icon beside the words, small enough that four across leave the cards under them the row.
 - `--size-tooltip-max` — The widest a tooltip gets before its text wraps. Short enough that the eye finds the start of the next line without hunting for it, which is the whole job of a measure — and a tooltip that needs more than two lines is a tooltip carrying something that belongs on the page.
 
 ## radius
@@ -244,6 +268,12 @@ one value at every width.
   - `--font-field-label-md-line-height`
   - `--font-field-label-md-size`
   - `--font-field-label-md-weight`
+- `font.figure-lg` — A figure with the row to itself — the one in place on Stats' wheel on a phone. Larger than font.figure, which shares a row with the figures beside it: alone, the number is the one thing the band is showing. The same size at every width, because it is only drawn on a phone.
+  - `--font-figure-lg-family`
+  - `--font-figure-lg-letter-spacing`
+  - `--font-figure-lg-line-height`
+  - `--font-figure-lg-size`
+  - `--font-figure-lg-weight`
 - `font.figure` — A number read as a fact rather than as a heading. It takes a heading's size, because a figure has to hold a row on its own, and semibold rather than extrabold: the weight a title needs makes a number look like a claim.
   - `--font-figure-family`
   - `--font-figure-letter-spacing`
@@ -349,8 +379,10 @@ one value at every width.
 
 - `--motion-distance-drift` — How far decoration travels against the scroll while its section passes through the view, one way or the other. Far enough to be seen moving as the reader scrolls past, so it reads as depth.
 - `--motion-duration-dramatic` — Editorial hero entrances for visual impact, e.g. hero headline revealing, landing page title appearing. Not for scroll reveals — use motion.duration.reveal.
+- `--motion-duration-drift` — One way of a slow drift that runs while something is on screen — an aurora wandering along a band's foot and back. Ten seconds, so the movement is felt rather than watched.
 - `--motion-duration-dwell` — How long a rotating message holds before the next one moves in, e.g. a CTA banner's slides. Long enough to read a headline and a line under it; the reference site's 2000 moved before a reader reached the button.
 - `--motion-duration-fast` — Direct user actions that should feel instant, e.g. hover, press, toggle.
+- `--motion-duration-hold` — How long one of a turning set of figures holds in place before the next turns in — Stats' wheel on a phone. A second, where motion.duration.dwell holds a slide for five: a number and its label are read at a glance, and a wheel that stood still longer would read as stuck.
 - `--motion-duration-instant` — A change the reader has already moved past — a tooltip leaving once the pointer is elsewhere. Not a short duration but no duration: animating a dismissal keeps a thing on screen after the reason for it has gone.
 - `--motion-duration-media-hover` — How long art takes to settle inside a frame that holds still. Longer than duration.normal, which suits a card that lifts and is over; a picture that zooms is still on screen when it stops and the eye follows it the whole way.
 - `--motion-duration-normal` — UI elements entering or leaving, e.g. dropdowns, tooltips, tab switches, card hover.
@@ -360,6 +392,9 @@ one value at every width.
 - `--motion-duration-slow` — Large UI transitions, e.g. accordions expanding, page transitions, interactive demos.
 - `--motion-duration-spinner` — One full rotation of a spinner. Fast enough to read as working, slow enough that the stroke does not blur into a solid ring.
 - `--motion-duration-stagger` — The step between one part of a section arriving and the next. A gap rather than a length: five parts at this step trail the first by less than half a second, so a block still arrives as one thing rather than assembling itself while a reader waits.
+- `--motion-duration-ticker` — How long a running row takes to carry one item past — Awards' row on a phone, multiplied by the number of awards for one whole loop. The reference site's pace: thirty-two seconds for eight awards, slow enough to read an award as it goes by.
+- `--motion-duration-trail` — How long something takes to catch up with a pointer it trails — a background's glow following the pointer across a band. Half a second, so the light drifts after the hand rather than sticking to it: a trail is felt, a cursor is tracked.
+- `--motion-duration-turn` — One turn of a wheel of figures: the one in place rising away as the next rises into it. The reference site's 700 — long enough that the eye follows the number in rather than seeing it swap.
 - `--motion-easing-enter` — UI elements arriving on screen — decelerates into place, e.g. dropdown opening, tooltip appearing.
 - `--motion-easing-exit` — UI elements leaving the screen — accelerates away, e.g. menu closing, notification dismissing.
 - `--motion-easing-media-hover` — Art moving inside a frame that holds still. Symmetric, unlike easing.standard: a hover runs forward on enter and backward on leave, so a one-way curve that settles hard reads as a snap going one way and a drift the other.
@@ -371,6 +406,7 @@ one value at every width.
 - `--motion-scale-enter` — What a component scales from when something reveals it — a tooltip appearing. Needs a transform origin on the edge nearest its anchor, or it grows out of its own middle. The counterpart to scale.hover, which is a response rather than an entrance.
 - `--motion-scale-hover` — How much a control grows under the cursor on hover. Deliberately small — a control that grows past the pointer fires its own mouse-out.
 - `--motion-scale-media-hover` — How much art grows inside a frame that holds still — an editorial card's picture under the cursor. Twice motion.scale.hover, which stays smaller because a control can outrun its own pointer and a framed picture cannot.
+- `--motion-scale-pile-covered` — How far a card in a StickyCards pile draws back once the next card has slid over it, from its top edge, so the pile reads as depth. Not motion.scale.enter, which is for something arriving.
 - `--motion-translate-enter` — Where a surface waits before something reveals it: level on the inline axis, its own full height down the block one. A share of the element rather than of the page, so a sheet travels exactly its own height whatever that turns out to be.
 - `--motion-translate-hover` — How far a pressable surface rises under the cursor. A fixed distance rather than a share of the element, so a tall card and a short one lift by the same amount and a row of them stays level. Small enough that nothing it sits beside looks disturbed.
 - `--motion-translate-reveal` — How far a section waits below where it lands, before the scroll brings it up. A fixed distance rather than a share of the block, so a hero a screen tall and a split half that arrive by the same movement. Pairs with motion.easing.reveal.

package/AGENTS.md

@@ -80,6 +80,7 @@ screen is built in is not something to reach for while building a control.
 
 - **Accordion** — Questions a reader asks near a decision
 - **AccordionItem** — One row inside an Accordion
+- **Background** — A band that has to stand apart from the page around it with more than a change of fill
 - **Badge** — One of a set is the one the page wants read first
 - **BottomSheet** — A task needs the screen's full width and the reader's undivided attention
 - **Breadcrumb** — The page sits inside a section hierarchy, and the levels above it are places the visitor can navigate to
@@ -96,6 +97,8 @@ screen is built in is not something to reach for while building a control.
 - **Footer** — A marketing page needs its closing band
 - **FooterGroup** — A set of a footer's destinations belong under one word
 - **Icon** — A glyph stands beside words to speed recognition
+- **IllustrationCard** — Product information laid over a photograph or a piece of art
+- **IllustrationScene** — Product information shown over a photograph
 - **Link** — A term inside running copy has a page of its own
 - **MenuItem** — A row in a menu of destinations
 - **Navbar** — A marketing page needs its top-level navigation
@@ -140,20 +143,36 @@ screen is built in is not something to reach for while building a control.
 
 ### Blocks — the sections a page is built from, and the rhythm between them
 
+- **Awards** — Building credibility with the industry awards a company has won
+- **ComparisonCards** — Two or three products, accounts or plans that answer the same few questions differently
+- **ComparisonTable** — Comparing two or three options
 - **CtaBanner** — A short, high-contrast promotion with one clear action
 - **CtaBannerSlider** — Rotating between two or three genuinely different promotions without a hero's weight
+- **DataTable** — Trading instruments and their specifications
+- **DownloadBanner** — Promoting an app across the stores and platforms it ships on
 - **FaqAccordion** — The questions a reader asks before acting
 - **FeatureBullets** — A page has to list what a product or a plan includes, and the list is the argument
-- **FeatureCards** — Three or four things a product does, each a heading and a sentence, read side by side and compared at a glance
+- **FeatureCards** — Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance
+- **FeatureCardsCarousel** — A "what you get" band of five or six authored cards, each a benefit with a line and a picture, too many for one row of a grid, where one card in focus with a peek of the next is the point
 - **FeatureScroll** — A page has three or more things of the same kind to explain, each with a picture worth a screen
 - **FeatureSplit** — A page needs one more point about something it has already introduced, with a picture to carry it
+- **FeatureStack** — A statement with a picture that carries it
+- **ImageBanner** — Driving a single mid-page or end-of-page action with a photograph to carry it
 - **LandingHero** — A main landing page needs its opening band
 - **LogoColumns** — Showing the partners, integrations or payment methods behind a claim
 - **LogoRows** — Showing the partners, integrations or payment methods behind a claim under it, where the words lead and the logos follow
 - **PageHeader** — A company, legal or support page needs its opening band
 - **ProductHero** — A product or a market page needs its opening band
+- **ResourceBanner** — Pointing readers at related guides, policies, or reference pages at the end of an informational section
+- **SceneScroll** — Two states of one thing a page wants felt rather than listed
+- **Stats** — Three to five headline numbers that prove scale or credibility
+- **Steps** — A page explains a get-started or onboarding flow
+- **StickyCards** — A set of markets, products or benefits a page wants read one at a time as the reader scrolls
+- **TeamGrid** — A leadership team, an advisory board or a regional management list on an about page
 - **TestimonialRow** — Five to ten short, rated reviews collected by a review service, where seeing several at once is the point and the overall score is worth stating
 - **TestimonialSlider** — Two to five real quotes from partners or customers, each a few sentences, read one at a time
+- **TextScroll** — A mission or vision statement, on an About or Who we are page
+- **Tiers** — A partner, affiliate or introducing-broker programme explains its tiers and what each one earns
 
 ## Components that need mounting
 

package/dist/components/awards-data.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The awards a Awards lists.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `logo-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per award, because an award is two lines of words — what it was
+ * for and who gave it — and nothing in it is an element a page composes. The laurels either side are
+ * the section's, the same for every award, and not something an award chooses.
+ */
+/** One award in a Awards: what it was for, and who gave it when. */
+export interface Award {
+    /**
+     * What the award was for, in the issuer's own words — "Best Trading Experience - Global". Ten
+     * words at most: it is set between two laurels, at a badge's width, and wraps to three lines past
+     * that.
+     */
+    title: string;
+    /**
+     * Who gave it, and the year — "UF Awards 2025". Short, under the title; the year is what tells a
+     * reader the claim is current.
+     */
+    issuer: string;
+}

package/dist/components/awards-data.js

@@ -0,0 +1,11 @@
+/**
+ * The awards a Awards lists.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `logo-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per award, because an award is two lines of words — what it was
+ * for and who gave it — and nothing in it is an element a page composes. The laurels either side are
+ * the section's, the same for every award, and not something an award chooses.
+ */
+export {};

package/dist/components/block-image-data.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A picture a block draws itself, at the picture's own shape.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value
+ * and hands it over. A record rather than a node, because the block has to draw the `<img>` to
+ * size it — a picture keeps its own proportions and the block only limits how tall it grows, which
+ * it cannot do to an element it was handed already wrapped in something else.
+ */
+/** One picture: where it is, what it shows, and its size, so the block can hold its shape. */
+export interface BlockImage {
+    /** Where the picture is. Use one at least as wide as the column it fills, twice that for sharp screens. */
+    src: string;
+    /**
+     * What a screen reader hears for it: an empty string when the words around it already say what it
+     * shows, a description when it carries something they do not.
+     */
+    alt: string;
+    /**
+     * The picture's own width and height, in pixels. Optional, but give them: with them the block
+     * reserves the picture's shape before it loads, so nothing below it moves when it arrives.
+     */
+    width?: number;
+    height?: number;
+}

package/dist/components/block-image-data.js

@@ -0,0 +1,9 @@
+/**
+ * A picture a block draws itself, at the picture's own shape.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value
+ * and hands it over. A record rather than a node, because the block has to draw the `<img>` to
+ * size it — a picture keeps its own proportions and the block only limits how tall it grows, which
+ * it cannot do to an element it was handed already wrapped in something else.
+ */
+export {};

package/dist/components/blocks/awards/Awards.css

@@ -0,0 +1,134 @@
+/* GENERATED from awards.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-awards {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  outline-style: solid;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+  outline-width: var(--border-width-none);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__award {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xs);
+  max-inline-size: var(--size-grid-track-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__laurel {
+  display: block;
+  flex: none;
+  inline-size: var(--icon-size-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__copy {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  text-align: center;
+  row-gap: var(--space-heading-title-description-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__name {
+  margin: 0;
+  text-wrap: balance;
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__issuer {
+  margin: 0;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__list:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="page"] .dds-awards__laurel {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="strong"] .dds-awards__laurel {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="subtle"] .dds-awards__laurel {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="strong"] .dds-awards__list:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+

package/dist/components/blocks/awards/Awards.d.ts

@@ -0,0 +1,24 @@
+import './Awards.css';
+import './awards-impl.css';
+import '../block-reveal.css';
+import { type AwardsProps } from './Awards.types.js';
+export type { AwardsProps };
+/**
+ * A heading over the awards a company has won, each between two laurels — the reference design's
+ * FeatureAwards.
+ *
+ * One list, two shapes, and the stylesheet chooses between them on the section's width. From the
+ * fold it wraps into centred rows of five at most; on a phone it is one row across the band that
+ * runs on its own, the reference's marquee, holding still while the reader hovers, focuses or presses
+ * on it. The running row is the awards drawn twice, the second set hidden from assistive technology,
+ * so its loop has no seam and a screen reader counts each award once. A reader who asked for less
+ * motion gets the row still, to swipe.
+ *
+ * The awards are records rather than children, `Award` from `awards-data`: an award is
+ * two lines of words, and the laurels around them are the section's, the same for every award.
+ *
+ * It arrives the way every block does: the heading, then each award a step behind the one before,
+ * in reading order. `'use client'` for that, for `useId`, which names the region and the row by the
+ * heading, and for the measurement that gives the row its tab stop.
+ */
+export declare function Awards({ ground, title, awards }: AwardsProps): import("react").JSX.Element | null;