@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/resource-banner-data.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The resources a ResourceBanner points at.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Link per resource, because a resource is words and a destination — nothing
+ * in it is an element a page composes — and every one is drawn the same way. A stack whose rows
+ * could each bring their own variant, tone or mark is a stack that stops reading as one list, and
+ * what a link has to say about leaving the site or starting a download is the block's to say, in
+ * the same words on every row.
+ */
+/** One resource in a ResourceBanner: what it is called, and where it is. */
+export interface ResourceBannerLink {
+    /**
+     * The name of the guide, policy or page, as the reader would look for it: "Terms and
+     * conditions", "Risk disclosure". The stack is read as a list, so each label has to make sense
+     * on its own — never "Read more" or "Click here".
+     */
+    label: string;
+    /** Where it is, as a URL. */
+    href: string;
+    /**
+     * The destination is off this site. It opens in a new tab, carries Link's up-right mark, and its
+     * accessible name says so in the block's `externalLabel`. Absent, the link opens in place.
+     */
+    external?: boolean;
+    /**
+     * The destination is a file to save rather than a page to read — a PDF of a policy, a form. The
+     * anchor takes `download`, the row is marked with a file rather than an arrow, and its accessible
+     * name says so in the block's `downloadLabel`.
+     */
+    download?: boolean;
+}

package/dist/components/resource-banner-data.js

@@ -0,0 +1,13 @@
+/**
+ * The resources a ResourceBanner points at.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Link per resource, because a resource is words and a destination — nothing
+ * in it is an element a page composes — and every one is drawn the same way. A stack whose rows
+ * could each bring their own variant, tone or mark is a stack that stops reading as one list, and
+ * what a link has to say about leaving the site or starting a download is the block's to say, in
+ * the same words on every row.
+ */
+export {};

package/dist/components/scene-scroll-data.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The two scenes a SceneScroll changes between.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value and
+ * hands it over, and building it without the type means writing the shape out twice. A record
+ * rather than a node, because the block draws both the photograph and the words itself — it has to,
+ * to stack one scene over the other and change them over as the reader scrolls.
+ */
+import type { BlockImage } from './block-image-data.js';
+/** One scene: the photograph that fills the band, and the words set over it. */
+export interface SceneScrollScene {
+    /**
+     * What the scene says, in a few words. Drawn as a heading: the first scene's names the section,
+     * and the second's sits one level under it.
+     */
+    title: string;
+    /** A line under the title saying what it means for the reader. A sentence or two, not a paragraph. */
+    description?: string;
+    /**
+     * The photograph filling the band behind the words, cropped to fill it. Usually decoration, so
+     * `alt` is empty; a photograph that shows something the words do not say is described.
+     */
+    image: BlockImage;
+}

package/dist/components/scene-scroll-data.js

@@ -0,0 +1,9 @@
+/**
+ * The two scenes a SceneScroll changes between.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value and
+ * hands it over, and building it without the type means writing the shape out twice. A record
+ * rather than a node, because the block draws both the photograph and the words itself — it has to,
+ * to stack one scene over the other and change them over as the reader scrolls.
+ */
+export {};

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

@@ -0,0 +1,28 @@
+/**
+ * The key numbers a Stats section sets in a row.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `scroll-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a figure is a number and the words that say
+ * what it counts — nothing in it is an element a page composes — and a set of them is what a CMS
+ * or a facts sheet hands over.
+ */
+/** One key number in a Stats section: the figure, and what it counts. */
+export interface StatsFigure {
+    /**
+     * The figure, written exactly as it is to be read: '3M+', '$5', '250+', '24/7', '1.2B'.
+     *
+     * A string rather than a number, because the way it is written is the claim — the currency sign,
+     * the abbreviation, the plus that says "at least". It is drawn as given, in the page's first
+     * HTML and to assistive technology alike. Where it holds one number, that number counts up from
+     * nought as the section arrives, keeping whatever is written either side of it; where it holds
+     * none, or more than one — '24/7' is a phrase, not a quantity — it simply shows.
+     */
+    value: string;
+    /**
+     * What the figure counts, in a few words under it: 'Traders worldwide', 'Minimum deposit'.
+     * Sentence case, and short enough that a row of them reads as a row.
+     */
+    label: string;
+}

package/dist/components/stats-data.js

@@ -0,0 +1,11 @@
+/**
+ * The key numbers a Stats section sets in a row.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `scroll-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a figure is a number and the words that say
+ * what it counts — nothing in it is an element a page composes — and a set of them is what a CMS
+ * or a facts sheet hands over.
+ */
+export {};

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

