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 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 | value: #a5a5a5 original: color-gray-roboflow-400 Base | value: #a5a5a5 original: color-gray-roboflow-400 No dark theme |
color-background-shopping Background color to indicate shopping-related features | value: #0074e8 original: color-blue-skycicle-500 Base | value: #75bfff original: color-blue-skycicle-300 Base |
color-background-success-base Background color to indicate success | value: #008753 original: color-green-matchacado-500 Base | value: #6bec8c original: color-green-matchacado-300 Base |
color-background-success-weak Weak background color to indicate success, can be used behind text | value: #c3f9c2 original: color-green-matchacado-100 Base | value: #00422c original: color-green-matchacado-700 Base |
color-background-tertiary-base Tertiary background color | value: #767676 original: color-gray-roboflow-500 Base | value: #cdcdcd original: color-gray-roboflow-300 Base |
color-background-tertiary-strong Strong version of tertiary 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-tertiary-weak Weak version of tertiary 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-warning-base Background color to indicate warnings | value: #bd5b00 original: color-yellow-caramellow-500 Base | value: #fdc900 original: color-yellow-caramellow-300 Base |
color-background-warning-weak Weak background color to indicate warnings, can be used behind text | value: #ffe4c1 original: color-orange-firetini-100 Base | value: #7c2d00 original: color-yellow-caramellow-800 Base |
color-background-wash-dark Background color to supply a dark wash over an item | 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 Background color to supply a light wash over an item | 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 Avatar component outline border color. | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-border-container Used to delineate a larger container, like Card or TextArea | value: #cdcdcd original: color-gray-roboflow-300 Base | value: #767676 original: color-gray-roboflow-500 Base |
color-border-default Used to indicate specific UI element boundaries, like Checkbox or RadioButton | value: #767676 original: color-gray-roboflow-500 Base | value: #cdcdcd original: color-gray-roboflow-300 Base |
color-border-error Used to indicate an error on a contained element, like TextField or TextArea | value: #cc0000 original: color-red-pushpin-500 Base | value: #f47171 original: color-red-pushpin-300 Base |
color-border-focus Used to indicate a focused state on interactive elements, like TextField or Button | 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 Formfield disabled border color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-border-formfield-error-default Error formfield border color. | value: #cc0000 original: color-border-error Alias | value: #f47171 original: color-border-error Alias |
color-border-formfield-error-hover Error formfield border color on hover. | value: #ad081b original: #ad081b Custom | value: #cf001f original: #cf001f Custom |
color-border-popover-education Popover component secondary border color. | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-border-popover-primary Popover component primary border color. | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
color-border-popover-secondary Popover component secondary border color. | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-border-pulsar-default Pulsar component default border color. | value: #0074e8 original: #0074e8 Custom | value: #0074e8 original: #0074e8 No dark theme |
color-border-pulsar-hover Pulsar component border color on hover. | value: #dce9fa original: #dce9fa Custom | value: #dce9fa original: #dce9fa No dark theme |
color-border-table-row-selected Tag component disabled border color. | value: #111111 original: color-black-cosmicore-900 Base | value: #ffffff original: color-white-mochimalist-0 Base |
color-border-tag-disabled Tag component disabled border color. | 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 Dark text color that won't change in dark mode | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #111111 original: color-black-cosmicore-900 No dark theme |
color-text-default Default text color | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 Base |
color-text-disabled Disabled text color | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base | Gestalt value: #4a4a4a original: color-gray-roboflow-600 Base |
color-text-error Text color to indicate an error | Gestalt value: #cc0000 original: color-red-pushpin-500 Base | Gestalt value: #f47171 original: color-red-pushpin-300 Base |
color-text-formfield-default Formfield default text color. | Gestalt value: #111111 original: #111 Custom | Gestalt value: #efefef original: #efefef Custom |
color-text-formfield-disabled Formfield disabled text color. | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #ababab original: #ababab Custom |
color-text-formfield-placeholder Formfield placeholder text color. | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #ababab original: #ababab Custom |
color-text-inverse Text color to use on inverted backgrounds | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #111111 original: color-black-cosmicore-900 Base |
color-text-light Light text color that won't change in dark mode | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 No dark theme |
color-text-link Text color to use for links in documentation sites | Gestalt value: #004ba9 original: color-blue-skycicle-700 Base | Gestalt value: #45a3fe original: color-blue-skycicle-400 Base |
color-text-shopping Text color to use for shopping surfaces | Gestalt value: #0074e8 original: color-blue-skycicle-500 Base | Gestalt value: #75bfff original: color-blue-skycicle-300 Base |
color-text-subtle Secondary, subtle text color | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base |
color-text-success Text color to indicate success | Gestalt value: #005f3e original: color-green-matchacado-600 Base | Gestalt value: #39d377 original: color-green-matchacado-400 Base |
color-text-warning Text color to indicate a warning or caution | 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 Avatar default text color. | Gestalt value: #111111 original: #111 Custom | Gestalt value: #efefef original: #efefef Custom |
color-icon-brand-primary Icon color to use solely for representing the Pinterest brand | Gestalt value: #e60023 original: color-red-pushpin-450 Base | Gestalt value: #e60023 original: color-red-pushpin-450 No dark theme |
color-icon-dark Icon color that will always remain dark | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #111111 original: color-black-cosmicore-900 No dark theme |
color-icon-default Default color for icons | Gestalt value: #111111 original: color-black-cosmicore-900 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 Base |
color-icon-disabled Disabled color for icons | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base | Gestalt value: #4a4a4a original: color-gray-roboflow-600 Base |
color-icon-error Icon color to indicate an error | Gestalt value: #cc0000 original: color-red-pushpin-500 Base | Gestalt value: #f47171 original: color-red-pushpin-300 Base |
color-icon-info Icon color to use for information | Gestalt value: #0074e8 original: color-blue-skycicle-500 Base | Gestalt value: #75bfff original: color-blue-skycicle-300 Base |
color-icon-inverse Icon color to use on inverted backgrounds | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #111111 original: color-black-cosmicore-900 Base |
color-icon-light Icon color that will always remain light | Gestalt value: #ffffff original: color-white-mochimalist-0 Base | Gestalt value: #ffffff original: color-white-mochimalist-0 No dark theme |
color-icon-recommendation Icon color to use for recommendations | Gestalt value: #812ae7 original: color-purple-mysticool-500 Base | Gestalt value: #b190ff original: color-purple-mysticool-300 Base |
color-icon-shopping Icon color to use for shopping surfaces | Gestalt value: #0074e8 original: color-blue-skycicle-500 Base | Gestalt value: #75bfff original: color-blue-skycicle-300 Base |
color-icon-subtle Subtle, secondary color for icons | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #a5a5a5 original: color-gray-roboflow-400 Base |
color-icon-success Icon color to indicate success | Gestalt value: #005f3e original: color-green-matchacado-600 Base | Gestalt value: #39d377 original: color-green-matchacado-400 Base |
color-icon-warning Icon color to indicate a warning or caution | 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 First option for data visualization colors | value: #003c96 original: color-blue-skycicle-800 Base | value: #005fcb original: color-blue-skycicle-600 Base |
color-data-visualization-02 Second option for data visualization colors | value: #11a69c original: #11A69C Custom | value: #75e4d5 original: color-teal-spabattical-200 Base |
color-data-visualization-03 Third option for data visualization colors | value: #924af7 original: #924AF7 Custom | value: #b190ff original: #B190FF Custom |
color-data-visualization-04 Fourth option for data visualization colors | value: #d17711 original: #D17711 Custom | value: #fda600 original: #FDA600 Custom |
color-data-visualization-05 Fifth option for data visualization colors | value: #0081fe original: #0081FE Custom | value: #75bfff original: color-blue-skycicle-300 Base |
color-data-visualization-06 Sixth option for data visualization colors | value: #ff5383 original: #FF5383 Custom | value: #de2c62 original: color-pink-flaminglow-500 Base |
color-data-visualization-07 Seventh option for data visualization colors | value: #00ab55 original: #00AB55 Custom | value: #a4f9ac original: color-green-matchacado-200 Base |
color-data-visualization-08 Eighth option for data visualization colors | value: #400387 original: color-purple-mysticool-800 Base | value: #812ae7 original: color-purple-mysticool-500 Base |
color-data-visualization-09 Ninth option for data visualization colors | value: #f2681f original: #F2681F Custom | value: #ff5b45 original: color-orange-firetini-450 Base |
color-data-visualization-10 Tenth option for data visualization colors | value: #005062 original: color-teal-spabattical-800 Base | value: #007a72 original: #007A72 Custom |
color-data-visualization-11 Eleventh option for data visualization colors | value: #de2c62 original: color-pink-flaminglow-500 Base | value: #f76593 original: color-pink-flaminglow-400 Base |
color-data-visualization-12 Twelfth option for data visualization colors | value: #660e00 original: color-orange-firetini-900 Base | value: #ffc58f original: color-orange-firetini-200 Base |
color-data-visualization-error-graph Semantic color used to show negative changes in graphs | value: #ed0000 original: #ED0000 Custom | value: #f47171 original: color-red-pushpin-300 Base |
color-data-visualization-error-text Semantic color used for text or icons related to negative info in graphs | value: #cc0000 original: color-red-pushpin-500 Base | value: #eb4242 original: color-red-pushpin-400 Base |
color-data-visualization-primary Primary data visualization color, used for showing total value or whenever only 1 color is needed in a visualization. | value: #0081fe original: color-data-visualization-05 Alias | value: #75bfff original: color-data-visualization-05 Alias |
color-data-visualization-success-graph Semantic color used to show positive or successful changes in graphs | value: #008753 original: color-green-matchacado-500 Base | value: #6bec8c original: color-green-matchacado-300 Base |
color-data-visualization-success-text Semantic color used for text or icons related to positive or successful info in graphs | 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 Used to highlight an item that floats above other content, like a Modal | value: 0 0 8px rgba(0, 0, 0, 0.10) original: 0 0 8px rgba(0, 0, 0, 0.10) Base | value: none original: none Base |
elevation-raised-bottom Used to indicate a sticky UI element that sits on top of content, like a footer or navigation bar | value: 0 -2px 8px rgba(0, 0, 0, 0.12) original: 0 -2px 8px rgba(0, 0, 0, 0.12) Base | value: 0 -0.5px 0 #f9f9f9 original: 0 -0.5px 0 color-gray-roboflow-50 Base |
elevation-raised-top Used to indicate a sticky UI element where content can scroll underneath, like a header | value: 0 2px 8px rgba(0, 0, 0, 0.12) original: 0 2px 8px rgba(0, 0, 0, 0.12) Base | value: 0 0.5px 0 #f9f9f9 original: 0 0.5px 0 color-gray-roboflow-50 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 weight
Visit the Text page for guidelines and usage.
CSS token name | Light mode |
|---|---|
font-weight-bold Currently unused. Font weight used for column headers, headings, and inline-links | Gestalt value: 700 original: 700 Base |
font-weight-normal Default font weight | Gestalt value: 400 original: 400 Base |
font-weight-semibold Font weight used for column headers, headings, and inline-links | Gestalt value: 600 original: 600 Base |
Font family
Visit the Typography page for guidelines and usage.
CSS token name | Light mode |
|---|---|
font-family-code Font family for showing things like code or computer values | 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-default-japanese Font family for 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 Default font family used at Pinterest | 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 Transparent - When a transparent alpha value is needed (without a background) | value: 0 original: 0 Base |
opacity-100 Pin wash - Permanent overlay used on Pin images to ensure a visual separation between the white background and any Pin images that have pure white peripheries | value: 0.04 original: 0.04 Base |
opacity-200 Overlay wash to be used sparingly. Only use it in situations where a high-level of opacity is needed and if the 40% doesn't fit the design goal | value: 0.2 original: 0.2 Base |
opacity-300 Overlay wash to supply a mid-range wash over an item (e.g. #FFFFFF media controls | #000000 wash behind modals, wash on images with text overlays) | value: 0.4 original: 0.4 Base |
opacity-400 Overlay wash used on most surface's scrims. Used to supply a low-level of opacity over an element (e.g. #FFFFFF image overlay | #00000 Board cover overlay) | value: 0.8 original: 0.8 Base |
opacity-500 Component wash applied on IconButton and other elements as needed (e.g. image overlays). In dark mode we recommend an inverse wash ($color-background-wash-light instead of $color-background-wash-dark) | 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 |