PROJECTS
Design System Driving Consistency
Workflow
Overview
Design Approach
Sruture
System Documentation
Challenges
TEAM
Mónica Ferraz
Spencer James
Suroor Gupta
Bruno Alves
TIME
2024/2025
PRODUCT
Metrics
Business
Standardized reusable components, boosting design efficiency by 45% post-implementation
Reduced UI inconsistencies by 80% post-implementation
Saved 40% of design time on screen development post-implementation
Users
Improved interface clarity and consistency across all product touchpoints
Metrics
Business
Standardized reusable components, boosting design efficiency by 45% post-implementation
Reduced UI inconsistencies by 80% post-implementation
Saved 40% of design time on screen development post-implementation
Users
Improved interface clarity and consistency across all product touchpoints
Metrics
Business
Standardized reusable components, boosting design efficiency by 45% post-implementation
Reduced UI inconsistencies by 80% post-implementation
Saved 40% of design time on screen development post-implementation
Users
Improved interface clarity and consistency across all product touchpoints
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet. The existing system had grown organically and without governance, which meant inconsistencies had accumulated across the product. The goal was to introduce structure, establish clear rules, and build a modular system that could scale with the product and support efficient collaboration between design and engineering.
The system was built on a layered approach inspired by Atomic Design thinking, adapted into a more flexible structure that fits how the product actually grows and scales. This meant building from core visual tokens upward through base components, composite components, and patterns that define how those components are applied across different contexts.
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet. The existing system had grown organically and without governance, which meant inconsistencies had accumulated across the product. The goal was to introduce structure, establish clear rules, and build a modular system that could scale with the product and support efficient collaboration between design and engineering.
The system was built on a layered approach inspired by Atomic Design thinking, adapted into a more flexible structure that fits how the product actually grows and scales. This meant building from core visual tokens upward through base components, composite components, and patterns that define how those components are applied across different contexts.
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet. The existing system had grown organically and without governance, which meant inconsistencies had accumulated across the product. The goal was to introduce structure, establish clear rules, and build a modular system that could scale with the product and support efficient collaboration between design and engineering.
The system was built on a layered approach inspired by Atomic Design thinking, adapted into a more flexible structure that fits how the product actually grows and scales. This meant building from core visual tokens upward through base components, composite components, and patterns that define how those components are applied across different contexts.
Design Approach
I started with a full audit of the existing system. Colors existed but were not set as variables and had no defined usage rules. Spacing, borders, shadows, and typography had no documented standards. Components were unstructured and inconsistent.
The audit produced a clear picture of what needed to be built from scratch versus what could be standardised from existing elements. From that point, I organised the work into three layers: Foundations, which define the core visual language; Components, which build on those foundations from simple base elements to complex composites; and Patterns, which define how components are applied consistently across the product.
Design Approach
I started with a full audit of the existing system. Colors existed but were not set as variables and had no defined usage rules. Spacing, borders, shadows, and typography had no documented standards. Components were unstructured and inconsistent.
The audit produced a clear picture of what needed to be built from scratch versus what could be standardised from existing elements. From that point, I organised the work into three layers: Foundations, which define the core visual language; Components, which build on those foundations from simple base elements to complex composites; and Patterns, which define how components are applied consistently across the product.
Design Approach
I started with a full audit of the existing system. Colors existed but were not set as variables and had no defined usage rules. Spacing, borders, shadows, and typography had no documented standards. Components were unstructured and inconsistent.
The audit produced a clear picture of what needed to be built from scratch versus what could be standardised from existing elements. From that point, I organised the work into three layers: Foundations, which define the core visual language; Components, which build on those foundations from simple base elements to complex composites; and Patterns, which define how components are applied consistently across the product.
Structure
Foundations cover colors, typography, spacing, borders, shadows, icons, and avatars. Every value was defined as a token and documented with usage rules, ensuring that both design and engineering were working from the same source of truth.
Components are divided into two levels. Base components are the simplest building blocks: buttons, tags, badges, icons, toggles, spinners. Composite components combine these into more complex elements: token cards, chain tags, navigation bars, bottom sheets, floating banners, inputs. Each component was documented with anatomy, properties, usage guidelines, and examples showing where it appears in the product.
Patterns sit above components and define how they are assembled and applied across specific product contexts, ensuring consistency at the screen and flow level.
Structure
Foundations cover colors, typography, spacing, borders, shadows, icons, and avatars. Every value was defined as a token and documented with usage rules, ensuring that both design and engineering were working from the same source of truth.
Components are divided into two levels. Base components are the simplest building blocks: buttons, tags, badges, icons, toggles, spinners. Composite components combine these into more complex elements: token cards, chain tags, navigation bars, bottom sheets, floating banners, inputs. Each component was documented with anatomy, properties, usage guidelines, and examples showing where it appears in the product.
Patterns sit above components and define how they are assembled and applied across specific product contexts, ensuring consistency at the screen and flow level.
Structure
Foundations cover colors, typography, spacing, borders, shadows, icons, and avatars. Every value was defined as a token and documented with usage rules, ensuring that both design and engineering were working from the same source of truth.
Components are divided into two levels. Base components are the simplest building blocks: buttons, tags, badges, icons, toggles, spinners. Composite components combine these into more complex elements: token cards, chain tags, navigation bars, bottom sheets, floating banners, inputs. Each component was documented with anatomy, properties, usage guidelines, and examples showing where it appears in the product.
Patterns sit above components and define how they are assembled and applied across specific product contexts, ensuring consistency at the screen and flow level.
System Documentation
Every foundation, component, and pattern was documented directly in Figma. Documentation includes usage guidelines, anatomy breakdowns, property definitions, and examples in context. Design tokens were created for colors, typography, spacing, borders, and shadows, giving engineering a structured reference for implementation.
The documentation was written to be usable without additional explanation, so any designer or engineer joining the product could orient themselves in the system without needing a walkthrough.
System Documentation
Every foundation, component, and pattern was documented directly in Figma. Documentation includes usage guidelines, anatomy breakdowns, property definitions, and examples in context. Design tokens were created for colors, typography, spacing, borders, and shadows, giving engineering a structured reference for implementation.
The documentation was written to be usable without additional explanation, so any designer or engineer joining the product could orient themselves in the system without needing a walkthrough.
System Documentation
Every foundation, component, and pattern was documented directly in Figma. Documentation includes usage guidelines, anatomy breakdowns, property definitions, and examples in context. Design tokens were created for colors, typography, spacing, borders, and shadows, giving engineering a structured reference for implementation.
The documentation was written to be usable without additional explanation, so any designer or engineer joining the product could orient themselves in the system without needing a walkthrough.
Challenges
The most significant challenge was introducing naming conventions and structural rules to a system that had grown without them. Renaming and reorganising existing elements without breaking work already in progress required careful sequencing and close coordination with engineering.
The second challenge was building a system flexible enough to accommodate new features without requiring structural changes each time. This was addressed through the patterns layer, which provides composable guidelines rather than rigid templates, and through thorough variable definitions at the foundation level that allow new components to inherit existing rules by default.
Challenges
The most significant challenge was introducing naming conventions and structural rules to a system that had grown without them. Renaming and reorganising existing elements without breaking work already in progress required careful sequencing and close coordination with engineering.
The second challenge was building a system flexible enough to accommodate new features without requiring structural changes each time. This was addressed through the patterns layer, which provides composable guidelines rather than rigid templates, and through thorough variable definitions at the foundation level that allow new components to inherit existing rules by default.
Challenges
The most significant challenge was introducing naming conventions and structural rules to a system that had grown without them. Renaming and reorganising existing elements without breaking work already in progress required careful sequencing and close coordination with engineering.
The second challenge was building a system flexible enough to accommodate new features without requiring structural changes each time. This was addressed through the patterns layer, which provides composable guidelines rather than rigid templates, and through thorough variable definitions at the foundation level that allow new components to inherit existing rules by default.
WORK
Case Studies
Six case studies across crypto wallets, design systems, brand identity, and web products. The work ranges from feature UX to full brand restructures, with a consistent focus on clarity, scalability, and detail.
WORK
Case Studies
Six case studies across crypto wallets, design systems, brand identity, and web products. The work ranges from feature UX to full brand restructures, with a consistent focus on clarity, scalability, and detail.
WORK
Case Studies
Six case studies across crypto wallets, design systems, brand identity, and web products. The work ranges from feature UX to full brand restructures, with a consistent focus on clarity, scalability, and detail.
Thanks
Thanks for taking the time to look at my work.
© 2026 All rights reserved.
Thanks
Thanks for taking the time to look at my work.
© 2026 All rights reserved.
Thanks
Thanks for taking the time to look at my work.
© 2025 All rights reserved.