@@ -0,0 +1,38 @@
+/**
+ * The steps a Steps section numbers down its list.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `testimonial-slider-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it, and building
+ * it without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per step, because a step is a name and a sentence — nothing in it
+ * is an element a page composes — and the number in front of it is the section's to draw, not the
+ * page's. A set that arrives as data can be mapped from a CMS and reordered by the page that holds
+ * it, and the numbers follow the order without anybody retyping them.
+ */
+import type { BlockImage } from './block-image-data.js';
+/** One step in a Steps section: what the reader does, and what it involves. */
+export interface StepsItem {
+    /**
+     * What the reader does at this step, as a short imperative — 'Open an account', 'Fund it'.
+     *
+     * It is what a reader scanning the list takes in, so a verb and its object beats a sentence. Drawn
+     * as a heading, which is what lets a screen reader move from one step to the next.
+     */
+    title: string;
+    /**
+     * What the step involves, in a sentence.
+     *
+     * Under about two hundred characters: past that a list of four runs longer than the square beside
+     * it and the two halves stop lining up, which is the one thing a split has to get right.
+     */
+    description: string;
+    /**
+     * A picture of this step — a screenshot of the screen it happens on.
+     *
+     * Given on every step, the picture beside the list is the current step's: the first while the
+     * list is still, and each in turn under `autoplay`. Decoration, as the section's one picture is:
+     * what the step says is its title and its line.
+     */
+    image?: BlockImage;
+}

package/dist/components/steps-data.js

@@ -0,0 +1,13 @@
+/**
+ * The steps a Steps section numbers down its list.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `testimonial-slider-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it, and building
+ * it without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per step, because a step is a name and a sentence — nothing in it
+ * is an element a page composes — and the number in front of it is the section's to draw, not the
+ * page's. A set that arrives as data can be mapped from a CMS and reordered by the page that holds
+ * it, and the numbers follow the order without anybody retyping them.
+ */
+export {};

package/dist/components/sticky-cards-data.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The cards a StickyCards section piles up as the page scrolls.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per card, because a card here is words, a picture and a fill —
+ * nothing in it is an element a page composes — and a list of markets or steps is what a content
+ * system hands over. The one thing a record cannot carry, an animation the page plays itself, comes
+ * through the block's `media` callback instead, so the records stay plain data.
+ */
+import type { BlockImage } from './block-image-data.js';
+/** One card in a StickyCards pile: what it is called, what it says, and what it shows. */
+export interface StickyCardsItem {
+    /** What the card is about, in a few words — "Forex", "Sign up". It is the card's heading. */
+    title: string;
+    /**
+     * What the title means, a sentence or two. Kept to about the same length across the set: the
+     * cards are drawn the height of the tallest, so one long description makes every card taller.
+     */
+    description: string;
+    /**
+     * The card's picture. In `compact` it fills the card's panel — a landscape container beside the
+     * words from the fold, under them on a phone — cropped to fill it. In `feature` it is half the
+     * card, running to the card's edges; give one to every card there. `alt` empty when the title already says what it
+     * shows. A picture the `media` callback replaces is not drawn.
+     */
+    image?: BlockImage;
+    /**
+     * A photograph behind the whole card, in the `compact` layout: drawn under an 72% wash of the
+     * card's own fill, so the words keep their contrast and the picture shows through as texture — the
+     * reference design's market cards. Not drawn in `feature`, where the picture is half the card.
+     * Usually decorative: `alt` empty.
+     */
+    background?: BlockImage;
+    /**
+     * The card's fill — Card's own variants, the three that are opaque and keep their colour in both
+     * themes, so a card laid over another hides it in either: `accent-strong` the dark card, the
+     * default; `accent` the coral one, for a title and a short sentence; `surface-light` the light
+     * one. Alternate them so each edge in the pile reads apart from the next.
+     */
+    variant?: 'accent-strong' | 'accent' | 'surface-light';
+}

package/dist/components/sticky-cards-data.js

@@ -0,0 +1,12 @@
+/**
+ * The cards a StickyCards section piles up as the page scrolls.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per card, because a card here is words, a picture and a fill —
+ * nothing in it is an element a page composes — and a list of markets or steps is what a content
+ * system hands over. The one thing a record cannot carry, an animation the page plays itself, comes
+ * through the block's `media` callback instead, so the records stay plain data.
+ */
+export {};

