:root { --brandprimary: rgba(74, 11, 108, 1); --brandsecondary: rgba(133, 41, 168, 1); --brandaccent: rgba(255, 72, 6, 1); --textprimary: rgba(1, 1, 1, 1); --textwhite: rgba(254, 252, 252, 1); --backgroundprimary: rgba(254, 252, 252, 1); --display-h1-font-family: "Atkinson Hyperlegible Next", Helvetica; --display-h1-font-weight: 700; --display-h1-font-size: 36px; --display-h1-letter-spacing: 0px; --display-h1-line-height: 43px; --display-h1-font-style: normal; --heading-h2-font-family: "Atkinson Hyperlegible Next", Helvetica; --heading-h2-font-weight: 700; --heading-h2-font-size: 32px; --heading-h2-letter-spacing: 0px; --heading-h2-line-height: 40px; --heading-h2-font-style: normal; --heading-h3-font-family: "Atkinson Hyperlegible Next", Helvetica; --heading-h3-font-weight: 700; --heading-h3-font-size: 28px; --heading-h3-letter-spacing: 0px; --heading-h3-line-height: 36px; --heading-h3-font-style: normal; --heading-h4-font-family: "Atkinson Hyperlegible Next", Helvetica; --heading-h4-font-weight: 600; --heading-h4-font-size: 24px; --heading-h4-letter-spacing: 0px; --heading-h4-line-height: 32px; --heading-h4-font-style: normal; --heading-h5-font-family: "Atkinson Hyperlegible Next", Helvetica; --heading-h5-font-weight: 600; --heading-h5-font-size: 20px; --heading-h5-letter-spacing: 0px; --heading-h5-line-height: 28px; --heading-h5-font-style: normal; --heading-h6-font-family: "Atkinson Hyperlegible Next", Helvetica; --heading-h6-font-weight: 700; --heading-h6-font-size: 16px; --heading-h6-letter-spacing: 0px; --heading-h6-line-height: 26px; --heading-h6-font-style: normal; --body-p1-font-family: "Atkinson Hyperlegible Next", Helvetica; --body-p1-font-weight: 400; --body-p1-font-size: 19px; --body-p1-letter-spacing: 0px; --body-p1-line-height: 30px; --body-p1-font-style: normal; --body-p2-font-family: "Atkinson Hyperlegible Next", Helvetica; --body-p2-font-weight: 400; --body-p2-font-size: 18px; --body-p2-letter-spacing: 0px; --body-p2-line-height: 29px; --body-p2-font-style: normal; --body-p3-font-family: "Atkinson Hyperlegible Next", Helvetica; --body-p3-font-weight: 400; --body-p3-font-size: 16px; --body-p3-letter-spacing: 0px; --body-p3-line-height: 26px; --body-p3-font-style: normal; --UI-text-font-family: "Atkinson Hyperlegible Next", Helvetica; --UI-text-font-weight: 400; --UI-text-font-size: 14px; --UI-text-letter-spacing: 0px; --UI-text-line-height: 20px; --UI-text-font-style: normal; --button-font-family: "Atkinson Hyperlegible Next", Helvetica; --button-font-weight: 600; --button-font-size: 19px; --button-letter-spacing: 0px; --button-line-height: 30px; --button-font-style: normal; --button-2-font-family: "Atkinson Hyperlegible Next", Helvetica; --button-2-font-weight: 600; --button-2-font-size: 16px; --button-2-letter-spacing: 0px; --button-2-line-height: 30px; --button-2-font-style: normal; --display-h0-font-family: "Atkinson Hyperlegible Next", Helvetica; --display-h0-font-weight: 700; --display-h0-font-size: 40px; --display-h0-letter-spacing: 0px; --display-h0-line-height: 48px; --display-h0-font-style: normal; --variable-collection-text-primary: rgba(1, 1, 1, 1); --variable-collection-icon-primary: var(--variable-collection-text-primary); --variable-collection-background-secondary: rgba(233, 237, 251, 1); --variable-collection-text-secondary: var( --variable-collection-text-secondary-duplicate ); --variable-collection-text-secondary-duplicate: rgba(66, 65, 94, 1); --variable-collection-text-white: rgba(255, 255, 255, 1); --variable-collection-text-primary-duplicate: rgba(1, 1, 1, 1); --variable-collection-brand-primary: rgba(74, 11, 108, 1); } /* 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-variable-collection-mode="mode-1"] { --variable-collection-brand-primary: rgba(74, 11, 108, 1); } [data-variable-collection-mode="no-text"] { --variable-collection-brand-primary: rgba(70, 12, 103, 1); } [data-variable-collection-mode="mode-2"] { --variable-collection-brand-primary: rgba(70, 12, 103, 1); }