Colors
Sprkl uses Neutral, Primary, Accent and Semantic (Success, Warning, Error and Info) scales. There's no need to use or customize all colors. You can start by adding components to your layout and changing the swatches for this specific components.
Supported:
Background colors
To apply color background to an element add a class name related to a specific color. Class names for background colors are constructed like this: C B Neutral-100 (Color Background ColorName-ColorLevel). Below you can see all background color classes available in the system.
Primary
A primary color is the color displayed most frequently across the website and components. Primary color group is brand related. It is used for primary and important action and navigation elements such as buttons, links, tabs etc.
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 apply color to a text element add a class name related to a specific color. Class names for text colors are constructed like this: C T Neutral-100 (Color Text ColorName-ColorLevel). Below you can see all text color classes available in the system.