package/dist/components/team-grid-data.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The people a TeamGrid section sets out in its grid.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per person, because a person here is a picture, a name, a role
+ * and perhaps a link — nothing in it is an element a page composes — and a team page's list is
+ * what a content system hands over.
+ */
+/** One person in a TeamGrid grid: who they are, what they do, and their picture. */
+export interface TeamGridMember {
+    /** Their full name, as they would write it. It is the card's heading. */
+    name: string;
+    /**
+     * What they do, in a few words — "Chief Executive Officer". Kept short and in one style across the
+     * set: the roles are read down a column, and one that runs to a sentence breaks the line.
+     */
+    role: string;
+    /**
+     * Their picture. `alt` is what a screen reader hears for it, and an empty string is the usual
+     * answer: the name is the heading right under it, so a portrait alt-texted with the name is the
+     * name read twice. Describe the picture only when it shows something the name does not.
+     */
+    image: {
+        src: string;
+        alt: string;
+    };
+    /**
+     * A profile of theirs elsewhere — "LinkedIn" and its URL. `label` is the visible word; the link is
+     * named for the person as well, so a list of links heard on its own says whose each is. It opens in
+     * a new tab, the profile being on a site the page does not own.
+     */
+    profile?: {
+        href: string;
+        label: string;
+    };
+}

package/dist/components/team-grid-data.js

@@ -0,0 +1,11 @@
+/**
+ * The people a TeamGrid section sets out in its grid.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per person, because a person here is a picture, a name, a role
+ * and perhaps a link — nothing in it is an element a page composes — and a team page's list is
+ * what a content system hands over.
+ */
+export {};

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

@@ -0,0 +1,47 @@
+/**
+ * The tiers a Tiers section lays out in order, lowest first.
+ *
+ * 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, and building it
+ * without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per tier, because a tier is a name, a stage, a benefit and the
+ * bar a partner clears to reach it — nothing in it is an element a page composes. The order is the
+ * argument, and it is the list's: a set that arrives as data can be mapped from a partner programme's
+ * own configuration, and the progression follows it without anybody restating which tier is higher.
+ */
+/** One tier in a Tiers section: its medal, its name and stage, what it gives and what it asks. */
+export interface TiersItem {
+    /**
+     * The tier's name, one word — 'Bronze', 'Gold'. Drawn as a heading, which is what lets a screen
+     * reader move from one tier to the next.
+     */
+    name: string;
+    /**
+     * The stage the tier stands for, as a single verb — 'Launch', 'Grow', 'Scale', 'Lead'. Read with
+     * the name as its second line, so a verb says what a partner at this tier is doing rather than
+     * restating the rank.
+     */
+    stage: string;
+    /**
+     * The medal drawn over the name, as a path or a URL. A square picture with a transparent ground —
+     * a matching set across the tiers, so the progression reads in the art as well as the words.
+     *
+     * Decoration: it is drawn with empty alternative text, because the name under it is the heading a
+     * reader hears, and a medal announced as 'Bronze' over a heading reading 'Bronze' says it twice.
+     */
+    medal: string;
+    /**
+     * The headline on the benefit card — 'Commission + 4% bonus'. What a partner at this tier gets, in
+     * the fewest words that state it.
+     */
+    benefit: string;
+    /** What the benefit means, in a sentence under the headline. */
+    description: string;
+    /**
+     * What it takes to reach the tier, under the card — '3-month average commission:\n$500+'. A line
+     * break in it is kept, so the measure and the amount can sit on lines of their own. Absent for the
+     * entry tier, which a partner holds from the day they join.
+     */
+    qualification?: string;
+}

package/dist/components/tiers-data.js

@@ -0,0 +1,13 @@
+/**
+ * The tiers a Tiers section lays out in order, lowest first.
+ *
+ * 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, and building it
+ * without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per tier, because a tier is a name, a stage, a benefit and the
+ * bar a partner clears to reach it — nothing in it is an element a page composes. The order is the
+ * argument, and it is the list's: a set that arrives as data can be mapped from a partner programme's
+ * own configuration, and the progression follows it without anybody restating which tier is higher.
+ */
+export {};

package/dist/marketing.css

@@ -25,6 +25,7 @@
   --color-bg-active: #00000014;
   --color-bg-band-subtle: #F4F5F6;
   --color-bg-brand-active: #D2002A;
+  --color-bg-brand-deep: #3F0000;
   --color-bg-brand-hover: #E82A3D;
   --color-bg-brand-strong: #0C0C0C;
   --color-bg-brand-subtle: #FFE4E1;
