Design tokens

Design tokens represent the values used within a design system to construct layouts and components, such as spacing and color. Because the tokens are an abstraction, the underlying value can change in different scenarios without affecting the designer or developer experience. Learn more about Design Tokens.

The design color tokens on this section, those that start with $color- are alias (or semantic tokens) as they give semantic usage information through their name. They point to Gestalt's base color tokens (hence the name "alias"). To learn more about the complete set of Gestalt's base color tokens, read our extended color palette section.

Token values

Background color

Visit the Box page for guidelines and usage.

Background color values
CSS token name
Light mode
Dark mode
color-background-brand
Background color to signify the Pinterest brand
value: #e60023
original: color-red-pushpin-450
Base
value: #e60023
original: color-red-pushpin-450
No dark theme
color-background-dark
Background color that will always be dark, no matter the color scheme
value: #111111
original: color-black-cosmicore-900
Base
value: #111111
original: color-black-cosmicore-900
No dark theme
color-background-default
Background color that will match the current color scheme
value: #ffffff
original: color-white-mochimalist-0
Base
value: #111111
original: color-black-cosmicore-900
Base
color-background-education
Background color to indicate educational moments or messages
value: #0074e8
original: color-blue-skycicle-500
Base
value: #75bfff
original: color-blue-skycicle-300
Base
color-background-elevation-accent
Background color used to accent containers when shadows are not an option
value: #f1f1f1
original: color-gray-roboflow-100
Base
value: #191919
original: color-gray-roboflow-800
Base
color-background-elevation-floating
Background color used for floating elements in dark mode (like Modal or OverlayPanel)
value: #000000
original: color-transparent
Base
value: #2b2b2b
original: color-gray-roboflow-700
Base
color-background-elevation-raised
Background color used for raised elements in dark mode, like sticky headers or navigation footers
value: #000000
original: color-transparent
Base
value: #4a4a4a
original: color-gray-roboflow-600
Base
color-background-error-base
Background color to indicate errors
value: #cc0000
original: color-red-pushpin-500
Base
value: #f47171
original: color-red-pushpin-300
Base
color-background-error-weak
Weak background color to indicate errors, can be used behind text
value: #ffe0e0
original: color-red-pushpin-100
Base
value: #660000
original: color-red-pushpin-900
Base
color-background-info-base
Background color to indicate neutral information
value: #0074e8
original: color-blue-skycicle-500
Base
value: #75bfff
original: color-blue-skycicle-300
Base
color-background-info-strong
Strong background color to indicate neutral information, can be used for hover
value: #005fcb
original: color-blue-skycicle-600
Base
value: #abdbff
original: color-blue-skycicle-200
Base
color-background-info-weak
Weak background color to indicate neutral information, can be used behind text
value: #d7edff
original: color-blue-skycicle-100
Base
value: #003c96
original: color-blue-skycicle-800
Base
color-background-inverse-base
Background color for use on inverted backgrounds
value: #111111
original: color-black-cosmicore-900
Base
value: #f9f9f9
original: color-gray-roboflow-50
Base
color-background-inverse-strong
Strong version of inverse background color, used for hover
value: #e9e9e9
original: color-gray-roboflow-200
Base
value: #e9e9e9
original: color-gray-roboflow-200
No dark theme
color-background-light
Background color that will always be light, no matter the color scheme
value: #ffffff
original: color-white-mochimalist-0
Base
value: #ffffff
original: color-white-mochimalist-0
No dark theme
color-background-neutral
Background color to indicate neutral information
value: #767676
original: color-gray-roboflow-500
Base
value: #cdcdcd
original: color-gray-roboflow-300
Base
color-background-primary-base
Primary background color
value: #e60023
original: color-red-pushpin-450
Base
value: #e60023
original: color-red-pushpin-450
No dark theme
color-background-primary-strong
Strong version of the primary background color, used for hover
value: #b60000
original: color-red-pushpin-600
Base
value: #b60000
original: color-red-pushpin-600
No dark theme
color-background-primary-weak
Weak version of the primary background color, used for hover
value: #f47171
original: color-red-pushpin-300
Base
value: #f47171
original: color-red-pushpin-300
No dark theme
color-background-recommendation-base
Background color to indicate recommendations
value: #812ae7
original: color-purple-mysticool-500
Base
value: #b190ff
original: color-purple-mysticool-300
Base
color-background-recommendation-weak
Weak background color to indicate recommendations, can be used behind text
value: #e9e4ff
original: color-purple-mysticool-100
Base
value: #550aa9
original: color-purple-mysticool-700
Base
color-background-secondary-base
Secondary background color
value: #e9e9e9
original: color-gray-roboflow-200
Base
value: #767676
original: color-gray-roboflow-500
Base
color-background-secondary-strong
Strong version of secondary background color, used for hover
value: #a5a5a5
original: color-gray-roboflow-400
Base
value: #a5a5a5
original: color-gray-roboflow-400
No dark theme
color-background-secondary-weak
Weak version of secondary background color, used for hover
value: #cdcdcd
original: color-gray-roboflow-300
Base
value: #cdcdcd
original: color-gray-roboflow-300
No dark theme
color-background-selected-base
Background color to indicate selected state, like a selected IconButton
value: #111111
original: color-black-cosmicore-900
Base
value: #e9e9e9
original: color-gray-roboflow-200
Base
color-background-selected-strong
Strong version of the selected background color, used for hover
value: #2b2b2b
original: color-gray-roboflow-700
Base
value: #2b2b2b
original: color-gray-roboflow-700
No dark theme
color-background-selected-weak
Weak version of the selected background color, used for hover