Tools & Resources

See what Alkami designers, researchers, and developers use to build our design language.

Tools
Visual Design
Research
Engineering
Design Tokens
Lottie Files

Designing for screens at Alkami is done in Figma, and is centrally managed via Figma Libraries. There are two UI kits: one for the Alkami retail experience, and one for the Alkami admin experience. Both kits are available today for internal Alkami designers, and will be available soon for SDK customers and 3rd party vendors designing and building experiences on The Alkami Platform.

Glossary

Glossary coming soon!

Speaking a shared language is important. Designers and engineers use special language when collaborating on building the next generation online banking experience. Get up to speed and share the understanding of these terms quickly.

The UX Research Process has been defined and documented. Following a simple 6-step process, any designer, engineer, product manager, or stakeholder can quickly understand the process and get started with a test or study.

usertesting.com

UserTesting is the primary tool we use to conduct user research and user testing of digital experiences. Every product designer at Alkami is expected to conduct at least 12 research studies each year. Insights obtained through these efforts enable us to make informed decisions based on data, actual user sentiment, and a deep understanding of our product usability.

Storybook is a tool for developing UI components that can be displayed and manipulated using a series of knobs and data inputs. The output of which engineers can use in projects without worrying about maintaining the original source code.

The Storybook environment for our Iris Vue components is for internal Alkami employees only at the moment; although we have plans to make this public soon.

Slughorn is the tool used to manage all the iconography and Lottie animations used on The Alkami Platform.

The base icon is Google's Icon set, but have been modified slightly to fit our spacing framework. There is plans to redesign a completely custom (and themable) set of icons in the near future.

All of the Lottie animations in Slughorn take full advantage of our set of themable design tokens, and will utilize the FI branded color ramps.

Introduction

Designing a scalable system across multiple code bases and languages can be a challenge, especially if each team names variables a little differently. With design tokens, designers can create a systematic way to approach using variables and engineers can convert the tokens for use on whatever code base or language they are using.

Ultimately a design token is a key-value pair used in code and design that stands for a repeatable styling decision at the atomic level. A token is made up of a property name (key) and the property value — for example: guidance color = blue. Guidance color is the property, and blue is the value.

Naming Conventions

Names for properties should use aliases that are not explicitly interpreted, but are scalable regardless of how things will change in the future. For example, naming a property “platform-red” doesn’t allow for any value other than red. Instead name a property with an alias that describes what the property could be used for. Example: “platform-error = red”. This way if we decide to change the color from red to orange in the future the name of the property can stay the same. 

Naming Styleguide

To make the design tokens easily readable and to align with the style engineering is already using, name the tokens using the camel-case approach, using the following pattern: 

[atomic type] + [Token Level] + [Token Description]

Atomic type represents the decision made at the atomic level, such as decisions around type, color, elevation, size and shape.

Token level represents what level of override the token represents, such as platform, branded, or user.

Token description is a way to describe the token in as little words as possible while still making it easy to read and understand what the token does.

Example: ∆colorPlatformSuccess

  • Color = atomic type
  • Platform = token level
  • Success = token description

Token Types

Design tokens represent a repeatable design decision, and can be grouped into 5 major categories: color, elevation, motion, shape, spacing, and type. These categories represent the types of decisions that designers make consistently throughout the experience.

Color Tokens

As the largest set of design tokens, color tokens are broken down into 3 levels: platform, branded, and user.

Platform Color Tokens

The platform level color tokens represent colors that have a default value, and will never be themed or altered by the FI or users.

Key
Default Value
themability notes
∆colorPlatformAlpha0
0
∆colorPlatformAlpha25
0.04
∆colorPlatformAlpha50
0.12
∆colorPlatformAlpha75
0.24
∆colorPlatformAlpha100
0.96
∆colorPlatformWhite
255, 255, 255
∆colorPlatformGray25
250, 250, 250
∆colorPlatformGray50
242, 242, 242
∆colorPlatformGray100
230, 230, 230
∆colorPlatformGray200
204, 204, 204
∆colorPlatformGray300
179, 179, 179
∆colorPlatformGray400
153, 153, 153
∆colorPlatformGray500
117, 117, 117
∆colorPlatformGray600
102, 102, 102
∆colorPlatformGray700
77, 77, 77
∆colorPlatformGray800
51, 51, 51
∆colorPlatformGray900
26, 26, 26

