Color

Colors are a vital part of the experinece of a brand. While defining the current color pallette, we reached for nuances commonly found in the marine environment of the North Atlantic.
Sea of colors

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.

Learn more

  • Theo, Theo is a an abstraction for transforming and formatting Design Tokens.
  • gulp-theo, Theo is a gulp plugin for transforming and formatting Design Tokens with Theo.