> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/soul-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/soul-documentation/theme-settings/colors.md).

# 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="/files/aTHj0vfZ9RrkgsXfT4c3" 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="/files/BVyvzojtgidivR0bD9oy" 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="/files/jzub9cNxWVRidWLuWBMx" 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="/files/IjCcPx0VXkKEOa8VwcrX" 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="/files/dA1dAhVrCMGfZPW2Dsq4" 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="/files/4sXiVuHeofYlYZYKdH3L" 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="/files/cSzTfBgjEzxN15x6LE4N" 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="/files/IHQmdPsD6ZhHVBcNxQXf" 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="/files/1IXrhUWNQAwt9K1ZuCVN" 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="/files/IdmTiqkTz2zQdsfkbXc3" 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="/files/MxxvjI7upNE854e8TEUT" 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="/files/YqwTPPSgjbUQftt9IiAw" 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>