A skincare e-commerce platform frontend built with Vue.js
A skincare e-commerce platform frontend built with Vue.js & TypeScript.Designed and implemented the complete user journey - from browsing and filtering products to managing the shopping cart and checkout process. The design aesthetic - warm tones, high-quality visuals and elegant typography is built to reflect the brand's luxurious and calming identity.
Refresh your skin,
love yourself,
renew your glow.
Strategic design engineered to sell
Vue.js's simplicity & reactivity let me build exactly what I envisioned while TailwindCSS gave me control of every pixel, turning design intentions into reality.
The result is a codebase that's easy to maintain, components that are easy to scale, and an interface that feels easy to use.
Design System
Color Palette
Primary
#e9e8e1
Light Beige
#f2f3ee
Dark Green
#3f4a3d
Text Light
#a0a0a0
Borders
#DDDDDD
Typography
Heading 1
32px / Font Weight: 600 / Line Height: 1.2
Heading 2
24px / Font Weight: 600 / Line Height: 1.3
Body Text Regular
18px / Font Weight: 400 / Line Height: 1.6
Body Text Light
18px / Font Weight: 300 / Line Height: 1.6
Iconography
UI Highlights
Every pixel serves a purpose
The high contrast between carefully chosen colors creates what psychologists call "processing fluency" - the easier something is to visually understand, the more trustworthy it feels. This specific contrast ratio reduces cognitive load, allowing users to focus on purchasing, not processing.
Strategic design engineered to sell
Once users land on the product page, they can quickly scan and immediately see what matters most — the product details, pricing, and benefits at a glance.
The interface was designed to make these details visually clear without needing to dig through information.
When a user finds a product they like, a single click adds it to their cart and the checkout process feels inevitable, not forced.
Click here to view this project on my github.