Codieum was gaining critical traction. The AI-powered developer device was charting its personal course in a crowded area, even earlier than it had a model to match. Momentum was constructing, however one thing felt lacking.
After present process a naming train and touchdown on Windsurf, the staff approached Metalab with one ask: “Reimagine us.”
Collectively, we launched into a mission to craft a versatile model system constructed to scale throughout their advertising and marketing website, product, and past. A system that doesn’t simply showcase the product, it makes you are feeling it.
Setting the Scene
Impressed by wind and waves, our guiding thought was limitless circulate. That time the place blockers fade, creativity sparks, and deep work feels easy. Windsurf wasn’t trying to slot in. They wished a model that disrupts.
Our imaginative and prescient was to create a system that’s expressive, constructed for real-world use, and unmistakably Windsurf. One which channels vitality, readability, and pleasure into each touchpoint.
We leaned into daring gestures and emotional resonance, shaping a model that feels alive in a subject that more and more is trying secure, technical and related.
The Journey
1. Taking Dangers Over Staying Secure
When most AI manufacturers play inside the strains, Windsurf selected to go for one thing surprising. That spirit, represented greatest within the phrases of their lead designer, “We’d reasonably take dangers and go for it than accept the place we’re,” set the tone for what got here subsequent.
2. Constructing the Metaphor
Circulate needed to really feel actual, not simply visible. We tapped into the dynamism of waves and wind. The design system pulses with fluid gradients, exact typography, and movement that lands someplace between technical and humane. It was an opportunity to blur the road between product and emotion.
3. Stretching the System Throughout Touchpoints
We envisioned a model that doesn’t simply stay on-line. It breathes.
- On-product UI feels grounded and intuitive, balancing belief with effectivity.
- Advertising and marketing and occasions lean into dramatic wave visuals and vibrant shade.
- Group-facing property, from animated tales to developer gear, felt like a motion greater than a model.
- We even explored how the model may prolong into the product. Whereas early and conceptual, it hinted at how a future-state expertise may take form.
Breaking Down the Visible Language
1. Emblem
The brand leads the best way, embodying the essence of the model in a single mark. A stylized “W” formed by the movement of waves displays the magnificence of pure motion and the continual circulate builders expertise after they’re in sync with their instruments. Its dynamic curves converse to adaptability and progress. By no means static. At all times in movement.
2. Colour Palette
The colour palette attracts from nature and the vitality of the game—sunsets, surf, and coastal gentle. Grounded neutrals create a peaceful basis, whereas neon accents add sharp bursts of vitality. This distinction mirrors the Windsurf expertise: easy, deliberate, and infrequently electrical.
3. Iconography
Crafted with mono-line varieties and dashed particulars, every icon echoes the broader system’s logic, creating a visible language that feels clear, cohesive, and deliberately in movement.
4. Typeface
We selected the typeface, Tomato Grotesk, paired with DM Sans and DM Mono, to stability character and precision.
5. Wave
Centered round a wave motif, the system captures harnessed energy and human potential, representing the circulate Windsurf unlocks.
The End result
The brand new model doesn’t simply differentiate, it delivers. It’s not the model you anticipate for an AI developer device, and that’s precisely the purpose.
Windsurf now appears to be like and feels distinctive, vibrant, and actual. It’s a model constructed to unlock creativity, not simply present what the product does.
And simply months after our rebrand launch, Windsurf was acquired by Google for $2.4 billion and later by Cognition. A strong reminder of what occurs when model and product transfer in circulate collectively.
