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.
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-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-weak Weak version of the selected background color, used for hover | #2b2b2b | -- | |
$color-background-selected-strong Strong 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 Sheet) | #000000 | #2b2b2b | |
$color-background-elevation-raised Background color used for raised elements in dark mode, like sticky headers or navigation footers | #000000 | #4a4a4a |
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 | #4a4a4a | |
$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 | #009990 | #48d5c6 | |
$color-data-visualization-02 Second option for data visualization colors | #d86800 | #fdc900 | |
$color-data-visualization-03 Third option for data visualization colors | #6b16ca | #9e68ff | |
$color-data-visualization-04 Fourth option for data visualization colors | #de2c62 | #fe8eb1 | |
$color-data-visualization-05 Fifth option for data visualization colors | #003c96 | #007cff | |
$color-data-visualization-06 Sixth option for data visualization colors | #a42700 | #f77a38 | |
$color-data-visualization-07 Seventh option for data visualization colors | #0074e8 | #abdbff | |
$color-data-visualization-08 Eighth option for data visualization colors | #de3700 | #ffc58f | |
$color-data-visualization-09 Ninth option for data visualization colors | #005c62 | #009990 | |
$color-data-visualization-10 Tenth option for data visualization colors | #9e68ff | #d5c7ff | |
$color-data-visualization-11 Eleventh option for data visualization colors | #008753 | #6bec8c | |
$color-data-visualization-12 Twelfth option for data visualization colors | #630233 | #de2c62 | |
$color-data-visualization-error Semantic color used for show negative or error states in graphs (can also be used for text and icons) | #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. | #003c96 | #007cff | |
$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 Sheet) | #000000 | #2b2b2b | |
$color-background-elevation-raised Background color used for raised elements in dark mode, like sticky headers or navigation footers | #000000 | #4a4a4a | |
$elevation-floating Used to highlight an item that floats above other content, like a Modal | 0 0 8px rgba(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 rgba(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 rgba(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, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | Gestalt |
$font-family-default-japanese Font family for Japanese | 'SF Pro JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | ゲシュタルト |
$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. Note: iOS uses 4% | 0.03 | |
$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 | 0 | |
$space-100 | 4px | |
$space-200 | 8px | |
$space-300 | 16px | |
$space-400 | 24px | |
$space-500 | 32px | |
$space-600 | 64px | |
$space-negative-100 | -4px | |
$space-negative-200 | -8px | |
$space-negative-300 | -16px | |
$space-negative-400 | -24px | |
$space-negative-500 | -32px | |
$space-negative-600 | -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 |
$color-text-icon-default Default color for icons | #111111 | #ffffff | Gestalt |
$color-text-icon-subtle Subtle, secondary color for icons | #767676 | #a5a5a5 | Gestalt |
$color-text-icon-success Icon color to indicate success | #005f3e | #39d377 | Gestalt |
$color-text-icon-error Icon color to indicate an error | #cc0000 | #f47171 | Gestalt |
$color-text-icon-warning Icon color to indicate a warning or caution | #bd5b00 | #e18d00 | Gestalt |
$color-text-icon-info Icon color to use for information | #0074e8 | #75bfff | Gestalt |
$color-text-icon-recommendation Icon color to use for recommendations | #812ae7 | #b190ff | Gestalt |
$color-text-icon-inverse Icon color to use on inverted backgrounds | #ffffff | #111111 | Gestalt |
$color-text-icon-shopping Icon color to use for shopping surfaces | #0074e8 | #75bfff | Gestalt |
$color-text-icon-brand-primary Icon color to use solely for representing the Pinterest brand | #e60023 | -- | Gestalt |
$color-text-icon-light Icon color that will always remain light | #ffffff | -- | Gestalt |
$color-text-icon-dark Icon color that will always remain dark | #111111 | -- | Gestalt |