Sebum is a masonry-style landing page template built for oily skin dermatology clinics. It combines editorial macro photography, a Merlot and Smoke color system, and a diagnostic quiz that re-sorts treatment cards in real time. Every section moves visitors from curiosity to a personalized protocol cart, ending at a sticky "Book My Skin Session" call to action.
by Rocket studio
Loading preview…
Quick summary
Sebum is a single-page dermatology template designed for oily skin clinics that sell targeted treatment protocols directly to patients. It opens with a near-black editorial hero, flows into a Pinterest-style masonry treatment grid, and closes with a sticky booking bar. The diagnostic quiz personalizes the grid mid-scroll, making each visit feel prescribed rather than browsed.
Who this template is for
This template is built for oily skin specialists who want to sell treatment protocols online without relying on generic clinic aesthetics. It suits practices ready to lead with clinical proof and let visitors self-identify before they ever speak to a provider.
Dermatology clinics specializing in sebum regulation and oily skin treatment
Skin care practitioners offering protocol-based direct sales at a fixed session price
Independent oily skin specialists who want a high-impact, mobile-first booking page
What problem this template solves
Most clinic pages rely on smiling models and broad service menus. Visitors with oily skin concerns leave without booking because nothing feels targeted to their exact pattern of shine, congestion, or barrier damage. This template closes that gap by matching visual proof to visitor identity before asking for a purchase.
Generic clinic designs fail to address the specific frustrations of midday breakthrough shine, failed over-the-counter routines, or unknowing moisture barrier damage
Treatment menus with no personalization force visitors to guess which protocol applies to them
Standard booking flows ask for commitment before showing any clinical outcome at skin-texture level
What you get with this template
You get a fully structured, single-page layout with five distinct sections, each serving a specific role in the conversion path. The design system, typography, animation direction, and interactive components are all specified and ready to build from.
A near-black editorial hero with a champagne fade-in headline and full-bleed macro skin photography
A masonry treatment grid with hover before-and-after texture transitions and woven social proof tiles
Theme
Marketplace Grid
Creative direction
Immersive Visual
Color system
Merlot & Smoke
Style
Masonry/Pinterest
Direction
Direct Sales
Page Sections
Editorial Hero with Ambient Glow
Masonry Treatment Grid
Three-tap Diagnostic Quiz
Scroll-linked Ambient Animation
Sticky Protocol Booking Bar
Woven Social Proof Tiles
Related questions
Who is the intended patient audience for this template?
Can I customize the treatment cards and protocol names?
How does the diagnostic quiz function on the page?
What does the sticky booking bar do?
Is this a single-page layout or a multi-page site?
A three-question diagnostic quiz that re-sorts the grid to surface recommended treatments first
A sticky bottom bar that tallies selected treatments and drives visitors to a $185 session booking
A linear single-row footer completing the page layout
Feature list
Editorial Hero with Ambient Glow
The hero section uses a dark full-bleed macro skin photograph lit from beneath with a diffused champagne glow. The near-black background at #1A1017 makes the skin texture the sole focal point. A single champagne headline fades in over the image, setting clinical authority before any treatment is introduced.
Masonry Treatment Grid
The treatment grid uses Pinterest-style varied tile sizes to display individual protocols including retinoid resurfacing, sebum-regulating peels, microbiome rebalancing, and LED purge therapy. Each card is photographed in a consistent moody, close-lit editorial style. Hovering any tile reveals a before-and-after texture shift between states.
Scroll-Linked Ambient Tone Shifts
As visitors scroll, the ambient background tone shifts gradually darker or lighter using GSAP stagger reveals and scroll-linked animation. The effect mirrors the skin's own oil cycle from morning to night, reinforcing the clinical narrative at every scroll depth without interrupting the browsing experience.
Three-Tap Diagnostic Quiz
A diagnostic quiz interrupts the masonry grid midway through the page. Three taps identify the visitor's shine pattern, breakout frequency, and current routine. After completion, the grid re-sorts to surface the most relevant treatments first, creating a personalized protocol view from a simple interaction.
Sticky Protocol Booking Bar
A persistent bottom bar tallies every treatment card the visitor adds to their protocol. The bar stays visible throughout the scroll and closes with a single "Book My Skin Session" button priced at $185. The diagnostic quiz also ends with a pre-built protocol bundle offered at a reduced price, providing a second path to conversion.
Woven Social Proof Tiles
Macro skin photography tiles showing week-one versus week-twelve comparisons are placed throughout the masonry grid rather than isolated in a testimonial section. This keeps clinical proof visible at every scroll stage and connects real outcomes to the treatment cards displayed alongside them.
Page sections overview
Section
Purpose
Editorial Hero
Establish clinical tone and headline
Treatment Masonry Grid
Display protocols with hover texture reveals
Diagnostic Quiz
Personalize grid by skin pattern
Social Proof Tiles
Show week-one versus week-twelve comparisons
Sticky Booking Bar
Tally cart and drive session booking
Single-Row Footer
Close page with linear navigation
Design & branding system
The Merlot and Smoke color system anchors every visual decision. Deep burgundy headers sit against near-black backgrounds, while champagne type and glow accents provide legibility without brightness. The overall feel is a velvet-lined apothecary aesthetic: rich and moody, but unmistakably clinical.
Color palette: deep burgundy #5B2333 for headers and hero overlays, charcoal smoke #3D3D3D for card backgrounds, muted blush #D4A5A5 for hover states, luminous champagne #F5E6CC for type and glow accents, near-black #1A1017 as the page base
Typography: DM Sans for body text paired with Fraunces for editorial headlines, supporting the contrast between clinical clarity and expressive visual tone
Call-to-action styling: champagne text on merlot background for every "Add to My Protocol" button, maintaining brand consistency at the point of decision
Mobile & speed optimization
The template is designed mobile-first, reflecting the reality that the primary audience checks skin concerns on a phone. Interactive components like the diagnostic quiz and sticky booking bar are built for touch-first use.
Intersection Observer handles lazy reveals so content loads progressively as the visitor scrolls rather than all at once
The sticky bottom bar and magnetic call-to-action buttons are sized and positioned for comfortable thumb reach on mobile screens
How this template helps you convert
Every design and interaction decision in this template is oriented toward one outcome: moving a visitor from identifying their skin concern to booking a session with clinical confidence.
The diagnostic quiz re-sorts the treatment grid so visitors see their most relevant protocols first, reducing decision fatigue and increasing the likelihood they add treatments to their personal cart
Social proof tiles woven throughout the masonry grid show real macro skin comparisons at weeks one and twelve, so clinical outcomes are visible before any payment is requested
The sticky booking bar keeps the $185 session price and cart tally present throughout the entire scroll, removing friction at the final decision point
Other information about this template
This template belongs to the Marketplace Grid theme family and uses an Immersive Visual creative direction. It is categorized under Beauty and Personal Care, specifically the Oily Skin Beauty subcategory and the Oily Skin Dermatologist niche. The Intersection Match Score for this template is 13, indicating a strong alignment between the design system and the target niche.
Template style: Masonry/Pinterest layout with varied tile sizes across the treatment grid
Landing page direction: Direct Sales, with every call to action oriented toward protocol cart building and session booking
Header concept: Dark Full-Bleed with Glow, using near-black base and champagne diffused light
Animation level: High, with GSAP stagger reveals, scroll-linked ambient tone shifts, and hover texture transitions specified throughout
