Color

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

Color Palette

  • color-teal-01 #d0e6ea
  • color-teal-02 #b9dadf
  • color-teal-03 #8bc2ca
  • color-teal-04 #5caab5
  • color-teal-05 #2e92a0
  • color-teal-06 #007a8c
  • color-teal-07 #006473
  • color-teal-08 #004e5a
  • color-teal-09 #003840
  • color-teal-10 #002227
  • color-navy-01 #e9f2f6
  • color-navy-02 #bfd9e5
  • color-navy-03 #7fb4cc
  • color-navy-04 #6aa7c4
  • color-navy-05 #408eb3
  • color-navy-06 #1676a3
  • color-navy-07 #136186
  • color-navy-08 #0f4c68
  • color-navy-09 #0a364b
  • color-navy-10 #06212d
  • color-blue-01 #e8f6fe
  • color-blue-02 #bae5fd
  • color-blue-03 #8cd4fb
  • color-blue-04 #5ec3fa
  • color-blue-05 #30b2f9
  • color-blue-06 #03a2f8
  • color-blue-07 #0385cb
  • color-blue-08 #02689e
  • color-blue-09 #024a71
  • color-blue-10 #012d44
  • color-red-01 #f6d7d8
  • color-red-02 #eeafb2
  • color-red-03 #ea9b9f
  • color-red-04 #e17378
  • color-red-05 #d94b52
  • color-red-06 #d1232c
  • color-red-07 #991a21
  • color-red-08 #86171d
  • color-red-09 #5f1014
  • color-red-10 #390a0c
  • color-pink-01 #f9ebf6
  • color-pink-02 #eec3e4
  • color-pink-03 #e39cd2
  • color-pink-04 #d874c0
  • color-pink-05 #cd4dae
  • color-pink-06 #c2269c
  • color-pink-07 #9f2080
  • color-pink-08 #7c1964
  • color-pink-09 #591247
  • color-pink-10 #350b2b
  • color-purple-01 #e5d9ed
  • color-purple-02 #d8c7e4
  • color-purple-03 #bea2d2
  • color-purple-04 #a47dc1
  • color-purple-05 #8a58af
  • color-purple-06 #71339e
  • color-purple-07 #5d2a82
  • color-purple-08 #482165
  • color-purple-09 #341848
  • color-purple-10 #1f0e2c
  • color-yellow-01 #faeeb9
  • color-yellow-02 #f8e8a2
  • color-yellow-03 #f7e38b
  • color-yellow-04 #f4d85c
  • color-yellow-05 #f1cd2e
  • color-yellow-06 #eec200
  • color-yellow-07 #ae8e00
  • color-yellow-08 #987c00
  • color-yellow-09 #6d5900
  • color-yellow-10 #413500
  • color-orange-01 #fdf4e7
  • color-orange-02 #fadeb9
  • color-orange-03 #f8c88b
  • color-orange-04 #f5b35c
  • color-orange-05 #f29d2e
  • color-orange-06 #f08800
  • color-orange-07 #c57000
  • color-orange-08 #995700
  • color-orange-09 #6e3e00
  • color-orange-10 #422600
  • color-green-01 #eaf7f2
  • color-green-02 #c1e9d9
  • color-green-03 #97dbc1
  • color-green-04 #6ecca8
  • color-green-05 #45be8f
  • color-green-06 #1cb077
  • color-green-07 #179162
  • color-green-08 #12714c
  • color-green-09 #0d5037
  • color-green-10 #083021
  • color-gray-01 #f6f6f6
  • color-gray-02 #e8e8e8
  • color-gray-03 #d4d4d6
  • color-gray-04 #c2c3c7
  • color-gray-05 #b2b4b5
  • color-gray-06 #a2a2a2
  • color-gray-07 #6f7176
  • color-gray-08 #373c41
  • color-gray-09 #2c3136
  • color-gray-10 #1d2024
  • color-white #ffffff
  • 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.