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 | Value | Dark mode value | Example |
|---|---|---|---|
$color-background-default Background color that will match the current color scheme | #ffffff | #111111 | |
$color-background-info-base Background color to indicate neutral information | #0074e8 | #75bfff | |
$color-background-info-weak Weak background color to indicate neutral information, can be used behind text | #d7edff | #003c96 | |
$color-background-info-strong Strong background color to indicate neutral information, can be used for hover | #005fcb | #abdbff | |
$color-background-error-base Background color to indicate errors | #cc0000 | #f47171 | |
$color-background-error-weak Weak background color to indicate errors, can be used behind text | #ffe0e0 | #660000 | |
$color-background-warning-base Background color to indicate warnings | #bd5b00 | #fdc900 | |
$color-background-warning-weak Weak background color to indicate warnings, can be used behind text | #ffe4c1 | #7c2d00 | |
$color-background-success-base Background color to indicate success | #008753 | #6bec8c | |
$color-background-success-weak Weak background color to indicate success, can be used behind text | #c3f9c2 | #00422c | |
$color-background-recommendation-base Background color to indicate recommendations | #812ae7 | #b190ff | |
$color-background-recommendation-weak Weak background color to indicate recommendations, can be used behind text | #e9e4ff | #550aa9 | |
$color-background-neutral Background color to indicate neutral information | #767676 | #cdcdcd | |
$color-background-shopping Background color to indicate shopping-related features | #0074e8 | #75bfff | |
$color-background-primary-base Primary background color | #e60023 | -- | |
$color-background-primary-strong Strong version of the primary background color, used for hover | #b60000 | -- | |
$color-background-primary-weak Weak version of the primary background color, used for hover | #f47171 | -- | |
$color-background-secondary-base Secondary background color | #e9e9e9 | #767676 | |
$color-background-secondary-strong Strong version of secondary background color, used for hover | #a5a5a5 | -- | |
$color-background-secondary-weak Weak version of secondary background color, used for hover | #cdcdcd | -- | |
$color-background-tertiary-base Tertiary background color | #767676 | #cdcdcd | |
$color-background-tertiary-strong Strong version of tertiary background color, used for hover | #2b2b2b | -- | |
$color-background-tertiary-weak Weak version of tertiary background color, used for hover | #cdcdcd | -- | |
$color-background-selected-base Background color to indicate selected state, like a selected IconButton | #111111 | #e9e9e9 | |
$color-background-selected-strong Strong version of the selected background color, used for hover | #2b2b2b | -- | |
$color-background-selected-weak Weak version of the selected background color, used for hover | #a5a5a5 | -- | |
$color-background-inverse-base Background color for use on inverted backgrounds | #111111 | #f9f9f9 | |
$color-background-inverse-strong Strong version of inverse background color, used for hover | #e9e9e9 | -- | |
$color-background-brand Background color to signify the Pinterest brand | #e60023 | -- | |
$color-background-education Background color to indicate educational moments or messages | #0074e8 | #75bfff | |
$color-background-wash-dark Background color to supply a dark wash over an item | #000000 | -- | |
$color-background-wash-light Background color to supply a light wash over an item | #ffffff | -- | |
$color-background-dark Background color that will always be dark, no matter the color scheme | #111111 | -- | |
$color-background-light Background color that will always be light, no matter the color scheme | #ffffff | -- | |
$color-background-elevation-accent Background color used to accent containers when shadows are not an option | #f1f1f1 | #191919 | |
$color-background-elevation-floating Background color used for floating elements in dark mode (like Modal or OverlayPanel) | #000000 | #2b2b2b | |
$color-background-elevation-raised Background color used for raised elements in dark mode, like sticky headers or navigation footers | #000000 | #4a4a4a | |
$color-background-avatar-placeholder Avatar component placeholder background color. | #efefef | #404040 | |
$color-background-badge-neutral Box component infoBase background color | #767676 | #cdcdcd | |
$color-background-badge-info-default Box component infoBase background color | #0074e8 | #75bfff | |
$color-background-badge-info-hover Box component infoBase background color | #005fcb | #abdbff | |
$color-background-badge-error Box component infoBase background color | #cc0000 | #f47171 | |
$color-background-badge-warning Box component infoBase background color | #bd5b00 | #fdc900 | |
$color-background-badge-success Box component infoBase background color | #008753 | #6bec8c | |
$color-background-badge-recommendation Box component infoBase background color | #812ae7 | #b190ff | |
$color-background-badge-lightwash Box component infoBase background color | #ffffff | -- | |
$color-background-badge-darkwash Box component infoBase background color | #000000 | -- | |
$color-background-datepicker-container DatePicker component background color. | #ffffff | #212121 | |
$color-background-datepicker-button-default DatePicker date selectors background color. | #ffffff | #212121 | |
$color-background-datepicker-button-hover DatePicker date selectors background color on hover. | #000000 | rgba(250, 250, 250, 0.5) | |
$color-background-datepicker-button-selected DatePicker date selectors selected background color. | #111111 | #efefef | |
$color-background-formfield-primary Formfield default background color | #ffffff | #030303 | |
$color-background-formfield-disabled Formfield disabled background color | #efefef | #404040 | |
$color-background-tableofcontents-item-default Table of contents item default background color | #000000 | -- | |
$color-background-tableofcontents-item-hover Table of contents item background color on hover | #e9e9e9 | #767676 | |
$color-background-tiledata-10 TileData background color 10 | #0050621A | #007A721A | |
$color-background-tiledata-11 TileData background color 11 | #de2c621A | #f765931A | |
$color-background-tiledata-12 TileData background color 12 | #660e001A | #ffc58f1A | |
$color-background-tiledata-01 TileData background color 01 | #003c961A | #005fcb1A | |
$color-background-tiledata-02 TileData background color 02 | #11a69c1A | #75e4d51A | |
$color-background-tiledata-03 TileData background color 03 | #924af71A | #B190FF1A | |
$color-background-tiledata-04 TileData background color 04 | #d177111A | #FDA6001A | |
$color-background-tiledata-05 TileData background color 05 | #0081fe1A | #75bfff1A | |
$color-background-tiledata-06 TileData background color 06 | #ff53831A | #de2c621A | |
$color-background-tiledata-07 TileData background color 07 | #00ab551A | #a4f9ac1A | |
$color-background-tiledata-08 TileData background color 08 | #4003871A | #812ae71A | |
$color-background-tiledata-09 TileData background color 09 | #f2681f1A | #ff5b451A | |
$color-background-tiledata-hover TileData default background color on hover | #e9e9e9 | #767676 | |
$color-background-tiledata-disabled TileData disabled background color | #efefef | #404040 |
Border color
Visit the Box page for guidelines and usage.
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-border-container Used to delineate a larger container, like Card or TextArea | #cdcdcd | #767676 | |
$color-border-default Used to indicate specific UI element boundaries, like Checkbox or RadioButton | #767676 | #cdcdcd | |
$color-border-error Used to indicate an error on a contained element, like TextField or TextArea | #cc0000 | #f47171 | |
$color-border-focus Used to indicate a focused state on interactive elements, like TextField or Button | #0084ff | -- | |
$color-border-avatar Avatar component outline border color. | #ffffff | #030303 | |
$color-border-formfield-error-default Error formfield border color. | #cc0000 | #f47171 | |
$color-border-formfield-error-hover Error formfield border color on hover. | #ad081b | #cf001f | |
$color-border-tag-disabled Tag component disabled border color. | #767676 | #ababab |
Text color
Visit the Text page for guidelines and usage.
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-text-default Default text color | #111111 | #ffffff | Gestalt |
$color-text-subtle Secondary, subtle text color | #767676 | #a5a5a5 | Gestalt |
$color-text-success Text color to indicate success | #005f3e | #39d377 | Gestalt |
$color-text-disabled Disabled text color | #a5a5a5 | #4a4a4a | Gestalt |
$color-text-error Text color to indicate an error | #cc0000 | #f47171 | Gestalt |
$color-text-warning Text color to indicate a warning or caution | #bd5b00 | #e18d00 | Gestalt |
$color-text-inverse Text color to use on inverted backgrounds | #ffffff | #111111 | Gestalt |
$color-text-dark Dark text color that won't change in dark mode | #111111 | -- | Gestalt |
$color-text-light Light text color that won't change in dark mode | #ffffff | -- | Gestalt |
$color-text-shopping Text color to use for shopping surfaces | #0074e8 | #75bfff | Gestalt |
$color-text-link Text color to use for links in documentation sites | #004ba9 | #45a3fe | Gestalt |
Icon color
Visit the Pog page for guidelines and usage.
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-icon-default Default color for icons | #111111 | #ffffff | Gestalt |
$color-icon-subtle Subtle, secondary color for icons | #767676 | #a5a5a5 | Gestalt |
$color-icon-success Icon color to indicate success | #005f3e | #39d377 | Gestalt |
$color-icon-disabled Disabled color for icons | #a5a5a5 | #4a4a4a | Gestalt |
$color-icon-error Icon color to indicate an error | #cc0000 | #f47171 | Gestalt |
$color-icon-warning Icon color to indicate a warning or caution | #bd5b00 | #e18d00 | Gestalt |
$color-icon-info Icon color to use for information | #0074e8 | #75bfff | Gestalt |
$color-icon-recommendation Icon color to use for recommendations | #812ae7 | #b190ff | Gestalt |
$color-icon-inverse Icon color to use on inverted backgrounds | #ffffff | #111111 | Gestalt |
$color-icon-shopping Icon color to use for shopping surfaces | #0074e8 | #75bfff | Gestalt |
$color-icon-brand-primary Icon color to use solely for representing the Pinterest brand | #e60023 | -- | Gestalt |
$color-icon-light Icon color that will always remain light | #ffffff | -- | Gestalt |
$color-icon-dark Icon color that will always remain dark | #111111 | -- | Gestalt |
Data visualization color
Visit the Data Visualization Guidelines page for guidelines and usage.
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-data-visualization-10 Tenth option for data visualization colors | #005062 | #007A72 | |
$color-data-visualization-11 Eleventh option for data visualization colors | #de2c62 | #f76593 | |
$color-data-visualization-12 Twelfth option for data visualization colors | #660e00 | #ffc58f | |
$color-data-visualization-primary Primary data visualization color, used for showing total value or whenever only 1 color is needed in a visualization. | #0081fe | #75bfff | |
$color-data-visualization-success-graph Semantic color used to show positive or successful changes in graphs | #008753 | #6bec8c | |
$color-data-visualization-success-text Semantic color used for text or icons related to positive or successful info in graphs | #005f3e | #39d377 | |
$color-data-visualization-error-graph Semantic color used to show negative changes in graphs | #ed0000 | #f47171 | |
$color-data-visualization-error-text Semantic color used for text or icons related to negative info in graphs | #cc0000 | #eb4242 | |
$color-data-visualization-01 First option for data visualization colors | #003c96 | #005fcb | |
$color-data-visualization-02 Second option for data visualization colors | #11a69c | #75e4d5 | |
$color-data-visualization-03 Third option for data visualization colors | #924af7 | #B190FF | |
$color-data-visualization-04 Fourth option for data visualization colors | #d17711 | #FDA600 | |
$color-data-visualization-05 Fifth option for data visualization colors | #0081fe | #75bfff | |
$color-data-visualization-06 Sixth option for data visualization colors | #ff5383 | #de2c62 | |
$color-data-visualization-07 Seventh option for data visualization colors | #00ab55 | #a4f9ac | |
$color-data-visualization-08 Eighth option for data visualization colors | #400387 | #812ae7 | |
$color-data-visualization-09 Ninth option for data visualization colors | #f2681f | #ff5b45 |
Elevation
Visit the Box page for guidelines and usage.
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$elevation-floating Used to highlight an item that floats above other content, like a Modal | 0 0 8px rgb(0 0 0 / 0.10) | none | |
$elevation-raised-top Used to indicate a sticky UI element where content can scroll underneath, like a header | 0 2px 8px rgb(0 0 0 / 0.12) | 0 0.5px 0 #f9f9f9 | |
$elevation-raised-bottom Used to indicate a sticky UI element that sits on top of content, like a footer or navigation bar | 0 -2px 8px rgb(0 0 0 / 0.12) | 0 -0.5px 0 #f9f9f9 | |
$elevation-datepicker DatePicker container elevation | 0 0 8px rgba(0, 0, 0, 0.1) | 0 0 8px rgba(250, 250, 250, 0.6) |
Font size
Visit the Text page for guidelines and usage.
CSS token name | Value | Example |
|---|---|---|
$font-size-100 | 12px | Gestalt |
$font-size-200 | 14px | Gestalt |
$font-size-300 | 16px | Gestalt |
$font-size-400 | 20px | Gestalt |
$font-size-500 | 28px | Gestalt |
$font-size-600 | 36px | Gestalt |
Font weight
Visit the Text page for guidelines and usage.
CSS token name | Value | Example |
|---|---|---|
$font-weight-normal Default font weight | 400 | Gestalt |
$font-weight-semibold Font weight used for column headers, headings, and inline-links | 600 | Gestalt |
$font-weight-bold Currently unused. Font weight used for column headers, headings, and inline-links | 700 | Gestalt |
Font family
Visit the Typography page for guidelines and usage.
CSS token name | Value | Example |
|---|---|---|
$font-family-default-latin Default font family used at Pinterest | -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 | Gestalt |
$font-family-default-japanese Font family for Japanese | '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 | ゲシュタルト |
$font-family-code Font family for showing things like code or computer values | SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace | Gestalt |
Opacity
Visit the Box page for guidelines and usage.
CSS token name | Value | Example |
|---|---|---|
$opacity-0 Transparent - When a transparent alpha value is needed (without a background) | 0 | |
$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 | 0.04 | |
$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 | 0.2 | |
$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) | 0.4 | |
$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) | 0.8 | |
$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) | 0.9 |
Spacing
Visit the Box page for guidelines and usage.
CSS token name | Value | Example |
|---|---|---|
$space-0 | 0px | |
$space-100 | 4px | |
$space-200 | 8px | |
$space-300 | 12px | |
$space-400 | 16px | |
$space-500 | 20px | |
$space-600 | 24px | |
$space-700 | 28px | |
$space-800 | 32px | |
$space-900 | 36px | |
$space-1000 | 40px | |
$space-1100 | 44px | |
$space-1200 | 48px | |
$space-1300 | 52px | |
$space-1400 | 56px | |
$space-1500 | 60px | |
$space-1600 | 64px | |
$space-negative-100 | -4px | |
$space-negative-200 | -8px | |
$space-negative-300 | -12px | |
$space-negative-400 | -16px | |
$space-negative-500 | -20px | |
$space-negative-600 | -24px | |
$space-negative-700 | -28px | |
$space-negative-800 | -32px | |
$space-negative-900 | -36px | |
$space-negative-1000 | -40px | |
$space-negative-1100 | -44px | |
$space-negative-1200 | -48px | |
$space-negative-1300 | -52px | |
$space-negative-1400 | -56px | |
$space-negative-1500 | -60px | |
$space-negative-1600 | -64px |
Rounding
Visit the Box page for guidelines and usage.
CSS token name | Value | Example |
|---|---|---|
$rounding-0 | 0px | |
$rounding-100 | 4px | |
$rounding-200 | 8px | |
$rounding-300 | 12px | |
$rounding-400 | 16px | |
$rounding-500 | 20px | |
$rounding-600 | 24px | |
$rounding-700 | 28px | |
$rounding-800 | 32px | |
$rounding-pill | 999px | |
$rounding-circle | 50% | |
$rounding-datepicker-container DatePicker calendar container rounding | 16px | |
$rounding-datepicker-range-start DatePicker semicircle rounding for start range selector | 50% 0px 0px 50% | |
$rounding-datepicker-range-middle DatePicker semicircle rounding for start range selector | 0px | |
$rounding-datepicker-range-end DatePicker semicircle rounding for end range selector | 0px 50% 50% 0px |