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
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.
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.
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.
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.




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
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?
This template includes purpose-built components that reflect how oily skin buyers discover, evaluate, and commit to a skincare routine.
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.
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.
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.
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.
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.
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.
| 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 |
| Routine tray | Persistent bottom-viewport tray accumulates selected products |
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.
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.
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.
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.