:root { --neutral-100: rgba(255, 255, 255, 1); --neutral-600: rgba(111, 108, 144, 1); --neutral-300: rgba(239, 240, 246, 1); --other-16-18-m-font-family: "DM Sans", Helvetica; --other-16-18-m-font-weight: 500; --other-16-18-m-font-size: 16px; --other-16-18-m-letter-spacing: 0px; --other-16-18-m-line-height: 18px; --other-16-18-m-font-style: normal; --other-16-23-r-font-family: "DM Sans", Helvetica; --other-16-23-r-font-weight: 400; --other-16-23-r-font-size: 16px; --other-16-23-r-letter-spacing: 0px; --other-16-23-r-line-height: 23px; --other-16-23-r-font-style: normal; --color-schemes-color-scheme-1-background: var(--primitives-color-white); --color-schemes-color-scheme-1-background-duplicate: var( --primitives-color-white-duplicate ); --color-schemes-color-scheme-1-border: var(--primitives-color-neutral-darkest); --color-schemes-color-scheme-1-foreground: var(--primitives-color-white); --color-schemes-color-scheme-1-text: var(--primitives-color-neutral-darkest); --color-schemes-color-scheme-1-text-duplicate: var( --primitives-color-neutral-darkest-duplicate ); --heading-tagline-font-family: "Roboto", Helvetica; --heading-tagline-font-size: 16px; --heading-tagline-font-style: normal; --heading-tagline-font-weight: 600; --heading-tagline-letter-spacing: 0px; --heading-tagline-line-height: 150%; --primitives-color-contessa: rgba(190, 95, 106, 1); --primitives-color-laser: rgba(196, 179, 102, 1); --primitives-color-neutral-darkest: rgba(0, 0, 0, 1); --primitives-color-neutral-darkest-duplicate: rgba(0, 0, 0, 1); --primitives-color-white: rgba(255, 255, 255, 1); --primitives-color-white-duplicate: rgba(255, 255, 255, 1); --spacing-sizing-container-container-large: 1280px; --spacing-sizing-container-container-large-duplicate: 1280px; --spacing-sizing-max-width-max-width-large: 768px; --spacing-sizing-max-width-max-width-medium: 560px; --spacing-sizing-max-width-max-width-xsmall: 400px; --spacing-sizing-page-padding-padding-global: 64px; --spacing-sizing-page-padding-padding-global-duplicate: 64px; --spacing-sizing-section-padding-padding-section-large: 112px; --spacing-sizing-section-padding-padding-section-large-duplicate: 112px; --spacing-sizing-section-padding-padding-section-medium: 80px; --text-medium-normal-font-family: "Roboto", Helvetica; --text-medium-normal-font-size: 18px; --text-medium-normal-font-style: normal; --text-medium-normal-font-weight: 400; --text-medium-normal-letter-spacing: 0px; --text-medium-normal-line-height: 150%; --text-regular-medium-font-family: "Sarabun", Helvetica; --text-regular-medium-font-size: 16px; --text-regular-medium-font-style: normal; --text-regular-medium-font-weight: 500; --text-regular-medium-letter-spacing: 0px; --text-regular-medium-line-height: 150%; --text-regular-normal-font-family: "Roboto", Helvetica; --text-regular-normal-font-size: 16px; --text-regular-normal-font-style: normal; --text-regular-normal-font-weight: 400; --text-regular-normal-letter-spacing: 0px; --text-regular-normal-line-height: 150%; --text-small-semi-bold-font-family: "Sarabun", Helvetica; --text-small-semi-bold-font-size: 14px; --text-small-semi-bold-font-style: normal; --text-small-semi-bold-font-weight: 600; --text-small-semi-bold-letter-spacing: 0px; --text-small-semi-bold-line-height: 150%; --UI-styles-radius-large: 16px; } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-spacing-sizing-mode="desktop"] { --spacing-sizing-page-padding-padding-global: 64px; --spacing-sizing-page-padding-padding-global-duplicate: 64px; --spacing-sizing-section-padding-padding-section-large: 112px; --spacing-sizing-section-padding-padding-section-large-duplicate: 112px; --spacing-sizing-section-padding-padding-section-medium: 80px; } [data-spacing-sizing-mode="mobile"] { --spacing-sizing-page-padding-padding-global: 20px; --spacing-sizing-page-padding-padding-global-duplicate: 20px; --spacing-sizing-section-padding-padding-section-large: 64px; --spacing-sizing-section-padding-padding-section-large-duplicate: 64px; --spacing-sizing-section-padding-padding-section-medium: 48px; }