Colors
Sprkl uses Neutral, Primary, Accent and Semantic (Success, Warning, Error and Info) scales. There's no need to use nor customize all colors. You can start by adding components to your layout and changing the swatches for this specific components.
Background colors
To style elements you can use related class to a specific color. All background color classes looks like BGC Primary-900, where BGC=BackgroundColor Primary=ColorGroup and 900=ColorLevel. Below you can see all text color classes available in the system.
Primary
Primary colors appears most frequently across the website and components. They used for important actions, components, blocks, etc. You can create more complex color schemes by adding accent color.
Accent
Neutrals
Neutral colors are mainly used for the interface elements such as texts, dividers, borders and neutral backgrounds.
Semantic
Semantic colors used to provide visual feedback on users input such as errors, warnings, information messages, success messages etc. Important note that you can use those colors in any other cases.
Error
Warning
Success
Info
Black & White
Black and white color scales moved to a separate group, but also could be used for interface elements such as texts, dividers, borders and neutral backgrounds.
Black
White
Text colors
To style text elements you can use related class to a specific color. All text color classes looks like TC Primary-900, where TC=TextColor Primary=ColorGroup and 900=ColorLevel. Below you can see all text color classes available in the system.