Introduction
Duotint was designed with a single goal — to create a portfolio and agency template that feels alive, expressive, and effortlessly customizable. Every element of the design is crafted with precision and playfulness, blending bold illustrations, fine typography, and subtle animations that react to user interaction.
The 12-column grid ensures structure and balance, while the dynamic visuals bring a sense of movement and story to every scroll. Duotint isn’t just a template — it’s a stage for your creativity, adapting perfectly to your branding through flexible colors, fonts, and imagery.
Challenge
Many portfolio templates rely solely on static visuals. With Duotint, we wanted to go further — to make a living system, where every element feels like part of a bigger, interactive machine. Our challenge was clear: to build a high-performing, visually rich experience — and make it simple enough for anyone to customize.
Visual Immersion
The design uses fluid illustrations that respond to scrolling — gears, dials, and pipes that fill with color, giving the site a kinetic, tangible personality.
Seamless Customization
Despite its complex look, Duotint remains easy to modify. You can change the entire color scheme, typography, and visuals in just a few clicks without writing a single line of code.
Process
To achieve this, we combined strong visual storytelling with Webflow’s most advanced native features. Every interaction, from scroll-based motion to microanimations, was designed directly in Webflow — no custom code required.
- Dynamic Illustrations
Responsive SVG graphics that scale perfectly and react to scrolling, creating a continuous sense of motion and depth - Premium CMS
Blog posts, projects, and team sections use Webflow CMS for effortless updates, with additional layout options for visual diversity - Perfect Responsiveness
Every breakpoint was redesigned manually, ensuring the same high quality across monitors, tablets, and mobile devices - Unique Fullscreen Menu
A custom-built navigation with smooth transitions and tasteful animations — clean, modern, and code-free - Microanimation Details
From animated icons to sliders with active/inactive arrow states — every pixel moves with purpose - Lightweight Performance
Thanks to vector graphics and optimized assets, Duotint loads fast despite its visual richness - Tutorials for Every Level
A dedicated page with video walkthroughs covers both basic setup and advanced customization — so you can focus on creativity, not troubleshooting
Results
Duotint quickly captured attention for its originality and technical craftsmanship. It blends storytelling, design precision, and interactive art — a template that both agencies and individual creators call “a digital artwork that works.”
Awwwards:
Honorable Mention – August 7, 2024
Duotint redefines what a Webflow template can be — merging bold visuals, responsive motion, and pixel-perfect control into one seamless experience. Designed for designers, agencies, and creators who demand flexibility without compromise, it turns complex animation and layout systems into an intuitive creative engine.
Experience Duotint live
Every element — from scroll-based motion to dynamic CMS-driven layouts — works in harmony to tell your story through movement, color, and precision.
2. In the Navigator (left panel), go to "Section X" → "Wrap X".
3. Select the "Video Background" element.
4. In the Settings (right panel), click Replace Video.
5. When finished, exit the symbol by clicking the green button at the top.