@@ -42,6 +43,7 @@
   --color-bg-page: #FFFFFF;
   --color-bg-readonly: #0000001A;
   --color-bg-selected: #00000014;
+  --color-bg-store-badge: #000000;
   --color-bg-strong-on-brand: #0C0C0C;
   --color-bg-strong: #0C0C0C;
   --color-bg-subtle-on-brand-strong: #FFFFFF0F;
@@ -147,6 +149,11 @@
   --font-field-label-md-weight: 500;
   --font-figure-family: var(--font-family-sans);
   --font-figure-letter-spacing: -0.015em;
+  --font-figure-lg-family: var(--font-family-sans);
+  --font-figure-lg-letter-spacing: -0.015em;
+  --font-figure-lg-line-height: 1.125;
+  --font-figure-lg-size: 64px;
+  --font-figure-lg-weight: 600;
   --font-figure-line-height: 1.125;
   --font-figure-size: 56px;
   --font-figure-weight: 600;
@@ -221,6 +228,7 @@
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;
   --motion-duration-fast: 100ms;
+  --motion-duration-hold: 1000ms;
   --motion-duration-instant: 0ms;
   --motion-duration-media-hover: 400ms;
   --motion-duration-normal: 200ms;
@@ -230,7 +238,9 @@
   --motion-duration-slow: 300ms;
   --motion-duration-spinner: 500ms;
   --motion-duration-stagger: 100ms;
+  --motion-duration-ticker: 4000ms;
   --motion-duration-trail: 500ms;
+  --motion-duration-turn: 700ms;
   --motion-easing-enter: cubic-bezier(0.33, 1, 0.68, 1);
   --motion-easing-exit: cubic-bezier(0.32, 0, 0.67, 0);
   --motion-easing-media-hover: cubic-bezier(0.65, 0, 0.35, 1);
@@ -242,6 +252,7 @@
   --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
   --motion-scale-media-hover: 1.04;
+  --motion-scale-pile-covered: 0.96;
   --motion-translate-enter: 0 100%;
   --motion-translate-hover: 0 -4px;
   --motion-translate-reveal: 0 24px;
@@ -276,14 +287,21 @@
   --size-control-lg: 48px;
   --size-control-md: 40px;
   --size-control-sm: 32px;
+  --size-data-table-search: 320px;
   --size-dot-current: 24px;
   --size-dot-diameter: 8px;
+  --size-download-banner-badge: 160px;
+  --size-download-banner-media: 320px;
+  --size-download-banner-qr: 128px;
+  --size-feature-cards-carousel-card: 400px;
+  --size-feature-stack-media: 960px;
   --size-grid-track-lg: 320px;
   --size-grid-track-md: 240px;
   --size-grid-track-sm: 160px;
   --size-halftone-dot: 6px;
   --size-halftone-pitch: 20px;
   --size-heading-group-max: 846px;
+  --size-image-banner-card: 480px;
   --size-logo-columns-height: 640px;
   --size-logo-rows-tile: 192px;
   --size-measure-description: 60ch;
@@ -295,6 +313,7 @@
   --size-menu-max: 224px;
   --size-menu-panel-max: 846px;
   --size-menu-panel-min: 320px;
+  --size-mesh-blur: 48px;
   --size-review-card-min: 320px;
   --size-rings-pitch: 64px;
   --size-rings-spotlight: 128px;
@@ -310,9 +329,13 @@
   --size-spinner-stroke-lg: 4px;
   --size-spinner-stroke-md: 3px;
   --size-spinner-stroke-sm: 2px;
+  --size-sticky-cards-compact-max: 846px;
+  --size-sticky-cards-compact-min: 240px;
+  --size-sticky-cards-feature-min: 560px;
   --size-switcher-panel-width: 640px;
   --size-target-min: 24px;
   --size-testimonial-art: 192px;
+  --size-tiers-medal: 64px;
   --size-tooltip-max: 224px;
   --space-actions-gap: 8px;
   --space-control-lg: 24px;
@@ -343,6 +366,7 @@
   --space-inset-sm: 12px;
   --space-inset-xl: 32px;
   --space-inset-xs: 8px;
+  --space-pile-peek: 16px;
   --space-section-compact: 48px;
   --space-section-default: 112px;
 }
@@ -368,6 +392,7 @@
   --color-bg-active: #FFFFFF14;
   --color-bg-band-subtle: #FFFFFF0F;
   --color-bg-brand-active: #D2002A;
