Design tokens

Design tokens are named entities that store visual design information. These are used in place of hard-coded values (such as hex values for color or pixels for spacing) in order to maintain a scalable, consistent system for UI development.

Color Palettes

Color Assets

Primary palette values. Accessed via map(colors, primary, <key>)

#000142
dark-blue
#3B55E6
light-blue

Neutral palette values. Accessed via map(colors, neutral, <key>)

#ffffff
white
#f0f2f7
gray20
#e3e8f0
gray40
#B9BED1
gray50
#707070
gray60
#454545
gray80
#000000
black

State palette values. Accessed via map(colors, state, <key>)

#F60139
error
#007E62
success

Font families

Font family tokens are used for typographic styling. Accessed via map(fonts, <key>).

Key Value
family-primary ‘IBM Plex Sans’, sans-serif
family-secondary sans-serif
family-serif serif
family-system -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif