THE PREMISE: REDEFINING OUR OWN NARRATIVE
At SVZ, we’d built brands for enterprise giants, trendy startups and web experiences that scaled into the millions. But our own website? Let’s just say... it didn’t tell the whole story. Worse, it didn’t tell the right story.
We had grown. Evolved. Sharpened our craft. But our site was frozen in time—an echo of a past version of us. What we needed wasn’t a redesign—it was a rebirth. A rebirth—but one that honored the legacy that brought SVZ to this rare position as a boutique force in the Webflow and creative space.
This project wasn’t a portfolio update. It was a manifesto. A declaration. An open-source proof-of-work that would reveal exactly who we are, what we believe, and how we build.
Our North Star:
- Communicate our process visually, not just verbally.
- Showcase our superpowers (strategy, design, dev, production) in action.
- Create a site where every scroll, every hover, every transition has intention.
- Build something nobody’s ever built before.
No pressure, right?
THE VISION: BUILDING A LIVING SYSTEM
We didn’t want a flat website. We wanted a living, breathing system. One that adapts, informs, and interacts.
Think of it like this: if a client could only experience our site, they should still understand how we think, how we move, and how we solve.
We defined three core dimensions:
- Process — the journey we guide clients through, step-by-step.
- Culture — who we are and what are we looking for as a team.
- Powers — our core capabilities, elevated to mythic-level tools.
- Projects — the outcomes, told like editorial features rather than typical portfolios.
These weren’t separate sections—they interconnected. Hover on a keyword in Process? You get a sneak of a related Project. Explore a Power like “Production”? It links directly to client success stories showing how that power delivered results or a detailed educational explanatory.
We called this our interlinking dimension—a way to tell layered stories across the site, like folding time and perspective into every scroll.
It wasn’t UX. It was storytelling architecture.
THE PREP: HONEST CONVERSATIONS + CREATIVE EXERCISES
Before a single pixel was designed, we started with hard questions:
- What do we want people to feel when they visit?
- What do we hate about most agency websites?
- If we removed all the logos and copy, would this site still feel like SVZ?
- Who are we? What do we want?
We ran an internal brand sprint—just like we do with clients. Values were distilled. Tastes were challenged. We built moodboards from movies, soundtracks, video games, magazines rather than scrolling Dribbble or Behance.
Notable references:
- Blade Runner (for mood)
- Swiss typography (for clarity)
- Brutalist design systems (for edge)
- Sci-fi interfaces (for movement)
- The biggest influence came from outside the design world—fashion. Matthis Garnier, our Design Director from France, brought in an entirely different lens: the evolving visual language of new-generation luxury.
Think JACQUEMUS. Think Y/PROJECT. Think YL or A-COLD-WALL*. Brands that don’t follow trends—they set tone. They blend raw minimalism with poetic boldness. And that fusion became a foundational layer of our direction.
Matthis challenged the team to treat SVZ less like a digital agency and more like a boutique fashion house. Every element had to feel intentionally designed—not just clean or functional, but emotionally tuned. Understated, but unforgettable.
We leaned into asymmetry, whitespace, and silence. We studied the pacing of fashion lookbooks and campaign sites—how they use tension, restraint, and motion. The transitions had to feel editorial. The layouts had to breathe like pages from a premium zine.
Out of this emerged our guiding creative principles:
- Minimal but bold.
- Structured but cinematic.
- Emotive but strategic.
The idea wasn’t to look cool—it was to make you feel the SVZ rhythm the second you landed. Something fresh. Something rare. Something that didn’t just speak—it moved.
Everything had to flow with intention and presence—like a mannequin stepping onto the runway during a Paris Fashion Week défilé. No sudden gestures. No wasted movement. Just quiet confidence, silhouette, and storytelling in motion.
THE DESIGN: RESTRAINT + PUNCTUATION
The visual language was deliberately stripped down—we explored designing custom fonts and combining different typefaces to land the tone we were going for. But within that restraint, we layered motion, texture, and surprise.
The layout logic:
- A modular bento system. Each card = a story fragment.
- Running typography layouts.
- Larger cards for visuals or brand-defining statements.
- Smaller ones for contextual layers—team intros, facts, tools.
Typography:
- H1s sliced into 3 lines with perfect visual balance, like a movie poster.
- Subtle font scaling based on scroll progression.
- Text transformations that played with split-type logic (hero tags turning into numbers, then into other words).
Color system:
- Greyscale base with electric red accents.
- Gradients only used when tied to emotional narrative (e.g., Discovery Call section with sky transition).
Every detail mattered. We reviewed spacing down to 0.125rem increments. Hover states had sound design thinking behind them (no audio, but the visual timing felt like sound). We literally asked ourselves: "What does this feel like to click?"
Imagery was no exception.
Stock was off-limits. Filler didn’t exist. Every visual needed to belong. To maintain that level of precision while scaling, we trained our own AI image generation model—tailored to our brand system.
This will let the SVZ marketing team generate fresh, on-brand visuals without breaking the aesthetic thread in the future. Same texture. Same tone. Same attitude.
AI wasn’t just about saving time here — it was about protecting the essence. Because in this build, nothing is random. Every asset is placed with intent. Every element earns its space.
This wasn’t just visual design. It was curation at the atomic level.
ART DIRECTION: DESIGNING FROM THE INSIDE OUT
“This redesign wasn’t just another project for me—it was personal. As Design Director, I knew we couldn’t just look better. We had to become better. Our new site needed to feel like walking into our studio and hearing our heartbeat. No fluff. Just intent. I've worked in branding and digital design for over a decade. From running an advertising studio in Paris to leading teams of devs and creatives around the world. I’ve seen trends come and go, styles flash and fade. But this time, I didn’t want just another ‘cool’ site—I wanted to design something timeless, but also alive.
I’m obsessed with detail. Like, losing-sleep-over-4px misalignments obsessed. I believe the craft is the message. The care you put into the build is what people feel—even if they don’t know why.
I’m also not the kind of director who just sets vision and steps back. I like to be in the trenches—hands on the timeline, Figma at 300% zoom, Webflow interactions panel open at 4AM. I’ll sit with a single transition until it clicks. I’ll rewrite the same headline fifty times. I live for the moment it feels right—because I know users can feel that too.
I guess you could say I’m a missionary for this work. I’ll go deep. I’ll stay late. I’ll chase the invisible details most people skip. Not because it’s efficient. But because it’s worth it.” — Matthis Garnier, Design Director
Art direction wasn’t about applying a style. It was about extracting truth.
The hardest part was turning the mirror on ourselves. I pushed the team (and myself) to be brutally honest: what parts of our past work still inspire us? What do we secretly hate about our old brand? What do we wish clients would notice?
This led to design principles that were both visual and philosophical:
- Every block should tell a story.
- No element should feel default.
- Design is choreography—motion equals meaning.
We embraced constraints—strict grid systems, minimal palette—so we could be explosive in interaction and flow.
I treated the whole site like a film. Each section = a scene. Hero = trailer. Projects = story arcs. Powers = character abilities. Process = the plot.
We sketched by hand. Then mocked in Figma. Then broke Figma. Then broke Webflow (literally). We animated the gradient borders. We obsessed over scroll delays. We layered metaphors inside metaphors (sky for success, bento as modular creativity, real-world textures for diversity).
At 3AM one night, I rewrote the brand paragraph on the homepage and rebuilt the animation sequence from scratch. Why? Because it didn’t feel right yet. That’s the kind of energy this project had.
And it’s because we gave ourselves permission to go deep. To take risks. To go way past the first good idea and dig for the uncomfortable truth underneath.
If you look closely, this site is filled with love letters to our craft. Nods to our journey. Winks to those who know. Every detail—every transition—is there because we needed it to be.
This isn’t just our portfolio site. It’s our studio, bottled.
THE TECH STACK: PUSHING WEBFLOW + BEYOND
Webflow was our cockpit—but we didn’t drive it like a CMS. We drove it like a race car in a thunderstorm. No seatbelt. No safety mode. Just us, flying through the curves, testing how far we could push the platform before it pushed back.
Because this wasn’t a site built within constraints—it was a site built to bend them.
We didn’t just use Webflow. We cracked it open and rewired its nerves.
What we implemented:
- Custom GSAP scroll triggers for key animation beats. Not just “fade-ins”—we’re talking full narrative pacing through scroll.
- WebGL for Shaders and 3D models.
- SVG-based transitions that melt pages into each other.
- Lottie animations that don’t decorate—they reveal. Micro-movements that clarify, signal, cue.
- Scroll-activated parallax tuned by device breakpoint, frame rate, and user interaction. Only active when it served a deeper purpose.
But here’s the thing: all of that technical complexity was invisible to the user. That was the point. The stack was engineered to disappear. No tech flexing. Just flow.
We treated animation like sound design—timing had to feel like a breath or a beat. Clicks had to pulse. Hovers had to wink. If it moved, it needed intention.
Scott (our founder and musical genius):
"Wait… who said sound design?"
Cue that look—the one where you know he’s already composing a hover sound in his head using vintage synth samples and a kick drum you’ve never heard before.
Matthis:
"Save it for phase 2."
The truth is, we’re seriously considering it. Subtle audio cues. Micro-sound design tied to scroll states. A site that literally feels like SVZ—eyes closed.
If phase one was visual rhythm, phase two might just be a full sensory experience.
Because with Scott behind the board… we’re not ruling anything out ;)
Some real moments from the trenches:
There was the week where scroll animations were clipping on Safari and collapsing on mobile. Matthis rewrote the entire GSAP sequence over a weekend—twice. Because “almost smooth” wasn’t smooth enough.
Or the midnight realization that the hero scroll interaction needed to zoom in like a Kubrick camera—calm, inevitable, cinematic. Not a pop. A slow push into presence. We rebuilt the scene with a timeline that felt like a movie’s opening shot.
Then there was the View Transitions API implementation. We had to hack it around Webflow’s native page refreshes. It took a week of prototypes, 12 cups of coffee per dev, and a philosophical debate about whether transitions should feel like doors opening or windows being pulled away.
We landed on: “glass shattering in reverse.”
Why all this madness?
Because users don’t remember “nice.” They remember moments. That feeling when a scroll hits just right. When a page loads and your eye doesn’t blink. When you don’t notice a transition because it felt like time bent a little.
That’s what we were chasing.
This wasn’t a dev phase—it was choreography.
We storyboarded interactions like film. We ran timing experiments like sound engineers. We tested scroll velocity like game designers. Everything had to pass the test: does this feel inevitable?
And through it all, the mantra stayed the same:
- Don’t overdo it.
- But don’t under-deliver.
- Make it subtle, but unforgettable.
We didn’t want the site to scream “look what we can do.” We wanted it to whisper: “this is how it should feel.”
At the end of the day, we weren’t just building a site. We were designing a system that mirrors how SVZ works under the hood: high craft, no fluff, and always, always one step ahead of what’s expected.
This tech stack wasn’t just infrastructure—it was expression.
THE CULTURE: REAL FRIENDS, REAL WORK
At SVZ, we actually deeply love each other.
We’re not just a bunch of designers and devs thrown together on Slack. We’ve built things together, failed together, figured life out side-by-side. We’ve been on 4AM calls not because of deadlines, but because someone said “what if we tried this?” and everyone else got hyped.
There’s trust here. Brotherhood. Real camaraderie.
So when it came time to redesign our site, it didn’t feel like a client project. It felt like taking a look in the mirror—and doing it together.
We asked real questions.
What do we stand for now?
What do we hate about the way agencies talk about themselves?
What do we want to feel when we look at our own homepage?
We weren’t just critiquing layouts—we were unpacking ten years of work, personality, and dreams. It got deep. But in the best way.
We remembered how each of us got here. What shaped us. Why we care. Why we still get excited to open Figma, or talk strategy, or argue over button hover speeds like it’s life or death.
And that’s the thing—we care.
This isn’t a team that clocks in. This is a group of people who chose to do this together. Who believe in the work, but more importantly, in each other.
That energy? You feel it on the site.
It’s in the way things move. The rhythm. The restraint. The decisions only a group of close-knit misfits would make because they actually give a sh*t.
We didn’t build this site to sell you on SVZ.
We built it to show you who we really are.
And the truth is—we’re just getting started.
Written from the inside.
Not from a brief.
Not from a distance.
But from within the process - with the same care we give every frame, every scroll, every build. Pulled from real conversations, small details, and the quiet rhythm of a team that trusts each other.
This isn’t just a record of what we made.
It’s a reflection of why we make.
— Matthis Garnier, for SVZ