Oily Skin Beauty Booking Website Template

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

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
• CSS scroll-behavior provides native smooth scrolling without requiring additional scripting overhead
• 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.

1. 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
2. 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
3. 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

Show more