+  --color-bg-brand-deep: #3F0000;
   --color-bg-brand-hover: #E82A3D;
   --color-bg-brand-strong: #0C0C0C;
   --color-bg-brand-subtle: #3F0000;
@@ -385,6 +410,7 @@
   --color-bg-page: #0C0C0C;
   --color-bg-readonly: #FFFFFF1A;
   --color-bg-selected: #FFFFFF14;
+  --color-bg-store-badge: #000000;
   --color-bg-strong-on-brand: #0C0C0C;
   --color-bg-strong: #FFFFFF;
   --color-bg-subtle-on-brand-strong: #FFFFFF0F;
@@ -471,7 +497,6 @@
   --font-eyebrow-lg-family: var(--font-family-sans);
   --font-eyebrow-lg-letter-spacing: 0em;
   --font-eyebrow-lg-line-height: 1.25;
-  --font-eyebrow-lg-size: 24px;
   --font-eyebrow-lg-weight: 600;
   --font-eyebrow-sm-family: var(--font-family-sans);
   --font-eyebrow-sm-letter-spacing: 0.025em;
@@ -490,33 +515,25 @@
   --font-field-label-md-weight: 500;
   --font-figure-family: var(--font-family-sans);
   --font-figure-letter-spacing: -0.015em;
-  --font-figure-line-height: 1.125;
-  --font-figure-size: 56px;
+  --font-figure-lg-family: var(--font-family-sans);
+  --font-figure-lg-letter-spacing: -0.015em;
+  --font-figure-lg-line-height: 1.125;
+  --font-figure-lg-size: 64px;
+  --font-figure-lg-weight: 600;
   --font-figure-weight: 600;
   --font-h1-family: var(--font-family-sans);
-  --font-h1-letter-spacing: -0.025em;
   --font-h1-line-height: 1.125;
-  --font-h1-size: 80px;
   --font-h1-weight: 800;
   --font-h2-family: var(--font-family-sans);
   --font-h2-letter-spacing: -0.015em;
-  --font-h2-line-height: 1.125;
-  --font-h2-size: 56px;
   --font-h2-weight: 800;
   --font-h3-family: var(--font-family-sans);
-  --font-h3-letter-spacing: -0.015em;
-  --font-h3-line-height: 1.125;
-  --font-h3-size: 48px;
   --font-h3-weight: 800;
   --font-h4-family: var(--font-family-sans);
-  --font-h4-letter-spacing: -0.015em;
   --font-h4-line-height: 1.25;
-  --font-h4-size: 36px;
   --font-h4-weight: 700;
   --font-h5-family: var(--font-family-sans);
   --font-h5-letter-spacing: -0.005em;
-  --font-h5-line-height: 1.25;
-  --font-h5-size: 24px;
   --font-h5-weight: 700;
   --font-label-lg-family: var(--font-family-sans);
   --font-label-lg-letter-spacing: 0em;
@@ -564,6 +581,7 @@
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;
   --motion-duration-fast: 100ms;
+  --motion-duration-hold: 1000ms;
   --motion-duration-instant: 0ms;
   --motion-duration-media-hover: 400ms;
   --motion-duration-normal: 200ms;
@@ -573,7 +591,9 @@
   --motion-duration-slow: 300ms;
   --motion-duration-spinner: 500ms;
   --motion-duration-stagger: 100ms;
+  --motion-duration-ticker: 4000ms;
   --motion-duration-trail: 500ms;
+  --motion-duration-turn: 700ms;
   --motion-easing-enter: cubic-bezier(0.33, 1, 0.68, 1);
   --motion-easing-exit: cubic-bezier(0.32, 0, 0.67, 0);
   --motion-easing-media-hover: cubic-bezier(0.65, 0, 0.35, 1);
@@ -585,6 +605,7 @@
   --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
   --motion-scale-media-hover: 1.04;
+  --motion-scale-pile-covered: 0.96;
   --motion-translate-enter: 0 100%;
   --motion-translate-hover: 0 -4px;
   --motion-translate-reveal: 0 24px;
@@ -619,14 +640,21 @@
   --size-control-lg: 48px;
   --size-control-md: 40px;
   --size-control-sm: 32px;
+  --size-data-table-search: 320px;
   --size-dot-current: 24px;
   --size-dot-diameter: 8px;
+  --size-download-banner-badge: 160px;
+  --size-download-banner-media: 320px;
+  --size-download-banner-qr: 128px;
+  --size-feature-cards-carousel-card: 400px;
+  --size-feature-stack-media: 960px;
   --size-grid-track-lg: 320px;
   --size-grid-track-md: 240px;
   --size-grid-track-sm: 160px;
   --size-halftone-dot: 6px;
   --size-halftone-pitch: 20px;
   --size-heading-group-max: 846px;
