Design tokens Pilot
Pilot
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
Spacing
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 |
Background color
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 | #e6f4ff | -- | |
$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 | #ffebeb | -- | |
$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 | #fff0db | -- | |
$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 | #e3fae1 | -- | |
$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 indicate educational moments or messages | rgba(0, 0, 0, 0.8) | -- | |
$color-background-wash-light Background color to indicate educational moments or messages | rgba(255, 255, 255, 0.9) | -- | |
$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) | rgba(0, 0, 0, 0) | #2b2b2b | |
$color-background-elevation-raised Background color used for raised elements in dark mode, like sticky headers or navigation footers | rgba(0, 0, 0, 0) | #4a4a4a |
Text color
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 | #eb4242 | 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-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 | #eb4242 | Gestalt |
$color-text-icon-warning Icon color to indicate a warning or caution | #bd5b00 | #e18d00 | Gestalt |
$color-text-icon-inverse Icon color to use on inverted backgrounds | #ffffff | #111111 | Gestalt |
Font size
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
CSS token name | Value | Example |
|---|---|---|
$font-weight-normal Default font weight | 400 | Gestalt |
$font-weight-bold Font weight used for column headers, headings, and inline-links | 700 | Gestalt |
Font family
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 |
Border color
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-border-container Used to delineate a larger container, like a card | #cdcdcd | #4a4a4a | |
$color-border-default Used to indicate specific UI element boundaries, like a TextField or SelectList | #767676 | #cdcdcd |
Elevation
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) | rgba(0, 0, 0, 0) | #2b2b2b | |
$color-background-elevation-raised Background color used for raised elements in dark mode, like sticky headers or navigation footers | rgba(0, 0, 0, 0) | #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 |