designsystems_rf.jpg

Design Systems

For this skincare brand, there was a need to set up a design system by initiating a conversation with brand, UX, and engineering. Alignment between patterns, layouts, and interactions were defined as we made connections to the brand’s look and voice.

Color

Color

After performing an audit of all the various tones we used across sales, marketing, and the website, we were able to narrow down core colors. Understanding each use case was important to define across various teams

Clarity-Color_1600.png
 The Grid was another core part of our design system that I was urged to define. Grids set up a structure for the site experience and enables the transition from breakpoint to breakpoint, screen to screen. We created several templates appropriate for

The Grid was another core part of our design system that I was urged to define. Grids set up a structure for the site experience and enables the transition from breakpoint to breakpoint, screen to screen. We created several templates appropriate for main content types throughout the experience.

Clarity-Grid-Columns_1600.png
Clarity-Grid-Columns_1600b.png
Clarity-Grid-Template_1600a.png
Clarity-Grid-Template_1600b.png
Clarity-Grid-Template_1600c.png
 Typography can play a key role in bringing a system together. By minimizing the style, scale, and various weights of just a couple fonts can already clarify the brand’s identity in the product.  We went through all screens of the site experience to

Typography can play a key role in bringing a system together. By minimizing the style, scale, and various weights of just a couple fonts can already clarify the brand’s identity in the product.

We went through all screens of the site experience to gather headlines, body copy styles, and informational text and pared down the complexity and diversity. By defining the usage of type settings, we see a few different ways to use the same type and identity

Clarity-Typography-Overview-Font_1600.jpg
Clarity-Typography-Overview-Type-Treatment_1600a.png
Clarity-Typography-Overview-Type-Treatment_1600a.jpg
Clarity-Typography-Overview-Baseline-Grid_1600.png
Clarity-Typography-Usage_1600.png
Clarity-Typography-Usage_1600b.png
Clarity-Typography-Usage_1600c.png
space.jpg