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