TINT — Clean Cosmetics
Made to be worn, not overworked.
A modern clean-beauty storefront for face, eyes, lips, cheek and brows — shopped by finish, undertone, skin type and benefit rather than a generic category list. A real 'find your shade' quiz with swatch-dot UI, a scroll-driven 'how a shade comes together' palette-morph story, self-hosted photography, and dark mode.
Role · Design + front-end build (client-side cart, demo checkout) · Updated Jul 2026
- 21 typed products across face / eyes / lips / cheek / brows with shade & variant swatches
- 8 pages: home (quiz + story), filterable shop, product, cart, checkout, order, about, 404
- 5-facet data-driven filter engine (category, finish, undertone, skin type, benefit), URL-shareable
- 32 real self-hosted photos (WebP, credited in ATTRIBUTIONS.md)
- Delivery
- 24–48h
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · Headless commerce (Shopify / Medusa)
Swap the static catalogue + client cart for a headless commerce API — products, shades and orders move to the commerce admin; the faceted filter UI stays.
Delivered as full Next.js source. Swap the catalogue + facets for your ranges, retheme the palette, and point the cart at a headless commerce API — products and filters are typed data.
What makes it special
Filters that match how you shop
Five tailored facets — category, finish, undertone, skin type, benefit — not a generic list. Toggle a finish and the shelf refilters instantly, URL-synced and shareable.
A 'find your shade' quiz
A real 3-question flow built off the same facet data the shop uses, with swatch-dot UI — it hands off straight into the live filters, so the two can never disagree.
Scroll-driven 'making of a shade'
A pinned scrollytelling story morphs the whole palette warm→cool as you scroll. Fully reduced-motion safe.
Real, self-hosted photography
32 curl-verified free-license photos, converted to WebP at build, zero external runtime requests, explicit dimensions for ~0 CLS.
The full loop, honestly
Shop → product → cart → checkout → order confirmation, clearly labelled as a demo. Dark mode + WCAG 2.2 AA throughout.
What’s included
- 21 typed products across face / eyes / lips / cheek / brows with shade & variant swatches
- 8 pages: home (quiz + story), filterable shop, product, cart, checkout, order, about, 404
- 5-facet data-driven filter engine (category, finish, undertone, skin type, benefit), URL-shareable
- 32 real self-hosted photos (WebP, credited in ATTRIBUTIONS.md)
- Client-side cart (Zustand + localStorage) + honestly-labelled front-end-only checkout demo
- Dark mode, reduced-motion throughout, SEO / JSON-LD / sitemap / robots / manifest
More Beauty & Skincare templates
Explore more collections
Frequently asked
- What do I get when I buy TINT?
- A one-time licence with the full, editable source code, including 21 typed products across face / eyes / lips / cheek / brows with shade & variant swatches, 8 pages: home (quiz + story), filterable shop, product, cart, checkout, order, about, 404, 5-facet data-driven filter engine (category, finish, undertone, skin type, benefit), url-shareable. 14 days setup support and free updates included.
- What is TINT built with?
- It's a Next.js online store, built with Next.js 15, TypeScript, Tailwind v4, Framer Motion, GSAP ScrollTrigger. You receive the complete source to host and extend anywhere.
- Can YantraCore customise TINT for my brand?
- Yes — buy it as-is for $2,600, or have YantraCore tailor it to your brand, content and requirements. Start from this page or commission a custom build.
- How fast is delivery?
- Delivery is 24–48h after purchase.
Make TINT yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.