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