Littoral
Skincare sorted by how deep it goes
About
🛠️ Type: Own product
🗓️ Start Date: Oct 2026
🏁 Finish Date: Oct 2026
Status
Completed
Overview
Concept skincare brand: identity, SVG packaging system and a working storefront, built in Vite + TypeScript
Littoral is a concept skincare line, invented for this project, and everything a new brand needs before launch: the identity, the packaging and a shop to sell it in.
The idea carries the whole thing. Each of the eight formulas is named for a band of the shore, from the splash zone at the top to the water below the lowest tide; lighter steps sit high, richer ones deep, and the routine runs downhill. The home page draws that shore with the packs on it and a tide you can move. The logo is set dry above a waterline and wet below it, and so is every label.
Evidence
What it looks like running
The home page: a cross-section of a rocky shore with the eight formulas placed by zone, and a tide that rises over them The packaging system: five vessel shapes, each label carrying a waterline set by the formula's zone Brand guidelines: logo variants, clear space, palette with measured contrast, type scale and tone of voice The collection page, filtered by skin type and concern A product page on a phone: ingredients and a pack you can turn to read the back label
Engineering
How it was built
Design & identity
- Logo drawn from SVG strokes, with a dry and a wet half
- Brand guidelines: logo variants and misuse, clear space, palette, WCAG contrast table, type scale, tone of voice
Frontend
- Vite and TypeScript, no framework, hash routing, about 19 kB of gzipped JavaScript
- Generated SVG packaging in five vessel shapes, with a rotatable viewer
- Collection filters by skin type and concern, kept in the URL
- Cart in localStorage and a clearly labelled demo checkout
Applied
Skills on this project
Next step
Ready to bring your project to life?
Schedule a free 30-minute strategy call with our team.
No sales call. You will talk to the engineer who would do the work, and you will get a written summary either way.