The Iris Mission Statement: Establish a system that provides a single source of truth to ease the creation of high quality user experiences.

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?

Desktop Browsers

In order to provide a better and more secure online banking experience to our users, we support the following browsers:

Browser Versions
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

Mobile Browsers

Iris is designed to work with touch-based devices. We support the following mobile browsers:

Operating System Browser Versions
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:

Unit Testing

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.

Feature Testing

On every commit, each of our components are tested for proper functionality within their API, utilizing a virtual DOM that mimics the bindings and interactions with a browser. This allows us to test manipulation through JavaScript (e.g. removing / destroying a component), event management, and user interactions (e.g. mouse clicks).

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 iris@alkamitech.com

What language are the components written in?

Web Components

Iris components consists of three parts, an HTML snippet, CSS, and optional Javascript. The CSS and Javascript files are provided by the Iris package and the HTML snippet can be copied from this Iris documentation site.

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!