Branded Color Tokens

The brand level color tokens represent colors that are used throughout the experience in moments of guidance and affordance. These colors are based on the brands two most prominent branded colors (set during the theming process within Theme Builder, or manually here) and the bulk of which are programmatically generated into color ramps ranging from lighter tones to darker tones. (See color framework for more details). 

Since brand colors vary wildly in tone, hue, luminosity, etc. color ramps provide a way for us to reliably ensure a high enough color contrast to be accessible. Levels in the color ramp in theory produce the same levels of luminosity for each branded ramp, and therefore can be confidently used throughout the experience.

Because of this, avoid using the base branded tokens since these colors are untreated and cannot be relied on to ensure accessibility standards are met.

Key
Default Value
themability notes
∆colorBrandedGuidance
109, 247, 196
∆colorBrandedGuidance25
248, 250, 249
∆colorBrandedGuidance50
239, 243, 242
∆colorBrandedGuidance100
220, 235, 230
∆colorBrandedGuidance200
177, 218, 203
∆colorBrandedGuidance300
120, 210, 176
∆colorBrandedGuidance400
62, 200, 149
∆colorBrandedGuidance500
26, 164, 113
∆colorBrandedGuidance600
11, 149, 98
∆colorBrandedGuidance700
0, 117, 74
∆colorBrandedGuidance800
0, 77, 49
∆colorBrandedGuidance900
0, 39, 25
∆colorBrandedGuidanceAccessible
0, 117, 74
∆colorBrandedGuidanceOnColor
0, 77, 49
∆colorBrandedGuidanceHover
11, 149, 98
∆colorBrandedGuidanceHoverOnColor
0, 39, 25
∆colorBrandedGuidancePressed
0, 117, 74
∆colorBrandedGuidancePressedOnColor
220, 235, 230
∆colorBrandedGuidanceSelected
26, 164, 113
∆colorBrandedGuidanceSelectedOnColor
0, 39, 25
∆colorBrandedAffordance
11, 158, 244
∆colorBrandedAffordance25
248, 249, 250
∆colorBrandedAffordance50
241, 242, 243
∆colorBrandedAffordance100
225, 231, 235
∆colorBrandedAffordance200
190, 208, 219
∆colorBrandedAffordance300
133, 193, 228
∆colorBrandedAffordance400
58, 182, 255
∆colorBrandedAffordance500
5, 152, 238
∆colorBrandedAffordance600
0, 133, 212
∆colorBrandedAffordance700
0, 101, 160
∆colorBrandedAffordance800
0, 67, 106
∆colorBrandedAffordance900
0, 34, 54
∆colorBrandedAffordanceAccessible
0, 101, 160
∆colorBrandedAffordanceOn
0, 34, 54
∆colorBrandedAffordanceHover
0, 133, 212
∆colorBrandedAffordanceHoverOnColor
0, 34, 54
∆colorBrandedAffordancePressed
0, 101, 160
∆colorBrandedAffordancePressedOnColor
225, 231, 235
∆colorBrandedAffordanceSelected
5, 152, 238
∆colorBrandedAffordanceSelectedOnColor
0, 34, 54
∆colorBrandedHover
225, 231, 235
∆colorBrandedPressed
11, 158, 244
∆colorBrandedSelected
190, 208, 219
∆colorBrandedFocused
225, 231, 235
∆colorBrandedBulletin
51, 51, 51
∆colorBrandedInfo
2, 103, 193
∆colorBrandedInfoTimeout
2, 81, 151
∆colorBrandedInfoLight
242, 247, 252
∆colorBrandedInfoTimeoutLight
208, 227, 246
∆colorBrandedCaution
196, 84, 19
∆colorBrandedCautionTimeout
158, 68, 15
∆colorBrandedCautionLight
252, 246, 243
∆colorBrandedCautionTimeoutLight
245, 221, 209
∆colorBrandedError
206, 22, 22
∆colorBrandedErrorTimeout
170, 18, 18
∆colorBrandedErrorLight
252, 243, 243
∆colorBrandedErrorTimeoutLight
245, 209, 209
∆colorBrandedSuccess
27, 124, 53
∆colorBrandedSuccessTimeout
20, 92, 39
∆colorBrandedSuccessLight
243, 248, 245
∆colorBrandedSuccessTimeoutLight
215, 234, 223
∆colorBrandedAccountColor0
46, 204, 113
∆colorBrandedAccountColorOnColor0
0, 0, 0
∆colorBrandedAccountColor1
39, 124, 180
∆colorBrandedAccountColorOnColor1
255, 255, 255
∆colorBrandedAccountColor2
212, 232, 34
∆colorBrandedAccountColorOnColor2
0, 0, 0
∆colorBrandedAccountColor3
228, 37, 50
∆colorBrandedAccountColorOnColor3
255, 255, 255
∆colorBrandedAccountColor4
44, 62, 80
∆colorBrandedAccountColorOnColor4
255, 255, 255
∆colorBrandedAccountColor5
227, 141, 28
∆colorBrandedAccountColorOnColor5
0, 0, 0
∆colorBrandedAccountColor6
142, 68, 173
∆colorBrandedAccountColorOnColor6
255, 255, 255
∆colorBrandedAccountColor7
189, 195, 199
∆colorBrandedAccountColorOnColor7
0, 0, 0

