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 page, those that 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 learm 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 implementation details.
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-box-default Box component default background color | #ffffff | -- | |
$color-background-box-infoBase Box component infoBase background color | #0074e8 | -- | |
$color-background-box-infoWeak Box component infoWeak background color | #d7edff | -- | |
$color-background-box-errorBase Box component errorBase background color | #cc0000 | -- | |
$color-background-box-errorWeak Box component errorWeak background color | #ffe0e0 | -- | |
$color-background-box-warningBase Box component warningBase background color | #bd5b00 | -- | |
$color-background-box-warningWeak Box component warningWeak background color | #ffe4c1 | -- | |
$color-background-box-successBase Box component successBase background color | #008753 | -- | |
$color-background-box-successWeak Box component successWeak background color | #c3f9c2 | -- | |
$color-background-box-recommendationBase Box component recommendationBase background color | #812ae7 | -- | |
$color-background-box-recommendationWeak Box component recommendationWeak background color | #e9e4ff | -- | |
$color-background-box-shopping Box component shopping background color | #0074e8 | -- | |
$color-background-box-primary Box component primary background color | #e60023 | -- | |
$color-background-box-secondary Box component secondary background color | #e9e9e9 | -- | |
$color-background-box-tertiary Box component tertiary background color | #767676 | -- | |
$color-background-box-selected Box component selected background color | #111111 | -- | |
$color-background-box-inverse Box component inverse background color | #111111 | -- | |
$color-background-box-brand Box component brand background color | #e60023 | -- | |
$color-background-box-education Box component education background color | #0074e8 | -- | |
$color-background-box-elevationAccent Box component elevationAccent background color | #f1f1f1 | -- | |
$color-background-box-elevationFloating Box component elevationFloating background color | #000000 | -- | |
$color-background-box-elevationRaised Box component elevationRaised background color | #000000 | -- | |
$color-background-box-dark Box component dark background color | #111111 | -- | |
$color-background-box-light Box component light background color | #ffffff | -- | |
$color-background-box-lightWash Box component light wash color. | #e2e2e2 | #535353 | |
$color-background-box-darkWash Box component dark wash color. | #dadada | #666 | |
$color-background-box-transparent Box component transparent color. | #000000 | -- | |
$color-background-box-transparentDarkGray Box component light transparent dark gray color. | #333333 | rgba(255, 255, 255, 0.8) | |
$color-background-button-primary-default Primary button background color | #e60023 | -- | |
$color-background-button-primary-hover Primary button background color on hover | #b60000 | -- | |
$color-background-button-primary-active Primary button background color on active | #a3081a | #b8001b | |
$color-background-button-secondary-default Secondary button background color. | #e9e9e9 | #4a4a4a | |
$color-background-button-secondary-hover Secondary button background color on hover. | #e2e2e2 | #535353 | |
$color-background-button-secondary-active Secondary button background color on active. | #dadada | #666 | |
$color-background-button-tertiary-default Tertiary button background color. | #000000 | -- | |
$color-background-button-tertiary-hover Tertiary button background color on hover. | #000000 | rgba(250, 250, 250, 0.5) | |
$color-background-button-tertiary-active Tertiary button background color on active. | #000000 | rgba(250, 250, 250, 0.6) | |
$color-background-button-shopping-default Button background color for shopping | #0074e8 | -- | |
$color-background-button-shopping-hover Button background color for shopping on hover. | #4a8ad4 | -- | |
$color-background-button-shopping-active Button background color for shopping on active. | #4a85c9 | #4a85c9 | |
$color-background-button-white-default Button white background color for images with background | #ffffff | #030303 | |
$color-background-button-white-hover Button white background color for images with background on hover. | #f0f0f0 | #121212 | |
$color-background-button-white-active Button white background color for images with background on active. | #e0e0e0 | #1f1f1f | |
$color-background-button-gray-default Button gray background color for images with background | #767676 | -- | |
$color-background-button-gray-hover Button gray background color for images with background on hover. | #878787 | #919191 | |
$color-background-button-gray-active Button gray background color for images with background on active. | #828282 | #9b9b9b | |
$color-background-button-semitransparentwhite-default Button semi-transparent white background color for images with background | #ffffff | rgba(51, 51, 51, 0.8) | |
$color-background-button-semitransparentwhite-hover Button semi-transparent white background color for images with background on hover. | #f0f0f0 | #121212 | |
$color-background-button-semitransparentwhite-active Button semi-transparent white background color for images with background on active. | #e0e0e0 | #1f1f1f | |
$color-background-button-semitransparentdark-default Button semi-transparent dark background color for images with background | #333333 | rgba(255, 255, 255, 0.8) | |
$color-background-button-semitransparentdark-hover Button semi-transparent dark background color for images with background on hover. | #121212 | #f0f0f0 | |
$color-background-button-semitransparentdark-active Button semi-transparent dark background color for images with background on active. | #1f1f1f | #e0e0e0 | |
$color-background-button-selected-default Disabled button background color. | #111111 | -- | |
$color-background-overlay Overlay component background color. | #ffffff | #2b2b2b | |
$color-background-tag-primary-default Primary tag background color | #e9e9e9 | -- | |
$color-background-tag-primary-hover Primary tag's close button background color on hover | #e2e2e2 | #535353 | |
$color-background-tag-primary-active Primary tag's close button background color on active | #dadada | #666 | |
$color-background-tag-error-default Error tag background color. | #cc0000 | -- | |
$color-background-tag-error-hover Error tag's close button background color on hover. | #ad081b | #cf001f | |
$color-background-tag-error-active Error tag's close button background color on active. | #a3081a | #b8001b | |
$color-background-tag-warning-default Warning tag background color. | #bd5b00 | -- | |
$color-background-tag-warning-hover Warning tag's close button background color on hover. | #aa4900 | #e18d00 | |
$color-background-tag-warning-active Warning tag's close button background color on active. | #943a00 | #d86800 |
Border color
Visit the Box page for guidelines and implementation details.
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 |
Data visualization
Visit the Data Visualization Guidelines page for guidelines and implementation details.
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$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 | |
$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-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-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 |
Elevation
Visit the Box page for guidelines and implementation details.
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$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-box-elevationAccent Box component elevationAccent background color | #f1f1f1 | -- | |
$color-background-box-elevationFloating Box component elevationFloating background color | #000000 | -- | |
$color-background-box-elevationRaised Box component elevationRaised background color | #000000 | -- | |
$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 |
Font size
Visit the Text page for guidelines and implementation details.
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 implementation details.
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 implementation details.
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 implementation details.
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 implementation details.
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 |
Text color
Visit the Text page for guidelines and implementation details.
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-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 |