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 | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-border-popover-primary | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
color-border-popover-secondary | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-border-pulsar-default | value: #0074e8 original: #0074e8 Custom | value: #0074e8 original: #0074e8 No dark theme |
color-border-pulsar-hover | value: #dce9fa original: #dce9fa Custom | value: #dce9fa original: #dce9fa No dark theme |
color-border-switch-default-selected | value: #111111 original: color-background-selected-base Alias | value: original: |
color-border-switch-default-unselected | value: #767676 original: color-border-default Alias | value: original: |
color-border-switch-disabled-selected | value: #ffffff original: color-background-default Alias | value: #111111 original: color-background-default Alias |
color-border-switch-disabled-unselected | value: #cdcdcd original: color-border-container Alias | value: #767676 original: color-border-container Alias |
color-border-switch-focus-inner | value: #767676 original: color-border-default Alias | value: #cdcdcd original: color-border-default Alias |
color-border-switch-focus-outer | value: #767676 original: color-border-default Alias | value: original: |
color-border-switch-hover-unselected | value: #767676 original: color-border-default Alias | value: original: |
color-border-switch-pressed-unselected | value: #767676 original: color-border-default Alias | value: original: |
color-border-table-row-selected | value: #111111 original: color-black-cosmicore-900 Base | value: #ffffff original: color-white-mochimalist-0 Base |
color-border-tag-disabled | value: #767676 original: color-gray-roboflow-500 Base | value: #ababab original: #ababab Custom |
Text color
Visit the Text page for guidelines and usage.
CSS token name | Light mode | Dark mode |
|---|---|---|
color-text-dark | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #111111 original: color-black-cosmicore-900 No dark theme |
color-text-default | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 Base |
color-text-disabled | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base | Gestalt value: #4a4a4a original: color-gray-roboflow-600 Base |
color-text-error | Gestalt value: #cc0000 original: color-red-pushpin-500 Base | Gestalt value: #f47171 original: color-red-pushpin-300 Base |
color-text-formfield-default | Gestalt value: #111111 original: #111 Custom | Gestalt value: #efefef original: #efefef Custom |
color-text-formfield-disabled | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #ababab original: #ababab Custom |
color-text-formfield-placeholder | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #ababab original: #ababab Custom |
color-text-inverse | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #111111 original: color-black-cosmicore-900 Base |
color-text-light | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 No dark theme |
color-text-link | Gestalt value: #004ba9 original: color-blue-skycicle-700 Base | Gestalt value: #45a3fe original: color-blue-skycicle-400 Base |
color-text-shopping | Gestalt value: #0074e8 original: color-blue-skycicle-500 Base | Gestalt value: #75bfff original: color-blue-skycicle-300 Base |
color-text-subtle | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base |
color-text-success | Gestalt value: #005f3e original: color-green-matchacado-600 Base | Gestalt value: #39d377 original: color-green-matchacado-400 Base |
color-text-warning | Gestalt value: #bd5b00 original: color-yellow-caramellow-500 Base | Gestalt value: #e18d00 original: color-yellow-caramellow-400 Base |
Icon color
Visit the Pog page for guidelines and usage.
CSS token name | Light mode | Dark mode |
|---|---|---|
color-icon-avatar-default | Gestalt value: #111111 original: #111 Custom | Gestalt value: #efefef original: #efefef Custom |
color-icon-brand-primary | Gestalt value: #e60023 original: color-red-pushpin-450 Base | Gestalt value: #e60023 original: color-red-pushpin-450 No dark theme |
color-icon-dark | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #111111 original: color-black-cosmicore-900 No dark theme |
color-icon-default | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 Base |
color-icon-disabled | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base | Gestalt value: #4a4a4a original: color-gray-roboflow-600 Base |
color-icon-error | Gestalt value: #cc0000 original: color-red-pushpin-500 Base | Gestalt value: #f47171 original: color-red-pushpin-300 Base |
color-icon-info | Gestalt value: #0074e8 original: color-blue-skycicle-500 Base | Gestalt value: #75bfff original: color-blue-skycicle-300 Base |
color-icon-inverse | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #111111 original: color-black-cosmicore-900 Base |
color-icon-light | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 No dark theme |
color-icon-recommendation | Gestalt value: #812ae7 original: color-purple-mysticool-500 Base | Gestalt value: #b190ff original: color-purple-mysticool-300 Base |
color-icon-shopping | Gestalt value: #0074e8 original: color-blue-skycicle-500 Base | Gestalt value: #75bfff original: color-blue-skycicle-300 Base |
color-icon-subtle | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base |
color-icon-subtle-accent | Gestalt value: #5f5f5f original: color-gray-roboflow-550 Base | Gestalt value: #cdcdcd original: color-gray-roboflow-300 Base |
color-icon-success | Gestalt value: #005f3e original: color-green-matchacado-600 Base | Gestalt value: #39d377 original: color-green-matchacado-400 Base |
color-icon-warning | Gestalt value: #bd5b00 original: color-yellow-caramellow-500 Base | Gestalt value: #e18d00 original: color-yellow-caramellow-400 Base |
Data visualization color
Visit the Data Visualization Guidelines page for guidelines and usage.
CSS token name | Light mode | Dark mode |
|---|---|---|
color-data-visualization-01 | value: #003c96 original: color-blue-skycicle-800 Base | value: #005fcb original: color-blue-skycicle-600 Base |
color-data-visualization-02 | value: #11a69c original: #11A69C Custom | value: #75e4d5 original: color-teal-spabattical-200 Base |
color-data-visualization-03 | value: #924af7 original: #924AF7 Custom | value: #b190ff original: #B190FF Custom |
color-data-visualization-04 | value: #d17711 original: #D17711 Custom | value: #fda600 original: #FDA600 Custom |
color-data-visualization-05 | value: #0081fe original: #0081FE Custom | value: #75bfff original: color-blue-skycicle-300 Base |
color-data-visualization-06 | value: #ff5383 original: #FF5383 Custom | value: #de2c62 original: color-pink-flaminglow-500 Base |
color-data-visualization-07 | value: #00ab55 original: #00AB55 Custom | value: #a4f9ac original: color-green-matchacado-200 Base |
color-data-visualization-08 | value: #400387 original: color-purple-mysticool-800 Base | value: #812ae7 original: color-purple-mysticool-500 Base |
color-data-visualization-09 | value: #f2681f original: #F2681F Custom | value: #ff5b45 original: color-orange-firetini-450 Base |
color-data-visualization-10 | value: #005062 original: color-teal-spabattical-800 Base | value: #007a72 original: #007A72 Custom |
color-data-visualization-11 | value: #de2c62 original: color-pink-flaminglow-500 Base | value: #f76593 original: color-pink-flaminglow-400 Base |
color-data-visualization-12 | value: #660e00 original: color-orange-firetini-900 Base | value: #ffc58f original: color-orange-firetini-200 Base |
color-data-visualization-error-graph | value: #ed0000 original: #ED0000 Custom | value: #f47171 original: color-red-pushpin-300 Base |
color-data-visualization-error-text | value: #cc0000 original: color-red-pushpin-500 Base | value: #eb4242 original: color-red-pushpin-400 Base |
color-data-visualization-primary | value: #0081fe original: color-data-visualization-05 Alias | value: #75bfff original: color-data-visualization-05 Alias |
color-data-visualization-success-graph | value: #008753 original: color-green-matchacado-500 Base | value: #6bec8c original: color-green-matchacado-300 Base |
color-data-visualization-success-text | value: #005f3e original: color-green-matchacado-600 Base | value: #39d377 original: color-green-matchacado-400 Base |
Elevation
Visit the Box page for guidelines and usage.
CSS token name | Light mode | Dark mode |
|---|---|---|
elevation-floating | value: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) original: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) Base | value: none original: none Base |
elevation-raised-bottom | value: 0px -2px 8px 0px rgba(0, 0, 0, 0.12) original: 0px -2px 8px 0px rgba(0, 0, 0, 0.12) Base | value: 0px -0.5px 0px 0px rgba(249, 249, 249, 0) original: 0px -0.5px 0px 0px rgba(249, 249, 249, 0) Base |
elevation-raised-top | value: 0px 2px 8px 0px rgba(0, 0, 0, 0.12) original: 0px 2px 8px 0px rgba(0, 0, 0, 0.12) Base | value: 0px 0.5px 0px 0px rgba(249, 249, 249, 0) original: 0px 0.5px 0px 0px rgba(249, 249, 249, 0) Base |
Font size
Visit the Text page for guidelines and usage.
CSS token name | Light mode |
|---|---|
font-size-100 | Gestalt value: 12px original: 12px Base |
font-size-200 | Gestalt value: 14px original: 14px Base |
font-size-300 | Gestalt value: 16px original: 16px Base |
font-size-400 | Gestalt value: 20px original: 20px Base |
font-size-500 | Gestalt value: 28px original: 28px Base |
font-size-600 | Gestalt value: 36px original: 36px Base |
font-size-datepicker-date | Gestalt value: 16px original: font-size-300 Base |
font-size-datepicker-heading | Gestalt value: 20px original: font-size-400 Base |
Font weight
Visit the Text page for guidelines and usage.
CSS token name | Light mode |
|---|---|
font-weight-bold | Gestalt value: 700 original: 700 Base |
font-weight-datepicker-date | Gestalt value: 400 original: font-weight-normal Base |
font-weight-datepicker-heading | Gestalt value: 700 original: font-weight-bold Base |
font-weight-normal | Gestalt value: 400 original: 400 Base |
font-weight-semibold | Gestalt value: 600 original: 600 Base |
Font family
Visit the Typography page for guidelines and usage.
CSS token name | Light mode |
|---|---|
font-family-code | Gestalt value: SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace original: SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace Base |
font-family-datepicker-date | Gestalt value: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif original: font-family-default-latin Base |
font-family-datepicker-heading | Gestalt value: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif original: font-family-default-latin Base |
font-family-default-japanese | ゲシュタルト value: 'SF Pro JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif original: 'SF Pro JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif Base |
font-family-default-latin | Gestalt value: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif original: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif Base |
Opacity
Visit the Box page for guidelines and usage.
CSS token name | Light mode |
|---|---|
opacity-0 | value: 0 original: 0 Base |
opacity-100 | value: 0.04 original: 0.04 Base |
opacity-200 | value: 0.2 original: 0.2 Base |
opacity-300 | value: 0.4 original: 0.4 Base |
opacity-400 | value: 0.8 original: 0.8 Base |
opacity-500 | value: 0.9 original: 0.9 Base |
Spacing
Visit the Box page for guidelines and usage.
CSS token name | Light mode |
|---|---|
space-0 | value: 0px original: 0px Base |
space-100 | value: 4px original: 4px Base |
space-1000 | value: 40px original: 40px Base |
space-1100 | value: 44px original: 44px Base |
space-1200 | value: 48px original: 48px Base |
space-1300 | value: 52px original: 52px Base |
space-1400 | value: 56px original: 56px Base |
space-1500 | value: 60px original: 60px Base |
space-1600 | value: 64px original: 64px Base |
space-200 | value: 8px original: 8px Base |
space-300 | value: 12px original: 12px Base |
space-400 | value: 16px original: 16px Base |
space-500 | value: 20px original: 20px Base |
space-600 | value: 24px original: 24px Base |
space-700 | value: 28px original: 28px Base |
space-800 | value: 32px original: 32px Base |
space-900 | value: 36px original: 36px Base |
space-negative-100 | value: -4px original: -4px Base |
space-negative-1000 | value: -40px original: -40px Base |
space-negative-1100 | value: -44px original: -44px Base |
space-negative-1200 | value: -48px original: -48px Base |
space-negative-1300 | value: -52px original: -52px Base |
space-negative-1400 | value: -56px original: -56px Base |
space-negative-1500 | value: -60px original: -60px Base |
space-negative-1600 | value: -64px original: -64px Base |
space-negative-200 | value: -8px original: -8px Base |
space-negative-300 | value: -12px original: -12px Base |
space-negative-400 | value: -16px original: -16px Base |
space-negative-500 | value: -20px original: -20px Base |
space-negative-600 | value: -24px original: -24px Base |
space-negative-700 | value: -28px original: -28px Base |
space-negative-800 | value: -32px original: -32px Base |
space-negative-900 | value: -36px original: -36px Base |
Rounding
Visit the Box page for guidelines and usage.
CSS token name | Light mode |
|---|---|
rounding-0 | value: 0px original: 0px Base |
rounding-100 | value: 4px original: 4px Base |
rounding-200 | value: 8px original: 8px Base |
rounding-300 | value: 12px original: 12px Base |
rounding-400 | value: 16px original: 16px Base |
rounding-500 | value: 20px original: 20px Base |
rounding-600 | value: 24px original: 24px Base |
rounding-700 | value: 28px original: 28px Base |
rounding-800 | value: 32px original: 32px Base |
rounding-circle | value: 50% original: 50% Base |
rounding-pill | value: 999px original: 999px Base |