---
icon: folder-tree
---

# Variable Groups

Variable Collections and Groups out-of-the-box in S2 Framework:

**Theme**

| Variable Groups                           | Description                                                                                                                              |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Colors <mark style="color:red;">\*</mark> | <p>Contains essential colors for selection throughout the project.<br>If you have more colors, you are recommanded to add them here.</p> |
| Colors - Special                          | Contains colors for specific purposes, particularly those that maintain a consistent appearance in both light and dark modes.            |
| S2                                        | Colors for the style guide only.                                                                                                         |

**Palettes**

| Variable Groups                            | Description                                                                                                                                   |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Primary                                    | The palette of Primary colors ranges from shades 50 to 950, complemented by three foreground colors (on300, on500, on700) and a subtle color. |
| Secondary                                  | The palette of Secondary colors.                                                                                                              |
| Accent                                     | The palette of Accent colors.                                                                                                                 |
| Neutral <mark style="color:red;">\*</mark> | The palette of Neutral (grayscale) colors.                                                                                                    |

**Sizes**

| Variable Groups | Description                                              |
| --------------- | -------------------------------------------------------- |
| Container       | Width and padding values for containers.                 |
| Spacing         | Values for layout spacing.                               |
| Radius          | Radius values.                                           |
| Icon            | For icon sizes.                                          |
| Button          | For sizes (heights) of buttons.                          |
| Line            | For lines or borders.                                    |
| Gap             | For gap heights and widths.                              |
| Main Nav        | Grouping variables specifically for the main navigation. |
| Outline         | For outline and offset values of outline.                |
| Grid            | Grid system's gutter value and number of columns.        |

**Text**

| Variable Groups  | Description                      |
| ---------------- | -------------------------------- |
| Font Family      | For global font selection.       |
| Font Size        | For key font size variations.    |
| List Spacing     | Spacing of lists.                |
| Richtext Spacing | Spacing for Rich Text elements.  |
| Other            | Other typography related values. |

{% hint style="danger" %}
<mark style="color:red;">While you can add more variables and edit the colors freely, it is not recommended that you remove or rename the existing "</mark><mark style="color:red;">**Colors**</mark><mark style="color:red;">" and "</mark><mark style="color:red;">**Neutral**</mark><mark style="color:red;">" variables.</mark>
{% endhint %}