Github

See how we structured and built this site using Ether to power all of its styling.

CodePen

Browse source code, generators, and examples of how Ether's libraries work.

Medium

Read the rationale behind the libraries along with other design system lessons.

About

Visit The Scenery

Meet the team behind Ether and see what else we work on during the day.

Contact

Get In Touch

If you need help implementing Ether on your own project or product, just holler.

Color

Intro to Color

This library seeks to define not only the individual hex values that the design system uses but go one (much harder) step forward: show how designers use colors in the palette so developers can easily apply them in a consistent manner.

Unique to this system, definition and application are both defined separately using an Abstraction Layer:

  1. Core Variables define values (color-focused)
  2. Usage Variables define use of values (application-focused)

Core Variables map to hex values across multiple stops that define a tonal range for each color—2 darker and 4 lighter. These provide all the variations necessary for the Usage Variables. We suggest hand-picking variables to make sure they don't color-shift.

Usage Variables map to Core Variables and define how colors are used across the app or website. These can easily change to different mappings without requiring any refactoring of code or scrubbing for rogue hex values.

Core Principles

Don’t want to read the article? Here’s the long and short of it.

  1. Abstract color definition from use
  2. Balance need for tonal variation with variable bloat
  3. Show rationale of color use not just definition

Code

The Ether Color System concept is broken into a minimum of two separate files: colors which contains each color name variable set to a specific hex value, and color-variables, which maps usage variables to the color definitions.

They are built from our "base-and-stop" color model.

Base-and-Stop Colors

$light-110

#B6C7D4

$light

#E2EAF0

$light-90

#EFF4F8

$white

#FFFFFF

$dark

#0F1D2B

$dark-85

#3F4F5F

$dark-75

#5B6B7C

$dark-50

#91A3B0

$blue--light

#DDF9FF

$blue--light-1

#B0E0EC

$blue--light-2

#99D3E1

$blue--light-3

#82C0D0

$blue

#519CB0

$blue--dark

#3A889D

$blue--dark-1

#27768B

$green--light

#C9F6EB

$green--light-1

#ADE7D9

$green--light-2

#98DFCE

$green--light-3

#79D7C0

$green

#5CCCB1

$green--dark

#41B99C

$green--dark-1

#26A486

We highlighy recommend using a CSS pre-processor such as Sass to work with variables. If CSS Variable support is desired, you will need to add a PostCSS script to your build system in order to use this feature in all browsers.

For CSS Variable support, we recommend post-css-variables. The example code will be in Sass.

_colors.scss

This file contains each color definition which includes layout colors as well as semantic color options. For example, this is a shortened colors.scss file which is based off the styles for this website.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
 -----------------
 Sample Color Definitions
 -----------------
**/

// Layout Colors
$dark: #0F1D2B;
$dark-85: #3F4F5F;
$dark-75: #5B6B7C;
$dark-50: #91A3B0;
$light-110: #B6C7D4;
$light: #E2EAF0;
$light-90: #EFF4F8;
$white: #FFFFFF;

// Core Colors
$blue: #519CB0;
$blue--light: #DDF9FF;
$blue--light-1: #B0E0EC;
$blue--light-2: #99D3E1;
$blue--light-3: #82C0D0;
$blue--dark: #3A889D;
$blue--dark-1: #27768B;

$green: #5CCCB1;
$green--light: #C9F6EB;
$green--light-1: #ADE7D9;
$green--light-2: #98DFCE;
$green--light-3: #79D7C0;
$green--dark: #41B99C;
$green--dark-1: #26A486;

_color-variables.scss

The variable mappings file is where all the magic happens. Here, we take the colors we definied in colors.scss and start connecting them to the design system usage. They can be as numerous as necessary, but each mapping should be purposeful. Try to avoid creating too many duplicate entries if items can be pared down to a single mapping.

This file will be large but extremely flexible for even the largest design systems.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
 -----------------
 Sample Color Variables and Mappings
 -----------------
**/

@import "colors";

// Semantic Colors
$color--success: $green;
$color--info: $blue;
$color--warning: $yellow;
$color--danger: $red;

// Typography
$type--dark: $dark;
$type--medium: $dark-75;
$type--light: $dark-50;
$type--white: $white;
$type--accent: $red;
$type--link: $dark-85;
$type--success: $color--success;
$type--info: $color--info;
$type--warning: $color--warning;
$type--danger: $color--danger;

// Icon Colors
$icon--dark: $dark;
$icon--white: $white;
$icon--accent: $red;
$icon--success: $color--success;
$icon--info: $color--info;
$icon--warning: $color--warning;
$icon--danger: $color--danger;

// Buttons
$button--primary-background: $red;
$button--primary-border: $red;
$button--primary-text-color: $white;

$button--primary-hover-background: $red--dark;
$button--primary-hover-border: $red--dark;
$button--primary-hover-text-color: $white;

Implementation

Now that we have mappings, it's extremely simple to bring these values into the final implementation step for any element or component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 -----------------
 Sample Button Color Implementation
 -----------------
**/

.button {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;

  &.primary {
    background-color: $button--primary-background;
    border-color: $button--primary-border;
    color: $button--primary-text-color;

    &:hover {
      background-color: $button--primary-hover-background;
      border-color: $button--primary-hover-border;
      color: $button--primary-hover-text-color;
    }
  }
}

Implementation files are easy to maintain and do not care what any color values are. These values are kept safe and organized inside the single color-variables file.