Colors vs Palettes
Last updated
Last updated
Instead of applying colors on palettes directly to element styles, we suggest using Colors variables whenever possible. The names of Colors specify their uses or purposes, and the names of Palettes describe the colors.
Colors, and Colors - Special, variable groups inside the variable collection Theme 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.
Variable groups, such as Primary, Secondary, Accent, and Neutral, inside the Palettes variable collection 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 "Neutral" and the variable names under it unchanged.
Other than that, as long as you know what you are doing, you may make changes to other palette colors, such as adding, removing, and renaming them.