@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/marketing.css

@@ -9,6 +9,7 @@
   --aspect-portrait: 4 / 5;
   --aspect-square: 1 / 1;
   --aspect-ultrawide: 21 / 9;
+  --aspect-upright: 3 / 4;
   --aspect-widescreen: 16 / 9;
   --border-style-decorative: dashed;
   --border-style-default: solid;
@@ -24,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;
@@ -41,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;
@@ -52,6 +55,7 @@
   --color-bg-surface-card-raised: #FFFFFF;
   --color-bg-surface-card-strong-raised: #202020;
   --color-bg-surface-card-strong: #202020;
+  --color-bg-surface-glass: #FFFFFFE0;
   --color-bg-surface-inverse: #FFFFFF14;
   --color-bg-surface-modal: #FFFFFF;
   --color-bg-surface-raised-inverse: #FFFFFF3D;
@@ -74,6 +78,8 @@
   --color-border-focus-on-brand-strong: #FFFFFF;
   --color-border-focus: #0C0C0C;
   --color-border-info: #0068FF;
+  --color-border-pattern-inverse: #FFFFFF3D;
+  --color-border-pattern: #0000001A;
   --color-border-strong: #63666B;
   --color-border-subtle-inverse: #FFFFFF29;
   --color-border-subtle: #0000000F;
@@ -143,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;
@@ -214,8 +225,10 @@
   --layer-popup: 400;
   --motion-distance-drift: 64px;
   --motion-duration-dramatic: 700ms;
+  --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;
@@ -225,6 +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);
@@ -236,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;
@@ -258,6 +275,7 @@
   --radius-subtle: 12px;
   --radius-surface-compact: 16px;
   --radius-surface: 24px;
+  --size-aurora-spotlight: 112px;
   --size-avatar: 48px;
   --size-backdrop-blur: 16px;
   --size-band-compact: 480px;
@@ -269,12 +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;
@@ -286,8 +313,12 @@
   --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;
   --size-rule-grid-pitch: 96px;
+  --size-rule-grid-spotlight: 128px;
   --size-sheet-handle-height: 4px;
   --size-sheet-handle-width: 40px;
   --size-sheet-max: 640px;
@@ -298,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;
@@ -331,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;
 }
@@ -340,6 +376,7 @@
   --aspect-portrait: 4 / 5;
   --aspect-square: 1 / 1;
   --aspect-ultrawide: 21 / 9;
+  --aspect-upright: 3 / 4;
   --aspect-widescreen: 16 / 9;
   --border-style-decorative: dashed;
   --border-style-default: solid;
@@ -355,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;
@@ -372,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;
@@ -383,6 +422,7 @@
   --color-bg-surface-card-raised: #FFFFFF0F;
   --color-bg-surface-card-strong-raised: #363636;
   --color-bg-surface-card-strong: #202020;
+  --color-bg-surface-glass: #FFFFFF1F;
   --color-bg-surface-inverse: #FFFFFF14;
   --color-bg-surface-modal: #202020;
   --color-bg-surface-raised-inverse: #0000003D;
@@ -405,6 +445,8 @@
   --color-border-focus-on-brand-strong: #FFFFFF;
   --color-border-focus: #FFFFFF;
   --color-border-info: #3786FF;
+  --color-border-pattern-inverse: #FFFFFF3D;
+  --color-border-pattern: #FFFFFF3D;
   --color-border-strong: #A2A7AD;
   --color-border-subtle-inverse: #FFFFFF29;
   --color-border-subtle: #FFFFFF0F;
@@ -455,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;
@@ -474,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;
@@ -545,8 +578,10 @@
   --layer-popup: 400;
   --motion-distance-drift: 64px;
   --motion-duration-dramatic: 700ms;
+  --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;
@@ -556,6 +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);
@@ -567,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;
@@ -589,6 +628,7 @@
   --radius-subtle: 12px;
   --radius-surface-compact: 16px;
   --radius-surface: 24px;
+  --size-aurora-spotlight: 112px;
   --size-avatar: 48px;
   --size-backdrop-blur: 16px;
   --size-band-compact: 480px;
@@ -600,12 +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;
@@ -617,8 +666,12 @@
   --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;
   --size-rule-grid-pitch: 96px;
+  --size-rule-grid-spotlight: 128px;
   --size-sheet-handle-height: 4px;
   --size-sheet-handle-width: 40px;
   --size-sheet-max: 640px;
@@ -629,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) {
@@ -761,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.1",
+  "version": "1.1.0",
   "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
   "license": "MIT",
   "author": {