@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/marketing.css

@@ -1,344 +1,392 @@
 /* GENERATED from tokens/semantic/**. Do not edit. */
 
+:root {
+  --font-family-sans: Inter, system-ui, sans-serif;
+}
+
 :root, [data-dds-context="marketing"] {
+  --aspect-landscape: 4 / 3;
+  --aspect-portrait: 4 / 5;
+  --aspect-square: 1 / 1;
+  --aspect-ultrawide: 21 / 9;
+  --aspect-widescreen: 16 / 9;
   --border-style-decorative: dashed;
   --border-style-default: solid;
   --border-width-default: 1px;
+  --border-width-emphasis: 1.5px;
   --border-width-focus: 2px;
+  --border-width-hairline: 0.5px;
   --border-width-none: 0px;
   --border-width-strong: 2px;
   --border-width-thick: 4px;
+  --color-bg-active-inverse: #FFFFFF14;
+  --color-bg-active: #00000014;
+  --color-bg-brand-active: #D2002A;
   --color-bg-brand-hover: #E82A3D;
+  --color-bg-brand-strong: #100000;
+  --color-bg-brand-subtle: #FFE4E1;
   --color-bg-brand: #FF444F;
   --color-bg-danger-subtle: #FFE7E0;
   --color-bg-danger: #E3272A;
-  --color-bg-disabled: #D8DADD;
-  --color-bg-hover: #0000000D;
+  --color-bg-field: #0000000A;
+  --color-bg-hover-inverse: #FFFFFF0A;
+  --color-bg-hover: #0000000A;
   --color-bg-info-subtle: #DDF7FF;
   --color-bg-info: #0068FF;
-  --color-bg-overlay-subtle: #00000033;
-  --color-bg-overlay: #00000080;
-  --color-bg-page: #F4F5F6;
+  --color-bg-overlay-subtle: #0000003D;
+  --color-bg-overlay: #000000A3;
+  --color-bg-page: #FFFFFF;
+  --color-bg-readonly: #0000001A;
   --color-bg-selected: #00000014;
-  --color-bg-subtle: #D8DADD;
+  --color-bg-strong: #0C0C0C;
+  --color-bg-subtle: #0000000F;
   --color-bg-success-subtle: #DFFFE5;
   --color-bg-success: #00A14E;
+  --color-bg-surface-inverse: #FFFFFF14;
+  --color-bg-surface-modal: #FFFFFF;
+  --color-bg-surface-raised-inverse: #FFFFFF3D;
   --color-bg-surface-raised: #FFFFFF;
-  --color-bg-surface: #FFFFFF;
+  --color-bg-surface: #F4F5F6;
+  --color-bg-track-active: #0000007A;
+  --color-bg-track-hover: #0000003D;
+  --color-bg-track: #00000014;
+  --color-bg-transparent: #FFFFFF00;
   --color-bg-warning-subtle: #FFEFCB;
   --color-bg-warning: #F59E0B;
   --color-border-danger: #E3272A;
-  --color-border-default: #BDC0C5;
-  --color-border-disabled: #BDC0C5;
-  --color-border-focus: #0068FF;
+  --color-border-default: #00000029;
+  --color-border-focus-inverse: #FFFFFF;
+  --color-border-focus: #0C0C0C;
   --color-border-info: #0068FF;
   --color-border-strong: #63666B;
-  --color-border-subtle: #0000000D;
+  --color-border-subtle-inverse: #FFFFFF29;
+  --color-border-subtle: #0000000F;
   --color-border-success: #00A14E;
   --color-border-warning: #F59E0B;
+  --color-fg-brand-accent: #FF444F;
+  --color-fg-brand: #AA0000;
   --color-fg-danger: #C00000;
   --color-fg-default: #0C0C0C;
   --color-fg-disabled: #BDC0C5;
   --color-fg-info: #003BB6;
+  --color-fg-muted-inverse: #FFFFFFA3;
   --color-fg-muted: #63666B;
+  --color-fg-on-brand-strong: #FFFFFF;
   --color-fg-on-solid: #FFFFFF;
+  --color-fg-on-strong: #FFFFFF;
+  --color-fg-on-warning: #0C0C0C;
+  --color-fg-required: #C00000;
   --color-fg-success: #00802E;
   --color-fg-tertiary: #898E95;
-  --color-fg-warning: #C06D00;
+  --color-fg-warning: #964600;
   --elevation-edge-bottom: 0px 1px 2px 0px #00000014;
   --elevation-edge-top: 0px -1px 2px 0px #00000014;
+  --elevation-ring-hover: inset 0px 0px 0px 2px #0000000A;
   --elevation-surface-floating: 0px 4px 8px 0px #0000001F;
   --elevation-surface-modal: 0px 12px 24px 0px #00000029;
   --elevation-surface-overlay: 0px 4px 8px 0px #00000029;
   --elevation-surface-raised: 0px 1px 2px 0px #00000014;
   --elevation-surface-sticky: 0px 1px 2px 0px #0000001F;
-  --font-body-lg-family: Inter, system-ui, sans-serif;
-  --font-body-lg-letter-spacing: 0em;
-  --font-body-lg-line-height: 1.5;
-  --font-body-lg-size: 16px;
-  --font-body-lg-weight: 400;
-  --font-body-md-family: Inter, system-ui, sans-serif;
-  --font-body-md-letter-spacing: 0em;
-  --font-body-md-line-height: 1.5;
-  --font-body-md-size: 14px;
-  --font-body-md-weight: 400;
-  --font-body-sm-family: Inter, system-ui, sans-serif;
-  --font-body-sm-letter-spacing: 0em;
-  --font-body-sm-line-height: 1.5;
-  --font-body-sm-size: 12px;
-  --font-body-sm-weight: 400;
-  --font-code-family: Red Hat Mono, ui-monospace, monospace;
-  --font-code-letter-spacing: 0em;
-  --font-code-line-height: 1.5;
-  --font-code-size: 14px;
-  --font-code-weight: 400;
-  --font-display-family: Inter, system-ui, sans-serif;
-  --font-display-letter-spacing: -0.025em;
-  --font-display-line-height: 1.125;
-  --font-display-size: 56px;
-  --font-display-weight: 700;
-  --font-eyebrow-family: Inter, system-ui, sans-serif;
-  --font-eyebrow-letter-spacing: 0.025em;
-  --font-eyebrow-line-height: 1.25;
-  --font-eyebrow-size: 12px;
-  --font-eyebrow-weight: 500;
-  --font-headline-family: Inter, system-ui, sans-serif;
-  --font-headline-letter-spacing: -0.015em;
-  --font-headline-line-height: 1.25;
-  --font-headline-size: 40px;
-  --font-headline-weight: 700;
-  --font-label-lg-family: Inter, system-ui, sans-serif;
-  --font-label-lg-letter-spacing: 0em;
-  --font-label-lg-line-height: 1.25;
-  --font-label-lg-size: 16px;
-  --font-label-lg-weight: 500;
-  --font-label-md-family: Inter, system-ui, sans-serif;
-  --font-label-md-letter-spacing: 0em;
-  --font-label-md-line-height: 1.25;
-  --font-label-md-size: 14px;
-  --font-label-md-weight: 500;
-  --font-lead-family: Inter, system-ui, sans-serif;
-  --font-lead-letter-spacing: 0em;
-  --font-lead-line-height: 1.5;
-  --font-lead-size: 18px;
-  --font-lead-weight: 400;
-  --font-subtitle-family: Inter, system-ui, sans-serif;
-  --font-subtitle-letter-spacing: 0em;
-  --font-subtitle-line-height: 1.25;
-  --font-subtitle-size: 20px;
-  --font-subtitle-weight: 600;
-  --font-title-family: Inter, system-ui, sans-serif;
-  --font-title-letter-spacing: -0.005em;
-  --font-title-line-height: 1.25;
-  --font-title-size: 24px;
-  --font-title-weight: 600;
-  --icon-size-2xl: 64px;
-  --icon-size-display: 80px;
-  --icon-size-lg: 32px;
-  --icon-size-md: 24px;
-  --icon-size-sm: 16px;
-  --icon-size-xl: 48px;
-  --motion-duration-dramatic: 700ms;
-  --motion-duration-fast: 100ms;
-  --motion-duration-normal: 200ms;
-  --motion-duration-reveal: 500ms;
-  --motion-duration-slow: 300ms;
-  --motion-easing-enter: cubic-bezier(0.33, 1, 0.68, 1);
-  --motion-easing-exit: cubic-bezier(0.32, 0, 0.67, 0);
-  --motion-easing-reveal: cubic-bezier(0.22, 1, 0.36, 1);
-  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
-  --motion-scale-hover: 1.02;
-  --radius-container: 32px;
-  --radius-control: 16px;
-  --radius-expressive: 48px;
-  --radius-none: 0px;
-  --radius-pill: 9999px;
-  --radius-subtle: 8px;
-  --radius-surface: 24px;
-  --space-gap-2xl: 80px;
-  --space-gap-lg: 24px;
-  --space-gap-md: 16px;
-  --space-gap-sm: 8px;
-  --space-gap-xl: 48px;
-  --space-gap-xs: 4px;
-  --space-inset-2xl: 80px;
-  --space-inset-lg: 24px;
-  --space-inset-md: 12px;
-  --space-inset-sm: 8px;
-  --space-inset-xl: 48px;
-  --space-inset-xs: 4px;
-}
-
-[data-theme="dark"], [data-dds-context="marketing"][data-theme="dark"] {
-  --border-style-decorative: dashed;
-  --border-style-default: solid;
-  --border-width-default: 1px;
-  --border-width-focus: 2px;
-  --border-width-none: 0px;
-  --border-width-strong: 2px;
-  --border-width-thick: 4px;
-  --color-bg-brand-hover: #FF444F;
-  --color-bg-brand: #FF6669;
-  --color-bg-danger-subtle: #390000;
-  --color-bg-danger: #F6554D;
-  --color-bg-disabled: #363636;
-  --color-bg-hover: #0000000D;
-  --color-bg-info-subtle: #00004A;
-  --color-bg-info: #3786FF;
-  --color-bg-overlay-subtle: #00000033;
-  --color-bg-overlay: #00000080;
-  --color-bg-page: #0C0C0C;
-  --color-bg-selected: #FFFFFF14;
-  --color-bg-subtle: #363636;
-  --color-bg-success-subtle: #002001;
-  --color-bg-success: #45B569;
-  --color-bg-surface-raised: #363636;
-  --color-bg-surface: #202020;
-  --color-bg-warning-subtle: #360F00;
-  --color-bg-warning: #FDAE43;
-  --color-border-danger: #F6554D;
-  --color-border-default: #4C4D50;
-  --color-border-disabled: #363636;
-  --color-border-focus: #3786FF;
-  --color-border-info: #3786FF;
-  --color-border-strong: #A2A7AD;
-  --color-border-subtle: #FFFFFF0D;
-  --color-border-success: #45B569;
-  --color-border-warning: #FDAE43;
-  --color-fg-danger: #FF796E;
-  --color-fg-default: #F4F5F6;
-  --color-fg-disabled: #4C4D50;
-  --color-fg-info: #5EA3FF;
-  --color-fg-muted: #A2A7AD;
-  --color-fg-on-solid: #0C0C0C;
-  --color-fg-success: #6BC985;
-  --color-fg-tertiary: #71767D;
-  --color-fg-warning: #FFBD65;
-  --elevation-edge-bottom: 0px 1px 2px 0px #0000001F;
-  --elevation-edge-top: 0px -1px 2px 0px #0000001F;
-  --elevation-surface-floating: 0px 4px 8px 0px #00000029;
-  --elevation-surface-modal: 0px 12px 24px 0px #00000029;
-  --elevation-surface-overlay: 0px 12px 24px 0px #00000029;
-  --elevation-surface-raised: 0px 1px 2px 0px #0000001F;
-  --elevation-surface-sticky: 0px 4px 8px 0px #0000001F;
-  --font-body-lg-family: Inter, system-ui, sans-serif;
+  --font-body-lg-family: var(--font-family-sans);
   --font-body-lg-letter-spacing: 0em;
   --font-body-lg-line-height: 1.5;
-  --font-body-lg-size: 16px;
+  --font-body-lg-size: 18px;
   --font-body-lg-weight: 400;
-  --font-body-md-family: Inter, system-ui, sans-serif;
+  --font-body-md-family: var(--font-family-sans);
   --font-body-md-letter-spacing: 0em;
   --font-body-md-line-height: 1.5;
-  --font-body-md-size: 14px;
+  --font-body-md-size: 16px;
   --font-body-md-weight: 400;
-  --font-body-sm-family: Inter, system-ui, sans-serif;
+  --font-body-sm-family: var(--font-family-sans);
   --font-body-sm-letter-spacing: 0em;
   --font-body-sm-line-height: 1.5;
-  --font-body-sm-size: 12px;
+  --font-body-sm-size: 14px;
   --font-body-sm-weight: 400;
-  --font-code-family: Red Hat Mono, ui-monospace, monospace;
-  --font-code-letter-spacing: 0em;
-  --font-code-line-height: 1.5;
-  --font-code-size: 14px;
-  --font-code-weight: 400;
-  --font-display-family: Inter, system-ui, sans-serif;
-  --font-display-letter-spacing: -0.025em;
-  --font-display-line-height: 1.125;
-  --font-display-size: 56px;
-  --font-display-weight: 700;
-  --font-eyebrow-family: Inter, system-ui, sans-serif;
+  --font-eyebrow-family: var(--font-family-sans);
   --font-eyebrow-letter-spacing: 0.025em;
   --font-eyebrow-line-height: 1.25;
   --font-eyebrow-size: 12px;
   --font-eyebrow-weight: 500;
-  --font-headline-family: Inter, system-ui, sans-serif;
-  --font-headline-letter-spacing: -0.015em;
-  --font-headline-line-height: 1.25;
-  --font-headline-size: 40px;
-  --font-headline-weight: 700;
-  --font-label-lg-family: Inter, system-ui, sans-serif;
+  --font-field-label-lg-family: var(--font-family-sans);
+  --font-field-label-lg-letter-spacing: 0em;
+  --font-field-label-lg-line-height: 1.25;
+  --font-field-label-lg-size: 18px;
+  --font-field-label-lg-weight: 500;
+  --font-field-label-md-family: var(--font-family-sans);
+  --font-field-label-md-letter-spacing: 0em;
+  --font-field-label-md-line-height: 1.25;
+  --font-field-label-md-size: 16px;
+  --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-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;
   --font-label-lg-line-height: 1.25;
-  --font-label-lg-size: 16px;
-  --font-label-lg-weight: 500;
-  --font-label-md-family: Inter, system-ui, sans-serif;
+  --font-label-lg-size: 18px;
+  --font-label-lg-weight: 600;
+  --font-label-md-family: var(--font-family-sans);
   --font-label-md-letter-spacing: 0em;
   --font-label-md-line-height: 1.25;
-  --font-label-md-size: 14px;
-  --font-label-md-weight: 500;
-  --font-lead-family: Inter, system-ui, sans-serif;
-  --font-lead-letter-spacing: 0em;
-  --font-lead-line-height: 1.5;
-  --font-lead-size: 18px;
-  --font-lead-weight: 400;
-  --font-subtitle-family: Inter, system-ui, sans-serif;
+  --font-label-md-size: 16px;
+  --font-label-md-weight: 600;
+  --font-label-medium-sm-family: var(--font-family-sans);
+  --font-label-medium-sm-letter-spacing: 0em;
+  --font-label-medium-sm-line-height: 1.25;
+  --font-label-medium-sm-size: 14px;
+  --font-label-medium-sm-weight: 500;
+  --font-label-sm-family: var(--font-family-sans);
+  --font-label-sm-letter-spacing: 0em;
+  --font-label-sm-line-height: 1.25;
+  --font-label-sm-size: 14px;
+  --font-label-sm-weight: 600;
+  --font-subtitle-family: var(--font-family-sans);
   --font-subtitle-letter-spacing: 0em;
   --font-subtitle-line-height: 1.25;
   --font-subtitle-size: 20px;
   --font-subtitle-weight: 600;
-  --font-title-family: Inter, system-ui, sans-serif;
+  --font-title-family: var(--font-family-sans);
   --font-title-letter-spacing: -0.005em;
   --font-title-line-height: 1.25;
-  --font-title-size: 24px;
-  --font-title-weight: 600;
-  --icon-size-2xl: 64px;
-  --icon-size-display: 80px;
+  --font-title-size: 20px;
+  --font-title-weight: 700;
+  --icon-control-lg: 20px;
+  --icon-control-md: 18px;
+  --icon-control-sm: 16px;
+  --icon-size-2xs: 12px;
   --icon-size-lg: 32px;
   --icon-size-md: 24px;
-  --icon-size-sm: 16px;
+  --icon-size-sm: 20px;
   --icon-size-xl: 48px;
+  --icon-size-xs: 16px;
+  --layer-overlay: 800;
+  --layer-popup: 400;
   --motion-duration-dramatic: 700ms;
   --motion-duration-fast: 100ms;
+  --motion-duration-instant: 0ms;
+  --motion-duration-media-hover: 400ms;
   --motion-duration-normal: 200ms;
+  --motion-duration-pulse: 1500ms;
   --motion-duration-reveal: 500ms;
+  --motion-duration-shift: 400ms;
   --motion-duration-slow: 300ms;
+  --motion-duration-spinner: 500ms;
   --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);
   --motion-easing-reveal: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-easing-shift: cubic-bezier(0.65, 0, 0.35, 1);
