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
value: #e60023
original: color-red-pushpin-450
Base
value: #e60023
original: color-red-pushpin-450
No dark theme
color-background-chartgraph-neutral
value: #767676
original: #767676
Custom
value: #cdcdcd
original: #CDCDCD
Custom
color-background-checkbox-checked-default
value: #111111
original: color-background-formfield-selected
Alias
value:
original:
color-background-checkbox-checked-error
value: #111111
original: color-background-formfield-selected
Alias
value:
original:
color-background-checkbox-disabled
value: #efefef
original: color-background-formfield-disabled
Alias
value:
original:
color-background-checkbox-unchecked-default
value: #ffffff
original: color-background-formfield-primary
Alias
value:
original:
color-background-checkbox-unchecked-error
value: #ffffff
original: color-background-formfield-primary
Alias
value:
original:
color-background-dark
value: #111111
original: color-black-cosmicore-900
Base
value: #111111
original: color-black-cosmicore-900
No dark theme
color-background-default
value: #ffffff
original: color-white-mochimalist-0
Base
value: #111111
original: color-black-cosmicore-900
Base
color-background-education
value: #0074e8
original: color-blue-skycicle-500
Base
value: #75bfff
original: color-blue-skycicle-300
Base
color-background-elevation-accent
value: #f1f1f1
original: color-gray-roboflow-100
Base
value: #191919
original: color-gray-roboflow-800
Base
color-background-elevation-floating
value: #000000
original: color-transparent
Base
value: #2b2b2b
original: color-gray-roboflow-700
Base
color-background-elevation-raised
value: #000000
original: color-transparent
Base
value: #4a4a4a
original: color-gray-roboflow-600
Base
color-background-error-base
value: #cc0000
original: color-red-pushpin-500
Base
value: #f47171
original: color-red-pushpin-300
Base
color-background-error-weak
value: #ffe0e0
original: color-red-pushpin-100
Base
value: #660000
original: color-red-pushpin-900
Base
color-background-iconbutton-semitransparentdark-active
value: #1f1f1f
original: #1f1f1f
Custom
value: #e0e0e0
original: #e0e0e0
Custom
color-background-iconbutton-semitransparentdark-default
value: #333333
original: rgba(51, 51, 51, 0.8)
Custom
value: #ffffff
original: rgba(255, 255, 255, 0.8)
Custom
color-background-iconbutton-semitransparentdark-disabled-default
value: #e9e9e9
original: color-background-secondary-base
Alias
value:
original:
color-background-iconbutton-semitransparentdark-disabled-selected
value: #e9e9e9
original: color-background-secondary-base
Alias
value:
original:
color-background-iconbutton-semitransparentdark-hover
value: #121212
original: #121212
Custom
value: #f0f0f0
original: #f0f0f0
Custom
color-background-indicator
value: #e60023
original: color-background-primary-base
Alias
value: #e60023
original: color-background-primary-base
Alias
color-background-info-base
value: #0074e8
original: color-blue-skycicle-500
Base
value: #75bfff
original: color-blue-skycicle-300
Base
color-background-info-strong
value: #005fcb
original: color-blue-skycicle-600
Base
value: #abdbff
original: color-blue-skycicle-200
Base
color-background-info-weak
value: #d7edff
original: color-blue-skycicle-100
Base
value: #003c96
original: color-blue-skycicle-800
Base
color-background-inverse-base
value: #111111
original: color-black-cosmicore-900
Base
value: #f9f9f9
original: color-gray-roboflow-50
Base
color-background-inverse-strong
value: #e9e9e9
original: color-gray-roboflow-200
Base
value: #e9e9e9
original: color-gray-roboflow-200
No dark theme
color-background-light
value: #ffffff
original: color-white-mochimalist-0
Base
value: #ffffff
original: color-white-mochimalist-0
No dark theme
color-background-neutral
value: #767676
original: color-gray-roboflow-500
Base
value: #cdcdcd
original: color-gray-roboflow-300
Base
color-background-primary-base
value: #e60023
original: color-red-pushpin-450
Base
value: #e60023
original: color-red-pushpin-450
No dark theme
color-background-primary-strong
value: #b60000
original: color-red-pushpin-600
Base
value: #b60000
original: color-red-pushpin-600
No dark theme
color-background-primary-weak
value: #f47171
original: color-red-pushpin-300
Base
value: #f47171
original: color-red-pushpin-300
No dark theme
color-background-recommendation-base
value: #812ae7
original: color-purple-mysticool-500
Base
value: #b190ff
original: color-purple-mysticool-300
Base
color-background-recommendation-weak
value: #e9e4ff
original: color-purple-mysticool-100
Base
value: #550aa9
original: color-purple-mysticool-700
Base
color-background-searchguide-active-01
value: #abdbff
original: color-blue-skycicle-200
Base
value: #abdbff
original: color-blue-skycicle-200
Base
color-background-searchguide-active-02
value: #a4f9ac
original: color-green-matchacado-200
Base
value: #a4f9ac
original: color-green-matchacado-200
Base
color-background-searchguide-active-03
value: #ffc58f
original: color-orange-firetini-200
Base
value: #ffc58f
original: color-orange-firetini-200
Base
color-background-searchguide-active-04
value: #fcbbbb
original: color-red-pushpin-200
Base
value: #fcbbbb
original: color-red-pushpin-200
Base
color-background-searchguide-active-05
value: #d5c7ff
original: color-purple-mysticool-200
Base
value: #d5c7ff
original: color-purple-mysticool-200
Base
color-background-searchguide-active-06
value: #d7edff
original: color-blue-skycicle-100
Base
value: #d7edff
original: color-blue-skycicle-100
Base
color-background-searchguide-active-07
value: #c3f9c2
original: color-green-matchacado-100
Base
value: #c3f9c2
original: color-green-matchacado-100
Base
color-background-searchguide-active-08
value: #ffe4c1
original: color-orange-firetini-100
Base
value: #ffe4c1
original: color-orange-firetini-100
Base
color-background-searchguide-active-09
value: #fcbbbb
original: color-red-pushpin-200
Base
value: #fcbbbb
original: color-red-pushpin-200
Base
color-background-searchguide-active-10
value: #e9e4ff
original: color-purple-mysticool-100
Base
value: #e9e4ff
original: color-purple-mysticool-100
Base
color-background-searchguide-active-11
value: #e9e9e9
original: color-background-secondary-base
Alias
value: #767676
original: color-background-secondary-base
Alias
color-background-searchguide-default-01
value: #abdbff
original: color-blue-skycicle-200
Base
value: #abdbff
original: color-blue-skycicle-200
Base
color-background-searchguide-default-02
value: #a4f9ac
original: color-green-matchacado-200
Base
value: #a4f9ac
original: color-green-matchacado-200
Base
color-background-searchguide-default-03
value: #ffc58f
original: color-orange-firetini-200
Base
value: #ffc58f
original: color-orange-firetini-200
Base
color-background-searchguide-default-04
value: #fcbbbb
original: color-red-pushpin-200
Base
value: #fcbbbb
original: color-red-pushpin-200
Base
color-background-searchguide-default-05
value: #d5c7ff
original: color-purple-mysticool-200
Base
value: #d5c7ff
original: color-purple-mysticool-200
Base
color-background-searchguide-default-06
value: #d7edff
original: color-blue-skycicle-100
Base
value: #d7edff
original: color-blue-skycicle-100
Base
color-background-searchguide-default-07
value: #c3f9c2
original: color-green-matchacado-100
Base
value: #c3f9c2
original: color-green-matchacado-100
Base
color-background-searchguide-default-08
value: #ffe4c1
original: color-orange-firetini-100
Base
value: #ffe4c1
original: color-orange-firetini-100
Base
color-background-searchguide-default-09
value: #fcbbbb
original: color-red-pushpin-200
Base
value: #fcbbbb
original: color-red-pushpin-200
Base
color-background-searchguide-default-10
value: #e9e4ff
original: color-purple-mysticool-100
Base
value: #e9e4ff
original: color-purple-mysticool-100
Base
color-background-searchguide-default-11
value: #e9e9e9
original: color-background-secondary-base
Alias
value: #767676
original: color-background-secondary-base
Alias
color-background-searchguide-hover-01
value: #abdbff
original: color-blue-skycicle-200
Base
value: #abdbff
original: color-blue-skycicle-200
Base
color-background-searchguide-hover-02
value: #a4f9ac
original: color-green-matchacado-200
Base
value: #a4f9ac
original: color-green-matchacado-200
Base
color-background-searchguide-hover-03
value: #ffc58f
original: color-orange-firetini-200
Base
value: #ffc58f
original: color-orange-firetini-200
Base
color-background-searchguide-hover-04
value: #fcbbbb
original: color-red-pushpin-200
Base
value: #fcbbbb
original: color-red-pushpin-200
Base
color-background-searchguide-hover-05
value: #d5c7ff
original: color-purple-mysticool-200
Base
value: #d5c7ff
original: color-purple-mysticool-200
Base
color-background-searchguide-hover-06
value: #d7edff
original: color-blue-skycicle-100
Base
value: #d7edff
original: color-blue-skycicle-100
Base
color-background-searchguide-hover-07
value: #c3f9c2
original: color-green-matchacado-100
Base
value: #c3f9c2
original: color-green-matchacado-100
Base
color-background-searchguide-hover-08
value: #ffe4c1
original: color-orange-firetini-100
Base
value: #ffe4c1
original: color-orange-firetini-100
Base
color-background-searchguide-hover-09
value: #fcbbbb
original: color-red-pushpin-200
Base
value: #fcbbbb
original: color-red-pushpin-200
Base
color-background-searchguide-hover-10
value: #e9e4ff
original: color-purple-mysticool-100
Base
value: #e9e4ff
original: color-purple-mysticool-100
Base
color-background-searchguide-hover-11
value: #e9e9e9
original: color-background-secondary-base
Alias
value: #767676
original: color-background-secondary-base
Alias
color-background-secondary-base
value: #e9e9e9
original: color-gray-roboflow-200
Base
value: #767676
original: color-gray-roboflow-500
Base
color-background-secondary-strong
value: #a5a5a5
original: color-gray-roboflow-400
Base
value: #a5a5a5
original: color-gray-roboflow-400
No dark theme
color-background-secondary-weak
value: #cdcdcd
original: color-gray-roboflow-300
Base
value: #cdcdcd
original: color-gray-roboflow-300
No dark theme
color-background-selected-base
value: #111111
original: color-black-cosmicore-900
Base
value: #e9e9e9
original: color-gray-roboflow-200
Base
color-background-selected-strong
value: #2b2b2b
original: color-gray-roboflow-700
Base
value: #2b2b2b
original: color-gray-roboflow-700
No dark theme
color-background-selected-weak
value: #a5a5a5
original: color-gray-roboflow-400
Base
value: #a5a5a5
original: color-gray-roboflow-400
No dark theme
color-background-shopping
value: #0074e8
original: color-blue-skycicle-500
Base
value: #75bfff
original: color-blue-skycicle-300
Base
color-background-success-base
value: #008753
original: color-green-matchacado-500
Base
value: #6bec8c
original: color-green-matchacado-300
Base
color-background-success-weak
value: #c3f9c2
original: color-green-matchacado-100
Base
value: #00422c
original: color-green-matchacado-700
Base
color-background-tertiary-base
value: #767676
original: color-gray-roboflow-500
Base
value: #cdcdcd
original: color-gray-roboflow-300
Base
color-background-tertiary-strong
value: #2b2b2b
original: color-gray-roboflow-700
Base
value: #2b2b2b
original: color-gray-roboflow-700
No dark theme
color-background-tertiary-weak
value: #cdcdcd
original: color-gray-roboflow-300
Base
value: #cdcdcd
original: color-gray-roboflow-300
No dark theme
color-background-warning-base
value: #bd5b00
original: color-yellow-caramellow-500
Base
value: #fdc900
original: color-yellow-caramellow-300
Base
color-background-warning-weak
value: #ffe4c1
original: color-orange-firetini-100
Base
value: #7c2d00
original: color-yellow-caramellow-800
Base
color-background-wash-dark
value: #000000
original: rgba(0, 0, 0, 0.8)
Custom
value: #000000
original: rgba(0, 0, 0, 0.8)
No dark theme
color-background-wash-light
value: #ffffff
original: rgba(255, 255, 255, 0.9)
Custom
value: #ffffff
original: rgba(255, 255, 255, 0.9)
No dark theme

