Introduction

Designing code to elevate the Alkami experience.

Getting Started

Welcome to Iris, the design system created by Alkami. Here you’ll find reusable User Interface (UI) components that can be leveraged across our products to help you create high quality User Experiences (UX). 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.

Why this is important

Creating UIs from scratch can be hard, but it doesn’t have to be. Iris is here to guide you throughout the design and development processes to make composing new interactions simple. Our mantra has always been, "Let us solve the easy problems so that you can focus on the hard ones."

Philosophy

The underpinnings of the Iris system and the way we create components are founded upon four core principles:

Accessibility

All of our components are made for 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.

Flexibility

All of our components are built with flexibility in mind. Since UIs are meant to be composed of multiple elements, the components we produce are meant to be used in harmony. We take in to account the diverse array of use cases that we can anticipate for everything we build so that our components can fit anywhere in an experience.

If a UI is a symphony, each component can be thought of as an instrument meant to fill its role so that together they create a beautiful concerto.

Easy to use

All of our components are simple and easy to use. Every component has a well-documented implementation guide full of examples, advanced scenarios, and notes for things to keep in mind when using them. Some components have an interactive playground to experiment with the components to learn more about them.

Additionally, if a component has a javascript need, there is a well documented component API with information on how to interact with that component and use its interface.

Responsiveness

All of our components are responsive on all screen sizes. As we continue to look towards the future, it’s important that each of our components can be used on any device. This means we don’t have desktop components and mobile components – we have components that are optimized for everywhere.

Methodology

We strive to make our components as flexible and easy to use as possible. On every component page we’ve included documentation for all our user personas (designer, developers, and non-techies) as well as guidelines on how and when to use each of the components.

Implementation

Although the UI is composed of multiple elements, you should never combine components – nest them instead.

<div class="iris-avatar">
    <div class="iris-badge"></div>
</div>

Notice how the badge in the example above is nested inside of the avatar and not combined with it. It’s important that the markup of a component remains separate from other components to ensure each can handle all of its concerns gracefully.

Feedback

If you’d like to give us feedback about Iris, send an email to, send an email to iris@alkamitech.com or stop on by! We are always happy to talk about the system and opportunities to improve it.