Idea and challenge
The absence of a centralized design system led to inconsistencies between design and frontend implementation, creating misalignment in visual standards and component usage.
The strategic goal was to strengthen Safe’s presence in the Web3 design community by creating a publicly accessible design system.
Requirements
Success metrics
#1
Publish the design system before end of 2023
#2
Achieve 50+ copies in the Figma Community before end of 2023
#3
Approach
Foundations
I began by auditing an existing Figma file containing draft components and styles. I migrated all colors into Figma Variables and synchronized spacing tokens with the frontend codebase to ensure design-development consistency.
Overall Safe{Wallet} frontend based on Material UI components. Sometimes it was crucial to rely on their standard components to verify behavior.
I also configured layout grids and added missing color tokens based on the frontend library to fully align the design system with the implemented UI.
Approach
Components
Approach
Organisms
After completing foundations and base components, I moved on to the organisms level within the atomic design framework. At this stage, I assembled higher-level composite components — such as cards, sidebars, headers, and pagination.
All organisms were designed to support both light and dark themes.
Outcomes and learnings
I built a scalable and structured design foundation aligned with frontend implementation, improving consistency and long-term maintainability across the product.
The system gained strong traction in the Figma community — validating its relevance beyond internal use and contributing to the broader Web3 design ecosystem.
This project significantly strengthened my expertise in building complex design systems and structuring scalable workflows.
Also check out…
Steamify ― Skins Cashout
Steamify ― Trading Bot