Littoral
Skincare sorted by how deep it goes
About
🗓️ Start Date: Oct 2026
🏁 Finish Date: Oct 2026
Status
Completed
Overview
Concept skincare brand: identity, rendered packaging, routine finder and a full storefront with checkout
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
Home: the shore chart with all eight formulas placed by zone, and a tide you can move Product page: a pack you can turn, sizes, quantity, benefits, key ingredients and directions The packaging system: five vessel shapes with lit, shaded renders and a waterline label per formula Routine finder: four questions, then a morning and a night routine added to the bag in one click The bag drawer with a free-shipping progress bar and quantity controls Brand guidelines: logo, clear space, palette with measured contrast, type, product renders, tone of voice A product page on a phone
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.