VirgoCX Design System
ABOUT VIRGOCX
VirgoCX is a Canadian cryptocurrency trading platform aiming to provide a secure, user-friendly experience for both new and advanced traders. As the company expanded its product offerings across web, app, and marketing channels, the need for a unified design foundation became critical.
MY ROLE
As a UI/UX Designer, I collaborated with the design lead, product managers, and developers to audit existing interfaces, establish a design system, and ensure consistency across platforms. My focus was on scalability, accessibility, and efficiency in the design-to-development workflow.
CONFIDENTIALITY
Due to company policies on privacy and confidentiality, I am unable to disclose full details of the work process or product-related projects. However, for this ongoing project, I can share examples of standardized components to demonstrate my understanding of design systems and showcase my skills as a designer, while still respecting company guidelines and maintaining confidentiality.
In this case study, I will walk you through the Component Library & Design System project.
When I first joined VirgoCX, the team lacked a proper design system, which resulted in inconsistencies across products. I initiated and collaborated with the design lead to build a scalable design system from the ground up. This process included conducting a UI audit to identify existing patterns, consolidating reusable components, and defining naming conventions, states, and interaction behaviors. I also established guidelines for typography, color, spacing, and accessibility, and partnered with developers to ensure seamless implementation.
Alongside the system, I created the company’s logo variations for overseas business expansion, ensuring brand consistency across different markets.
The design system and brand assets not only streamlined collaboration between design and engineering but also reduced design debt, improved visual consistency, and accelerated the rollout of new features and global initiatives.
Examples of areas for improvement:
The examples highlighted above represent only a portion of the areas for improvement within the design system. Many additional aspects will need to be assessed and refined to ensure the system remains scalable, consistent, and supportive of future growth.
ACCESSIBILITY
The original design system provided limited support for accessibility, leaving an opportunity to integrate best practices. To address this, I did research and competitor analysis, then incorporated accessibility principles—such as proper color contrast, typography choices, and interaction patterns—into the updated system, ensuring it can scale effectively while supporting consistency and inclusivity across products.
Competitor Analysis - Binance
In trading—whether stocks, crypto, or forex—red and green dominate the screen. Red indicates a price decrease, while green signals an increase over a selected time period. These colors are essential for spotting trends and visualizing portfolio performance, forming the basis of many critical trading decisions.
However, for individuals with red-green color vision deficiencies, these cues can be difficult to interpret. The two most common types are Deuteranopia (defects in the green cone) and Protanopia (defects in the red cone). In contrast, people with typical color vision have fully functioning red, green, and blue cones that allow them to distinguish these hues clearly.
This difference can have serious consequences. A color vision–deficient trader may misread a chart—such as mistaking a bearish trend for a bullish one—leading to costly, poorly timed trades. In a market like crypto, which moves rapidly and never sleeps, even a few seconds of hesitation or misinterpretation can create a significant disadvantage.
In my competitor analysis of Binance, I noted that their recent UI Refined update introduced improvements such as enhanced typography, dark mode, and customizable layout widgets, all of which support better readability and usability. They also included features addressing color vision deficiencies, an important consideration in trading platforms where red and green play a critical role. However, I found no clear evidence of full WCAG compliance, such as robust keyboard-only navigation or detailed accessibility support for screen readers. Drawing from these observations, I prioritized accessibility in the VirgoCX design system by focusing on readability (through font size and contrast), responsive design, and consideration of color vision deficiency modes —helping to fill these gaps and future-proof the product for a diverse range of users.
Accessibility Consideration/Improvements
Based on research and competitor analysis, key accessibility considerations were identified for the design system. These included ensuring adequate color contrast, recommending color palettes suitable for color vision deficiency modes, and implementing a mode tailored for seniors, etc. all aimed at creating a more inclusive and user-friendly system. Accessibility is an ongoing effort, and there is always room to further incorporate improvements in the future.
Before & After: Tracking and Guiding Design System Components
To ensure consistency across the design system, I created a comprehensive table as a work guidance tool. It captured the initial state of each component, identified required improvements, documented the standardized redesign, and included a final quality and accessibility review. This approach not only ensured every element was systematically evaluated and aligned with design standards but also provided a clear foundation for new team members to onboard efficiently. Designed as a living reference, the table continues to guide ongoing updates and supports the future growth of the design system.
Standardized Component Examples:
Colors
The first organized part of the design system was the color palette. When the company expanded overseas in 2022, Virgo Group introduced a new logo and brand colors, developed collaboratively by stakeholders and the design team. This provided the perfect opportunity to structure colors by function—for example, logo colors (VirgoCX for Canada and Virgo Group for overseas), functional colors, neutral tones, and background colors. Later that year, with the launch of dark mode for both the website and mobile app, the palette was refined to support accessibility and visual consistency across modes. This color foundation now anchors the design system and supports the scalability of future products.
Typography
Typography was another key part of organizing the design system. To align with brand identity and platform needs, the Matter font family was chosen for the website, providing a clean and professional look, while the Nunito font family was applied across the mobile app and trading platform for its readability and friendly tone.
Beyond font selection, detailed guidelines were established for heading sizes, line heights, and text treatments across different scenarios.
While developing these standards, I conducted research on readability and identified challenges users may face due to age-related physical decline and cognitive differences. By increasing font sizes and optimizing visual presentation, the product can better support senior users. To address this, I proposed the introduction of a dedicated senior mode to the head of the product team, aiming to create a more considerate and accessible experience.
Logo
The original logos, “VirgoCX” and “VirgoCX Wealth,” along with their variations, were documented in the design system. As the company expanded into Australia and the UK under the parenting company Virgo Group, so new logos for Virgo and Virgo Wealth were collaboratively developed with stakeholders, including color selections for both light and dark backgrounds. All logos were then systematically documented in the design system.
Button
Buttons were not consistently organized, making it necessary to establish proper guidelines for their usage. Standardized sizes were defined (e.g., large 60px, medium 50px, small 36px), along with corresponding heights for each variation. Since two different typographic systems were being used for web, mobile, and the trading platform, it became essential to separate button styles and create clear guidance on when and how to apply them.
Icons
At the beginning of building the design system, icons for both web and mobile were not standardized, as most were sourced from the Noun Project. This led to inconsistencies in style and line weight. To address this, a complete set of standardized icons was purchased to ensure consistency across current products and to support future business expansion.
In addition, cryptocurrency icons were standardized as part of the design system. As new coins are introduced, their icons will continue to be added to the cryptocurrency section, keeping the system up to date.
Responsive Key Area Layout for Web & H5
In this design system, a responsive key area layout was established for Web and H5 platforms to maintain consistent spacing and alignment across screen sizes. For Web (≥1248px), the key area spans 1200–1440px with 24–360px horizontal padding, while H5 (<992px) adopts a mobile-first approach, scaling the key area from 944px to 351px with 24–12px padding. This approach ensures visually balanced, user-friendly content and provides clear guidelines for responsive layout implementation.
Header & Footer
With the revamp of the main website virgocx.ca, the header and footer were standardized to ensure consistency ahead of the company’s international expansion (worldwide site – virgo.co). The design and organization of the header and footer were collaboratively developed with the product manager and head of the product team. In the design system, the header was structured into clear sections for navigation, search, and user actions, while the footer grouped links, company information, and secondary actions. This modular approach allows each element to be reused across products, maintaining a cohesive experience as the brand scales globally.
Next Steps for the Design System
Other components in the design system include spacing, border radius, typography, color palette, checkbox, divider, switch, dropdown menu, input fields, and card layouts and more. This design system is not a finished product but rather a foundation that continues to evolve. It is built to grow with the company’s products, allowing more components and standardized elements to be documented and added over time, ensuring visual consistency, development efficiency, and scalability across platforms.
The next step is to create detailed and comprehensive documentation for each component, outlining usage guidelines, variations, accessibility considerations, and best practices so that both designers and developers can apply them consistently and collaboratively across different products
DESIGN SYSTEM IN ACTION
Cohesive & Efficient Redesign
Using the design system during the website revamp ensured that each component was standardized and consistently implemented across the redesign. This not only created a more cohesive look and feel but also streamlined the process of updating and building new subpages. With predefined styles, spacing, and interaction patterns in place, the design system served as a reliable foundation—reducing inconsistencies, accelerating the redesign process, and making future iterations more efficient and scalable.
Brand / Global Consideration
With VirgoCX expanding overseas, the updated design system became the foundation for building the new Virgo.co website, supporting the company’s global business strategy. By leveraging standardized components, typography, and color systems, we ensured consistency across regions while still allowing flexibility for localization. This made it easier to adapt layouts, adjust content hierarchy, and refine visual tone to suit different markets and cultural contexts. For example, we considered color symbolism, readability across languages, and variations in communication style to make the brand feel familiar yet locally relevant. The design system not only maintained brand consistency across multiple platforms but also provided the scalability needed to support future international growth.
Dark Mode
At present, dark mode is only available on the VirgoCX mobile trading app, which provides users with an alternative theme for reduced eye strain during trading. The web platform does not yet support dark mode, but the next step is to extend this feature to the trading page and all other web pages. Implementing dark mode across the website will not only improve usability for users who prefer low-light interfaces but also ensure a consistent experience across mobile and web platforms.
Next Steps for the Accessbility
Both color vision deficiency support and senior mode have been prioritized as key accessibility initiatives for upcoming projects. Stakeholders and the Head of Product recognized the importance of these features and fully supported their implementation. Moving forward, as we extend dark mode to the web platform, these accessibility considerations will guide our design decisions. In addition, we will align components and interactions with WCAG guidelines, including maintaining sufficient color contrast, ensuring keyboard navigation, providing descriptive labels for screen readers, and supporting scalable text. These measures will help make the platform more inclusive and user-friendly for a diverse range of users.
Outcomes
By standardizing core components, the design system streamlined collaboration between designers and developers, reducing duplicated work and minimizing back-and-forth. This led to an estimated 20–30% faster design-to-development handoff and helped new team members onboard more quickly by providing clear, reusable patterns.
It’s an evolving, ongoing effort rather than a finished product.
I built the design system from the ground up as a living, scalable framework to support the company’s expanding products. While it currently defines core components, responsive layouts, typography, and visual guidelines, it remains an evolving project, with new elements continuously added.
Working on the design system was a valuable experience that went beyond creating UI components. It gave me a deeper understanding of how design decisions impact scalability, consistency, and cross-team collaboration. I realized that a design system is never truly complete, but rather an evolving foundation that grows with the product and organization. Through this process, I also learned the importance of balancing design clarity with flexibility, ensuring that components are not only standardized but also adaptable to future needs. This experience strengthened my ability to think systematically, collaborate closely with product managers and developers, and approach design with a long-term perspective.
