Color

Introduction

Color is one of the first systems we as humans learn about, which quickly becomes one of the early ways we interpret the environment around us. Red implies importance, attention, or danger. Green portrays safety, stability, prosperity and nature. Purple conjures up feelings of royalty or luxury. Consciously and subconsciously this focus on color helps us make choices, set expectations, and understand where we are and what is possible in the world around us. Color is power! It can change the mood, encourage, warn, appeal, frighten, persuade, etc. 

As we get older and begin learning how to use technology, our relationship with color evolves. We become conditioned to read dark text before lighter text, and to click on blue text. On the surface the use of color in digital interfaces seems simplistic, and in brochure websites it may be. But as the use of color scales for the world of complex enterprise web applications and mobile apps, things become incredibly complex; especially so with white-label SaaS products that need to accommodate millions of users across hundreds of client implementations.

To add complexity, creating and maintaining a color system is a challenge for a design team of one, let alone dozens designing products all at once. With the pressures of stakeholders, client feedback, and user critique, it’s far too easy to apply colors on a one-off basis. But with each one-off color treatment the system becomes less scalable and more fragmented. 

At Alkami our goal is to create a color system that not only helps users subconsciously understand and map experiences, but also reinforce our customers' brand in a scalable way. To accomplish this, we’ve identified three levels of color: platform level, brand level and user level. The way we apply color at each level depends on the objective of that level.

All color on The Alkami Platform utilize the RGBA color model.

Platform Colors

At the platform level, the objective is to help the user move through feature journeys effortlessly. The use of color at this level aims to subtly form visual groupings of content that is consistent throughout the entire experience. If the UI element is not providing some sort of guidance or call to action, then a platform color is applied. Color at this level is exactly the same from one client to another.

Alpha Channels

To accomplish a slight transparency, while remaining consistent with other transparent elements on the platform, we have provided 5 design tokens to help with this. Progressing from fully transparent, to fully opaque, the tokens are meant to be paired with any other color token as the alpha channel value.

See this demo page to see how alpha channel tokens are used to create various levels of intensity with drop shadows.

Branded Colors

At the brand level, the objective is to help the user identify possible interactions and navigational elements. Using color ramps, we’ve created a wide variety of colors to use throughout the experience while also reinforcing the underlying brand colors.

Color Ramps

Since color is purely reliant on human perception and eyeballs, many variables impact the interpretation and usage of color. To ensure that colors are used in a consistent way on our platform, we’ve turned to math as a way to programmatically manage and generate branded color sets.

Using a client's branded colors, we’ll programmatically generate 2 sets of colors. The first set are 22 tones ranging from light to dark — 11 for guidance tones, and 11 for affordance tones (see the following paragraph for an explanation of guidance & affordance). The second set is used for interactions with the base branded color (static, hover, pressed) and an accessible tone to ensure any use of content on top of a branded color will pass color contrast accessibility guidelines.

Guidance vs Affordance

Designers give clues for possible actions through the visual treatments of UI elements. From the physical world, take the action of opening a door as an example. To open the door does the user push, pull, lift up, twist, or a combination of these actions? Designers can help users make this decision through the design of the door handle. Is the handle round? Twist to open! Is there a flat plate instead of a handle? Push to open! The design provides affordances and guidance on the operation of things. Color is one tool designers utilize to accomplish this in the digital world.

Using the two most prominent client brand colors, we’ll assign one color for use with moments of affordance (helping users understand what actions are possible), and the other color for use with guidance moments (helping users navigate through the system). By default, the primary brand color will be used as the guidance color, and the secondary brand color will be used as the affordance color — but this can be swapped or fine-tuned in Theme Builder.

Messaging Color

Throughout the experience, there are moments of cautionary messages, success messages, informational messages, error messages, etc. Each message has a default color used to represent the appropriate meaning, but each can be changed in Theme Builder. 

Account Colors

On The Alkami Platform we pair a color with the account nickname and account number as an additional way to quickly identify an account within the experience. By default, one of eight colors is assigned to an account, but the user can swap with another account color at any time. While users cannot choose a custom color, the FI can within Theme Builder. 

It is a good idea to provide a wide variety of colors since each user approaches the use of the account color differently. Some set deposit accounts to one color, investment accounts another, and loan/credit accounts another. Some users like to have a unique color for each account. Some users like to have their main checking one color, and all other checking accounts another color.  

On Colors

When there is a need to place elements on top of another element with a branded background color, using the “On” color will ensure color contrast accessibility is met.

User Colors

Users love a personalized experience, but with the Alkami solution powering the experience of millions of users, we have many different personas to design for. This creates a unique challenge; especially for vision impaired and color blind users. A possible solution we are currently exploring is to provide a "high-contrast mode" that increases the color contrast ratio throughout the UI.

In our early design provocations of this, some of the most moving explorations were those done in “dark mode”. So in addition to the high-contrast mode we know that many users prefer a dark mode especially at night, and we want to provide a solution for that in the future. 

Specs

Platform Colors

Branded Colors

Please note that guidance and affordance colors are defined by the FI and these are just base colors for the design system.

Branded Guidance Colors

Branded Affordance Colors

Branded States Colors

Please note that as the state of various elements throughout the experience progress through static, hover, pressed, etc. there is a different set of colors based on the background color of the static state. 

Affordance Hover/Pressed/Selected are the colors used when the static state is treated with the Affordance Base color. 

Branded Hover/Pressed/Selected/Focused are the colors used when the static state is treated with Platform White.

Bulletin Messaging Colors

Info Messaging Colors

Success Messaging Colors

Caution Messaging Colors

Error Messaging Colors

Branded Account Colors