Codieum was gaining severe traction. The AI-powered developer instrument 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 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 concept was limitless circulation. That time the place blockers fade, creativity sparks, and deep work feels easy. Windsurf wasn’t trying to slot in. They needed 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 power, 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 protected, technical and comparable.
The Journey
1. Taking Dangers Over Staying Secure
When most AI manufacturers play inside the traces, Windsurf selected to go for one thing sudden. That spirit, represented finest within the phrases of their lead designer, “We’d somewhat take dangers and go for it than accept the place we’re,” set the tone for what got here subsequent.
2. Constructing the Metaphor
Stream 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 dwell 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 colour.
- Neighborhood-facing property, from animated tales to developer gear, felt like a motion greater than a model.
- We even explored how the model might lengthen 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 way in which, embodying the essence of the model in a single mark. A stylized “W” formed by the movement of waves displays the class of pure motion and the continual circulation 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. Shade Palette
The colour palette attracts from nature and the power of the game—sunsets, surf, and coastal mild. Grounded neutrals create a peaceful basis, whereas neon accents add sharp bursts of power. This distinction mirrors the Windsurf expertise: easy, deliberate, and sometimes 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 circulation Windsurf unlocks.
The End result
The brand new model doesn’t simply differentiate, it delivers. It’s not the model you count on for an AI developer instrument, and that’s precisely the purpose.
Windsurf now seems 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 robust reminder of what occurs when model and product transfer in circulation collectively.
