Color

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-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-aqua-01 #ecfcfe
• color-aqua-02 #c6f7fc
• color-aqua-03 #a0f2fa
• color-aqua-04 #81eef9
• color-aqua-05 #5eecfa
• color-aqua-06 #2bdeee
• color-aqua-07 #25bbc8
• color-aqua-08 #1f929c
• color-aqua-09 #15686f
• color-aqua-10 #082d30
• 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-grey-01 #f6f6f6
• color-grey-02 #e2e6e8
• color-grey-03 #d1d6d9
• color-grey-04 #bac0c4
• color-grey-05 #90959e
• color-grey-06 #71767a
• color-grey-07 #434b52
• color-grey-08 #373c41
• color-grey-09 #262a2f
• color-grey-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-blue-04'
    value: '#5EC3FA'
    comment: 'Triton Blue'
  - name: 'color-blue-06'
    value: '#03A2F8'
    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
$color-blue-04: #5EC3FA;
$color-blue-07: #03A2F8;

And the colors.config.json as data for rendering the color swatches on this page.

...
..
.
categories: [
    {
        name: '',
        colors: [
            {
                context: {
                    // Triton Blue
                    name: 'color-blue-04',
                    hex: '#5EC3FA',
                    scss: '$color-blue-04',
                    category: 'brand-colors'
                }
            },
            {
                context: {
                    // Kognifai Navy 2017
                    name: 'color-blue-06',
                    hex: '#03A2F8',
                    scss: '$color-blue-06',
                    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-day-base;
$color-mycomponent-txt:             $color-blue-02;
$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.