Colors
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.
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.