ATP DESIGN SYSTEM
A consistent, scalable design language is the foundation of every great product. At Axi, I played a key role in building and evolving the Axi Design System, a unified set of components, guidelines, and patterns used across mobile and web platforms. This system ensures visual consistency, accelerates development, and enables teams to deliver features faster while staying aligned with Axi’s brand identity.
#1 – SCALABILITY
Multiple teams building across mobile, web, and crypto products required a single source of truth to ensure alignment.
#2 – CONSISTENCY
A trading experience must feel seamless across platforms — every button, chart, and interaction should look and behave the same way.
#3 – SPEED & EFFICIENCY
Without a design system, product teams risk duplication and inconsistency, slowing delivery and frustrating users.
MISSION
Without a design system, product teams risk duplication and inconsistency, slowing delivery and timelines. Create a design system that empowers designers and developers to deliver a cohesive trading experience across Axi’s ecosystem. My contributions included:
- Defining component libraries for web and mobile.
- Establishing UI/UX guidelines and accessibility standards.
- Documenting usage rules for typography, colors, and interactions.
- Partnering with engineering to ensure seamless implementation.
The result: a scalable, reusable system that reduces design debt, speeds up iteration, and allows Axi to focus on delivering value to traders.
AUDIENCE
The primary users of the design system are internal teams — product designers, developers, and product managers. By providing a shared language and toolkit, the system empowers teams to work faster, stay consistent, and focus more on solving user problems. Ultimately, this benefits retail traders too, who experience a unified, trustworthy platform that helps them Trade Their Edge without distraction.
MY ROLE
Senior Product Designer
2 designers
SOLUTION
A design system guided by principles and best practices. Documentation on each step to ensure consistency and efficiency of work.
#1– ATOMIC FOUNDATION
Axi's design system is based on the principles of Brad Frost atomic design. The key idea behind this methodology is to breakdown distinct stages that combined together create interface design systems.
#2 – EXISTING PRINCIPLE
Sometimes there is no need to reinvent the wheel. Rather than creating our own system from scratch, we decided to lean on existing fundamentals to accelerate the creation of Axi's design system.
Grid 8 point system: We use multiple of 8 to define dimensions, padding, and margin of both block and inline elements. By using the same measurements rule we can ensure consistency through our design.
Colour-tone accessibility is a challenge that makes colour swatches hard to build. Thanks to google material design, we were able to adjust our palette complying with AA contrast ratio.
#3 – AXI'S ATOMS
#4 – AXI'S MOLECULES
ATP DESIGN SYSTEM
A consistent, scalable design language is the foundation of every great product. At Axi, I played a key role in building and evolving the Axi Design System, a unified set of components, guidelines, and patterns used across mobile and web platforms. This system ensures visual consistency, accelerates development, and enables teams to deliver features faster while staying aligned with Axi’s brand identity.
#1 – SCALABILITY
Multiple teams building across mobile, web, and crypto products required a single source of truth to ensure alignment.
#2 – CONSISTENCY
A trading experience must feel seamless across platforms — every button, chart, and interaction should look and behave the same way.
#3 – SPEED & EFFICIENCY
Without a design system, product teams risk duplication and inconsistency, slowing delivery and frustrating users.
MISSION
Without a design system, product teams risk duplication and inconsistency, slowing delivery and timelines. Create a design system that empowers designers and developers to deliver a cohesive trading experience across Axi’s ecosystem. My contributions included:
- Defining component libraries for web and mobile.
- Establishing UI/UX guidelines and accessibility standards.
- Documenting usage rules for typography, colors, and interactions.
- Partnering with engineering to ensure seamless implementation.
The result: a scalable, reusable system that reduces design debt, speeds up iteration, and allows Axi to focus on delivering value to traders.
AUDIENCE
The primary users of the design system are internal teams — product designers, developers, and product managers. By providing a shared language and toolkit, the system empowers teams to work faster, stay consistent, and focus more on solving user problems. Ultimately, this benefits retail traders too, who experience a unified, trustworthy platform that helps them Trade Their Edge without distraction.
MY ROLE
Senior Product Designer
2 designers
SOLUTION
A design system guided by principles and best practices. Documentation on each step to ensure consistency and efficiency of work.
#1– ATOMIC FOUNDATION
Axi's design system is based on the principles of Brad Frost atomic design. The key idea behind this methodology is to breakdown distinct stages that combined together create interface design systems.
#2 – EXISTING PRINCIPLE
Sometimes there is no need to reinvent the wheel. Rather than creating our own system from scratch, we decided to lean on existing fundamentals to accelerate the creation of Axi's design system.
Grid 8 point system: We use multiple of 8 to define dimensions, padding, and margin of both block and inline elements. By using the same measurements rule we can ensure consistency through our design.
Colour-tone accessibility is a challenge that makes colour swatches hard to build. Thanks to google material design, we were able to adjust our palette complying with AA contrast ratio.
#3 – AXI'S ATOMS
#4 – AXI'S MOLECULES
ATP DESIGN SYSTEM
A consistent, scalable design language is the foundation of every great product. At Axi, I played a key role in building and evolving the Axi Design System, a unified set of components, guidelines, and patterns used across mobile and web platforms. This system ensures visual consistency, accelerates development, and enables teams to deliver features faster while staying aligned with Axi’s brand identity.
#1 – SCALABILITY
Multiple teams building across mobile, web, and crypto products required a single source of truth to ensure alignment.
#2 – CONSISTENCY
A trading experience must feel seamless across platforms — every button, chart, and interaction should look and behave the same way.
#3 – SPEED & EFFICIENCY
Without a design system, product teams risk duplication and inconsistency, slowing delivery and frustrating users.
MISSION
Without a design system, product teams risk duplication and inconsistency, slowing delivery and timelines. Create a design system that empowers designers and developers to deliver a cohesive trading experience across Axi’s ecosystem. My contributions included:
- Defining component libraries for web and mobile.
- Establishing UI/UX guidelines and accessibility standards.
- Documenting usage rules for typography, colors, and interactions.
- Partnering with engineering to ensure seamless implementation.
The result: a scalable, reusable system that reduces design debt, speeds up iteration, and allows Axi to focus on delivering value to traders.
AUDIENCE
The primary users of the design system are internal teams — product designers, developers, and product managers. By providing a shared language and toolkit, the system empowers teams to work faster, stay consistent, and focus more on solving user problems. Ultimately, this benefits retail traders too, who experience a unified, trustworthy platform that helps them Trade Their Edge without distraction.
MY ROLE
Senior Product Designer
2 designers
SOLUTION
A design system guided by principles and best practices. Documentation on each step to ensure consistency and efficiency of work.
#1– ATOMIC FOUNDATION
Axi's design system is based on the principles of Brad Frost atomic design. The key idea behind this methodology is to breakdown distinct stages that combined together create interface design systems.
#2 – EXISTING PRINCIPLE
Sometimes there is no need to reinvent the wheel. Rather than creating our own system from scratch, we decided to lean on existing fundamentals to accelerate the creation of Axi's design system.
Grid 8 point system: We use multiple of 8 to define dimensions, padding, and margin of both block and inline elements. By using the same measurements rule we can ensure consistency through our design.
Colour-tone accessibility is a challenge that makes colour swatches hard to build. Thanks to google material design, we were able to adjust our palette complying with AA contrast ratio.
#3 – AXI'S ATOMS
#4 – AXI'S MOLECULES