Design frameworks

Color

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.

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.

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

Color Name Design Token Default Value Notes
Alpha 0 ∆colorPlatformAlpha0 None Not themable. This isn’t necessarily an alpha, but if there needs to be a default for a color that could dynamically receive an alpha channel, then this one is a great way to accomplish that. In other words a color with this set as the alpha will remain fully opaque.
Alpha 25 ∆colorPlatformAlpha25 .04 Not themable. This is the most extreme form of transparency on the platform. In other words a color with this set as the alpha will be near fully transparent.
Alpha 50 ∆colorPlatformAlpha50 .12 Not themable. This is not quite as transparent as Alpha 25, but more transparent than Alpha 75.
Alpha 75 ∆colorPlatformAlpha75 .24 Not themable. This is not quite as transparent as Alpha 50, but more transparent than Alpha 100.
Alpha 100 ∆colorPlatformAlpha100 .96 Not themable. Near fully opaque with just the slightest bit of transparency.
Platform White ∆colorPlatformWhite 255, 255, 255 Not themable. Used on surfaces, cards, and as type treatments when on darker surfaces.
Platform 25 ∆colorPlatformGray25 250, 250, 250 Not themable
Platform 50 ∆colorPlatformGray50 242, 242, 242 Not themable
Platform 100 ∆colorPlatformGray100 230, 230, 230 Not themable
Platform 200 ∆colorPlatformGray200 204, 204, 204 Not themable
Platform 300 ∆colorPlatformGray300 179, 179, 179 Not themable
Platform 400 ∆colorPlatformGray400 153, 153, 153 Not themable
Platform 500 ∆colorPlatformGray500 117, 117, 117 Not themable
Platform 600 ∆colorPlatformGray600 102, 102, 102 Not themable
Platform 700 ∆colorPlatformGray700 77, 77, 77 Not themable
Platform 800 ∆colorPlatformGray800 51, 51, 51 Not themable
Platform 900 ∆colorPlatformGray900 26, 26, 26 Not themable

Branded Colors

Branded Guidance Colors

Color Name Design Token Default Value Notes
Guidance Base ∆colorBrandedGuidance 109, 247, 196 Set in Theme Builder by FI. This is the true branded color without any mathematical adjustments.
Guidance 25 ∆colorBrandedGuidance25 248, 250, 249 Generated by Theme Builder. Used as background surface color if FI sets background to guidance color instead of Platform White or an image.
Guidance 50 ∆colorBrandedGuidance50 239, 243, 242 Generated by Theme Builder
Guidance 100 ∆colorPlatformAlpha100 220, 235, 230 Generated by Theme Builder
Guidance 200 ∆colorPlatformGray200 177, 218, 203 Generated by Theme Builder
Guidance 300 ∆colorPlatformGray300 120, 210, 176 Generated by Theme Builder
Guidance 400 ∆colorPlatformGray400 62, 200, 149 Generated by Theme Builder
Guidance 500 ∆colorPlatformGray500 26, 164, 113 Generated by Theme Builder
Guidance 600 ∆colorPlatformGray600 11, 149, 98 Generated by Theme Builder
Guidance 700 ∆colorPlatformGray700 0, 117, 74 Generated by Theme Builder
Guidance 800 ∆colorPlatformGray800 0, 77, 49 Generated by Theme Builder
Guidance 900 ∆colorPlatformGray900 0, 39, 25 Generated by Theme Builder
Guidance Accessible ∆colorBrandedGuidanceAccessible 0, 117, 74 Generated by Theme Builder. This is used anytime an element needs to be treated with the Base Guidance color, but also needs to be accessible on a Platform White or Gray 25 background.
Guidance On ∆colorBrandedGuidanceOnColor 0, 77, 49 Generated by Theme Builder. This is used anytime an element needs to live on top of another element treated with the Guidance Base color. This ensures color contrast accessibility.

Branded Affordance Colors

