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.value Base | value: -- original: -- |
$color-background-dark Background color that will always be dark, no matter the color scheme | value: #111111 original: color.black.cosmicore.900.value Base | value: -- original: -- |
$color-background-default Background color that will match the current color scheme | value: #ffffff original: color.white.mochimalist.0.value Base | value: #111111 original: color.black.cosmicore.900.value Base |
$color-background-education Background color to indicate educational moments or messages | value: #0074e8 original: color.blue.skycicle.500.value Base | value: #75bfff original: color.blue.skycicle.300.value Base |
$color-background-elevation-accent Background color used to accent containers when shadows are not an option | value: #f1f1f1 original: color.gray.roboflow.100.value Base | value: #191919 original: color.gray.roboflow.800.value Base |
$color-background-elevation-floating Background color used for floating elements in dark mode (like Modal or OverlayPanel) | value: #000000 original: color.transparent.value Base | value: #2b2b2b original: color.gray.roboflow.700.value 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.value Base | value: #4a4a4a original: color.gray.roboflow.600.value Base |
$color-background-error-base Background color to indicate errors | value: #cc0000 original: color.red.pushpin.500.value Base | value: #f47171 original: color.red.pushpin.300.value Base |
$color-background-error-weak Weak background color to indicate errors, can be used behind text | value: #ffe0e0 original: color.red.pushpin.100.value Base | value: #660000 original: color.red.pushpin.900.value Base |
$color-background-info-base Background color to indicate neutral information | value: #0074e8 original: color.blue.skycicle.500.value Base | value: #75bfff original: color.blue.skycicle.300.value Base |
$color-background-info-strong Strong background color to indicate neutral information, can be used for hover | value: #005fcb original: color.blue.skycicle.600.value Base | value: #abdbff original: color.blue.skycicle.200.value Base |
$color-background-info-weak Weak background color to indicate neutral information, can be used behind text | value: #d7edff original: color.blue.skycicle.100.value Base | value: #003c96 original: color.blue.skycicle.800.value Base |
$color-background-inverse-base Background color for use on inverted backgrounds | value: #111111 original: color.black.cosmicore.900.value Base | value: #f9f9f9 original: color.gray.roboflow.50.value Base |
$color-background-inverse-strong Strong version of inverse background color, used for hover | value: #e9e9e9 original: color.gray.roboflow.200.value Base | value: -- original: -- |
$color-background-light Background color that will always be light, no matter the color scheme | value: #ffffff original: color.white.mochimalist.0.value Base | value: -- original: -- |
$color-background-neutral Background color to indicate neutral information | value: #767676 original: color.gray.roboflow.500.value Base | value: #cdcdcd original: color.gray.roboflow.300.value Base |
$color-background-primary-base Primary background color | value: #e60023 original: color.red.pushpin.450.value Base | value: -- original: -- |
$color-background-primary-strong Strong version of the primary background color, used for hover | value: #b60000 original: color.red.pushpin.600.value Base | value: -- original: -- |
$color-background-primary-weak Weak version of the primary background color, used for hover | value: #f47171 original: color.red.pushpin.300.value Base | value: -- original: -- |
$color-background-recommendation-base Background color to indicate recommendations | value: #812ae7 original: color.purple.mysticool.500.value Base | value: #b190ff original: color.purple.mysticool.300.value Base |
$color-background-recommendation-weak Weak background color to indicate recommendations, can be used behind text | value: #e9e4ff original: color.purple.mysticool.100.value Base | value: #550aa9 original: color.purple.mysticool.700.value Base |
$color-background-secondary-base Secondary background color | value: #e9e9e9 original: color.gray.roboflow.200.value Base | value: #767676 original: color.gray.roboflow.500.value Base |
$color-background-secondary-strong Strong version of secondary background color, used for hover | value: #a5a5a5 original: color.gray.roboflow.400.value Base | value: -- original: -- |
$color-background-secondary-weak Weak version of secondary background color, used for hover | value: #cdcdcd original: color.gray.roboflow.300.value Base | value: -- original: -- |
$color-background-selected-base Background color to indicate selected state, like a selected IconButton | value: #111111 original: color.black.cosmicore.900.value Base | value: #e9e9e9 original: color.gray.roboflow.200.value Base |
$color-background-selected-strong Strong version of the selected background color, used for hover | value: #2b2b2b original: color.gray.roboflow.700.value Base | value: -- original: -- |
$color-background-selected-weak Weak version of the selected background color, used for hover | value: #a5a5a5 original: color.gray.roboflow.400.value Base | value: -- original: -- |
$color-background-shopping Background color to indicate shopping-related features | value: #0074e8 original: color.blue.skycicle.500.value Base | value: #75bfff original: color.blue.skycicle.300.value Base |
$color-background-success-base Background color to indicate success | value: #008753 original: color.green.matchacado.500.value Base | value: #6bec8c original: color.green.matchacado.300.value Base |
$color-background-success-weak Weak background color to indicate success, can be used behind text | value: #c3f9c2 original: color.green.matchacado.100.value Base | value: #00422c original: color.green.matchacado.700.value Base |
$color-background-tertiary-base Tertiary background color | value: #767676 original: color.gray.roboflow.500.value Base | value: #cdcdcd original: color.gray.roboflow.300.value Base |
$color-background-tertiary-strong Strong version of tertiary background color, used for hover | value: #2b2b2b original: color.gray.roboflow.700.value Base | value: -- original: -- |
$color-background-tertiary-weak Weak version of tertiary background color, used for hover | value: #cdcdcd original: color.gray.roboflow.300.value Base | value: -- original: -- |
$color-background-warning-base Background color to indicate warnings | value: #bd5b00 original: color.yellow.caramellow.500.value Base | value: #fdc900 original: color.yellow.caramellow.300.value Base |
$color-background-warning-weak Weak background color to indicate warnings, can be used behind text | value: #ffe4c1 original: color.orange.firetini.100.value Base | value: #7c2d00 original: color.yellow.caramellow.800.value 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: -- original: -- |
$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: -- original: -- |
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.value Base | value: #767676 original: color.gray.roboflow.500.value Base |
$color-border-default Used to indicate specific UI element boundaries, like Checkbox or RadioButton | value: #767676 original: color.gray.roboflow.500.value Base | value: #cdcdcd original: color.gray.roboflow.300.value Base |
$color-border-error Used to indicate an error on a contained element, like TextField or TextArea | value: #cc0000 original: color.red.pushpin.500.value Base | value: #f47171 original: color.red.pushpin.300.value 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: -- original: -- |
$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.value Alias | value: #f47171 original: color.border.error.darkValue 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.value Alias | value: #75bfff original: color.background.education.darkValue 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: -- original: -- |
$color-border-pulsar-hover Pulsar component border color on hover. | value: #dce9fa original: #dce9fa Custom | value: -- original: -- |
$color-border-table-row-selected Tag component disabled border color. | value: #111111 original: color.black.cosmicore.900.value Base | value: #ffffff original: color.white.mochimalist.0.value Base |
$color-border-tag-disabled Tag component disabled border color. | value: #767676 original: color.gray.roboflow.500.value 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.value Base | Gestalt value: -- original: -- |
$color-text-default Default text color | Gestalt value: #111111 original: color.black.cosmicore.900.value Base | Gestalt value: #ffffff original: color.white.mochimalist.0.value Base |
$color-text-disabled Disabled text color | Gestalt value: #a5a5a5 original: color.gray.roboflow.400.value Base | Gestalt value: #4a4a4a original: color.gray.roboflow.600.value Base |
$color-text-error Text color to indicate an error | Gestalt value: #cc0000 original: color.red.pushpin.500.value Base | Gestalt value: #f47171 original: color.red.pushpin.300.value 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.value Base | Gestalt value: #ababab original: #ababab Custom |
$color-text-formfield-placeholder Formfield placeholder text color. | Gestalt value: #767676 original: color.gray.roboflow.500.value 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.value Base | Gestalt value: #111111 original: color.black.cosmicore.900.value Base |
$color-text-light Light text color that won't change in dark mode | Gestalt value: #ffffff original: color.white.mochimalist.0.value Base | Gestalt value: -- original: -- |
$color-text-link Text color to use for links in documentation sites | Gestalt value: #004ba9 original: color.blue.skycicle.700.value Base | Gestalt value: #45a3fe original: color.blue.skycicle.400.value Base |
$color-text-shopping Text color to use for shopping surfaces | Gestalt value: #0074e8 original: color.blue.skycicle.500.value Base | Gestalt value: #75bfff original: color.blue.skycicle.300.value Base |
$color-text-subtle Secondary, subtle text color | Gestalt value: #767676 original: color.gray.roboflow.500.value Base | Gestalt value: #a5a5a5 original: color.gray.roboflow.400.value Base |
$color-text-success Text color to indicate success | Gestalt value: #005f3e original: color.green.matchacado.600.value Base | Gestalt value: #39d377 original: color.green.matchacado.400.value Base |
$color-text-warning Text color to indicate a warning or caution | Gestalt value: #bd5b00 original: color.yellow.caramellow.500.value Base | Gestalt value: #e18d00 original: color.yellow.caramellow.400.value 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.value Base | Gestalt value: -- original: -- |
$color-icon-dark Icon color that will always remain dark | Gestalt value: #111111 original: color.black.cosmicore.900.value Base | Gestalt value: -- original: -- |
$color-icon-default Default color for icons | Gestalt value: #111111 original: color.black.cosmicore.900.value Base | Gestalt value: #ffffff original: color.white.mochimalist.0.value Base |
$color-icon-disabled Disabled color for icons | Gestalt value: #a5a5a5 original: color.gray.roboflow.400.value Base | Gestalt value: #4a4a4a original: color.gray.roboflow.600.value Base |
$color-icon-error Icon color to indicate an error | Gestalt value: #cc0000 original: color.red.pushpin.500.value Base | Gestalt value: #f47171 original: color.red.pushpin.300.value Base |
$color-icon-info Icon color to use for information | Gestalt value: #0074e8 original: color.blue.skycicle.500.value Base | Gestalt value: #75bfff original: color.blue.skycicle.300.value Base |
$color-icon-inverse Icon color to use on inverted backgrounds | Gestalt value: #ffffff original: color.white.mochimalist.0.value Base | Gestalt value: #111111 original: color.black.cosmicore.900.value Base |
$color-icon-light Icon color that will always remain light | Gestalt value: #ffffff original: color.white.mochimalist.0.value Base | Gestalt value: -- original: -- |
$color-icon-recommendation Icon color to use for recommendations | Gestalt value: #812ae7 original: color.purple.mysticool.500.value Base | Gestalt value: #b190ff original: color.purple.mysticool.300.value Base |
$color-icon-shopping Icon color to use for shopping surfaces | Gestalt value: #0074e8 original: color.blue.skycicle.500.value Base | Gestalt value: #75bfff original: color.blue.skycicle.300.value Base |
$color-icon-subtle Subtle, secondary color for icons | Gestalt value: #767676 original: color.gray.roboflow.500.value Base | Gestalt value: #a5a5a5 original: color.gray.roboflow.400.value Base |
$color-icon-success Icon color to indicate success | Gestalt value: #005f3e original: color.green.matchacado.600.value Base | Gestalt value: #39d377 original: color.green.matchacado.400.value Base |
$color-icon-warning Icon color to indicate a warning or caution | Gestalt value: #bd5b00 original: color.yellow.caramellow.500.value Base | Gestalt value: #e18d00 original: color.yellow.caramellow.400.value 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.value Base | value: #005fcb original: color.blue.skycicle.600.value Base |
$color-data-visualization-02 Second option for data visualization colors | value: #11a69c original: #11A69C Custom | value: #75e4d5 original: color.teal.spabattical.200.value 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.value Base |
$color-data-visualization-06 Sixth option for data visualization colors | value: #ff5383 original: #FF5383 Custom | value: #de2c62 original: color.pink.flaminglow.500.value Base |
$color-data-visualization-07 Seventh option for data visualization colors | value: #00ab55 original: #00AB55 Custom | value: #a4f9ac original: color.green.matchacado.200.value Base |
$color-data-visualization-08 Eighth option for data visualization colors | value: #400387 original: color.purple.mysticool.800.value Base | value: #812ae7 original: color.purple.mysticool.500.value Base |
$color-data-visualization-09 Ninth option for data visualization colors | value: #f2681f original: #F2681F Custom | value: #ff5b45 original: color.orange.firetini.450.value Base |
$color-data-visualization-10 Tenth option for data visualization colors | value: #005062 original: color.teal.spabattical.800.value Base | value: #007A72 original: #007A72 Custom |
$color-data-visualization-11 Eleventh option for data visualization colors | value: #de2c62 original: color.pink.flaminglow.500.value Base | value: #f76593 original: color.pink.flaminglow.400.value Base |
$color-data-visualization-12 Twelfth option for data visualization colors | value: #660e00 original: color.orange.firetini.900.value Base | value: #ffc58f original: color.orange.firetini.200.value 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.value 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.value Base | value: #eb4242 original: color.red.pushpin.400.value 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.value Alias | value: #75bfff original: color.data-visualization.05.darkValue Alias |
$color-data-visualization-success-graph Semantic color used to show positive or successful changes in graphs | value: #008753 original: color.green.matchacado.500.value Base | value: #6bec8c original: color.green.matchacado.300.value 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.value Base | value: #39d377 original: color.green.matchacado.400.value Base |
Elevation
Visit the Box page for guidelines and usage.
CSS token name | Light mode | Dark mode |
|---|---|---|
$elevation-datepicker DatePicker container elevation | value: 0 0 8px rgba(0, 0, 0, 0.1) original: 0 0 8px rgba(0, 0, 0, 0.1) Base | value: 0 0 8px rgba(250, 250, 250, 0.6) original: 0 0 8px rgba(250, 250, 250, 0.6) Base |
$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.value 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.value 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-datepicker-container DatePicker calendar container rounding | value: 16px original: rounding.400.value Base |
$rounding-datepicker-range-end DatePicker semicircle rounding for end range selector | value: 0px 50% 50% 0px original: rounding.0.value rounding.circle.value rounding.circle.value rounding.0.value Base |
$rounding-datepicker-range-middle DatePicker semicircle rounding for start range selector | value: 0px original: rounding.0.value Base |
$rounding-datepicker-range-start DatePicker semicircle rounding for start range selector | value: 50% 0px 0px 50% original: rounding.circle.value rounding.0.value rounding.0.value rounding.circle.value Base |
$rounding-pill | value: 999px original: 999px Base |