Soothe is a masonry-style landing page template built for barrier-repair skincare brands targeting reactive, sensitive skin. It combines a cinematic 3D product hero, a Pinterest-style gallery grid of clinical proof tiles, and a freemium trial conversion flow. The design uses a Merlot and Smoke palette to feel nurturing without shouting luxury, and every layout decision puts proof before the ask.
by Rocket studio
Loading preview…
Quick summary
Soothe is a single-page landing page template for sensitive skin skincare brands. It leads with a rotating 3D product hero and unfolds into a masonry gallery that blends clinical evidence with product beauty. A sticky call-to-action bar, a 7-day barrier kit trial offer, and a sixty-second Sensitivity Score quiz work together to turn hesitant, reactive-skin visitors into trial customers.
Who this template is for
This template is built for direct-to-consumer skincare brands that need to earn trust before they earn the sale. It suits founders and marketers who sell to a skeptical audience that has already been burned by "gentle" ranges that weren't gentle enough.
Barrier-repair and ceramide skincare brands launching a freemium trial offer
Dermatologist-adjacent brands targeting eczema-prone or post-steroid skin types
Sensitive skin founders who need clinical proof to carry the page, not lifestyle photography
What problem this template solves
Most skincare landing pages rely on aspirational imagery and bold claims. That approach fails with reactive-skin customers who distrust marketing language and want evidence. This template is designed around a different logic: show the proof first, then make the ask.
Visitors land on a page that feels calm and credible before they see any purchase prompt
Clinical callouts and patch-test visuals appear before the first call-to-action, so trust is established early
The quiz path lets hesitant visitors self-select into a personalized recommendation instead of bouncing
What you get with this template
You get a fully structured, mobile-first landing page template that handles both the visual identity and the conversion architecture for a sensitive skin brand. Every section is purposefully sequenced to move a skeptical visitor toward a low-risk trial.
A 3D CSS product hero, a masonry gallery grid, a full-width call-to-action break, and an interactive quiz section
A Merlot and Smoke color system with defined roles for each shade across backgrounds, text, borders, and interactive elements
Theme
Marketplace Grid
Creative direction
Gallery Walk
Color system
Merlot & Smoke
Style
Masonry/Pinterest
Direction
Freemium/Trial
Page Sections
3D Rotating Product Hero
Pinterest-style Masonry Gallery
Freemium Trial Conversion Form
Sensitivity Score Quiz
Clinical Trust Strip
GSAP Scrolltrigger Animations
Related questions
Who is the Soothe template designed for?
Does the masonry grid support video tiles?
What is the 7-Day Barrier Kit call-to-action flow?
Is this template suitable for mobile users?
Can I use this template without the Sensitivity Score quiz?
Fraunces serif headers paired with DM Sans body text for a clinical-yet-warm typographic feel
Feature list
This section covers the core built-in capabilities of the Soothe template as defined in the brief.
3D Rotating Product Hero
The hero section features a seamlessly looping CSS 3D rotation of the hero serum bottle set against a blush fog background. Light catches the frosted glass and merlot-colored dropper cap. A single tagline fades in beneath the bottle to anchor the brand promise on arrival.
Masonry Gallery Grid
The template uses a Pinterest-style masonry layout where tiles vary in height and width. Tiles are designed to hold a mix of content types: macro ingredient photography, VISIA skin-scanner imagery, short absorption loop videos, ingredient cards, customer patch-test diaries, and clinical bar charts. The grid shifts from product beauty toward clinical evidence as the visitor scrolls deeper.
Freemium Trial Conversion Flow
The primary call-to-action is structured as a low-friction trial offer. The form collects skin concern first via a dropdown, then shipping address, then email. No payment field appears on the first step. A sticky bottom bar surfaces the call-to-action after the second scroll depth and a full-width break repeats it between grid sections.
Sensitivity Score Quiz
A sixty-second interactive quiz lets visitors identify their skin concern profile and receive a personalized kit recommendation. Email is captured at the results screen, creating a second conversion path for visitors who are not yet ready to commit to the trial form.
Trust Strip with Clinical Callouts
A marquee-style trust strip sits beneath the hero and displays clinical proof signals and ingredient badges. A "0.0% irritation rate" callout appears before the first call-to-action, ensuring proof lands before the ask.
GSAP ScrollTrigger Animations
Section reveals, parallax shifts, and spotlight hover effects are powered by GSAP ScrollTrigger. Animations are CSS-first where possible, keeping motion purposeful and the page feeling considered rather than overbuilt.
Page sections overview
Section
Purpose
Hero: 3D Spin
Introduces the hero product with a looping 3D rotation and single tagline
Clinical Trust Strip
Displays ingredient badges and a 0.0% irritation rate callout
Masonry Gallery
Presents clinical proof and product content as a curated, scrollable tile grid
Call-to-Action Break
Full-width rose gold panel prompting visitors to claim the 7-day barrier kit
Sensitivity Score Quiz
Interactive quiz capturing email at results with a personalized kit recommendation
Footer
Single-row linear footer with brand and navigation essentials
Design & branding system
The Merlot and Smoke palette is the defining visual identity of this template. Every color has a specific role, so the page reads as intentional rather than decorative. The overall effect is described in the brief as a velvet pouch on a marble vanity in low evening light: warm enough to feel nurturing, muted enough to carry clinical credibility.
Deep wine (#4A0E2E) for section anchors and hover states; charcoal smoke (#3B3B3B) for all body text
Blush fog (#E8D5D0) as the dominant background wash; quiet rose gold (#B08D84) reserved for calls-to-action, price tags, and interactive borders
Fraunces serif for headers and DM Sans for body text, creating a pairing that feels premium without being cold
Mobile & speed optimization
The template is built mobile-first, reflecting the brief's target user: a mother checking her phone at 3 a.m. Every layout decision prioritizes legibility and tap-target clarity on small screens. Animations use CSS-first approaches, with GSAP handling only what CSS alone cannot.
Lazy image loading is built into the gallery grid to manage the tile-heavy layout on slower connections
The sticky call-to-action bar and quiz modal are designed to function cleanly on touch interfaces
The masonry grid reflows naturally for single-column mobile viewing without breaking the content hierarchy
How this template helps you convert
This template treats conversion as a sequence of trust-building moments rather than a single persuasive push. The layout is designed so that skeptical visitors accumulate evidence before they are ever asked to act.
Clinical proof lands before the first call-to-action: the trust strip, patch-test tiles, and 0.0% irritation rate callout all appear while the visitor is still browsing, not at the point of decision.
Two conversion paths run in parallel: the 7-day barrier kit trial form for visitors ready to commit, and the Sensitivity Score quiz for visitors who need a personalized recommendation before they trust the brand enough to share their address.
The sticky bottom bar keeps the primary call-to-action visible throughout the scroll without interrupting the gallery browsing experience, so the offer is always one tap away.
Other information about this template
The Soothe template is part of a Marketplace Grid theme family and uses a Gallery Walk creative direction to guide the visual and structural decisions. It is categorized under Beauty and Personal Care with a specific focus on the sensitive skin beauty subcategory. The landing page direction is freemium and trial conversion, and the header concept is a 3D Product Spin.
The color system is named Merlot and Smoke and is applied consistently across all interactive and static elements
Typography uses Fraunces for display text and DM Sans for body copy, both loaded as specified in the brief
The template targets the UK and US markets and supports both GBP and USD pricing display contexts
