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.
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-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 |