# Colors

To use color schemes, please configure your color schemes by following below : [Set up color schemes.](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme)

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme Settings ->** **Colors**.
4. Choose the color scheme that you want change.

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Set the background color.</td></tr><tr><td>Background gradient</td><td>Set the background gradient.</td></tr><tr><td>Primary text</td><td>Set the color for the primary text.</td></tr><tr><td>Secondary text</td><td>Set the color for the secondary text.</td></tr><tr><td>Shadow</td><td>Set the shadow color.</td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Set the background color for the button.</td></tr><tr><td>Label</td><td>Set the color for the button label.</td></tr><tr><td>Outline</td><td>Set the color for the button's outline.</td></tr><tr><td>Outline gradient</td><td>Set the gradient color for the button's outline.</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Set the color for the button label.</td></tr><tr><td>Outline</td><td>Set the color for the secondary button's outline.</td></tr><tr><td>Outline gradient</td><td>Set the gradient color for the secondary button's outline.</td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Set the color first.</td></tr><tr><td>Second color</td><td>Set the color second.</td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Set the color for the heading.</td></tr></tbody></table>

{% hint style="info" %}
**Create the color schemes as shown below to ensure the theme's colors match those on the demo store.**
{% endhint %}

## Scheme 1

The default color scheme applied to elements that are not assigned a color.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FMbJoUY8Ylj0Z6twS7xS3%2Fimage.png?alt=media&#x26;token=59acb854-0822-4333-ab28-658f09972014" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#1BD1FF</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#01FA59</strong></td></tr></tbody></table>

## Scheme 2

Scheme 2 is applied to the **Announcement bar** section and **Product card**.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2Fjp7HLLrPaGuA2cH422k3%2Fimage.png?alt=media&#x26;token=87798eff-8418-483d-b9bc-4bf34c3177a7" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#E54C4C</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 3

Scheme 3 is applied to the first **Image banner** section on the about us page.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FI6dkTBIH2H3GU6dp5nLL%2Fimage.png?alt=media&#x26;token=0c8efd9c-7e7f-406b-99f8-fc9aac8d2848" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color: <strong>Transparent</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 4

Scheme 4 is applied to the following sections: **Collage**, **Shop the look (Banner left)**.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FylnS75uMIk2JEtK8rlY8%2Fimage.png?alt=media&#x26;token=43248c7a-59ff-4a80-b856-31fe1a9104fe" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Solid button background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Solid button label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline button</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline secondary button</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 5

Scheme 5 is applied to the **Sale badge** on product card.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FbjHS4KBYELnLlXRr4ACs%2Fimage.png?alt=media&#x26;token=4ca7f0fa-1038-458c-a2e2-665bd34777a0" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#DB0C0C</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#121212</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 6

Scheme 6 is applied to the **Multicolumn** section.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2Fw5WfXlIhhH2TYg0R93Er%2Fimage.png?alt=media&#x26;token=881d0b03-48fa-40b7-97ed-128053f494bc" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Background gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(0, 59, 245, 1), rgba(86, 172, 209, 1) 49.5%, rgba(221, 255, 51, 1) 100%)</strong></td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 7

Scheme 7 is applied to the **Running text with image** section, the third **Rich text** section on the about us page, **Add To Card button** on product page and Featured Product section and **Checkout button.**

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FAKyjbfK4oocgIzs3sVXE%2Fimage.png?alt=media&#x26;token=b882dc28-7fc2-4d08-b9a2-1e313e9b4b72" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Background gradient</td><td>Color code: <strong>linear-gradient(90.26deg, rgba(222, 254, 10, 1) 2.91%, rgba(115, 252, 77, 1) 50.46%, rgba(2, 250, 89, 1) 99.96%)</strong></td></tr><tr><td>Primary text</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 8

Scheme 8 is applied to the **Social icons.**

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FbFtb1L10e52xWgmqCC0i%2Fimage.png?alt=media&#x26;token=f34d3135-2825-4c84-b733-57d003b4fe28" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#C7AFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#90BDF2</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#1BD1FF</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 9

Scheme 9 is applied to the **Contact form** section, the second **Rich text** section on the about us page and the **Free shipping caculator** functio&#x6E;**.**

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FudvfU5Z1EDTP72ROeoL2%2Fimage.png?alt=media&#x26;token=f1d6da9c-adf6-4303-a3fc-9e5bfcae0705" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#1B1A1A</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color code: <strong>#7344D0</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 10

Scheme 10 is applied to the **Promotion popup** sectio&#x6E;**.**

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FZXaWx3u6thziy37jWAAd%2Fimage.png?alt=media&#x26;token=b54cd48a-3637-49e0-988c-0ee96eaa4ef4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#8A8A8A</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 11

Scheme 11 is applied to the **Blog card.**

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FYbS6JcQ1Sv65ooM3ZnWe%2Fimage.png?alt=media&#x26;token=5bdba4a6-c526-453b-9a00-84dce0bbd22c" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#1B1A1A</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 12

Scheme 12 is applied to the **Shop the look** sectio&#x6E;**.**

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FOfVVfrcn5HQ9sqYnKZ2n%2Fimage.png?alt=media&#x26;token=9a6e3f1a-714c-4b7d-b728-f0dd4a499dc1" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#DEFE0A</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#8A52FE</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#1BD1FF</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#01FA59</strong></td></tr></tbody></table>