Colors in S2

Further Understanding of default "Colors" variable group in the S2 Framework.

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

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.

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.