Atelier is a horizontal-scroll landing page template built for brand strategists who lead with proof. It presents case studies as surgical outcomes, opens each panel with an award or measurable lift, and funnels visitors toward a gated Strategy Playbook download. The obsidian-and-gold visual system signals authority before a single word is read.
by Rocket studio
Loading preview…
Quick summary
Atelier is a single-page, horizontal-scroll portfolio template designed for brand strategists working at the highest level. It leads with outcomes, not credentials. Each case study panel opens with an award or a measurable result, then reveals the strategic thinking beneath. The fixed gold call-to-action pill keeps the playbook download reachable throughout the entire scroll.
Who this template is for
This template is built for experienced brand strategists who need a portfolio that earns trust before asking for a click. It speaks directly to clients who evaluate work by outcomes, not aesthetics alone.
Chief Marketing Officers (CMOs) inheriting fragmented or outdated brand architectures
Founders who have outgrown their original identity and need a systems-level partner
Agency creative directors looking for a strategist who thinks in frameworks, not mood boards
What problem this template solves
Most strategy portfolios bury the proof. They open with a biography, list services, and place results at the bottom. Visitors leave before reaching the evidence. This template reverses that order entirely.
Case study panels lead with the award or measurable outcome, building credibility before methodology is shown
The escalating panel sequence raises stakes with each slide, holding attention through an entire horizontal scroll
A gated playbook download captures qualified leads without interrupting the browsing experience
What you get with this template
You get a fully structured, single-page horizontal-scroll portfolio layout ready to present brand strategy work at an editorial level. Every section, component, and interaction is defined in the template.
A hero section with a full-bleed ultra-light serif headline and a gold-accented period as the only decorative element
A horizontal-scroll gallery of case study panels, interstitial testimonial panels, and a methodology bento grid
A fixed floating call-to-action pill, a bookmark system for individual case studies, and a gated download form
Theme
Atelier Studio
Creative direction
Award & Recognition
Color system
Obsidian & Gold
Style
Horizontal Scroll
Direction
Content/Resource
Page Sections
Horizontal Scroll Case Study Gallery
Fixed Floating Call-to-action Pill
Interstitial Testimonial Panels
Methodology Bento Grid with Spotlight Cards
Bookmark and Shareable Collection System
Gated Strategy Playbook Download Form
Related questions
Who is this landing page template designed for?
Can I use this template without a horizontal scroll setup?
What does the gated download form include?
How does the bookmark feature work?
Can I customize the color system and typography?
Feature list
A paragraph introducing the feature set: each built-in component serves a specific conversion or credibility purpose, giving you a portfolio that does the persuasion work for you.
Horizontal Scroll Case Study Gallery
Each case study occupies its own full-panel frame. The panel opens with the headline result first, such as a Cannes Lion win or a 340% brand recall lift, then layers in the strategic rationale. The sequence escalates in ambition across three stages: a local rebrand, a category disruption, and an international launch.
Interstitial Testimonial Panels
Between case study panels, thin interstitial slides display client testimonials set in italics against bare obsidian. The placement makes praise feel overheard rather than curated, which reads as more credible to a sophisticated audience.
Fixed Floating Call-to-Action Pill
A gold pill labeled "Download the Strategy Playbook" stays anchored in the bottom-right corner throughout the entire horizontal scroll. It links to a gated PDF form that asks for a work email, company name, and a single dropdown indicating the brand's current stage.
Methodology Bento Grid
A bento-style grid section presents strategic pillars in individual cards with a spotlight card hover effect. It teases the depth behind the work without giving everything away, making the playbook download feel like a necessary next step.
Bookmark and Shareable Collection System
Visitors can bookmark individual case study panels to a shareable collection without filling in a form. This secondary path builds familiarity with the work before any commitment is requested.
Spotlight Card Hover Effect
Cards respond to mouse position with reactive border highlights and beam-drop lighting. The effect reinforces the dark-luxury editorial feel while making the interface feel intentional and alive.
Page sections overview
Section
Purpose
Hero Headline
Sets authority with a full-bleed ultra-light serif headline and a single gold period
Horizontal Scroll Gallery
Walks visitors through escalating case studies, award-first, with interstitial testimonials
Interstitial Testimonial Panels
Breaks the case study sequence with italic client praise on bare obsidian
Methodology Bento Grid
Previews strategic pillars using spotlight cards to tease the full playbook
Fixed call to action Pill
Keeps the playbook download reachable at every scroll position
Gated Download Form
Captures work email, company name, and brand stage via a minimal three-field form
Footer
Horizontal flow layout closing the page cleanly
Design & branding system
The visual language is built around restraint as luxury. Every color and typographic choice signals that the work inside is serious, earned, and deliberate.
Color system: deep obsidian black (#0B0B0F) for the canvas, burnished gold (#C9A84C) for titles and interactive hotspots, warm graphite (#2A2A2E) for card surfaces and dividers, and parchment white (#EDE8D0) for body text
Typography: Fraunces ultra-light italic serif for headlines and Fraunces ultra-light for display text, paired with DM Sans for body copy and captions
Interactions: mouse-reactive card borders, staggered scroll-linked reveals, GPU-accelerated transforms, and CSS scroll-snap for precise panel alignment
Mobile & speed optimization
This template is designed desktop-first, because the horizontal scroll experience is central to the creative direction. On smaller screens, the layout degrades gracefully to a vertical scroll without losing the editorial hierarchy.
CSS scroll-snap and GPU-accelerated transforms keep panel transitions smooth on high-resolution desktop displays
Intersection Observer drives staggered reveal animations, loading elements only as they enter the viewport
The vertical fallback on mobile preserves the full case study sequence and keeps the fixed call-to-action pill visible throughout
How this template helps you convert
The entire page is structured as a trust-building machine that funnels a skeptical, senior-level visitor toward a single high-value action: downloading the Strategy Playbook.
Leading each case study panel with the outcome, such as an industry award or a specific percentage lift, establishes credibility before any ask is made, so the visitor arrives at the call to action already convinced.
The bookmark system offers a zero-commitment secondary path that keeps visitors engaged with the work longer, increasing the likelihood they return or convert later.
The gated form is minimal by design, asking only for work email, company name, and brand stage, reducing friction for a senior professional who would abandon a lengthy form instantly.
Other information about this template
Atelier sits at the intersection of editorial design and strategic positioning. It is purpose-built for professionals in the brand strategy, creative services, and business-to-business professional space who need a portfolio that matches the caliber of their work.
The template style is horizontal scroll, which is an uncommon layout choice that itself signals creative confidence to a design-literate audience
The header concept is a giant centered headline that bleeds beyond the screen edges, making the first impression purely typographic and immediately memorable
The creative direction follows an Award and Recognition framework, structuring the scroll so that social proof escalates with each panel rather than sitting in a dedicated testimonials block
The landing page direction is Content and Resource, meaning the primary conversion is a downloadable asset rather than a direct service inquiry
The theme is Atelier Studio, a private-workroom aesthetic where gold details are earned, not decorative