+  --motion-easing-spinner: cubic-bezier(0, 0, 1, 1);
   --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
+  --motion-scale-media-hover: 1.04;
+  --motion-translate-enter: 0 100%;
+  --motion-translate-hover: 0 -4px;
+  --opacity-disabled: 0.22;
+  --opacity-hidden: 0;
+  --opacity-muted: 0.72;
+  --opacity-track: 0.22;
+  --radius-container-item: 16px;
   --radius-container: 32px;
-  --radius-control: 16px;
+  --radius-control-lg: 12px;
+  --radius-control-md: 10px;
+  --radius-control-sm: 8px;
   --radius-expressive: 48px;
+  --radius-menu-item: 12px;
+  --radius-menu: 16px;
   --radius-none: 0px;
   --radius-pill: 9999px;
-  --radius-subtle: 8px;
+  --radius-subtle: 12px;
+  --radius-surface-compact: 16px;
   --radius-surface: 24px;
-  --space-gap-2xl: 80px;
+  --size-bar-height: 56px;
+  --size-breakpoint-lg: 1024px;
+  --size-breakpoint-md: 768px;
+  --size-checkbox-box: 20px;
+  --size-content-max: 1280px;
+  --size-control-lg: 48px;
+  --size-control-md: 40px;
+  --size-control-sm: 32px;
+  --size-dot-diameter: 8px;
+  --size-grid-track-lg: 320px;
+  --size-grid-track-md: 240px;
+  --size-grid-track-sm: 160px;
+  --size-heading-group-max: 846px;
+  --size-measure-description: 60ch;
+  --size-measure-long-form: 65ch;
+  --size-measure-title: 20ch;
+  --size-menu-max: 224px;
+  --size-menu-panel-max: 846px;
+  --size-menu-panel-min: 320px;
+  --size-sheet-handle-height: 4px;
+  --size-sheet-handle-width: 40px;
+  --size-sheet-max: 640px;
+  --size-sheet-peek: 56px;
+  --size-spinner-lg: 40px;
+  --size-spinner-md: 24px;
+  --size-spinner-sm: 16px;
+  --size-spinner-stroke-lg: 4px;
+  --size-spinner-stroke-md: 3px;
+  --size-spinner-stroke-sm: 2px;
+  --size-switcher-panel-width: 640px;
+  --size-target-min: 24px;
+  --size-tooltip-max: 224px;
+  --space-actions-gap: 16px;
+  --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: 48px;
+  --space-gap-xl: 32px;
   --space-gap-xs: 4px;
