High importance is given to uncluttered experience that lets readers focus in on what matters most, which is the text. With that in mind, focus was given to accessibility and space when building out the Design System. In order to have a solid base, building a language around color, spacing, and typography was the first step.

How the color roles relate to the variants, and how they’re applied across the interface.

These color tokens allowed us to apply color in a consistent and meaningful way across the interface. They provide a layer of abstraction from the hex values themselves, making it easy to implement large-scale changes across the app.

Embracing white space is an important aspect of the ESV brand, and it's an often overlooked part of product design. The current design used spacing inconsistently throughout the app, creating rhythms that weren't harmonious. My goal was to create tokens to take the guesswork out of spacing and help deliver clear, functional layouts.

Starting with a spacing scale based on a geometric progression within a 4px grid, I used a t-shirt naming convention. This limited the amount of options to create a consistent and purposeful use of space.

The current app used 7 total icons, but needed an expanded set to welcome in new features. Discoveries made in the audit revealed inconsistent weights, colors, and frames.

The ESV digital experience uses Hoefler & Co. fonts Gotham and Sentinel for headings and body text respectively. The goal was to create a hierarchy that improved readability by leading the eye through the layout.