E-commerce • Latina brand · United States
Vive Cosmetics
We designed and built the online store for Vive Cosmetics, a cosmetics brand created by Latinas in California, working inside the identity the brand already had.
- Web design
- E-commerce
- Art production
- Client
- Vive Cosmetics
- Industry
- E-commerce · Cosmetics
- Year
- 2017
- Our role
- Web design, e-commerce and art production
- Scope
- United States
01
Context
Vive Cosmetics was born in California as a cosmetics brand made by Latinas for the Latinx community: matte liquid lipsticks with names that are a cultural statement — Café con Leche, Luchadora, María, Spanglish, Villana. They arrived with the identity settled, a complete brand manual and a list of technical requirements. What was missing was the store.
02
The challenge
The identity was deliberately loud: fuchsia, orange, yellow, apple green and turquoise, with a thick calligraphic display face. That works on packaging; in a store, the same colour competes with the product and tires the eye before the purchase. We had to build an e-commerce that could breathe without betraying a brand whose whole point is not being discreet.
03
Our approach
- 01
Reorder before designing
The content map we received called for seven sections. We consolidated them into five and renamed them in the brand's own voice — "Beauty con Cultura", "Say Hola", "The Vive Blog" — so the navigation said who the brand is, not just where to click.
- 02
A system so the colour doesn't drown the product
Diagonal cuts between sections, taken from the brand manual's own graphic device, and full-width flat colour bands as separators. Colour is used in blocks and at intervals, never as a continuous background: the palette identifies without competing with the product.
- 03
Producing every image for the web
We composed, retouched and cut the client's photography for each use: heroes with a gradient to black, product cutouts with transparency, colour and greyscale versions for interaction states, and each shade's lettering set over the image.
- 04
The brand's typeface, in the browser
The brand's display face only existed as a desktop file. We generated the full webfont kit so the identity would read on screen exactly as it does on the packaging — no substitutions, no text as images.
- 05
A store that operates, not a mockup
We built the catalogue on WooCommerce with a shop archive, sorting, product search, star ratings and reviews, a persistent cart, newsletter capture and shipping configured. Design and operation in the same engagement.
04
The solution
An online store that holds the brand's character while still letting the product show: five shades in the catalogue at launch, reviews signed by real customers, and an experience that works the same on desktop and on a phone.
5 shades
in the catalogue on launch day, expanded later
7 → 5
sections: navigation reordered and renamed in the brand's voice
Live store
catalogue, reviews, cart and subscription all operating
Have a project in mind?
Tell us your challenge and let's design the next success story together.
Start a project