See More →
Design System
MuleSoft
The context
MuleSoft had design elements scattered across multiple files — outdated components, inconsistent visual criteria, and a real gap between what design delivered and what development implemented. The result was predictable: every new project reinvented the wheel, teams lost time on decisions that should have already been resolved, and the website lacked the coherence an enterprise brand demands.
The work
The project was a collective build with clearly defined roles and an iterative process from the first component to the final documentation:
Components & tokens — development of a full library of reusable components in Figma: buttons, forms, cards, navigation, layouts, and more. Every component built on top of a design token system — color, typography, and spacing — that ensures consistency from the ground up and makes any future update scalable.
Interaction & motion — definition of interaction patterns and motion principles integrated into the system, making sure components not only looked right but behaved consistently across the entire web experience.
Developer collaboration — hands-on work alongside developers and web producers to test and refine each component before implementation. Handoff wasn't a final event — it was a continuous process of iterating, validating, and adjusting until design and code spoke the same language.
Documentation & guidelines — building robust documentation that goes beyond technical specs: usage criteria, variants, states, edge cases, and real application examples. A resource any team member can reference and apply independently.
The impact
The design system evolved from a set of fragmented files into the single source of truth for the entire MuleSoft website. Design, development, and web production teams gained a shared language that reduced day-to-day friction, accelerated the production of new pages and campaigns, and gave the site the visual and functional consistency that a brand within the Salesforce ecosystem demands.
Insights & learnings
A fragmented system costs more than it seems. Before the design system, the cost was hidden in repeated decisions, inconsistencies no one fixed, and handoffs that generated rework. Making that cost visible was the first step toward justifying the investment in building it properly.
Handoff isn't the end of the process — it's part of the design. Working directly with developers from the earliest iterations changed the quality of the outcome. Components built in isolation rarely survive their first encounter with code intact — the ones built collaboratively do.
Tokens are the backbone of the system. Defining the token layer correctly from the start — before designing a single component — was the decision with the greatest impact on scalability. Updating a global color or typeface went from a days-long task to a matter of minutes.
Documentation is design. A component without clear documentation is an incomplete component. Usage guidelines, states, variants, and edge cases are as much a part of the deliverable as the component itself — because they determine whether the system gets adopted or ignored.