WHite Label System
Iris
The Iris Design System is Alkami’s white-label design system, used across both business and consumer-facing products while allowing clients to configure and theme it to match their branding. As a key contributor to its development and enhancement, we focused on component development, feature improvements, and theming enhancements. The goal was for Iris to remain flexible, scalable, and user-friendly while maintaining consistency across various implementations.
Impact
We immediately saw an increase in cohesion and decrease in rogue components, and a faster pace of iterative and early design work.
Our Story in Numbers
8
Contributors
1 Design System Manager
2 Design Supporters
1 Development Lead
3 Developers
1 QA Developer
34%
Average Time Saved
Reduced time spent on design production by 27%, potentially saving 8,222 hours per year. Design systems reduced development time by up to 37% and tech-related costs by 30-35%.
100%
WCAG Compliance
All components met WCAG 2.1 AA color contrast minimum. All interactive components have visible, keyboard-navigable focus styles with screen reader capabilities.
$11.25M
Estimated Saved Annually
Design system investment resulted in $11.25 million in efficiency gains in the first year, based on a 30-50% improvement in team efficiency.
What are the perks?
Designed for
Desktop and Mobile
Iris has been developed in Vue and Flutter to allow the capabilities across desktop and mobile applications. This helps keeps consistency across two different code systems and allows for scalability.
.png)
Client Theming Capabilities
Iris has been developed to allow many different theming capabilities for clients to choose from. Clients can choose from different options may be their colors, shape style, layouts and more.
Fully Accessible
for All Types of Users
Each component has been developed with accessibility in mind out of the box. Each component makes sure that it is accessible for color contrast, HTML structure, ARIA roles/attributes and screen readers.
Thoroughly Documented
Each component has been documented for designers and developers to understand the structure of each component. Design patterns, do's and don'ts and behavior use cases are described for each component.
The Audit
An in-depth audit was conducted to identify gaps and improve consistency, accessibility, and usability for both designers and developers.
The review for development covered foundational tokens, component behavior, documentation clarity, and accessibility compliance.
The review of the Figma file showed it needed an improvement for usability, organization, and consistency. Needed updates simplifying the component library, cleaning up outdated assets, and aligning documentation with current usage.
1. Bare Minimum Figma File
The Figma file structure was still very open for designers to make mistakes and had no standards or patterns to follow. The components were poorly made and did not utilize the functionality that Figma has to make variants easy to use.
2. Incomplete Developed Components
The original system was designed and developed in two weeks. The documentation that did exist was full of information that was never developed due to only developing the bare minimum.
3. No Design Standards
There were no patterns, standards or templates being used within the design team. All designers were doing whatever they wanted when it came to UX and the inconsistency in the platform showed.
The Foundation
A well-structured design system ensures consistency, scalability, and efficiency by establishing strong foundations, reusable components, and clear documentation. Adoption and governance drive its success, while continuous iteration keeps it adaptable to evolving needs. By prioritizing accessibility and maintainability, a design system enhances user experience and streamlines development for long-term growth.
.png)
The Power of Design Tokens
Design tokens are the foundation of a scalable, themeable, and consistent design system. By storing core style values, such as color, typography, spacing, radius, and layout styles, tokens create a single source of truth for both design and development.
Consistency Across Platforms
-
Tokens ensure the same values are used in Figma, code, and across themes, reducing drift between design and development.
Theming and Customization
-
Colors, spacing, corner radius, fonts, icons, and layout patterns can be updated at the token level to support branding or accessibility needs without changing every component.
Efficiency and Scalability
-
When tokens are updated, changes cascade across all components and screens, saving hours of manual updates and reducing the risk of inconsistencies.
Accessibility and Compliance
-
Using tokens for things like spacing, contrast, and font sizing helps enforce accessible defaults system-wide.
.png)
Light Move vs Dark Mode
The Iris Design System supports both light mode and dark mode themes using a token-based architecture that ensures consistency, flexibility, and scalability across product experiences.
Rather than maintaining two separate color systems, Iris uses the same set of design tokens for both modes, with each token dynamically referencing a different value depending on the active theme. In dark mode, color tokens pull from the opposite end of the color ramp to maintain proper contrast, accessibility, and visual hierarchy in low-light environments.
For example
-
color-background-surface may map to a light gray (gray-0) in light mode, but automatically reference a deep gray (gray-900) in dark mode.
-
The token name stays the same—only the value changes based on the mode, allowing designers and developers to use a single source of truth without manual overrides.
This approach simplifies theming, reduces visual debt, and ensures all components adapt seamlessly when toggling between light and dark modes—while still maintaining accessibility and brand integrity across the entire system.
Flexible Developed Components
Flexible components are foundational UI elements built with adaptability in mind. These components are coded to support a range of use cases through configurable properties such as size, state, content variations, and layout options without requiring rework or duplication. This modular approach ensures teams can maintain visual and functional consistency while still meeting the unique needs of various products and platforms.
Scalability
-
Components can be reused across multiple products and platforms, reducing redundant design and development effort.
Customization Without Fragmentation
-
Teams can tailor components via props or tokens without compromising brand standards or functionality.
Improved Collaboration
-
Designers and developers share a single source of truth, streamlining handoff and reducing inconsistencies.
Faster Time-to-Market
-
Prebuilt flexibility minimizes the need for one-off solutions, speeding up feature delivery.
Easier Maintenance
-
Centralized logic means updates or fixes apply across all instances, improving long-term sustainability.
.png)
Flexible Figma Components
The goal of a robust Figma component library is to create cohesion across teams and decrease in rogue components, with a faster pace of iterative and early design work.
The governance process I established created more opportunities for designers to work together, getting early visibility into how the system was emerging across the product.
Each component was made with a purpose and was created to allow designers to focus on the UX instead of the UI of their project. All components follow a common pattern and have templates to create consistency across the design team for the platform. All designers understand the system and can communicate the purpose and usage of each component with any development team.
Figma Patterns & Templates
Including reusable patterns and templates in the design system Figma file empowers designers to move faster while maintaining consistency and alignment across products. These prebuilt layouts—such as form structures, card grids, navigation bars, and page templates—serve as a starting point, reducing repetitive work and enabling teams to focus more on solving user problems than recreating UI.
Faster Project Kickoff
-
Designers can jumpstart work with ready-to-use layouts that follow established standards.
Consistent User Experience
-
Using shared patterns ensures visual and functional consistency across features and platforms.
Reduces Redundant Decisions
-
Common UX decisions are already baked into templates, freeing up time for higher-level thinking.
Promotes Best Practices
-
Templates act as living documentation, guiding teams toward accessible and scalable design solutions.
Encourages Adoption
-
Lowering the barrier to entry for using the design system drives broader adoption across teams.
.png)
Defining a Design Governance
Design governance ensures that a design system remains consistent, scalable, and sustainable as it evolves. It’s the process of setting clear standards, roles, and review workflows to manage how components are added, updated, and maintained.
Without governance, design systems can quickly become fragmented filled with inconsistent components, duplicate patterns, or undocumented changes. Governance creates guardrails that protect the integrity of the system while still allowing for flexibility and innovation.
Good governance doesn’t slow teams down — it builds trust, reduces rework, and keeps the system reliable for everyone who uses it.
-
Consistency across teams, products, and platforms
-
Clear contribution guidelines to support collaboration and prevent design debt
-
Faster decision-making through defined review processes and roles
-
Higher quality outputs thanks to patterns, templates, and UX standards baked into the process
-
Long-term scalability as the system grows with the organization
The Outcome & Business Goal
The pattern I saw the team fall into was focusing too much on the stuff of design system, namely the design components, library, and styles. However, the success of a design system hinges on its invisible parts – how to use it, when to evolve it, and why it matters for the overall success of the business.
The business goal when it came to the Alkami Iris design system was the improvements it would bring to our engineering team, the quickness of designs being outputted and the enhancements it would give our clients for configuration.
The Iris design system was more than just components and colors to be consistent, it was fullfilling a business need to allow our clients to differentiate from other banks that have purchased our white label product.