Border color

Visit the Box page for guidelines and usage.

Border color values
CSS token name
Light mode
Dark mode
color-border-avatar
value: #ffffff
original: #fff
Custom
value: #030303
original: #030303
Custom
color-border-badge-dark
value: #111111
original: color-black-cosmicore-900
Base
value: #111111
original: color-black-cosmicore-900
Base
color-border-badge-default
value: #ffffff
original: color-white-mochimalist-0
Base
value: #111111
original: color-black-cosmicore-900
Base
color-border-badge-light
value: #ffffff
original: color-white-mochimalist-0
Base
value: #ffffff
original: color-white-mochimalist-0
Base
color-border-button-hover
value: #cdcdcd
original: color-border-container
Alias
value:
original:
color-border-button-pressed
value: #cdcdcd
original: color-border-container
Alias
value:
original:
color-border-checkbox-checked-default
value: #111111
original: color-background-selected-base
Alias
value:
original:
color-border-checkbox-checked-error
value: #cc0000
original: color-border-error
Alias
value:
original:
color-border-checkbox-disabled
value: #efefef
original: color-border-formfield-disabled
Alias
value:
original:
color-border-checkbox-unchecked-default
value: #767676
original: color-border-default
Alias
value:
original:
color-border-checkbox-unchecked-error
value: #cc0000
original: color-border-error
Alias
value:
original:
color-border-checkbox-unchecked-hover
value: #a5a5a5
original: color-gray-roboflow-400
Base
value:
original:
color-border-checkbox-unchecked-pressed
value: #a5a5a5
original: color-gray-roboflow-400
Base
value:
original:
color-border-container
value: #cdcdcd
original: color-gray-roboflow-300
Base
value: #767676
original: color-gray-roboflow-500
Base
color-border-default
value: #767676
original: color-gray-roboflow-500
Base
value: #cdcdcd
original: color-gray-roboflow-300
Base
color-border-error
value: #cc0000
original: color-red-pushpin-500
Base
value: #f47171
original: color-red-pushpin-300
Base
color-border-focus
value: #0084ff
original: rgba(0, 132, 255, 0.5)
Custom
value: #0084ff
original: rgba(0, 132, 255, 0.5)
No dark theme
color-border-formfield-disabled
value: #efefef
original: #efefef
Custom
value: #404040
original: #404040
Custom
color-border-formfield-error-default
value: #cc0000
original: color-border-error
Alias
value: #f47171
original: color-border-error
Alias
color-border-formfield-error-hover
value: #ad081b
original: #ad081b
Custom
value: #cf001f
original: #cf001f
Custom
color-border-indicator
value: #ffffff
original: color-white-mochimalist-0
Base
value: #000000
original: #000000
Custom
color-border-popover-education