User Color Tokens

As of this writing, there aren’t any user color tokens — but we have plans to introduce them soon.

Elevation Tokens

Elevation tokens ensure a consistent use of shadows throughout the experience. Surfaces throughout The Alkami Platform are defined and serve specific purposes, but only the Raised and Overlay surfaces should utilize treatments with elevation tokens. By default, platform elevation tokens are used on all raised surfaces; however, if a raised surface is treated with the Affordance Base color, using the branded elevation tokens creates a soft branded shadow color. See button component as an example.

Key
Default Value
themability notes
∆surfacePlatformRaisedBackgroundColor
∆colorPlatformWhite
∆surfacePlatformRaisedShadowColor
∆colorPlatformGray900
∆surfacePlatformRaisedShadowY
8
∆surfacePlatformRaisedShadowOpacity
16%
∆surfacePlatformRaisedShadowBlurResting
24px
∆surfacePlatformRaisedShadowBlurLifted
40px
∆surfacePlatformRaisedShadowBlurPressed
8px
∆surfacePlatformRaisedShadowSpread
-8
∆surfaceBrandedBackgroundColor
∆colorPlatformWhite
∆surfaceBrandedBaseColor
∆colorPlatformWhite
∆surfaceBrandedBaseBorderColor
None
∆surfaceBrandedRaisedShadowColor
∆colorPlatformGray900

Motion Tokens

Key
Default Value
themability notes
∆motionTimeNano
50ms
∆motionTimeExtraFast
100ms
∆motionTimeFast
150ms
∆motionTimeModerate
200ms
∆motionTimeModerateSlow
250ms
∆motionTimeSlow
300ms
∆motionTimeExtraSlow
500ms
∆motionTimingFunctionStandard
cubic-bezier(0.5, 0.0, 0.2, 1.0)
∆motionTimingFunctionAcceleration
cubic-bezier(0.4, 0.0, 0.9, 0.3)
∆motionTimingFunctionDeceleration
cubic-bezier(0.4, 0.0, 0.9, 0.3)
∆motionTimingFunctionLinear
cubic-bezier(0.0, 0.0, 1.0, 1.0)

Shape Tokens

Shape tokens ensure a consistent brandable treatment of an elements border radius throughout the experience. Shape is a decision made during the theming process and consists of three component size categories: small, medium, and large. These component categories are used in the shape token description.

Shape tokens can be applied to the entire container or each corner independently. 

Small

Small components are those in which the border radius can form a completely rounded edge without causing visibility issues to the elements within. 

Medium

Medium components are those in which the border radius, if forming a completely rounded edge, would begin to cramp the elements within. 

Large

Large components are those in which the border radius, if forming a completely rounded edge, would drastically reduce the amount of space within the container for other elements. 