Color Name Design Token Default Value Notes
Affordance Base ∆colorBrandedAffordance 11, 158, 244 Set in Theme Builder by FI. This is the true branded color without any mathematical adjustments.
Affordance 25 ∆colorBrandedAffordance25 248, 249, 250 Generated by Theme Builder. Used as background surface color if FI sets background to affordance color instead of Platform White or an image.
Affordance 50 ∆colorBrandedAffordance50 241, 242, 243 Generated by Theme Builder
Affordance 100 ∆colorPlatformAlpha100 225, 231, 235 Generated by Theme Builder
Affordance 200 ∆colorPlatformGray200 190, 208, 219 Generated by Theme Builder
Affordance 300 ∆colorPlatformGray300 133, 193, 228 Generated by Theme Builder
Affordance 400 ∆colorPlatformGray400 58, 182, 255 Generated by Theme Builder
Affordance 500 ∆colorPlatformGray500 5, 152, 238 Generated by Theme Builder
Affordance 600 ∆colorPlatformGray600 0, 133, 212 Generated by Theme Builder
Affordance 700 ∆colorPlatformGray700 0, 101, 160 Generated by Theme Builder
Affordance 800 ∆colorPlatformGray800 0, 67, 106 Generated by Theme Builder
Affordance 900 ∆colorPlatformGray900 0, 34, 54 Generated by Theme Builder
Affordance Accessible ∆colorBrandedAffordanceAccessible 0, 101, 160 Generated by Theme Builder. This is used anytime an element needs to be treated with the Base Affordance color, but also needs to be accessible on a Platform White or Gray 25 background.
Affordance On ∆colorBrandedAffordanceOnColor 0, 34, 54 Generated by Theme Builder. This is used anytime an element needs to live on top of another element treated with the Affordance Base color. This ensures color contrast accessibility.

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.

Color Name Design Token Default Value Notes
Affordance Hover ∆colorBrandedAffordanceHover Affordance 600 Used as an interactive hover state when the static state is treated with the Affordance Base color.
Affordance Hover On ∆colorBrandedAffordanceHoverOnColor Affordance 900 Used anytime an element needs to live on top of the Guidance Hover color. This ensures color contrast accessibility.
Affordance Pressed ∆colorBrandedAffordancePressed Affordance 700 Used as an interactive pressed/active state when the static state is treated with the Affordance Base color.
Affordance Pressed On ∆colorBrandedAffordancePressedOnColor Affordance 100 Used anytime an element needs to live on top of the Affordance Pressed color. This ensures color contrast accessibility.
Affordance Selected ∆colorBrandedAffordanceSelected Affordance 500 Used as an interactive selected state when the static state is treated with the Affordance Base color
Affordance Selected On ∆colorBrandedAffordanceSelectedOnColor Affordance 900 Used anytime an element needs to live on top of the Affordance Selected color. This ensures color contrast accessibility.
Branded Hover ∆colorBrandedHover Affordance 100 Used as an interactive hover state when the static state starts from white.
Branded Pressed ∆colorBrandedPressed Affordance Base Used as an interactive pressed state when the static state starts from white.
Branded Selected ∆colorBrandedSelected Affordance 200 Used as an interactive selected state when the static state starts from white.
Branded Focused ∆colorBrandedFocused Affordance 100 Used as an interactive focused state for text field components.
Guidance Hover ∆colorBrandedGuidanceHover Guidance 600 Used as an interactive hover state when the static state is treated with the Guidance Base color.
Guidance Hover On ∆colorBrandedGuidanceHoverOnColor Guidance 900 Used anytime an element needs to live on top of the Guidance Hover color. This ensures color contrast accessibility.
Guidance Pressed ∆colorBrandedGuidancePressed Guidance 700 Used as an interactive pressed/active state when the static state is treated with the Guidance Base color.
Guidance Pressed On ∆colorBrandedGuidancePressedOnColor Guidance 100 Used anytime an element needs to live on top of the Guidance Pressed color. This ensures color contrast accessibility.
Guidance Selected ∆colorBrandedGuidanceSelected Guidance 500 Used as an interactive selected state when the static state is treated with the Guidance Base color.
Guidance Selected On ∆colorBrandedGuidanceSelectedOnColor Guidance 900 Used anytime an element needs to live on top of the Guidance Selected color. This ensures color contrast accessibility.