+  --size-image-banner-card: 480px;
   --size-logo-columns-height: 640px;
   --size-logo-rows-tile: 192px;
   --size-measure-description: 60ch;
@@ -638,6 +666,7 @@
   --size-menu-max: 224px;
   --size-menu-panel-max: 846px;
   --size-menu-panel-min: 320px;
+  --size-mesh-blur: 48px;
   --size-review-card-min: 320px;
   --size-rings-pitch: 64px;
   --size-rings-spotlight: 128px;
@@ -653,41 +682,32 @@
   --size-spinner-stroke-lg: 4px;
   --size-spinner-stroke-md: 3px;
   --size-spinner-stroke-sm: 2px;
+  --size-sticky-cards-compact-max: 846px;
+  --size-sticky-cards-compact-min: 240px;
+  --size-sticky-cards-feature-min: 560px;
   --size-switcher-panel-width: 640px;
   --size-target-min: 24px;
   --size-testimonial-art: 192px;
+  --size-tiers-medal: 64px;
   --size-tooltip-max: 224px;
   --space-actions-gap: 8px;
   --space-control-lg: 24px;
   --space-control-md: 20px;
   --space-control-sm: 16px;
-  --space-gap-2xl: 48px;
-  --space-gap-3xl: 72px;
   --space-gap-lg: 24px;
   --space-gap-md: 16px;
   --space-gap-none: 0px;
   --space-gap-sm: 8px;
-  --space-gap-xl: 32px;
   --space-gap-xs: 4px;
-  --space-grid-gutter: 20px;
-  --space-heading-content: 48px;
   --space-heading-description-actions: 24px;
-  --space-heading-eyebrow-title: 16px;
   --space-heading-title-description-compact: 8px;
   --space-heading-title-description: 16px;
-  --space-inset-2xl: 48px;
   --space-inset-2xs: 4px;
-  --space-inset-3xl: 72px;
-  --space-inset-4xl: 112px;
-  --space-inset-card: 32px;
   --space-inset-lg: 24px;
   --space-inset-md: 16px;
-  --space-inset-page: 32px;
   --space-inset-sm: 12px;
-  --space-inset-xl: 32px;
   --space-inset-xs: 8px;
-  --space-section-compact: 48px;
-  --space-section-default: 112px;
+  --space-pile-peek: 16px;
 }
 
 @media (max-width: 767px) {
@@ -785,3 +805,32 @@
   --space-section-default: 112px;
 }
 
+[data-dds-context="marketing"]:lang(ar, fa, ur, ps, ckb, sd, ug, syr, hi, mr, ne, bn, as, pa, gu, or, ta, te, kn, ml, si, my, km, lo, th, bo), [data-dds-context="marketing"] :lang(ar, fa, ur, ps, ckb, sd, ug, syr, hi, mr, ne, bn, as, pa, gu, or, ta, te, kn, ml, si, my, km, lo, th, bo) {
+  --font-eyebrow-lg-line-height: 1.4;
+  --font-eyebrow-sm-letter-spacing: 0em;
+  --font-eyebrow-sm-line-height: 1.4;
+  --font-field-label-lg-line-height: 1.4;
+  --font-field-label-md-line-height: 1.4;
+  --font-figure-letter-spacing: 0em;
+  --font-figure-lg-letter-spacing: 0em;
+  --font-figure-lg-line-height: 1.4;
+  --font-figure-line-height: 1.4;
+  --font-h1-letter-spacing: 0em;
+  --font-h1-line-height: 1.4;
+  --font-h2-letter-spacing: 0em;
+  --font-h2-line-height: 1.4;
+  --font-h3-letter-spacing: 0em;
+  --font-h3-line-height: 1.4;
+  --font-h4-letter-spacing: 0em;
+  --font-h4-line-height: 1.4;
+  --font-h5-letter-spacing: 0em;
+  --font-h5-line-height: 1.4;
+  --font-label-lg-line-height: 1.4;
+  --font-label-md-line-height: 1.4;
+  --font-label-medium-sm-line-height: 1.4;
+  --font-label-sm-line-height: 1.4;
+  --font-subtitle-line-height: 1.4;
+  --font-title-letter-spacing: 0em;
+  --font-title-line-height: 1.4;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/dds-marketing",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
   "license": "MIT",
   "author": {