@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/.llm/tokens.md

@@ -0,0 +1,341 @@
+<!-- GENERATED from tokens/semantic/**. Do not edit. -->
+
+# Tokens
+
+Write the CSS variable, never the value it resolves to. Resolved values are
+deliberately not published here — copying one is the hardcoding this system rejects.
+
+Some roles below are marked **adapts**. Those already change at 768px on their own —
+write the variable once and do not add a media query for it. Every other role holds
+one value at every width.
+
+## color
+
+- `--color-bg-active` — Pressed state for interactive elements. Alpha-based like the hover and one step heavier, so it tints whatever surface it lands on — ink on light and paper on dark.
+- `--color-bg-active-inverse` — Pressed state for an interactive element on a surface that runs against the mode, one step heavier than color.bg.hover-inverse. The mirror of color.bg.active, and paired with it on the same reasoning.
+- `--color-bg-brand` — Primary action surface, e.g. sign-up button, hero CTA, promotional banner. Pair with color.fg.on-solid 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-hover` — Hover state for color.bg.brand.
+- `--color-bg-brand-strong` — A dark brand surface, for a band breaking a long page or a card carrying more weight than its neighbours. brand.1000 in light and brand.900 in dark, where a near-black band would disappear into the page rather than break it.
+- `--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.
+- `--color-bg-danger` — Destructive action surface, e.g. cancel subscription, delete account. Pair with color.fg.on-solid for text.
+- `--color-bg-danger-subtle` — Lightweight danger fill, e.g. error banners, danger badges. Pair with color.fg.danger for text.
+- `--color-bg-field` — The ground of a control a reader types into or picks from — a text field, a select, an upload zone. An alpha, so it can never come out the same colour as the container holding it, which a solid can. For the container itself use color.bg.surface.
+- `--color-bg-hover` — Hover state for interactive elements. Alpha-based, so it tints whatever surface it lands on rather than replacing it — ink on light and paper on dark, because a black alpha on a dark surface darkens what is already dark and reads as nothing at all.
+- `--color-bg-hover-inverse` — Hover for an interactive element on a surface that runs against the mode — a dark chip in light. The mirror of color.bg.hover, which tints with the mode and so shows nothing on a ground the mode did not paint. Use color.bg.hover where the mode paints the ground.
+- `--color-bg-info` — Informational surface, e.g. info banners, tips. Pair with color.fg.on-solid for text.
+- `--color-bg-info-subtle` — Lightweight info fill, e.g. info badges, inline notices. Pair with color.fg.info for text.
+- `--color-bg-overlay` — Scrim behind modal dialogs and drawers. Blocks interaction with content beneath.
+- `--color-bg-overlay-subtle` — Light scrim for loading states and image overlays.
+- `--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-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-subtle` — A recessive fill within a section, e.g. alternating content bands, highlighted feature areas. Not for active items — use color.bg.selected.
+- `--color-bg-success` — Confirmation surface, e.g. sign-up complete, payment confirmed. Pair with color.fg.on-solid for text.
+- `--color-bg-success-subtle` — Lightweight success fill, e.g. success banners, success badges. Pair with color.fg.success for text.
+- `--color-bg-surface` — A card on the page: one step from the ground, so it reads as recessed against the page and raised on a subtle band. For a card that floats above the page, color.bg.surface-raised.
+- `--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.
+- `--color-bg-surface-raised-inverse` — A raised surface on a ground that runs against the mode — a navigation bar's pill on a dark hero. An alpha rather than a grey step: a hero is often a photograph or a brand colour, which a solid surface would clash with.
+- `--color-bg-track` — The channel a thing travels or fills along — a grab handle on a sheet, a rail. An alpha rather than a ramp step, so it darkens whatever is behind it and stays a groove on a raised panel, where a fixed grey would stop matching the moment the surface changed.
+- `--color-bg-track-active` — Pressed state for the same mark. One step further than the hover, in the same direction, so a press always reads as more than a hover.
+- `--color-bg-track-hover` — Hover state for a mark drawn in color.bg.track, which is the only thing in this colour that hovers — a track itself never does. One step more ink, so a pointer over the mark reads as more, never less. An alpha like the track, so it keeps tinting what is behind it.
+- `--color-bg-transparent` — A fill that is declared and not seen, for an element whose own surface must show through rather than whatever a page happens to sit it on. Needed because omitting the background would leave that surface showing instead.
+- `--color-bg-warning` — Caution surface, e.g. limited offer, expiring promotion. Pair with color.fg.on-solid for text.
+- `--color-bg-warning-subtle` — Lightweight warning fill, e.g. warning banners, warning badges. Pair with color.fg.warning for text.
+- `--color-border-danger` — Error validation border, e.g. input with failed validation, error banner edge.
+- `--color-border-default` — Standard border for containers and controls, e.g. input outlines, grouped sections.
+- `--color-border-focus` — The keyboard focus indicator — a border on some controls, a ring on others. Never remove: required for accessibility. Neutral rather than blue, so it is never mistaken for the danger a control is also able to show. Inverts by mode.
+- `--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-info` — Informational accent border, e.g. info banner edge, highlighted section.
+- `--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.
+- `--color-border-success` — Success validation border, e.g. confirmed input, success banner edge.
+- `--color-border-warning` — Warning validation border, e.g. approaching-limit input, warning banner edge.
+- `--color-fg-brand` — Brand-coloured text, for a mark or a line on color.bg.brand-subtle. Not for text on the page: the brand is a colour a page uses to point at something, and copy set in it is a page pointing at all of itself.
+- `--color-fg-brand-accent` — The brand label at full saturation — the brand fill's own red, the same in both modes, so a label and a fill agree. For the one row a reader is already on. Only on the bare page, never a tint. 3.11:1 as text, under AA: never the only thing saying it.
+- `--color-fg-danger` — Error and destructive text on neutral surfaces, e.g. validation messages, negative values.
+- `--color-fg-default` — Headings and body copy — the default for any readable content.
+- `--color-fg-disabled` — Text on disabled controls. Intentionally low contrast — the control is not actionable.
+- `--color-fg-info` — Informational text on neutral surfaces, e.g. links, tips, contextual help.
+- `--color-fg-muted` — Supporting copy, e.g. subheadings, feature descriptions, form labels. Not for content the user must read to act.
+- `--color-fg-muted-inverse` — Supporting copy on a dark ground, e.g. a footer's group labels. White at sixty-four, so it takes the hue of whatever the band is painted rather than sitting cool against a warm one — and so it stays muted on any dark ground instead of on one.
+- `--color-fg-on-brand-strong` — Text and glyphs on color.bg.brand-strong. White in both modes, that surface being dark in both — unlike color.fg.on-solid, which follows the theme.
+- `--color-fg-on-solid` — Text on solid coloured surfaces, e.g. brand, danger, success, warning buttons. Not for text on neutral surfaces — use color.fg.default.
+- `--color-fg-on-strong` — Text on color.bg.strong. The opposite extreme from the fill, so the pair is always near-black on white or white on near-black.
+- `--color-fg-on-warning` — Text on a warning surface. Always dark because the warning background is bright in both modes.
+- `--color-fg-required` — The mark that says a field must be filled. The same red as fg.danger and a role of its own, because required is not a verdict — a field carrying an asterisk has not failed anything yet.
+- `--color-fg-success` — Positive text on neutral surfaces, e.g. profit values, confirmation messages.
+- `--color-fg-tertiary` — De-emphasised text, e.g. fine print, legal disclaimers, footnotes.
+- `--color-fg-warning` — Caution text on neutral surfaces, e.g. approaching limits, expiring sessions.
+
+## space
+
+- `--space-actions-gap` **adapts** — Between two actions side by side. Narrower than any gap around the pair, so they read as one set offering a choice rather than two separate offers.
+- `--space-control-lg` — Side padding inside a large pill control. Half of size.control.lg, on the same reasoning as the default step. It coincides with space.inset.lg today and is still its own role: one follows a control's height, the other a section's rhythm, and they are free to move apart.
+- `--space-control-md` — Side padding inside a default-size pill control. Half of size.control.md, so the corner radius and the padding are one measure and a label starts where the curve stops. The inset scale has no step here — its steps answer to sections, not to a control's geometry.
+- `--space-control-sm` — Side padding inside a small pill control. Half of size.control.sm, on the same reasoning as the default step — the corner radius and the padding are one measure, so a label starts where the curve stops.
+- `--space-gap-2xl` **adapts** — Between one section of a page and the next.
+- `--space-gap-3xl` **adapts** — The largest gap, for separating whole movements of a long page.
+- `--space-gap-lg` — Gap between content groups, e.g. feature cards in a grid, footer columns, pricing plans.
+- `--space-gap-md` — Default gap between stacked items, e.g. form fields, feature list items, pricing features.
+- `--space-gap-none` — No gap at all, for a row whose marks are meant to read as one object rather than as a list of controls. The only step here that is a decision rather than a measure.
+- `--space-gap-sm` — Gap between sibling controls, e.g. buttons in a row, form label to input.
+- `--space-gap-xl` **adapts** — Between the parts of a card, or between a heading and the block it introduces.
+- `--space-gap-xs` — Tightest gap between related elements, e.g. icon and label, inline text pairs.
+- `--space-grid-gutter` **adapts** — The space between two cards, across and down. One value on both axes, so a grid reads as an even field rather than as rows with a seam between them.
+- `--space-heading-content` **adapts** — Between a heading group and the content it introduces, stacked or side by side. Measured from the last part the group actually shows, so a section opens the same way whether or not every part is present.
+- `--space-heading-description-actions` **adapts** — Between a description and the actions under it. The widest step inside the group: the gap is what says the reading has finished and something is being asked.
+- `--space-heading-eyebrow-title` **adapts** — Between an eyebrow and the title under it. The tightest step in the group, because an eyebrow reads as the title's first line rather than as a line of its own.
+- `--space-heading-title-description` — Between a display title and the description under it. Smaller than it looks: a title's leading and descender depth sit inside the gap, and both scale with the type, so a smaller title takes the compact step instead.
+- `--space-heading-title-description-compact` — The same step under a title that is not a display size — a card's, a panel's. Half the measure because the leading above it is half as deep, and what the eye reads is this plus that leading.
+- `--space-inset-2xl` **adapts** — The page's horizontal gutter, and the inset of a band that runs its full width.
+- `--space-inset-2xs` — Tight padding inside compact elements, e.g. badges, pills, tags.
+- `--space-inset-3xl` **adapts** — The vertical air around a hero or a full-bleed breaker. For the air a full-width section keeps above and below its own content use space.inset.4xl.
+- `--space-inset-4xl` **adapts** — The vertical air a full-width section keeps above and below its content. Two sections on the same ground share one step between them rather than each taking its own; a section with a fill of its own keeps the full step, its edge being what needs the air.
+- `--space-inset-card` **adapts** — The space between a card's edge and its contents. The one inset a page does not choose — a row of cards padded differently is a row of different cards.
+- `--space-inset-lg` — Padding inside content containers, e.g. feature cards, pricing cards, form containers.
+- `--space-inset-md` — Padding inside a row of a list — an accordion's heading, a table's cell, anything read by running an eye down a column. Between a control's inset and a container's, because a row is neither. The step the gap ramp already had here, so the two now agree.
+- `--space-inset-page` **adapts** — What holds a page's content off the edge of the window. Thirty-two on a desktop, sixteen below 768px — a phone has a third of the width and cannot spend that much of it on air. The tablet step sits between them and is the layout primitive's to hold.
+- `--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-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-bar-height` — The height of a collapsed navigation bar, which both bars here take. Declared rather than left to what a page hands the bar: an action beside the mark would otherwise set it.
+- `--size-breakpoint-lg` — Where a bar has room for its destinations. A value to read, not a condition to write: `var()` is not allowed in a query, so the seven stylesheets that bend here still carry 64rem themselves.
+- `--size-breakpoint-md` — Where the phone's type layer stops — the mobile overrides resolve below it, so 767 is the last width that reads as a phone. A value to read, not a condition to write: `var()` is not allowed in a media query.
+- `--size-checkbox-box` — The square a checkbox ticks. Twenty, which is the mark's own size rather than the line's: the line is twenty-four here and a square that filled it read as a panel. What puts it on the line is an offset, not the measure.
+- `--size-content-max` — The widest the page's content runs, whatever the window does. Beyond it a line of body copy is longer than an eye tracks comfortably, so the content stops and the ground either side of it keeps going.
+- `--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-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-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-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-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.
+- `--size-measure-long-form` — How wide running text runs. Past this the eye loses the line it was on when it returns to the left edge, which is the whole reason a measure exists.
+- `--size-measure-title` — How wide a title runs before it wraps. A starting point — eighteen to twenty-four after a look. `ch` is the width of the font's zero, so it is a measure rather than a letter count, and typed string because a Figma variable carries a number.
+- `--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-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.
+- `--size-sheet-peek` — How much of the page a tall BottomSheet leaves showing above it — enough to read as a layer over something rather than as a screen of its own.
+- `--size-spinner-stroke-lg` — Ring thickness at size lg. Slightly finer than the eighth the smaller steps take — at forty pixels the proportion that reads as solid at sixteen reads as a band, and the ring is the shape rather than the weight.
+- `--size-spinner-stroke-md` — Ring thickness at size md. Holds the same eighth as sm: a ring that kept one thickness across the sizes would look heavy at sixteen and drawn in hairline at forty.
+- `--size-spinner-stroke-sm` — Ring thickness at size sm. An eighth of the diameter, which is what keeps the arc reading as a stroke travelling rather than as a wedge turning.
+- `--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-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-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
+
+- `--radius-container` — Large rounding for promotional containers — hero cards, callout sections. For standard content sections, use radius.surface.
+- `--radius-container-item` — The corner of a row inside a radius.container surface — the container's radius less the inset the row sits in, so the two curves are concentric rather than merely matched. Thirty-two less sixteen is sixteen, as radius.menu-item is twelve one step down.
+- `--radius-control-lg` — The corner of a large control. Twelve on forty-eight, the same quarter as the steps below it, so the curve reads the same at every size.
+- `--radius-control-md` — The corner of a default control: ten on a forty-pixel height, a quarter of it — the same corner Product draws. Marketing rounded these harder for a while, at sixteen; the surfaces still carry that softer reading, the controls no longer do.
+- `--radius-control-sm` — The corner of a small control. A quarter of its height, which is the ratio every step of this ramp holds.
+- `--radius-expressive` — The most rounding before full — for high-impact visual sections such as feature showcases and banners.
+- `--radius-menu` — The corner of a floating menu's panel. Tighter than radius.surface, which answers to a card sitting in the page: a menu is a control surface that has to nest a row, and its corner less the panel's inset is exactly radius.menu-item.
+- `--radius-menu-item` — The corner of a row inside a menu — radius.menu less the inset the row sits in, so the two curves are concentric and the first and last rows land on the panel's inside edge. Sixteen less four is twelve, which is product's own measure for the same row.
+- `--radius-none` — No rounding — sharp corners for editorial and structured layouts such as grids and dividers.
+- `--radius-pill` — Fully rounded ends for pill shapes and circular elements — buttons, chips, badges, toggles, CTAs.
+- `--radius-subtle` — Subtle rounding for small elements — tags, tooltips, notifications. Twelve rather than Product's eight, the same step up the rest of this ramp already takes: control 16 against 10, surface 24 against 16. This was the one step still matching Product's.
+- `--radius-surface` — A generous radius for content sections — feature cards, testimonial blocks, pricing cards. For larger promotional containers, use radius.container.
+- `--radius-surface-compact` — The corner of a surface too small for radius.surface's twenty-four — a card in a footer's rail. Not radius.container-item, which is sixteen for another reason: a container's corner less its inset.
+
+## border
+
+- `--border-style-decorative` — A dashed border for drag targets, upload zones, and placeholder areas.
+- `--border-style-default` — The standard border style. Use for all component outlines unless a dashed treatment is explicitly required.
+- `--border-width-default` — The standard border width for inputs, cards, and secondary buttons.
+- `--border-width-emphasis` — A rule one step heavier than the resting default, for an edge holding its own beside a filled neighbour. Between default and strong because the jump between those is a doubling: 1px disappears, 2px draws a box.
+- `--border-width-focus` — The width of a focus ring. Kept separate from strong so accessibility requirements can adjust it independently.
+- `--border-width-hairline` — The thinnest rule the system draws, for an outline that has to register without reading as a box — the ring a field puts outside its own border on focus. For an ordinary outline use border.width.default; a rule this thin disappears on anything larger than a control.
+- `--border-width-none` — Removes a border entirely. Use to reset a border in a variant without adding a layout shift.
+- `--border-width-strong` — A heavier border for selected and active states. Never use for ordinary outlines.
+- `--border-width-thick` — A bold border for progress bars, active tab indicators, and high-emphasis decorative treatments.
+
+## font
+
+- `font.body.lg` — The largest body step: an introductory paragraph under a headline, a hero description, a section intro. The same regular weight and line height as the rest of the ramp — body text set larger, rather than a different kind of text.
+  - `--font-body-lg-family`
+  - `--font-body-lg-letter-spacing`
+  - `--font-body-lg-line-height`
+  - `--font-body-lg-size`
+  - `--font-body-lg-weight`
+- `font.body.md` — Marketing body text, and the default: feature descriptions, article content, footer links. Sixteen pixels because that is what a browser sets before anybody asks.
+  - `--font-body-md-family`
+  - `--font-body-md-letter-spacing`
+  - `--font-body-md-line-height`
+  - `--font-body-md-size`
+  - `--font-body-md-weight`
+- `font.body.sm` — De-emphasised text: legal disclaimers, copyright lines, help text. Fourteen rather than twelve, marketing copy being read on a phone as often as not.
+  - `--font-body-sm-family`
+  - `--font-body-sm-letter-spacing`
+  - `--font-body-sm-line-height`
+  - `--font-body-sm-size`
+  - `--font-body-sm-weight`
+- `font.eyebrow` — Uppercase category labels above a headline — section tags, plan badges, feature categories. Carries the size, weight and wide tracking that setting needs; the capitals are the component's, through text-transform, which leaves the accessible name in the case it was written.
+  - `--font-eyebrow-family`
+  - `--font-eyebrow-letter-spacing`
+  - `--font-eyebrow-line-height`
+  - `--font-eyebrow-size`
+  - `--font-eyebrow-weight`
+- `font.field-label.lg` — The words naming a field in a large form, the step that pairs with a large control. Sized with the field it sits above, weighted like every other step of this role.
+  - `--font-field-label-lg-family`
+  - `--font-field-label-lg-letter-spacing`
+  - `--font-field-label-lg-line-height`
+  - `--font-field-label-lg-size`
+  - `--font-field-label-lg-weight`
+- `font.field-label.md` — The words naming a form field, sat above it — 'Email', 'Work address'. Medium where font.label is semibold: that role is text inside a control, and a field's name set at a button's weight competes with the button that submits the form.
+  - `--font-field-label-md-family`
+  - `--font-field-label-md-letter-spacing`
+  - `--font-field-label-md-line-height`
+  - `--font-field-label-md-size`
+  - `--font-field-label-md-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`
+  - `--font-figure-line-height` **adapts**
+  - `--font-figure-size` **adapts**
+  - `--font-figure-weight`
+- `font.h1` — The largest heading marketing draws, for the line a landing page is built around. A size, not an instruction: heading level is document structure and this is scale.
+  - `--font-h1-family`
+  - `--font-h1-letter-spacing` **adapts**
+  - `--font-h1-line-height`
+  - `--font-h1-size` **adapts**
+  - `--font-h1-weight`
+- `font.h2` — A headline opening a major section of a long page. A size, not an instruction: heading level is document structure and this is scale.
+  - `--font-h2-family`
+  - `--font-h2-letter-spacing`
+  - `--font-h2-line-height` **adapts**
+  - `--font-h2-size` **adapts**
+  - `--font-h2-weight`
+- `font.h3` — A section heading under an h1 and h2. A size, not an instruction: heading level is document structure and this is scale.
+  - `--font-h3-family`
+  - `--font-h3-letter-spacing` **adapts**
+  - `--font-h3-line-height` **adapts**
+  - `--font-h3-size` **adapts**
+  - `--font-h3-weight`
+- `font.h4` — A subsection heading, and the first step down from the extrabold the larger headings carry. A size, not an instruction: heading level is document structure and this is scale.
+  - `--font-h4-family`
+  - `--font-h4-letter-spacing` **adapts**
+  - `--font-h4-line-height`
+  - `--font-h4-size` **adapts**
+  - `--font-h4-weight`
+- `font.h5` — The smallest heading marketing draws, for a label over a group of cards, a list or a short block of copy. A size, not an instruction: heading level is document structure and this is scale.
+  - `--font-h5-family`
+  - `--font-h5-letter-spacing`
+  - `--font-h5-line-height` **adapts**
+  - `--font-h5-size` **adapts**
+  - `--font-h5-weight`
+- `font.label-medium.sm` — Interactive text at the small step, set a weight lighter than font.label.sm. For a mark rather than a control — a badge is read as a word beside something, and semibold at fourteen reads as a button that has lost its ground.
+  - `--font-label-medium-sm-family`
+  - `--font-label-medium-sm-letter-spacing`
+  - `--font-label-medium-sm-line-height`
+  - `--font-label-medium-sm-size`
+  - `--font-label-medium-sm-weight`
+- `font.label.lg` — Interactive text given prominence: the call to action in a hero, the primary button on a landing page. The step above the default, and the only one worth reaching for when a control is the point of the section.
+  - `--font-label-lg-family`
+  - `--font-label-lg-letter-spacing`
+  - `--font-label-lg-line-height`
+  - `--font-label-lg-size`
+  - `--font-label-lg-weight`
+- `font.label.md` — Interactive text, and the default: navigation links, form labels, the call to action in a hero. One size for every control, large or small.
+  - `--font-label-md-family`
+  - `--font-label-md-letter-spacing`
+  - `--font-label-md-line-height`
+  - `--font-label-md-size`
+  - `--font-label-md-weight`
+- `font.label.sm` — Interactive text in a supporting position: footer links, a secondary action beside a primary one, a form's helper link. Small enough to sit under the default without competing with it.
+  - `--font-label-sm-family`
+  - `--font-label-sm-letter-spacing`
+  - `--font-label-sm-line-height`
+  - `--font-label-sm-size`
+  - `--font-label-sm-weight`
+- `font.subtitle` — Sub-section headers and secondary titles, e.g. pricing plan names, sub-feature group headers.
+  - `--font-subtitle-family`
+  - `--font-subtitle-letter-spacing`
+  - `--font-subtitle-line-height`
+  - `--font-subtitle-size`
+  - `--font-subtitle-weight`
+- `font.title` — The name of a thing the reader is inside rather than a section of a page — a sheet, a panel, whatever arrives over what they were doing. Bold at the smallest heading step, so it holds its own against content without competing with the page behind it.
+  - `--font-title-family`
+  - `--font-title-letter-spacing`
+  - `--font-title-line-height`
+  - `--font-title-size`
+  - `--font-title-weight`
+
+## icon
+
+- `--icon-control-lg` — The mark inside a large control. Four above font.label.md, on the same reasoning as the default step.
+- `--icon-control-md` — The mark inside a default-size control. Four above font.label.sm, so it clears the label's line box and reads at the label's weight rather than under it.
+- `--icon-control-sm` — The mark inside a small control. Two above font.label.sm rather than four: the label ramp stops at fourteen, so at this step the mark answers to the box instead of the type. Held at eighteen it would fill a thirty-two control rather than sit in it.
+- `--icon-size-2xs` — A mark inside a box that states its own size rather than beside text — a checkbox's tick in its twenty-pixel square, four pixels clear either side. Too small to carry meaning alone; the control around it is what is read.
+- `--icon-size-lg` — A larger icon for cards and content sections.
+- `--icon-size-md` — The default icon size for body content and lists.
+- `--icon-size-sm` — A mark beside text that must not outweigh it — the chevron on a list row, an affordance next to a label. Between the inline step and the default because sixteen goes unnoticed against anything larger than body copy, and twenty-four reads as bigger than the words it belongs to.
+- `--icon-size-xl` — The largest a system glyph is drawn here, for a callout or a highlighted block where the mark does as much work as the copy. The ramp stops rather than continuing: past this a 24-grid glyph is a diagram of itself, and what a page wants at that scale is an illustration.
+- `--icon-size-xs` — The smallest icon size for inline and supporting content.
+
+## elevation
+
+- `--elevation-edge-bottom` — A thin shadow cast downward from a top-anchored surface — top navigation, app bars. Indicates the surface sits above scrolling content.
+- `--elevation-edge-top` — A thin shadow cast upward from a bottom-anchored surface — bottom navigation, bottom sheets. Indicates the surface sits above scrolling content.
+- `--elevation-ring-hover` — The tint a field carries while the pointer is over it, drawn as a ring just inside its border. Bound to box-shadow rather than border-color so a hover does not overwrite what focus and the error status both put on that border.
+- `--elevation-surface-floating` — A surface floating above page content — dropdowns, tooltips, autocomplete lists. For surfaces that block interaction beneath them, use elevation.surface.overlay.
+- `--elevation-surface-modal` — The highest surface — modals, dialogs, full-screen drawers. Typically paired with a backdrop that dims the page beneath.
+- `--elevation-surface-overlay` — A surface floating above the page and blocking interaction beneath it — popovers, action sheets, menus. For full-screen takeovers with a backdrop, use elevation.surface.modal.
+- `--elevation-surface-raised` — A surface lifted just off the page — cards, list items. For sticky elements that persist while content scrolls beneath, use elevation.surface.sticky.
+- `--elevation-surface-sticky` — A surface pinned in place while content scrolls beneath it — sticky headers, sticky footers. Visually stronger than raised because it persists and must stay distinct from scrolling content.
+
+## layer
+
+- `--layer-overlay` — Something that interrupts the reader and takes the page with it — a bottom sheet, and whatever else arrives over everything rather than beside something. Above the popup role rather than level with it, so a menu opened inside one belongs over it.
+- `--layer-popup` — What a thing lifts to when it leaves the flow and floats over the page — a tooltip, and whatever menu or panel this package grows next. Above everything the page lays out, below anything that interrupts the reader.
+
+## motion
+
+- `--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-fast` — Direct user actions that should feel instant, e.g. hover, press, toggle.
+- `--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.
+- `--motion-duration-pulse` — One full pulse cycle for a status indicator. Slow enough to be subtle, fast enough to notice — and long enough that a row of them does not read as flicker.
+- `--motion-duration-reveal` — Content appearing on scroll, e.g. section reveals, feature items fading in, trust stats appearing. Not for hero text — use motion.duration.dramatic.
+- `--motion-duration-shift` — A surface rearranging itself between two resting states on the reader's scroll — a navigation bar gathering, and ungathering on the way back. Longer than a UI element entering, because nobody asked for it.
+- `--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-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.
+- `--motion-easing-reveal` — Scroll reveals and hero entrances — arrives fast then settles slowly. Stronger deceleration than easing.enter for dramatic effect.
+- `--motion-easing-shift` — Symmetric, for a change that runs both ways: a bar gathering on scroll and ungathering on the way back should read the same in each direction, which easing.standard cannot do.
+- `--motion-easing-spinner` — Constant-speed rotation for a spinner. Linear because a loop is the one case with no arrival to ease into — any acceleration lands a seam at the point the animation restarts, and the eye finds it on the second turn.
+- `--motion-easing-standard` — Default easing for anything moving within the viewport. Use this unless the element is specifically entering, exiting, or revealing.
+- `--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-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.
+
+## opacity
+
+- `--opacity-disabled` — How far a control recedes when it is unavailable. Applied to the control as a whole rather than re-colouring its parts, so what is inside keeps its relationships and the whole thing reads as one unavailable object.
+- `--opacity-hidden` — What a component fades from when something reveals it. Not a dimming treatment — something unavailable or quiet says so in its own colour role, where the contrast checker can see it. The first entry in a group this package had left empty.
+- `--opacity-muted` — A mark at rest, before a pointer reaches it. For artwork that carries its own colours and so cannot be quietened by an ink role — a brand logo, a partner mark — where every other quiet thing in this system says so in colour.
+- `--opacity-track` — How far a track recedes behind the thing travelling over it. Both are drawn in one colour, so this alpha is the only thing separating them — which is why it is a ratio and not a colour role.

package/AGENTS.md

@@ -0,0 +1,164 @@
+<!-- GENERATED from components/**/*.contract.json and rules/*.rule.json. Do not edit. -->
+
+# @deriv-com/dds-marketing for agents
+
+Read this first. It is the cheap read: everything below is the whole of what you need to
+place a component correctly, and the files it points at are opened only when you need them.
+
+## Three things, or nothing renders
+
+```tsx
+import '@deriv-com/dds-marketing/fonts.css'            // the faces the tokens name, self-hosted
+import '@deriv-com/dds-marketing/marketing.css'            // once, at the root of the app
+```
+```html
+<div data-dds-context="marketing">  <!-- around everything this package renders -->
+```
+
+Without the second import every component renders unstyled: the stylesheet carries the
+tokens they bind to. Component CSS travels with each component, so nothing else is imported.
+
+Without the attribute every component renders unstyled too, and this one is easy to miss
+because the tokens do not need it — they are published to `:root` as well. Component rules
+are published only inside the scope, and they have to be: every class is `dds-<name>` with
+no package in it, so Product and Marketing both emit `.dds-button`. An app installing both
+would otherwise have one package painting the other, with bundler order picking the winner.
+Put it on whatever wraps this package — the app root, or the section, if the two live on one
+page. It costs nothing in specificity: the scope is a `:where()`, so your own overrides beat
+the components exactly as they did before.
+
+Without the first, text silently falls back to the system typeface — the tokens name Inter
+and Red Hat Mono but cannot carry the files. An app that already self-hosts the fonts
+(next/font, Fontsource) skips `fonts.css` and sets `--font-family-sans` /
+`--font-family-mono` instead; the README covers that path.
+
+One theme. The stylesheet has no `[data-theme="dark"]` block, so setting that attribute —
+anywhere, including on `<html>` for the rest of your app — leaves these components light.
+Nothing to configure and nothing to guard against.
+
+## Server Components
+
+Every module that needs the browser carries `"use client"`, so importing from this package
+in an App Router application works without a wrapper. Components that hold no state — `Badge`,
+`Divider`, `Card` — have no directive and render on the server.
+
+What that leaves you: a Server Component still cannot pass a function across the boundary, so
+a component you give `onChange` or `onClick` to goes in a file of your own that says
+`"use client"`. That is React's rule rather than this package's, and the error names your file.
+
+## Rules that span components
+
+- **A section that paints a ground sets the ink to go with it**
+- **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone**
+- **Anything a pointer has to hit is at least 24px in both directions**
+- **At most one primary button per view**
+- **Destructive actions require a confirmation step**
+- **Every gap inside a section names the relationship it expresses, and the same relationship keeps its measure when it turns on its side**
+- **Never nest one interactive element inside another**
+- **On a phone a section's actions stack and each fills the width, including when there is only one**
+- **Match the glyph weight to the icon size** *(guidance)*
+- **Solid weight means selected** *(guidance)*
+
+Reasons and the cases each one turns on: `.llm/rules.md`.
+
+## What is here
+
+One line each — the case the component was written for. Where two look alike, the
+component documents say which to reach for and why, and that is what they are for.
+
+Grouped by where each sits in the system, because that is the first thing that rules a
+component in or out: a view has no use for another area’s components, and the frame a
+screen is built in is not something to reach for while building a control.
+
+### Core — domain-neutral building blocks
+
+- **Accordion** — Questions a reader asks near a decision
+- **AccordionItem** — One row inside an Accordion
+- **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
+- **BreadcrumbItem** — Rendering one level of a Breadcrumb
+- **Button** — The call to action on a marketing page
+- **ButtonIcon** — One press with no room for words
+- **Card** — Content that is read as one thing
+- **CardBody** — Words, a picture, or both inside a Card
+- **CardButton** — The whole card is the target rather than a link buried in it
+- **Checkbox** — A choice the user makes now and confirms later
+- **Divider** — Two groups inside one container that nothing else is separating
+- **DropdownMenu** — A set of destinations too long for the navigation bar and too short to be a page of its own
+- **FilterChip** — An index is long enough to be worth cutting down and its categories are few enough to show in full
+- **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
+- **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
+- **NavbarItem** — A section of the site, in a Navbar
+- **NavbarMenu** — A section of the site has enough inside it that naming the section is not enough
+- **NavbarMenuGroup** — A section's panel holds more destinations than a reader takes in at once, and they fall into sets
+- **NavbarPanel** — Navbar is collapsing and its destinations have to go somewhere
+- **NavbarSwitcher** — A bar needs a language or region switcher
+- **NavbarSwitcherOption** — A NavbarSwitcher needs its choices
+- **Option** — An answer inside a control that opens a list
+- **Pagination** — An index or archive has been split across pages and the reader needs to move through it
+- **RemovableChip** — An index shows the narrowings currently applied above its results, and each has to come off on its own without clearing the rest
+- **SearchInput** — A help centre, a knowledge base, or documentation
+- **SegmentedControl** — Two to four alternatives that exclude one another, where the whole set is worth showing at once and the reader decides by weighing them side by side rather than recalling which exist
+- **SegmentedControlItem** — One option in a SegmentedControl
+- **Select** — A form asks for one answer out of a set the visitor recognises
+- **SelectChip** — A row narrows an index by one value out of a set, and has to keep showing which value that is
+- **Spinner** — The reader has just submitted something
+- **StatusDot** — Marking something the page is pointing at
+- **SubdomainNavbar** — A subdomain needs its top-level navigation
+- **Tab** — One of a small set of comparable versions of the same offer
+- **Table** — Data with a uniform structure, where the same fields exist on every row and a reader compares one row against another down a column
+- **TableBody** — The data itself
+- **TableCell** — A value in a data row
+- **TableHead** — Naming the columns
+- **TableHeaderCell** — Naming a column
+- **TableRow** — A record, with one cell per column
+- **TabList** — Two or three versions of one offer differ in a way a reader wants to compare
+- **TextArea** — A contact form asks what the reader actually wants
+- **TextInput** — A page asks for an email
+- **Tooltip** — Naming a control whose icon or abbreviation cannot say what it does
+- **Typography** — A heading, a paragraph, or a caption on a marketing page
+
+### Layout — arrange other components, decide no appearance of their own
+
+- **AspectRatio** — A picture whose proportions have to match the ones beside it
+- **Grid** — Several things of the same kind are read across and down, and a cell has to line up with the cell above it
+- **Row** — Two or more things are read across rather than down, and the space between them is the same all the way along
+- **Scroller** — A set is longer than the space and its order is worth keeping
+- **Stack** — Two or more things are read down the page in order and the space between them is the same the whole way down
+
+## Components that need mounting
+
+These do not work from the import alone. Each has a Behaviour section in its own document
+saying what to mount and where.
+
+- **NavbarPanel** — useNavbarPanel
+- **Table** — useTableSort
+- **Tooltip** — useTooltip, useTooltipDefaults, TooltipAnchor
+
+## Reading order
+
+1. This file.
+2. `.llm/rules.md` before writing anything — 1,500 tokens, and it is where the constraints
+   that no single component can state live.
+3. `.llm/digest/<name>.md` for every component you are using — **all of it, not the part
+   you were looking for**. Around 1,400 tokens each: what it is for, what to reach for
+   instead, what it must never do, every prop with the case it is for, the combinations
+   the type refuses, and what may go inside it. Reading it whole is the point. Searching
+   finds only what you already know to name, and the facts most often got wrong here are
+   the ones nobody knew to look for.
+4. `.llm/tokens.md` only if you are writing CSS of your own. It is the token vocabulary,
+   and it opens by saying the thing that matters: write the variable, never the value.
+5. `.llm/components/<name>.md` once you are working on one component and want the
+   reasoning: the parts it renders, its states, the argument behind each decision, and
+   snippets that compile. Around 5,900 tokens each, so reach for it by the component
+   rather than by the screen.
+6. `.llm/index.md` when the one-line list above is not enough to choose — the same
+   question, with every component's full guidance and what to use instead.
+
+Props carry their own guidance in the types as well, so an editor or a language server
+shows the case for a prop and its values without opening a file.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Deriv
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.