---
description: Further Understanding of default "Colors" variable group in the S2 Framework.
icon: palette
---

# Colors in S2

## Colors

By default, variables in **Colors** cover **Primary**, **Secondary**, **Accent**, **Text**, **Stroke**, **Surface**, and **Focus** colors. Here is a list of default colors in the group:

|               | Description / Purpose                                   |
| ------------- | ------------------------------------------------------- |
| **Primary**   | Primary color is the main color of the website or brand |
| **Secondary** | The secondary color of the website or brand             |
| **Accent**    | Accent color of the website or brand                    |

|                 | Description / Purpose            |
| --------------- | -------------------------------- |
| **Text**        | The option of body text color    |
| **Text Muted**  | Muted color of text              |
| **Text Dim**    | Dim: less contrast to background |
| **Text Dimmer** | Dimmer                           |

|                     | Description / Purpose        |
| ------------------- | ---------------------------- |
| **Stroke**          | Color for borders and lines  |
| **Stroke Subtle**   | Subtle stroke color          |
| **Stroke Emphasis** | More emphasised stroke color |

|                       | Description / Purpose                          |
| --------------------- | ---------------------------------------------- |
| **Surface**           | The option of background color                 |
| **Surface Muted**     | Slightly dimmer version of Surface             |
| **Surface Alt**       | The alternative or contrast version of Surface |
| **Surface Alt Muted** | Slightly dimmer version of Surface Alt         |

|                  | Description / Purpose        |
| ---------------- | ---------------------------- |
| **Focus**        | Color of used in focus state |
| **Focus Subtle** | Light version of focus color |

{% hint style="danger" %}
Renaming and removing the default **Colors** variables will not break your site entirely, but you will probably need to re-apply the colors to some styles because such variables will become "**unlinked**". You will have to fix them manually.
{% endhint %}



## Colors: Extended

|                     | Description / Purpose                                                                                                          |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Extended Colors** | Additional colors of your brand identity. You can modify, add, rename, or remove the extended colors to align with your brand. |



## Colors: Special

Useful for some specific purposes.