DESIGN SYSTEM CASE STUDY
A design system for Zovi
Zovi is a direct-to-consumer skincare and deodorant brand. This case study documents the visual language, typography, color system, and UI components built for their site from the hero to the last accordion.
UI/UX Design
Design System
E-commerce
Framer
01 — COLOR
Palette
Warm neutrals grounded by a restrained set of accents — purple for commerce moments, sage and terracotta for ingredient storytelling.
#F8F4EE
Cream
Page backgrounds
#241D15
Ink
Headings, buttons
#5C5344
Taupe
Body copy
#9081D9
Lavender
Primary accent, CTAs
#B7C9A8
Sage
Body glow oil accent
#D89060
Terracotta
Deodorant accent
#FFFFFF
White
Cards, surfaces
#EFE6D8
Sand
Section backgrounds
02 — TYPOGRAPHY
Type System
Instrument Serif carries editorial moments such as headlines, section titles, and pull quotes. Satoshi handles everything functional: navigation, labels, and body copy.
Glow That Moves
Heading 1 · Instrument Serif · 64px / 400
Good Ingredients. Real Benefits.
Heading 2 · Instrument Serif · 48px / 400
Skin First
Heading 3 · Satoshi · 24px / 700
Shop Deodorants
Label / Nav · Satoshi · 14.4px / 500
A powerful antioxidant that helps protect and condition the skin.
Body · Satoshi · 16px / 400
TICKETS REMAINING
Micro / Eyebrow · Satoshi · 12px / 600
03 — COMPONENTS
UI Components
Rounded, tactile, and consistent. Every interactive element shares the same 100px radius and a quiet hover response.
Buttons
Shop Zovi
Add to Cart
Learn More
Pill Switch
Body Glow Oils
Deodorants
04 — ICONOGRAPHY
Accent Icons
Thin outline icons in warm accent tones reinforce the brand’s ingredient story throughout the site.
Feel Good
Skin First
Keep It Simple
Everyday Essentials
THANK YOU
Designed to feel like Zovi, everywhere.
Visit website
From the hero’s first fade-in to the last footer link, every detail on Zovi was built to feel warm, considered, and unmistakably on-brand.
Design & build by Mihaela Mabić