-  --space-inset-2xl: 80px;
+  --space-grid-gutter: 20px;
+  --space-heading-content: 48px;
+  --space-heading-description-actions: 32px;
+  --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: 12px;
-  --space-inset-sm: 8px;
-  --space-inset-xl: 48px;
-  --space-inset-xs: 4px;
+  --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;
 }
 
 @media (max-width: 767px) {
   :root, [data-dds-context="marketing"] {
-    --font-display-letter-spacing: -0.015em;
-    --font-display-line-height: 1.25;
-    --font-display-size: 32px;
-    --font-headline-letter-spacing: -0.005em;
-    --font-headline-size: 28px;
-    --font-title-letter-spacing: 0em;
-    --font-title-size: 20px;
-    --space-gap-2xl: 48px;
-    --space-gap-xl: 32px;
-    --space-inset-2xl: 48px;
+    --font-figure-line-height: 1.25;
+    --font-figure-size: 40px;
+    --font-h1-letter-spacing: -0.015em;
+    --font-h1-size: 48px;
+    --font-h2-line-height: 1.25;
+    --font-h2-size: 40px;
+    --font-h3-letter-spacing: -0.005em;
+    --font-h3-line-height: 1.25;
+    --font-h3-size: 32px;
+    --font-h4-letter-spacing: -0.005em;
+    --font-h4-size: 24px;
+    --font-h5-line-height: 1.375;
+    --font-h5-size: 20px;
+    --space-actions-gap: 12px;
+    --space-gap-2xl: 32px;
+    --space-gap-3xl: 48px;
+    --space-gap-xl: 24px;
+    --space-grid-gutter: 16px;
+    --space-heading-content: 32px;
+    --space-heading-description-actions: 24px;
+    --space-heading-eyebrow-title: 12px;
+    --space-inset-2xl: 32px;
+    --space-inset-3xl: 48px;
+    --space-inset-4xl: 72px;
+    --space-inset-card: 24px;
+    --space-inset-page: 16px;
     --space-inset-xl: 24px;
+    --space-section-compact: 32px;
+    --space-section-default: 48px;
   }
 }
 
 [data-dds-viewport="mobile"], [data-dds-context="marketing"][data-dds-viewport="mobile"] {
-  --font-display-letter-spacing: -0.015em;
-  --font-display-line-height: 1.25;
-  --font-display-size: 32px;
-  --font-headline-letter-spacing: -0.005em;
-  --font-headline-size: 28px;
-  --font-title-letter-spacing: 0em;
-  --font-title-size: 20px;
-  --space-gap-2xl: 48px;
-  --space-gap-xl: 32px;
-  --space-inset-2xl: 48px;
+  --font-figure-line-height: 1.25;
+  --font-figure-size: 40px;
+  --font-h1-letter-spacing: -0.015em;
+  --font-h1-size: 48px;
+  --font-h2-line-height: 1.25;
+  --font-h2-size: 40px;
+  --font-h3-letter-spacing: -0.005em;
+  --font-h3-line-height: 1.25;
+  --font-h3-size: 32px;
+  --font-h4-letter-spacing: -0.005em;
+  --font-h4-size: 24px;
+  --font-h5-line-height: 1.375;
+  --font-h5-size: 20px;
+  --space-actions-gap: 12px;
+  --space-gap-2xl: 32px;
+  --space-gap-3xl: 48px;
+  --space-gap-xl: 24px;
+  --space-grid-gutter: 16px;
+  --space-heading-content: 32px;
+  --space-heading-description-actions: 24px;
+  --space-heading-eyebrow-title: 12px;
+  --space-inset-2xl: 32px;
+  --space-inset-3xl: 48px;
+  --space-inset-4xl: 72px;
+  --space-inset-card: 24px;
+  --space-inset-page: 16px;
   --space-inset-xl: 24px;
+  --space-section-compact: 32px;
+  --space-section-default: 48px;
 }
 
 [data-dds-viewport="desktop"], [data-dds-context="marketing"][data-dds-viewport="desktop"] {
-  --font-display-letter-spacing: -0.025em;
-  --font-display-line-height: 1.125;
-  --font-display-size: 56px;
-  --font-headline-letter-spacing: -0.015em;
-  --font-headline-size: 40px;
-  --font-title-letter-spacing: -0.005em;
-  --font-title-size: 24px;
-  --space-gap-2xl: 80px;
-  --space-gap-xl: 48px;
-  --space-inset-2xl: 80px;
-  --space-inset-xl: 48px;
+  --font-figure-line-height: 1.125;
+  --font-figure-size: 56px;
+  --font-h1-letter-spacing: -0.025em;
+  --font-h1-size: 80px;
+  --font-h2-line-height: 1.125;
+  --font-h2-size: 56px;
+  --font-h3-letter-spacing: -0.015em;
+  --font-h3-line-height: 1.125;
+  --font-h3-size: 48px;
+  --font-h4-letter-spacing: -0.015em;
+  --font-h4-size: 36px;
+  --font-h5-line-height: 1.25;
+  --font-h5-size: 24px;
+  --space-actions-gap: 16px;
+  --space-gap-2xl: 48px;
+  --space-gap-3xl: 72px;
+  --space-gap-xl: 32px;
+  --space-grid-gutter: 20px;
+  --space-heading-content: 48px;
+  --space-heading-description-actions: 32px;
+  --space-heading-eyebrow-title: 16px;
+  --space-inset-2xl: 48px;
+  --space-inset-3xl: 72px;
+  --space-inset-4xl: 112px;
+  --space-inset-card: 32px;
+  --space-inset-page: 32px;
+  --space-inset-xl: 32px;
+  --space-section-compact: 48px;
+  --space-section-default: 112px;
 }
 

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@deriv-com/dds-marketing",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
-  "license": "UNLICENSED",
+  "license": "MIT",
+  "author": {
+    "name": "Deriv.com Limited"
+  },
   "type": "module",
