Colors vs Palettes

We suggest using Colors variables whenever possible. The names of Colors usually specify their roles or purposes.

Colors 🖌

The variable groups below are the core color options for your project:

• Colors

• Colors: Extended

• Colors: Special

The Colors variables have Base mode (the Base mode is "Light" mode by default) and Dark mode setup. By using Colors, you can easily update the entire color scheme of your site.

You can modify, add, or rename the extended colors to align with your brand.

You can remove the Dark mode from Colors completely if your website does not have light and dark modes.

Palettes 🎨

Palettes are groups or sets of colors that are essentially tint variations.

Palettes variables are picked by the Colors variables. This method provides flexibility to update colors by choosing from palette variables without disrupting the site's overall style.

The Primary, Secondary, Accent, and Neutral colors follow an 11-step tint setup (50-500-950 scale). You can use a tint generator to get the tints.

See S2's default Palettes on tints.dev

Please keep the palette name "Neutral" and all of its variable names unchanged.