Folio is a dark mode design portfolio landing page built for set designers pursuing high-end film, television, and commercial work. It combines a nine-image Photo Grid Mosaic header, a 60/40 asymmetric project explorer, expandable case studies, a fixed partnership call-to-action bar, and a gated Lookbook PDF form, all wrapped in an industrial Ink and Paper visual identity.
by Rocket studio
Loading preview…
Quick summary
Folio is a single-page dark mode design portfolio built for professional set designers. It presents work the way a production bible does, dense, deliberate, and tactile. The layout uses a 60/40 asymmetric grid, a nine-image mosaic header with cursor parallax, and a living sidebar that updates as visitors scroll through case studies.
Who this template is for
This template is built for working set designers who pitch to serious clients in film, television, and commercial production. It speaks directly to decision-makers who judge craft quickly and expect a design portfolio that matches their own visual standards.
Production designers and showrunners casting collaborators for feature films and limited series
Agency creative directors sourcing set builders for high-concept commercial and music video shoots
Experienced designers ready to move beyond a generic website and build a personal brand that commands attention
What problem this template solves
Generic portfolio templates fail set designers because they treat every creative discipline the same. A set designer's work is spatial, sequential, and collaborative. It needs context, not just images. This landing page solves that.
Visitors leave too quickly when a design portfolio shows only finished photographs with no process depth
Potential client inquiries stall because there is no structured intake path built into the page
A flat, light-themed site signals the wrong aesthetic to future clients who live inside dark edit suites and art department binders
What you get with this template
Every component is purpose-built for a high-stakes B2B portfolio conversation. Nothing here was lifted from a generic creative template. The page teaches how sets get made while proving this designer makes them best.
A nine-image Photo Grid Mosaic header with cursor parallax and a parchment-colored tagline reveal
A 60/40 asymmetric project explorer with a contextual sidebar of blueprints, construction stills, and director testimonials
Theme
Ink & Paper
Creative direction
Interactive Explorer
Color system
Monochrome Steel
Style
Asymmetric Grid (60/40)
Direction
Partnership/B2B
Page Sections
Nine-image Mosaic Header with Cursor Parallax
60/40 Asymmetric Project Explorer
Expandable Case Study Pages
Fixed Partnership Call-to-action Bar
Gated Lookbook PDF Lead Form
Scroll-triggered Interaction Animations
Related questions
Can I customize the colors and typography to match my personal brand?
Does the template include the expandable case study layout out of the box?
Is a Figma file included with this template?
Who is this design portfolio best suited for?
What does the gated Lookbook PDF form do?
Expandable case studies showing budget tier, stage dimensions, turnaround time, and before/after stage photography
A fixed footer call-to-action bar and a gated Lookbook PDF intake form with production-type qualification fields
Feature list
This template gives designers a structured, easily editable framework. Each section is a reusable component built for clarity and scroll-driven storytelling. Attending to every smallest detail, the layout rewards curiosity from first scroll to final inquiry.
Nine-Image Mosaic Header with Parallax
Nine set photographs are arranged in an irregular mosaic that bleeds past the viewport edges. Images shift subtly on cursor movement using parallax layers, suggesting depth like a lightbox. A single line of parchment-colored type appears over the darkest tile after a short beat.
60/40 Asymmetric Project Explorer
The 60-column holds large hero images of finished sets. The 40-column runs a living sidebar of blueprints, material callouts, behind-the-scenes stills, and director testimonials. The sidebar updates contextually as the visitor scrolls, making this a true workshop experience rather than a passive gallery.
Expandable Case Study Pages
Clicking any project expands it into a full case study. Each portfolio single entry includes budget tier, stage dimensions, turnaround timeline, and a before/after comparison of bare stage to dressed set. This depth converts browsers into qualified inquiries.
Fixed Partnership Call-to-Action Bar
A persistent footer bar activates once the visitor scrolls past the second project. The primary call to action reads "Let's Build Your Next World." It keeps the conversion path visible without interrupting the scroll experience.
Gated Lookbook PDF Form
A secondary conversion path offers a downloadable PDF of full case studies. Visitors exchange a production company email address to access it. This qualifies leads before the first call and helps the designer build a focused outreach list.
Scroll-Triggered Interaction Animations
The page uses clip-path reveals and scroll-triggered interaction animations to guide attention through each section. Each layer of depth rewards curiosity and keeps a potential client engaged well past the first project.
Page sections overview
Section
Purpose
Mosaic Hero Header
Parallax photo grid with tagline reveal
Projects Explorer
60/40 asymmetric case study grid
Living Sidebar
Contextual blueprints and testimonials
Process Methodology
Annotated construction stills
Director Testimonials
Dark overlay quote treatment
Contact Intake Form
Production-type qualification fields
Lookbook PDF Gate
Lead-qualifying gated download
Fixed Footer Bar
Persistent partnership call to action
Design & branding system
The visual identity follows an Ink and Paper theme using a Monochrome Steel color system. Every color choice is deliberate. Using dark grays instead of pure black avoids harsh contrast and eye strain while making the portfolio items appear more vibrant against the background.
Deep matte black (#111113) as the base, cold rolled steel (#3A3D42) for structural surfaces, onion-skin parchment (#D8D3CB) for type
Red grease-pencil (#C0392B) reserved as a single accent for hover states and active links, matching the elegant design style of a drafting table aesthetic
Fraunces serif display paired with DM Sans body type, supporting global fonts and consistent global colors across all components
Mobile & speed optimization
The template is desktop-first by design, reflecting how production designers and agency creative directors scout collaborators on large screens. The layout is structured to load cleanly and avoid poor website speed issues that slow websites create for first impressions.
Retina ready visuals ensure set photography displays at full clarity on high-resolution desktop and laptop screens
Server-side components handle static content while client components manage animations, keeping load speed efficient without sacrificing blazing fast interaction quality
Re-usable classes and global components make it straightforward to easily update content across all the pages without touching styles from scratch
How this template helps you convert
Every design decision on this page serves one goal: turning a passive visitor into an active production inquiry. The page is optimized to move the right potential client from curiosity to contact.
The fixed partnership call-to-action bar stays visible after the second project, reducing friction for a visitor who is ready to reach out before finishing the full page
The gated Lookbook PDF form qualifies leads by requiring a production company email, so the designer speaks only to serious future clients
The expandable case studies answer the hardest pre-qualification questions, budget tier, timeline, and crew type, before the first conversation, making every inquiry more efficient
Other information about this template
This is the folio dark theme set designer portfolio landing page template. It is built on the same structural principles as the Darkfolio X Webflow template, a top-notch dark mode design portfolio webflow template created for designers who need more than a basic site. Presenting Darkfolio-style architecture, this template gives set designers a creative portfolio webflow template that feels nothing like a minimal portfolio template off the shelf.
Darkfolio X includes over 10 unique pages and comes with a figma file included with purchase, giving designers a complete design portfolio webflow theme to work from
The figma file supports own custom needs and own design requirements, so you can customize the layout and global colors to match your brand guidelines before building in the webflow editor
Use the webflow cms to manage portfolio items on an ongoing basis, with webflow ecommerce and social media cover designs support available through the same platform
The icon family set loaded with the template covers all interface needs; an icon family this complete removes the need to source assets from another webflow website or other webflow website
The brix templates support team and brix agency offer dedicated help to support darkfolio users; the support team is available to assist with customization or troubleshooting on an upcoming future update basis
Not all webflow templates offer this level of depth, this is the right template choice for set designers who want unique stories, a beautiful appearance, and a modern design that reflects the latest design trends
You can easily customize, edit darkfolio sections, customize darkfolio colors, and use the webflow editor to adapt every component to your own design requirements with easy edit ability
The optimized darkfolio structure uses re-usable classes and global components so designers can easily update any kind design element; the template is retina ready, optimized, and built to work perfectly from day one
New features and latest features are released on an ongoing basis; features released through the platform mean your site benefits from updated practices without rebuilding from scratch
Every potential client who visits expects a portfolio that tells unique stories, this template gives designers the components, cms depth, and interaction animations to do exactly that
