Layer is a vegan-collagen skincare drink sold as an e-commerce experience — from the can to the checkout. I designed the identity, the full storefront, and a token-based design system that keeps the whole thing consistent at scale.
A wellness drink that has to sell itself
A direct-to-consumer skincare-in-a-can brand. Collagen, anthocyanins and wild-berry antioxidants, positioned as beauty you drink — and an online store built to convert on that promise.
- ■Ingestible beauty is a trust sell — claims need proof, not hype
- ■One SKU, many pages — home, shop, product, cart, ethos all sell the same can
- ■Desktop + mobile parity without maintaining two design languages
- ■A distinctive editorial identity that reads premium, not clinical
- ■A conversion-minded storefront: benefit-led, proof-backed, low friction
- ■A token system so every screen ships from one source of truth
One red, one cream, one typewriter
Tokens, components, then screens
Five semantic colors. Every value in code traces to a named Figma variable — no hex literals in components.
Two families. Courier for voice, Space Mono for interface — a deliberate constraint that makes every screen feel like the same publication.
Buttons, cards, and layout grid are all built from an 8pt scale. Documented as its own page in Figma: Colors, Typography, Buttons, Cards, Layout.
Every page sells the same can
"Skincare in a can." A full-bleed hero, the flavour spotlight, and a benefit-led scroll that earns the add-to-cart.
Ingredients, clinical claims, and a sticky buy-box. Proof lives next to the price, not three scrolls away.
Bundles and subscriptions in a tidy monospace grid — one product, merchandised many ways.
The brand story — vegan collagen, sourcing, and the ritual of a can a day. Editorial, image-forward.
A friction-free drawer with a free-shipping progress bar that nudges the basket over the line.
Even the error page stays on-brand. Five mobile screens mirror desktop from the same tokens.
Build a box — try the cart
What you'll feel, not what's inside
Visible luminosity from collagen and antioxidants that work from within.
Marine peptides support firmness and reduce the appearance of fine lines.
Hyaluronic acid locks in moisture for plump, dewy skin that lasts.
Antioxidants shield against environmental stressors and UV damage.
Clinically-backed ingredients, designed to deliver visible results in as little as 14 days. VIEW CLINICAL STUDIES →
#LayerWellness
Real results from real people. The gallery turns customers into the ad.
A system that ships itself
desktop + mobile screens from one component library
colors · 2 typefaces · one 8pt spacing scale
source of truth — tokens drive brand, store, and mobile
- ■A restrictive palette is a gift — one red forced every hierarchy decision to be about weight and space, not color.
- ■Designing the identity and the store together meant the packaging and the checkout speak the same language.
- ■Monospace UI type is a strong brand signal — but it needs generous line-height to stay readable in body copy.
- ■Build the storefront in code with the Figma variables wired to CSS custom properties.
- ■Add a second flavour line and test the palette's elasticity.
- ■Motion pass — subtle can rotations and scroll-linked reveals.
One can, one crimson, one typewriter — a skincare brand and its entire storefront built from a single design system that makes every new page a five-minute job.