What is Iris?
Iris is the design system created by Alkami. Within Iris you’ll find reusable User Interface (UI) components that can be leveraged across our products to help you create high quality User Experiences (UX). Learn more in our Getting Started Guide.
The goals of this system are to:
- Provide simplicity and ease of use when composing UIs for your site. From the straightforward to the complex – we’ve got you covered.
- Help you ensure consistency in the UIs you build, by providing tools you’ll need to get the job done.
Who is the design system for?
Iris delivers a single source of truth for designers and developers to ease the creation of high quality user experiences.
Iris is built with the following personas in mind:
The UX Designer, who wants to provide user experiences that are high quality, accessible, and consistent
The UI Developer, who wants their code to be clean and consistent and conform to accessibility standards
The Product Owner, who wants their product teams to focus on the hard stuff not the easy stuff so product development moves faster and delivers consistent and reliable product experiences every time
The Product Stakeholders, who want to be assured of the accessibility, consistency, and quality of the user experience
Who works on the Iris Design System?
We have a core team of designers and developers dedicated to the support and growth of the Iris Design System.
Is Iris accessible?
All of our components are made to be accessible by everyone. They meet the latest accessibility standards, as we strive to build a unified experience for both visual display and screen reader users. In each component’s documentation, we’ve included an accessibility guide on what to pay attention to when implementing a component and on what accessibility features are included in the component itself. Visit the Accessibility section in Foundations to learn more.
Which Browsers are supported?
In order to provide a better and more secure online banking experience to our users, we support the following browsers:
|Internet Explorer||11 (Optional polyfill file required)|
|Edge||Current and the previous major version|
|Mozilla Firefox||Current and the previous major version|
|Google Chrome||Current and the previous major version|
|Safari||Current and the previous major version|
Iris is designed to work with touch-based devices. We support the following mobile browsers:
|Android||Chrome||Current and the previous major version|
|IOS||Safari||Current and the previous major version|
How do I get the latest Iris library?
If working with one of Alkami's platforms (e.g. building a widget for ORB), Iris comes preinstalled. Each sprint the Iris team will update the global scripts to include the latest version of Iris. Nothing else is necessary to start using Iris.
If working on a project outside of ORB, there are two lines to add to the respective HTML file that will include the CSS and JS files necessary for Iris to operate. Please refer to this page for specific details.
How is Iris tested?
The core Iris team takes the testing of the library very seriously. Our testing plan consists of three types:
On every commit, all of our utility functions and global methods are tested to ensure they are performing as expected. Additionally, we follow TDD practices, meaning every bugfix that goes into the library has a cooresponding test where possible.
Visual Regression Testing
On every release, a visual regression test is run to look for any unanticipated side-effects from JS or CSS changes in the release. Screenshots are taken of each component and compared to the current baseline for a before and after view.
How can I help with Iris?
We are so excited that you want to contribute to the continued development of the Iris Design System. Following is a list of things you can do to make it a success:
SHOUT how great and useful Iris is from the mountain tops or at least from your desk.
ADOPT Iris. Use the system in your new product or feature. Convert your current features and products to Iris.
GIVE your ideas and designs directly to our Iris Gurus through feedback, bug tickets, and feature requests
How do I request a new feature?
Send us a Feature Request.
- For Alkamists: Create a Feature Request in Jira and assign it to the Iris Team
- For Alkami’s SDK Clients please send your request to email@example.com
What language are the components written in?
Some Iris components are also highly configurable. These can be configured through attributes on the HTML element. We call these special attributes decorators.
If a component has drastic design or functionality changes, a class can be added to the element as well as an extra HTML element called a variant.
Do I need to do something special to get iris components to work in mobile?
One of Iris principles is to create components that are responsive. We do not have desktop components and mobile components - we have components that are optimized everywhere. So feel free to use our components for mobile!