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