Color
Core Token
The token can be found in color.json.
Color palette
| Token | Description | |
|---|---|---|
--ks-color-primary | High priority elements | |
--ks-color-fg | Default foreground color, most prevelant in copy text. | |
--ks-color-link | Hyperlink color | |
--ks-color-transparent | Elements featuring transparency |
Color scales
kickstartDS generates color scales based on your Core Token.
to-bg mixes in --ks-background-color-default (by default defined as --ks-color-fg-inverted).
alpha adds transparency.
Color scales are not linear. --ks-color-primary-alpha-3 doesn't mean, its alpha channel is 0.3. It's just the third most translucent variant. The same applies to to-bg.
We use a cubic Bézier curve to calculate the scales. This way there are more gradations at the beginning and at the end of the scale.
For example, for hover or active states of a component you often need slight shades of a color. With a linear scaling the distance between the shades would be too large. In addition, the colors in the middle of the scale are almost useless, because they have too little contrast in combination with the background color.
alpha/to-bg scaleopacity/bg-mixin| to-bg | |
|---|---|
--ks-color-primary-to-bg-1 | |
--ks-color-primary-to-bg-2 | |
--ks-color-primary-to-bg-3 | |
--ks-color-primary-to-bg-4 | |
--ks-color-primary-to-bg-5 | |
--ks-color-primary-to-bg-6 | |
--ks-color-primary-to-bg-7 | |
--ks-color-primary-to-bg-8 | |
--ks-color-primary-to-bg-9 |
| alpha | |
|---|---|
--ks-color-primary-alpha-1 | |
--ks-color-primary-alpha-2 | |
--ks-color-primary-alpha-3 | |
--ks-color-primary-alpha-4 | |
--ks-color-primary-alpha-5 | |
--ks-color-primary-alpha-6 | |
--ks-color-primary-alpha-7 | |
--ks-color-primary-alpha-8 | |
--ks-color-primary-alpha-9 |
Semantic Token
Color variants
| Variant | Description |
|---|---|
primary | Highlights elements. The most prevalent color of the design system. |
accent | Highlights elements that are hierarchically second to primary elements. |
default | The default color of elements. Used as a fallback. |
clear | Elements featuring transparency |
interface | Signals user interactability |
Color categories
| Category | Description |
|---|---|
background-color | Highlights elements. The most prevalent color of the design system. |
text-color | Highlights elements that are hierarchically second to primary elements. |
border-color | The default background-color. Used on page the background. |
Color concepts
interactive applies to primary, interface & clear variants.
translucent applies to primary variant.
| Concept | Description |
|---|---|
interactive | Signals interactability |
interactive-hover | State of the element on hover |
interactive-active | State of the element when active |
translucent | Element has some form of opacity |
Figma
See the following Page in our Figma tokens file for a visual representation: