PROJECTS
Design System Driving Consistency
Workflow
Overview
Design Approach
Foundations
Implementation
Docs & Tokens
Benefits
Challenges
Next Steps
TEAM
Mónica Ferraz
Spencer James
Suroor Gupta
Bruno Alves
TIME
2024/2025
PRODUCT
Metrics
Business
Standardized and reusable components, boosting design efficiency by 45%
Reduced UI inconsistencies by 80%
Faster screen development, saving 40% of design time
Users
Improved usability and interface clarity
Metrics
Business
Standardized and reusable components, boosting design efficiency by 45%
Reduced UI inconsistencies by 80%
Faster screen development, saving 40% of design time
Users
Improved usability and interface clarity
Metrics
Business
Standardized and reusable components, boosting design efficiency by 45%
Reduced UI inconsistencies by 80%
Faster screen development, saving 40% of design time
Users
Improved usability and interface clarity
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet app. The goal was to create consistency, scalability, and efficiency across the product while improving collaboration between design and development. Using Atomic Design, I built a modular and reusable system that could grow with the product.
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet app. The goal was to create consistency, scalability, and efficiency across the product while improving collaboration between design and development. Using Atomic Design, I built a modular and reusable system that could grow with the product.
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet app. The goal was to create consistency, scalability, and efficiency across the product while improving collaboration between design and development. Using Atomic Design, I built a modular and reusable system that could grow with the product.
Design Approach
I started with a full audit of the existing system. Some colors were present, but they were not set as variables or assigned clear usage rules. Spacing, borders, shadows, and typography rules were missing, as well as structured components. To solve this, I restructured the Design System using Atomic Design principles, ensuring it was modular, reusable, and easy to maintain.
Design Approach
I started with a full audit of the existing system. Some colors were present, but they were not set as variables or assigned clear usage rules. Spacing, borders, shadows, and typography rules were missing, as well as structured components. To solve this, I restructured the Design System using Atomic Design principles, ensuring it was modular, reusable, and easy to maintain.
Design Approach
I started with a full audit of the existing system. Some colors were present, but they were not set as variables or assigned clear usage rules. Spacing, borders, shadows, and typography rules were missing, as well as structured components. To solve this, I restructured the Design System using Atomic Design principles, ensuring it was modular, reusable, and easy to maintain.
Foundations
The foundations define the core visual language of the app. I created and documented the variables that did not exist before, making them reusable and consistent across the system. These included:
Colors: Primitive and semantic palettes with usage rules
Typography: Scales for headings, body text, and captions
Spacing: Numeric scale for consistent layouts
Borders & Shadows: Rules for depth and separation
Icons & Avatars: Unified style and usage guidelines
These foundations became the building blocks for all components in the Design System.
Foundations
The foundations define the core visual language of the app. I created and documented the variables that did not exist before, making them reusable and consistent across the system. These included:
Colors: Primitive and semantic palettes with usage rules
Typography: Scales for headings, body text, and captions
Spacing: Numeric scale for consistent layouts
Borders & Shadows: Rules for depth and separation
Icons & Avatars: Unified style and usage guidelines
These foundations became the building blocks for all components in the Design System.
Foundations
The foundations define the core visual language of the app. I created and documented the variables that did not exist before, making them reusable and consistent across the system. These included:
Colors: Primitive and semantic palettes with usage rules
Typography: Scales for headings, body text, and captions
Spacing: Numeric scale for consistent layouts
Borders & Shadows: Rules for depth and separation
Icons & Avatars: Unified style and usage guidelines
These foundations became the building blocks for all components in the Design System.
Implementation
With the foundations in place, I structured the system according to Atomic Design:
Atoms: Colors, typography, buttons, inputs, icons, avatars, spacing, borders, and shadows
Molecules: Simple combinations such as input fields with labels, buttons with icons, or cards with text and visuals
Organisms: Larger sections like headers, menus, and dashboard widgets
Templates: Layout patterns showing how organisms and molecules are arranged consistently across screens
This structure made the system modular, reusable, and scalable.
Implementation
With the foundations in place, I structured the system according to Atomic Design:
Atoms: Colors, typography, buttons, inputs, icons, avatars, spacing, borders, and shadows
Molecules: Simple combinations such as input fields with labels, buttons with icons, or cards with text and visuals
Organisms: Larger sections like headers, menus, and dashboard widgets
Templates: Layout patterns showing how organisms and molecules are arranged consistently across screens
This structure made the system modular, reusable, and scalable.
Implementation
I focused on translating product goals and user feedback into clear, intuitive, and user-friendly designs. Continuous refinements were made to the Upcoming Tokens section and Project Info Pages to boost clarity, build trust, and improve ease of use.
Designed visual tags and custom iconography that improved users’ ability to scan and compare projects efficiently.
Redesigned the “Key Info” and “Roadmap” sections with a stronger visual hierarchy and distinct icons for better user comprehension.
Created mobile-friendly layouts with smooth navigation to ensure a seamless user experience across devices.
Iterated design solutions informed by real user behavior and usability testing to minimize friction and increase engagement.
Docs & Tokens
I documented all foundations, components, and patterns, creating design tokens for colors, typography, spacing, borders, and shadows. The documentation included guidelines for when and how to use each element, ensuring consistency between design and development.
Docs & Tokens
I documented all foundations, components, and patterns, creating design tokens for colors, typography, spacing, borders, and shadows. The documentation included guidelines for when and how to use each element, ensuring consistency between design and development.
Docs & Tokens
I documented all foundations, components, and patterns, creating design tokens for colors, typography, spacing, borders, and shadows. The documentation included guidelines for when and how to use each element, ensuring consistency between design and development.
Challenges
The biggest challenge was introducing structure and naming conventions to a system that lacked organization. Another was balancing strict rules with flexibility, so the system could adapt to new features.
I learned the importance of thorough auditing, clear documentation, and setting variables early to ensure scalability and consistency.
This process turned a fragmented system into a scalable foundation for future growth.
Challenges
The biggest challenge was introducing structure and naming conventions to a system that lacked organization. Another was balancing strict rules with flexibility, so the system could adapt to new features.
I learned the importance of thorough auditing, clear documentation, and setting variables early to ensure scalability and consistency.
This process turned a fragmented system into a scalable foundation for future growth.
Challenges
The biggest challenge was introducing structure and naming conventions to a system that lacked organization. Another was balancing strict rules with flexibility, so the system could adapt to new features.
I learned the importance of thorough auditing, clear documentation, and setting variables early to ensure scalability and consistency.
This process turned a fragmented system into a scalable foundation for future growth.
Next Steps
The restructured Design System is fully functional and designed to evolve with the product as new features are added.
Next Steps
The restructured Design System is fully functional and designed to evolve with the product as new features are added.
Next Steps
The restructured Design System is fully functional and designed to evolve with the product as new features are added.
WORK
Case Studies
From crypto wallets to wellness brands, these case studies show how I bring clarity and consistency to every design challenge, across digital products, identities, and systems.
WORK
Case Studies
From crypto wallets to wellness brands, these case studies show how I bring clarity and consistency to every design challenge, across digital products, identities, and systems.
WORK
Case Studies
From crypto wallets to wellness brands, these case studies show how I bring clarity and consistency to every design challenge, across digital products, identities, and systems.
Thanks
Thanks for stopping by and checking out my work.
© 2025 All rights reserved.
Thanks
Thanks for stopping by and checking out my work.
© 2025 All rights reserved.
Thanks
Thanks for stopping by and checking out my work.
© 2025 All rights reserved.