Color
Tint stacks
-
color-navy-tint-80 #d1d4d8
-
color-navy-tint-60 #a3a9b2
-
color-navy-tint-40 #767f8b
-
color-navy-tint-20 #485465
-
color-navy-base #1a293e
-
color-navy-shade-20 #152132
-
color-navy-shade-40 #101925
-
color-navy-shade-60 #0a1019
-
color-navy-shade-80 #05080c
-
color-teal-tint-80 #cce6e9
-
color-teal-tint-60 #99cdd4
-
color-teal-tint-40 #66b3be
-
color-teal-tint-20 #339aa9
-
color-teal-base #008193
-
color-teal-shade-20 #006776
-
color-teal-shade-40 #004d58
-
color-teal-shade-60 #00343b
-
color-teal-shade-80 #001a1d
-
color-aqua-tint-80 #dcf7f9
-
color-aqua-tint-60 #baeff3
-
color-aqua-tint-40 #97e8ed
-
color-aqua-tint-20 #75e0e7
-
color-aqua-base #52d8e1
-
color-aqua-shade-20 #42adb4
-
color-aqua-shade-40 #318287
-
color-aqua-shade-60 #21565a
-
color-aqua-shade-80 #102b2d
-
color-foam-tint-40 #f7fafa
-
color-foam-tint-20 #f4f8f9
-
color-foam-base #f1f6f7
-
color-red-tint-90 #fbebea
-
color-red-base #da3a2f
-
color-red-shade-20 #ae2e26
-
color-yellow-tint-60 #fffa99
-
color-yellow-base #fff300
-
color-yellow-shade-80 #333100
-
color-blue-tint-90 #e6eeff
-
color-blue-base #0057ff
-
color-blue-shade-20 #0084cc
-
color-green-tint-80 #ccf6e1
-
color-green-base #00d268
-
color-green-shade-70 #003f1f
-
color-white #ffffff
-
color-gray-tint-90 #f2f2f2
-
color-gray-tint-80 #e6e6e6
-
color-gray-tint-70 #d9d9d9
-
color-gray-tint-60 #cccccc
-
color-gray-tint-50 #bfbfbf
-
color-gray-tint-40 #b3b3b3
-
color-gray-tint-30 #a6a6a6
-
color-gray-tint-20 #999999
-
color-gray-tint-10 #8d8d8d
-
color-gray-base #808080
-
color-gray-shade-10 #737373
-
color-gray-shade-20 #666666
-
color-gray-shade-30 #5a5a5a
-
color-gray-shade-40 #4d4d4d
-
color-gray-shade-50 #404040
-
color-gray-shade-60 #333333
-
color-gray-shade-70 #262626
-
color-gray-shade-80 #1a1a1a
-
color-gray-shade-90 #0d0d0d
-
color-black #000000
Colors as design tokens
All colors are defined in colors.yml
. Here we store the color name and hex-value.
# colors/props.yml
global:
category: 'brand-colors'
type: 'color'
props:
- name: 'color-navy-tint-80'
value: '#d1d4d8'
comment: 'Kognifai Navy 2017'
- name: 'color-navy-tint-60'
value: '#a3a9b2'
comment: 'Kognifai Navy 2017'
...
..
.
We then use a plugin for gulp called gulp-theo
made from the team at Salesforce.
Theo is a tool that transforms tokens from .yml
to any other format.
In our case, using the gulp task gulp:tokens
, we transform data from colors.yml
to _conf_colors.scss
and colors.config.json
.
_conf_colors.scss
is then used as variables for our scss codebase:
// Source: colors
// Kognifai Navy 2017
$color-navy-tint-80: #d1d4d8;
// Kognifai Navy 2017
$color-navy-tint-60: #a3a9b2;
And the config.colors.json
as data for rendering the color swatches on this page.
...
..
.
categories: [
{
name: '',
colors: [
{
context: {
// Kognifai Navy 2017
name: 'color-navy-tint-80',
hex: '#d1d4d8',
scss: '$color-color-navy-tint-80',
category: 'brand-colors'
}
},
{
context: {
// Kognifai Navy 2017
name: 'color-navy-tint-60',
hex: '#a3a9b2',
scss: '$color-color-navy-tint-60',
category: 'brand-colors'
}
},
...
..
.
Defining colors for context
When you want to build a new component, we define all colors used in this component as
component-scoped variables. In _colors.scss
we can specify:
// MyComponent
// ==========================================================================
$color-mycmponent-bg: $color-foam-base;
$color-mycomponent-txt: $color-navy-tint-20;
$color-mycomponent-txt-hover: $color-teal-base;
...
..
.
Here, all color-variables regarding color are prefixed with $color
, then the
component name -mycomponent
, followed by the element -bg
. Finally we add the
state -hover
. All colors used to define these variables should point to colors in
the original colors.yml
file.
Never define color-values directly in _colors.scss
.