+  "dds": {
+    "modes": [
+      "light"
+    ]
+  },
   "sideEffects": [
     "**/*.css"
   ],
@@ -15,11 +23,15 @@
       "default": "./dist/components/index.js"
     },
     "./marketing.css": "./dist/marketing.css",
+    "./fonts.css": "./dist/fonts/fonts.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
-    "README.md"
+    ".llm",
+    "AGENTS.md",
+    "README.md",
+    "LICENSE"
   ],
   "publishConfig": {
     "access": "public"
@@ -50,11 +62,13 @@
     "test": "vitest run",
     "typecheck": "tsc --noEmit -p tsconfig.build.json",
     "push:marketing": "node --env-file=../../.env --import tsx ../../src/figma/push-variables.ts marketing-spike --package-root .",
+    "push:styles:marketing": "node --env-file=../../.env --import tsx ../../src/figma/push-styles.ts marketing-spike --package-root .",
+    "push:components:marketing": "node --env-file=../../.env --import tsx ../../src/figma/push-components.ts marketing-spike --package-root .",
     "promote:marketing": "node --env-file=../../.env --import tsx ../../src/figma/promote-cli.ts marketing --package-root .",
     "ratify": "node --import tsx ../../src/ratify/cli.ts --package-root ."
   },
   "peerDependencies": {
-    "@deriv-com/quill-icons-web": "~1.0.10",
+    "@deriv-com/quill-icons-web": "~2.0.0",
     "react": ">=19",
     "react-dom": ">=19"
   }