Surfe
Modular design system bridging two product surfaces
Modular design system bridging two product surfaces
Design system enabling Surfe's expansion from browser extension to multi-surface platform serving 40,000+ users at Google, Uber, Amazon, and Bolt. Scaled Wave to support rapid product growth whilst maintaining visual consistency across web app and browser extension. Enabled 30+ feature launches in twelve months.
Design system enabling Surfe's expansion from browser extension to multi-surface platform serving 40,000+ users at Google, Uber, Amazon, and Bolt. Scaled Wave to support rapid product growth whilst maintaining visual consistency across web app and browser extension. Enabled 30+ feature launches in twelve months.
Design system enabling Surfe's expansion from browser extension to multi-surface platform serving 40,000+ users at Google, Uber, Amazon, and Bolt. Scaled Wave to support rapid product growth whilst maintaining visual consistency across web app and browser extension. Enabled 30+ feature launches in twelve months.
One rebrand, two environments
One rebrand, two environments
The move from Leadjet to Surfe wasn't cosmetic. The product was repositioning from lightweight helper to enterprise sales tool, and the design system needed to make that credible whilst coordinating across a growing team of 17+ designers and developers.
The move from Leadjet to Surfe wasn't cosmetic. The product was repositioning from lightweight helper to enterprise sales tool, and the design system needed to make that credible whilst coordinating across a growing team of 17+ designers and developers.
The same components had to feel at home inside LinkedIn's constraints and scale to the data-heavy layouts of the web app. Most systems are built for one context. Wave had to work in two, maintaining performance inside a browser extension whilst handling the web platform's broader feature set.
The same components had to feel at home inside LinkedIn's constraints and scale to the data-heavy layouts of the web app. Most systems are built for one context. Wave had to work in two, maintaining performance inside a browser extension whilst handling the web platform's broader feature set.
A broken system before the rebrand
A broken system before the rebrand
An audit of the Leadjet UI made the technical debt visible. Components rebuilt per feature, spacing eyeballed rather than defined, patterns that had diverged without anyone noticing.
An audit of the Leadjet UI made the technical debt visible. Components rebuilt per feature, spacing eyeballed rather than defined, patterns that had diverged without anyone noticing.
As the company prioritised speed over consistent guidelines to test the MVP, the risk of future design inconsistencies and slower implementation grew. Engineers weren't slow because of the rebrand. They were slow because there was no shared language. Without reusable components, every feature started from scratch. The new system had to solve that before it solved anything visual.
As the company prioritised speed over consistent guidelines to test the MVP, the risk of future design inconsistencies and slower implementation grew. Engineers weren't slow because of the rebrand. They were slow because there was no shared language. Without reusable components, every feature started from scratch. The new system had to solve that before it solved anything visual.
The legacy Leadjet interface before its evolution and rebrand into Surfe
Core components, design tokens, and colour palettes with menu variants
Light for LinkedIn, robust for the app
Light for LinkedIn, robust for the app
A component that works inside LinkedIn can't rely on the same viewport assumptions as a full-screen dashboard. Performance matters in the extension.
A component that works inside LinkedIn can't rely on the same viewport assumptions as a full-screen dashboard. Performance matters in the extension.
The web app needed components that could handle dense data, complex filtering, and layouts that hadn't been designed yet. Tokens were the answer. Define the values once, let the surface determine the application. Established core design tokens, an icon set, and key components, all documented in Storybook with Tailwind CSS.
The web app needed components that could handle dense data, complex filtering, and layouts that hadn't been designed yet. Tokens were the answer. Define the values once, let the surface determine the application. Established core design tokens, an icon set, and key components, all documented in Storybook with Tailwind CSS.
Modular by intention
Modular by intention
Wave was built as a small, well-defined core that could be extended without being rewritten.
Wave was built as a small, well-defined core that could be extended without being rewritten.
Working closely with a front-end developer to maintain consistent naming between Figma and Storybook ensured accurate representation of components and their various states. Governance mattered as much as the components themselves. Clear criteria for when to propose, review, and promote a pattern meant designers and engineers could contribute without fragmenting the system. The documentation wasn't an afterthought. It was written to answer the question before someone had to ask it.
Working closely with a front-end developer to maintain consistent naming between Figma and Storybook ensured accurate representation of components and their various states. Governance mattered as much as the components themselves. Clear criteria for when to propose, review, and promote a pattern meant designers and engineers could contribute without fragmenting the system. The documentation wasn't an afterthought. It was written to answer the question before someone had to ask it.
Select library and component variants organised by use case
AI-generated user avatars for consistent mockup visual identity
Cross-team efficiency
Cross-team efficiency
Wave changed what it meant to ship at Surfe. New features no longer began with a component decision.
Wave changed what it meant to ship at Surfe. New features no longer began with a component decision.
Based on team feedback and industry benchmarks, the system reduced development time by approximately 40-50% and design inconsistencies by 30-50%. Designers prototyped faster. Engineers built with more confidence across both surfaces. The system held through the rebrand and kept holding as the product grew, enabling collaboration across 17+ designers and developers. Over 12 months, the team shipped 30+ features without creating design debt or visual inconsistency.
Based on team feedback and industry benchmarks, the system reduced development time by approximately 40-50% and design inconsistencies by 30-50%. Designers prototyped faster. Engineers built with more confidence across both surfaces. The system held through the rebrand and kept holding as the product grew, enabling collaboration across 17+ designers and developers. Over 12 months, the team shipped 30+ features without creating design debt or visual inconsistency.
Wave Design System architecture and component organisation