.05 Tools

Tools & Resources

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

Visual Design
Research
Design Tokens
Lottie Files

Designing for screens at Alkami is done in Figma, and is centrally managed via Figma Libraries. The Alkami UI Kit has everything needed to creates designs and contains all the current components, page templates, patterns and more.

Last updated: September 12, 2023

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.

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
∆colorPlatformAlpha100
0.04
∆colorPlatformAlpha200
0.08
∆colorPlatformAlpha300
0.16
∆colorPlatformAlpha400
0.24
∆colorPlatformAlpha500
0.40
∆colorPlatformAlpha600
0.64
∆colorPlatformAlpha700
0.80
∆colorPlatformAlpha800
0.88
∆colorPlatformAlpha900
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
0, 39, 25
∆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, 133, 212
∆colorBrandedAffordancePressedOnColor
0, 34, 54
∆colorBrandedAffordanceSelected
5, 152, 238
∆colorBrandedAffordanceSelectedOnColor
0, 34, 54
∆colorBrandedHover
225, 231, 235
∆colorBrandedPressed
225, 231, 235
∆colorBrandedSelected
190, 208, 219
∆colorBrandedFocused
11, 158, 244
∆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

Messaging Color Tokens

Key
Default Value
themability notes
∆colorBulletin
51, 51, 51
∆colorInfo25
250, 250, 250
∆colorInfo50
236, 242, 249
∆colorInfo100
214, 232, 245
∆colorInfo200
173, 209, 240
∆colorInfo300
135, 190, 238
∆colorInfo400
79, 172, 255
∆colorInfo500
36, 137, 227
∆colorInfo600
21, 122, 212
∆colorInfo700
0, 96, 182
∆colorInfo800
0, 64, 121
∆colorInfo900
0, 33, 62
∆colorSuccess25
247, 252, 252
∆colorSuccess50
236, 249, 240
∆colorSuccess100
217, 242, 223
∆colorSuccess200
180, 223, 192
∆colorSuccess300
140, 203, 157
∆colorSuccess400
93, 190, 119
∆colorSuccess500
57, 154, 83
∆colorSuccess600
42, 139, 68
∆colorSuccess700
17, 114, 43
∆colorSuccess800
0, 82, 22
∆colorSuccess900
0, 42, 11
∆colorCaution25
254, 254, 245
∆colorCaution50
255, 249, 229
∆colorCaution100
255, 240, 199
∆colorCaution200
249, 216, 134
∆colorCaution300
255, 194, 41
∆colorCaution400
214, 150, 0
∆colorCaution500
163, 115, 0
∆colorCaution600
142, 101, 0
∆colorCaution700
107, 76, 0
∆colorCaution800
71, 50, 0
∆colorCaution900
36, 26, 0
∆colorError25
252, 247, 247
∆colorError50
249, 236, 236
∆colorError100
248, 216, 216
∆colorError200
237, 182, 182
∆colorError300
237, 151, 151
∆colorError400
255, 109, 109
∆colorError500
246, 62, 62
∆colorErrror600
231, 47, 47
∆colorError700
206, 22, 22
∆colorError800
170, 0, 0
∆colorError900
87, 0, 0

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
300
∆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

progressIndeterminateCircleSharpXsmall
progressIndeterminateCircleSharpXlarge
progressIndeterminateCircleSharpSmall
progressIndeterminateCircleSharpMedium
progressIndeterminateCircleSharpLarge
progressIndeterminateCircleRoundXsmall
progressIndeterminateCircleRoundXlarge
progressIndeterminateCircleRoundSmall
progressIndeterminateCircleRoundMedium
progressIndeterminateCircleRoundLarge
progressIndeterminateBarSmall
progressIndeterminateBarLarge
16-MediumEmphasis-Button-Indeterminate
16-LowEmphasis-Button-Indeterminate
16-HighEmphasis-Button-Indeterminate
16-Compact-Button-Indeterminate

Side Sheet Navigation

24-SideSheet-Nav-Icon

Selection Controls

24-Indeterminate-Off
24-Indeterminate-On
24-Check-Off
24-Check-On