Variable Groups

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

📂 Theme

Variable Groups	Description
Colors *	Contains essential colors for selection throughout the project.
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
Brand	The palette of brand colors ranges from shades 50 to 950, complemented by three foreground colors (on300, on500, on700) and a subtle color.
Brand Alt	The palette of alternative brand colors.
Accent	The palette of accent colors.
Neutral *	The palette of neutral (grayscale) colors.

📂 Sizes

Variable Groups	Description
Container	Width and padding values for containers.
Spacing	Spacing values.
Richtext Spacing	Spacing for richtext elements.
List Spacing	Spacing of lists.
Radius	Radius values.
Thickness	For borders and outlines mainly.
Icon	For con sizes.
Button	For sizes (height) of buttons.
Main Nav	Grouping variables specifically for the main navigation.

📂 Text

Variable Groups	Description
Font Family	For global font selection.
Font Size	For key font size variations.

* While you can add more variables and edit the colors freely, it is not recommended to remove or rename the existing "Colors" and "Neutral" variables.