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.
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
Light / text / warning
Light / text / critical
Light / text / success
Light / text / primary
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
Light / actions / secondary
Light / actions / primary
Light / actions / critical
Light / actions / secondaryCrit
Icon
Such as for text, the icon tokens define the colors to be used in several use cases and states.
Light / icon
Light / icon / primary
Light / icon / warning
Light / icon / success
Light / icon / critical
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
Light / border / success
Light / border / warning
Light / border / primary
Light / border / critical
Surface
The surface tokens are used for the background colors.
Light / surface
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
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
Dark / text / title
Dark / text / critical
Dark / text / success
Dark / text / warning
Dark / text / primary
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
Dark / actions / secondaryCrit
Dark / actions / secondary
Dark / actions / critical
Dark / actions / primary
Icon
Such as for text, the icon tokens define the colors to be used in several use cases and states.
Dark / icon
Dark / icon / success
Dark / icon / warning
Dark / icon / critical
Dark / icon / primary
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
Dark / border / primary
Dark / border / success
Dark / border / warning
Dark / border / critical
Dark / border / basic
Surface
The surface tokens are used for the background colors.
Dark / surface
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.