Key
Default Value
themability notes
∆shapeBrandedSmallTL
24px
∆shapeBrandedSmallTR
24px
∆shapeBrandedSmallBR
24px
∆shapeBrandedSmallBL
24px
∆shapeBrandedMediumTL
16px
∆shapeBrandedMediumTR
16px
∆shapeBrandedMediumBR
16px
∆shapeBrandedMediumBL
16px
∆shapeBrandedLargeTL
16px
∆shapeBrandedLargeTR
16px
∆shapeBrandedLargeBR
16px
∆shapeBrandedLargeBL
16px
∆shapeBrandedSmall
∆shapeBrandedSmallTL, ∆shapeBrandedSmallTR, ∆shapeBrandedSmallBR, ∆shapeBrandedSmallBL
∆shapeBrandedMedium
∆shapeBrandedMediumTL, ∆shapeBrandedMediumTR, ∆shapeBrandedMediumBR, ∆shapeBrandedMediumBL
∆shapeBrandedLarge
∆shapeBrandedLargeTL, ∆shapeBrandedLargeTR, ∆shapeBrandedLargeBR, ∆shapeBrandedLargeBL

Spacing Tokens

Spacing tokens ensure consistent visual rhythm and branded spacing within components and between visual groupings of content. Although the word “spacing” is used as the atomic type name, these tokens can also be used for size declarations as well. 

Key
Default Value
themability notes
∆spacingPlatformNano
4px
∆spacingPlatformTiny
8px
∆spacingPlatformSmall
16px
∆spacingPlatformBase
24px
∆spacingPlatformBig
40px
∆spacingPlatformHuge
64px
∆spacingPlatformGigantic
104px
∆spacingPlatformMassive
168px
∆spacingBrandedCompact
∆spacingPlatformTiny
∆spacingBrandedCozy
∆spacingPlatformSmall
∆spacingBrandedComfy
∆spacingPlatformBase

Type Tokens

Type tokens ensure a consistent line height, weight, font family, and font size throughout the experience while also providing a way for certain levels of type to receive branded treatments. 

Key
Default Value
themability notes
∆typeSystemFallbacks
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedFontFamilyFallbacks
∆typeSystemFallbacks
∆typeBrandedDisplayFontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedDisplayFontWeight
200
∆typeBrandedDisplayCharacterSpacing
Normal
∆typeBrandedDisplayTextTransform
None
∆typeBrandedLargeHeadingFontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedLargeHeadingFontWeight
700
∆typeBrandedLargeHeadingCharacterSpacing
Normal
∆typeBrandedLargeHeadingTextTransform
None
∆typeBrandedMediumHeadingFontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedMediumHeadingFontWeight
700
∆typeBrandedMediumHeadingCharacterSpacing
Normal
∆typeBrandedMediumHeadingTextTransform
None
∆typeBrandedSmallHeadingFontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedSmallHeadingFontWeight
700
∆typeBrandedSmallHeadingCharacterSpacing
Normal
∆typeBrandedSmallHeadingTextTransform
None
∆typeBrandedSubtitle1FontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedSubtitle1FontWeight
700
∆typeBrandedSubtitle1CharacterSpacing
None
∆typeBrandedSubtitle2FontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedSubtitle2FontWeight
700
∆typeBrandedSubtitle2CharacterSpacing
None
∆typeBrandedBody1FontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedBody1FontWeight
400
∆typeBrandedBody1CharacterSpacing
None
∆typeBrandedBody2FontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedBody2FontWeight
400
∆typeBrandedBody2CharacterSpacing
None
∆typeBrandedCaptionFontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedCaptionFontWeight
400
∆typeBrandedCaptionCharacterSpacing
None
∆typeBrandedOverlineFontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedOverlineFontWeight
700
∆typeBrandedOverlineTextTransform
uppercase
∆typeBrandedOverlineCharacterSpacing
0.50%
∆typeBrandedButtonFontFamily
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
∆typeBrandedButtonFontWeight
700
∆typeBrandedButtonCharacterSpacing
0
∆typeBrandedButtonTextTransform
None

Lottie Files

Progress Indicators

104-Circle-Indeterminate
64-Circle-Indeterminate
40-Circle-Indeterminate
24-Circle-Indeterminate
16-Circle-Indeterminate
104-Circle-Determinate
64-Circle-Determinate
40-Circle-Determinate
24-Circle-Determinate
16-Circle-Determinate
16-MediumEmphasis-Button-Indeterminate
16-LowEmphasis-Button-Indeterminate
16-HighEmphasis-Button-Indeterminate
16-Compact-Button-Indeterminate
1366 indeterminate bar
414 indeterminate bar
bar determinate

Side Sheet Navigation

24-SideSheet-Nav-Icon