Color
A robust and vibrant color palette that prioritizes accessibility.
Sipster's color system includes 12 base colors, which are each complemented by 5 tints/shades. Combined, this creates a full 11-swatch color ramp for each of those 12 base colors. These color ramps are named on a simple scale ranging from 05 to 100 , with the base color serving as the value of 50.
These color ramps are programmatically generated using the variables and maps inside the _colors.scss partial. It is strongly recommended to not edit or otherwise manipulate this core color system unless you are a member of the 2600Hz Design Systems team.
Applying Color
Whether you're building components and patterns for Sipster or exploring theme customization in a project, you will be referencing the raw color palette at some point.
Design: Figma Library
The SDS Components Figma library will contain all the Theme color 'tokens' (style hooks using CSS Custom Properties), and this will be the majority of how color is applied throughout design projects. However, those theme and component tokens derive their initial values from the SDS Core color palette, so understanding how color works within the SDS Core Figma library is still important.
The SDS Core color palette is provided as Figma variables, mapping directly to the color ramps shown above.
These Core color variables are already assigned as 'alias' values in the SDS Components Figma library, ensuring that components and themes are always using the correct colors. They are also available to be used throughout designs if/when a theme token doesn't provide the desired style or outcome.
Development: SCSS Color Function
Just like in design, the preferred method for adding color styles to projects will be through theming and tokens (style hooks).
However, whether you're building components and patterns for Sipster or exploring theme customization in a project, you will still be referencing the raw color palette at some point. To facilitate this, Sipster provides a custom color function: sds-color().
This function allows you to pass the desired color (required) and scale value (optional) parameters in order to easily add any color from the approved palette. As noted, the scale $value is an optional parameter that will default to the 'base', or 50 value if not specified.
sds-color($color, $value);The sds-color() function can be implemented in any CSS property that accepts a color value (all colors currently resolve to a hex code).
Example:
// HTML elements and CSS selectors
h1 {
color: sds-color(blue);
border-bottom: 1px solid sds-color(neutral, 30);
}
.myCustomClass {
background: sds-color(white);
color: sds-color(neutral, 100);
}
// Scoped to CSS Custom Properties ('Tokens')
:root {
--sds_theme_color_primary: #{sds-color(blue, 60)};
--sds_theme_color_primary_interactive: #{sds-color(blue, 70)};
}Compiled CSS:
/* HTML elements and CSS selectors */
h1 {
color: #3579F5;
border-bottom: 1px solid #AAAAAA;
}
.myCustomClass {
background: #FFFFFF;
color: #141414;
}
/* Scoped to CSS Custom Properties ('Tokens') */
:root {
--sds_theme_color_primary: #0C5BEC;
--sds_theme_color_primary_interactive: #0947B9;
}Notice in the example above where the sds-color function is used to assign a value to a CSS Custom Property. Any Sass related syntax such as variables or functions need to be interpolated #{} when being assigned to Custom Properties. Learn more about Sass Interpolation.
Last updated