Everlywell design language system

─── 2020
Everlywell's design language system needed to be flexible and AAA accessible.
Though it was a challenge to create a system that utilizes 8 brand colors, each color found a purpose.
1 / 10

Type scales

Our scale, text styles’ specs, 
and their usage.

Typeface scales are based on 
at  1.333 (Perfect Fourth)

Spacing scale

A  8px base design system is being used to establish a visual rhythm within all the components. Having a spacing scale ensures design consistency within a design team and across all products.

1 rem = 16px

Color usage

Our two main primary colors are teal4 and green4. The primary usage for teal4 is in our Header text color. The primary use for green4 is in our interaction color.

Responsive
Grid

Guidelines for our grid at different breakpoints. Grids also ensure consistency in design files and production. Along with visual consistency, grids also make sure that each page's breakpoints look and behave the same way.

Documentation

All components are built with auto layout so they are flexible. They also have documentation that outlines uses cases and states.