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.