Color tokens

In the Design System, we use tokens to name colors (e.g. neutral-950). Each token corresponds to a raw value (HEX). We also have decision tokens, which are predefined colors for specific usage (e.g. light-text-default).

The usage of tokens makes the usage of colors more consistent, as it creates rules for using them. It also allows to easily change and replace colors if needed.

There is always a corresponding token in the Light and Dark theme, which allows the creation of consistent components that can be used in both environments.

Tokens Example

 

Light theme

Light theme tokens are used in all interfaces with bright background. At Userlane, those tokens apply mostly to the Portal and Assistant.

Text

The text tokens cover all use cases of text elements, including some states (error, warning, success).

Light / text

default
#111e36
subdued
#5e6c84
disabled
#9ea4b4
onInteractive
#ffffff

Light / text / warning

default
#c78000
subdued
#a66a00

Light / text / critical

default
#cd361d
subdued
#991700

Light / text / success

default
#068855
subdued
#005937

Light / text / primary

default
#732bf5
subdued
#461496

Actions

The actions tokens are used for the background colors of diverse UI elements, such as buttons, and also cover all states (default, hovered, pressed, disabled, etc).

Light / actions

default
#ffffff
hovered
#f4f5f7
pressed
#dfe1e6
disabled
#fafbfc
focused
#f4f5f7

Light / actions / secondary

default
#ffffff
hovered
#e9e5ff
pressed
#d3ccff
focused
#e9e5ff

Light / actions / primary

default
#732bf5
hovered
#461496
pressed
#380c7d
focused
#461496

Light / actions / critical

default
#cd361d
hovered
#991700
pressed
#731100
focused
#991700

Light / actions / secondaryCrit

focused
#ffedea

Icon

Such as for text, the icon tokens define the colors to be used in several use cases and states.

Light / icon

default
#5e6c84
onInteractive
#ffffff
disabled
#c1c7d0
subdued
#9ea4b4

Light / icon / primary

default
#732bf5
subdued
#461496

Light / icon / warning

default
#ffbd47
subdued
#a66a00

Light / icon / success

default
#068855
subdued
#005937

Light / icon / critical

default
#cd361d
subdued
#991700

Border

Borders also have predefined decision tokens. They are used for various UI elements, such as cards and containers, buttons, and other components.

Light / border

default
#c1c7d0
subdued
#dfe1e6
hovered
#9ea4b4
pressed
#7a869a
disabled
#dfe1e6

Light / border / success

default
#068855
subdued
#005937

Light / border / warning

subdued
#a66a00

Light / border / primary

default
#732bf5
subdued
#461496

Light / border / critical

default
#cd361d
subdued
#991700

Surface

The surface tokens are used for the background colors.

Light / surface

default
#fafbfc

Focus

The focus tokens define the color of the highlight displayed when using keyboard navigation. Although the color used for both themes is the same, for consistency reasons each theme has its own token.

Light / focus

default
#7864f5

Dark theme

Dark theme tokens are used for interfaces with dark background. At Userlane they are mostly used in the Editor.

Text

The text tokens cover all use cases of text elements, including some states (error, warning, success).

Dark / text

default
#dbdbdb
subdued
#999999
disabled
#666666
onInteractive
#ffffff
title
#f0f0f0

Dark / text / title

default
#f0f0f0

Dark / text / critical

default
#f98270
subdued
#e65740

Dark / text / success

default
#98e5c6
subdued
#56d2a0

Dark / text / warning

default
#faa918
subdued
#c78000

Dark / text / primary

default
#bdb2ff
subdued
#8d7aff

Actions

The actions tokens are used for the background colors of diverse UI elements, such as buttons, and also cover all states (default, hovered, pressed, disabled, etc).

Dark / actions

default
#404040
hovered
#5e5e5e
pressed
#303030
disabled
#303030
focused
#303030

Dark / actions / secondaryCrit

default
#ffd2cb
hovered
#ffb7ac
focused
#ffb7ac
pressed
#f98270

Dark / actions / secondary

focused
#bdb2ff
pressed
#8d7aff

Dark / actions / critical

default
#cd361d
hovered
#e65740
pressed
#991700
focused
#ac2008

Dark / actions / primary

default
#732bf5
hovered
#7864f5
focused
#561eb0
pressed
#461496

Icon

Such as for text, the icon tokens define the colors to be used in several use cases and states.

Dark / icon

default
#dbdbdb
onInteractive
#ffffff
disabled
#666666
subdued
#5e5e5e

Dark / icon / success

default
#98e5c6
subdued
#56d2a0

Dark / icon / warning

default
#faa918
subdued
#c78000

Dark / icon / critical

default
#f98270
subdued
#e65740

Dark / icon / primary

default
#bdb2ff
subdued
#8d7aff

Border

Borders also have predefined decision tokens. They are used for various UI elements, such as cards and containers, buttons, and other components.

Dark / border

default
#666666
subdued
#5e5e5e
disabled
#525252
hovered
#666666
pressed
#666666

Dark / border / primary

default
#bdb2ff
subdued
#8d7aff
hovered
#8d7aff
focused
#7864f5
pressed
#bdb2ff
disabled
#525252

Dark / border / success

default
#98e5c6
subdued
#56d2a0

Dark / border / warning

default
#faa918
subdued
#c78000

Dark / border / critical

default
#f98270
subdued
#e65740

Dark / border / basic

default
#868686
subdued
#999999

Surface

The surface tokens are used for the background colors.

Dark / surface

default
#1f1f1f

Focus

The focus tokens define the color of the highlight displayed when using keyboard navigation. Although the color used for both themes is the same, for consistency reasons each theme has its own token.

Dark / focus

default
#7864f5