Branded Messaging Colors

Color Name Design Token Default Value Notes
Bulletin ∆colorBrandedBulletin 51, 51, 51 Set in Theme Builder by FI.
Bulletin On ∆colorBrandedBulletinOnColor Platform White Set in Theme Builder by FI.
Info ∆colorBrandedInfo 2, 103, 193 Set in Theme Builder by FI.
Info Timeout ∆colorBrandedInfoTimeout 2, 81, 151 Set in Theme Builder by FI.
Info Light ∆colorBrandedInfoLight 242, 247, 252 Set in Theme Builder by FI.
Info Timeout Light ∆colorBrandedInfoTimeoutLight 208, 227, 246 Set in Theme Builder by FI.
Caution ∆colorBrandedCaution 196, 84, 19 Set in Theme Builder by FI.
Caution Timeout ∆colorBrandedCautionTimeout 158, 68, 15 Set in Theme Builder by FI.
Caution Light ∆colorBrandedCautionLight 252, 246, 243 Set in Theme Builder by FI.
Caution Timeout Light ∆colorBrandedCautionTimeoutLight 245, 221, 209 Set in Theme Builder by FI.
Error ∆colorBrandedError 206, 22, 22 Set in Theme Builder by FI.
Error Timeout ∆colorBrandedErrorTimeout 170, 18, 18 Set in Theme Builder by FI.
Error Light ∆colorBrandedErrorLight 252, 243, 243 Set in Theme Builder by FI.
Error Timeout Light ∆colorBrandedErrorTimeoutLight 245, 209, 209 Set in Theme Builder by FI.
Success ∆colorBrandedSuccess 27, 124, 53 Set in Theme Builder by FI.
Success Timeout ∆colorBrandedSuccessTimeout 20, 92, 39 Set in Theme Builder by FI.
Success Light ∆colorBrandedSuccessLight 243, 248, 245 Set in Theme Builder by FI.
Success Timeout Light ∆colorBrandedSuccessTimeoutLight 215, 234, 223 Set in Theme Builder by FI.

Branded Account Colors

Color Name Design Token Default Value Notes
Account Color 1 ∆colorBrandedAccountColor0 46, 204, 113 Set in Theme Builder by FI
Account Color 1 On ∆colorBrandedAccountColorOnColor0 0, 0, 0 Generated in Theme Builder
Account Color 2 ∆colorBrandedAccountColor1 39, 124, 180 Set in Theme Builder by FI
Account Color 2 On ∆colorBrandedAccountColorOnColor1 255, 255, 255 Generated in Theme Builder
Account Color 3 ∆colorBrandedAccountColor2 212, 232, 34 Set in Theme Builder by FI
Account Color 3 On ∆colorBrandedAccountColorOnColor2 0, 0, 0 Generated in Theme Builder
Account Color 4 ∆colorBrandedAccountColor3 228, 37, 50 Set in Theme Builder by FI
Account Color 4 On ∆colorBrandedAccountColorOnColor3 255, 255, 255 Generated in Theme Builder
Account Color 5 ∆colorBrandedAccountColor4 44, 62, 80 Set in Theme Builder by FI
Account Color 5 On ∆colorBrandedAccountColorOnColor4 255, 255, 255 Generated in Theme Builder
Account Color 6 ∆colorBrandedAccountColor5 227, 141, 28 Set in Theme Builder by FI
Account Color 6 On ∆colorBrandedAccountColorOnColor5 0, 0, 0 Generated in Theme Builder
Account Color 7 ∆colorBrandedAccountColor6 142, 68, 173 Set in Theme Builder by FI
Account Color 7 On ∆colorBrandedAccountColorOnColor6 255, 255, 255 Generated in Theme Builder
Account Color 8 ∆colorBrandedAccountColor7 189, 195, 199 Set in Theme Builder by FI
Account Color 8 On ∆colorBrandedAccountColorOnColor7 0, 0, 0 Generated in Theme Builder