Colors vs Palettes

Instead of applying colors from palettes to classes each of the time, we suggest using Colors variables whenever possible. The names of Colors usually specify their roles or purposes, and the names of Palettes describe the colors.

Colors 🖌

The Colors, Colors: Extended and Colors: Special variable groups inside the default variable collection are the core color options for your project.

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 anytime.,

The Primary, Secondary, Accent, and Neutral colors follow a 12-step tint setup.

For the extended colors, you can modify, add, or rename them 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, including collections of tint variations of tints.

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

Colors variables reference Palettes variables, giving you the flexibility to update colors by selecting from palettes easily without disrupting the site's overall style.

S2's Palettes (the "Lightness Minimum" of our default colors are set to 15): https://www.tints.dev/?neutral=7E7E7E&primary=0145AB&secondary=00B499&accent=F3BB09

Please keep the name "Neutral" and all Neutral colors' variable names unchanged.