Skip to main content

Color

Core Token

The token can be found in color.json.

Color palette

TokenDescription
--ks-color-primaryHigh priority elements
--ks-color-fgDefault foreground color, most prevelant in copy text.
--ks-color-linkHyperlink color
--ks-color-transparentElements featuring transparency
color.json
tokens.css
Copy

_23
{
_23
"ks": {
_23
"color": {
_23
"primary": {
_23
"base": {
_23
"value": {
_23
"r": 51,
_23
"g": 51,
_23
"b": 51,
_23
"a": 1
_23
},
_23
"attributes": {
_23
"category": "color"
_23
},
_23
"token": {
_23
"category": "Colors: Primary",
_23
"presenter": "Color"
_23
}
_23
}
_23
}
_23
}
_23
}
_23
}

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 scale
1
2
3
4
5
6
7
8
9
opacity/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
color.json
token.css
Copy

_163
{
_163
"ks": {
_163
"color": {
_163
"primary": {
_163
"alpha": {
_163
"1": {
_163
"base": {
_163
"value": {
_163
"r": 51,
_163
"g": 51,
_163
"b": 51,
_163
"a": 0.05
_163
},
_163
"attributes": {
_163
"category": "color"
_163
},
_163
"token": {
_163
"category": "Colors: Primary",
_163
"presenter": "Color"
_163
}
_163
}
_163
},
_163
"2": {
_163
"base": {
_163
"value": {
_163
"r": 51,
_163
"g": 51,
_163
"b": 51,
_163
"a": 0.13
_163
},

Semantic Token

Color variants

VariantDescription
primaryHighlights elements. The most prevalent color of the design system.
accentHighlights elements that are hierarchically second to primary elements.
defaultThe default color of elements. Used as a fallback.
clearElements featuring transparency
interfaceSignals user interactability

Color categories

CategoryDescription
background-colorHighlights elements. The most prevalent color of the design system.
text-colorHighlights elements that are hierarchically second to primary elements.
border-colorThe default background-color. Used on page the background.

Color concepts

interactive applies to primary, interface & clear variants. translucent applies to primary variant.

ConceptDescription
interactiveSignals interactability
interactive-hoverState of the element on hover
interactive-activeState of the element when active
translucentElement has some form of opacity
background-color.json
tokens.css
Copy

_56
{
_56
"ks": {
_56
"background-color": {
_56
"primary": {
_56
"interactive": {
_56
"base": {
_56
"value": "{ks.color.primary.base}",
_56
"attributes": {
_56
"category": "color"
_56
},
_56
"token": {
_56
"category": "Colors: Background Primary",
_56
"presenter": "Color"
_56
}
_56
},
_56
"hover": {
_56
"base": {
_56
"value": "{ks.color.primary.to-bg.2.base}",
_56
"attributes": {
_56
"category": "color"
_56
},
_56
"token": {
_56
"category": "Colors: Background Primary",
_56
"presenter": "Color"
_56
}
_56
}
_56
},
_56
"active": {
_56
"base": {
_56
"value": "{ks.color.primary.to-bg.3.base}",

Figma

See the following Page in our Figma tokens file for a visual representation: