Sebum is a skincare landing page template built for oily skin beauty brands. It uses an overlap and layered layout with a plum and champagne color system, scroll-triggered product stacking, a skin quiz path, and a persistent routine tray. Every section sells through texture and feeling, not just ingredient lists.
by Rocket studio
Loading preview…
Quick summary
Sebum is a single-page landing page template designed for oily skin skincare brands selling serums, cleansers, and moisture veils. It pairs a deep plum and muted champagne visual identity with scroll-driven product stacking, a three-question skin quiz, and an always-visible routine tray. The result is a shoppable, sensory experience built for customers who are done being overpromised.
Who this template is for
This template is built for beauty founders and product marketers who sell oily skin skincare products and need a page that converts browsers into buyers. It suits brands with small-to-medium product lines that want a boutique, editorial feel without a bloated site structure.
Oily skin skincare brands launching a curated product line
Beauty entrepreneurs who want to offer both direct shopping and a guided skin quiz path
Founders who want a confident, non-pastel visual identity that speaks to a sophisticated adult audience
What problem this template solves
Most skincare landing pages either dump a product grid on visitors or bury the catalog behind a lengthy quiz funnel. Neither approach respects how real buyers shop. Some already know what they want. Others need to be guided before they trust a cart. This template solves both problems at once by offering two clear entry points into the same catalog without making visitors choose between browsing and being understood.
Oily skin customers are skeptical of generic claims, and this layout leads with sensory description rather than ingredient overload
A visible routine tray lets buyers build a full regimen without losing context as they scroll
The skin quiz path gives newcomers a low-pressure way to enter the catalog and receive a curated recommendation
What you get with this template
You get a fully designed, single-page landing page layout with distinct, purpose-built sections that move visitors from curiosity to cart. The layout is structured around overlapping product cards, gradient section transitions, and floating ingredient callouts that create a sense of depth and ritual.
A macro close-up hero section with a fade-in headline and dual call-to-action paths
Theme
Soft Gradient
Creative direction
Sensory Appeal
Color system
Plum Executive
Style
Overlap/Layered
Direction
Marketplace/Multi
Page Sections
Macro Close-up Hero with Dual Ctas
Scroll-driven Product Card Stacking
Persistent Routine Tray
Three-question Skin Quiz
Floating Ingredient Callout Chips
Sensory Section Animations
Related questions
Can I customize the colors to match my existing brand?
Does the skin quiz connect to a specific platform or tool?
Can each product card link to its own product page?
Is this template suitable for a brand with only two or three products?
What does 'Marketplace and Multi-destination' mean for this layout?
Scroll-driven product card stacking that builds the skincare routine in spatial sequence
A three-question skin quiz that outputs a curated bundle, plus a persistent routine tray pinned to the viewport
Feature list
This template includes purpose-built components that reflect how oily skin buyers discover, evaluate, and commit to a skincare routine.
Macro Close-Up Hero Section
The header opens with an extreme close-up of real skin, pores visible and unretouched. A single bead of serum sits on the surface catching light, refracting a soft plum-to-champagne gradient. A headline fades in over the image in thin, tracked-out type, setting the brand voice from the first frame.
Scroll-Driven Product Card Stacking
Product cards overlap and layer on top of each other as the visitor scrolls deeper. Each card introduces a product through what it feels like on contact, not just what it contains. The stacking sequence mirrors the steps of an actual skincare routine, building it spatially rather than through a numbered list.
Persistent Routine Tray
An "Add to Routine" button on every product card feeds a visible routine tray pinned to the bottom of the viewport. Visitors can see their selected products accumulate in real time as they scroll. This keeps the purchase intent visible throughout the entire page experience.
Three-Question Skin Quiz Path
A "Build My Regimen" quiz asks three focused questions: how oily skin gets by midday, whether skin is sensitive or resilient, and whether the buyer wears makeup or goes bare-faced. The quiz outputs a curated product bundle tailored to the answers. It is offered as a softer secondary path for visitors who need guidance before they commit.
Floating Ingredient Callouts
Ingredient names like niacinamide, zinc PCA, and green tea appear as translucent floating chips that drift across sections. They behave as if suspended in formula, adding visual texture without cluttering the layout. This keeps the ingredient story visible without turning the page into a technical data sheet.
Sensory Section Animations
A gel cleanser section ripples with a subtle water animation. A mattifying primer section uses a matte-to-satin gradient that shifts as the visitor scrolls, mimicking the finish on skin. These motion details reinforce the sensory creative direction and hold attention during the scroll.
Page sections overview
Section
Purpose
Hero close-up
Opens with unretouched skin and a serum bead; introduces brand voice and dual calls to action
Gel cleanser section
Describes cleanser feel on contact with a ripple water animation
Mattifying primer section
Scroll-shift gradient mimics the matte-to-satin finish on skin
Product card stack
Layered cards build the skincare routine in scroll sequence
Ingredient callout zone
Floating translucent chips highlight key formula ingredients
Skin quiz path
Three-question flow outputs a curated regimen bundle
The visual identity uses the Plum Executive color system within a Soft Gradient theme. Deep plum anchors headers and navigation. Dusty mauve washes across gradient section transitions. Muted champagne serves as the primary background tone. Polished amethyst lights up calls to action and hover states. Gradients bleed from champagne into mauve the way product absorbs into skin. Layered cards carry soft drop shadows that make every product tile feel as though it floats just above the surface.
Color palette: deep plum (#3D1F3E), dusty mauve (#9B7292), muted champagne (#F2E6D9), polished amethyst (#7B5EA7)
Typography uses thin, tracked-out type on the hero and clean readable weights throughout product sections
Overlapping cards with soft drop shadows create depth and a boutique jewelry-box aesthetic
Mobile & speed optimization
The overlap and layered layout is designed to translate its depth across screen sizes. Scroll-driven animations and gradient transitions are built to work within a single-page structure that avoids unnecessary page weight from multi-page navigation or complex routing.
Overlapping card layouts reflow cleanly for smaller viewports without losing the layered visual hierarchy
The persistent routine tray is designed to stay pinned and usable at the bottom of mobile screens
Gradient transitions and floating ingredient chips scale proportionally so the sensory feel holds on any device
How this template helps you convert
The template is built around two proven truths: some visitors already know what they want, and others need to feel understood before they buy. Every design and layout decision serves one of these two buyer states.
The dual call-to-action structure on the hero gives confident buyers a direct path to shop and gives newcomers a low-pressure quiz entry point, reducing the friction that causes oily skin shoppers to bounce before they reach a product.
The persistent routine tray keeps purchase intent alive throughout the scroll by letting visitors build a visible regimen in real time, so the decision to buy feels like a natural conclusion rather than an interruption.
Other information about this template
This template is categorized under Beauty and Personal Care, specifically the Oily Skin Beauty subcategory. It is built for the oily skin skincare brand niche where trust-building copy and sensory design language are more effective than clinical ingredient dumps. The Overlap and Layered template style, paired with the Sensory Appeal creative direction and Macro Close-Up header concept, makes it a strong fit for brands positioning themselves as the thoughtful alternative to aggressive oil-control products.
Template style: Overlap and Layered within a Soft Gradient theme
Landing page direction: Marketplace and Multi-destination, supporting independent product card shopping alongside a guided quiz bundle path
Best suited for brands whose audience has been disappointed by oil-free products that over-stripped or under-delivered
