Colors vs Palette

Instead of applying palette colors directly to element styles, we suggest using Colors variables whenever possible. The names of Colors specify their uses or purposes, and the names of Palette describe the colors.

Colors

Colors variable groups are the primary color options for your project. By using Colors, you can easily update the entire color scheme of your site anytime.

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

Renaming and removing the default Colors variables will not break your site visually, 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.

Palette 🎨

Palette variable groups are predefined sets of colors picked for the website, and then, they can be selected by variables under Colors. This method provides flexibility to update colors by choosing from palette variables without disrupting the site's overall style.

S2's default palettes (the "Lightness Minimum" of the three colors are set to 15): https://www.tints.dev/?neutral=7E7E7E&brand=0145AB&brandsub=E75628&accent=F3BB09

Please leave the name "Palette - Neutral" and the variable names under it unchanged.

Other than that, as long as you know what you are doing, you can make changes to other palette colors, such as adding, removing, and renaming them.