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 | JavaScript Prop Name | Value | Example |
|---|---|---|---|
$space-0 | space0 | 0 | |
$space-100 | space100 | 4px | |
$space-200 | space200 | 8px | |
$space-300 | space300 | 16px | |
$space-400 | space400 | 24px | |
$space-500 | space500 | 32px | |
$space-600 | space600 | 64px | |
$space-negative-100 | spaceNegative100 | -4px | |
$space-negative-200 | spaceNegative200 | -8px | |
$space-negative-300 | spaceNegative300 | -16px | |
$space-negative-400 | spaceNegative400 | -24px | |
$space-negative-500 | spaceNegative500 | -32px | |
$space-negative-600 | spaceNegative600 | -64px |
Background color
CSS Token Name | JavaScript Prop Name | Value | Example |
|---|---|---|---|
$color-background-info-base Background color to indicate neutral information | colorBackgroundInfoBase | #0074e8 | |
$color-background-info-weak Weak background color to indicate neutral information, can be used behind text | colorBackgroundInfoWeak | #e6f4ff | |
$color-background-error-base Background color to indicate errors | colorBackgroundErrorBase | #cc0000 | |
$color-background-error-weak Weak background color to indicate errors, can be used behind text | colorBackgroundErrorWeak | #ffebeb | |
$color-background-warning-base Background color to indicate warnings | colorBackgroundWarningBase | #bd5b00 | |
$color-background-warning-weak Weak background color to indicate warnings, can be used behind text | colorBackgroundWarningWeak | #fff0db | |
$color-background-success-base Background color to indicate success | colorBackgroundSuccessBase | #008753 | |
$color-background-success-weak Weak background color to indicate success, can be used behind text | colorBackgroundSuccessWeak | #e3fae1 | |
$color-background-shopping Background color to indicate shopping-related features | colorBackgroundShopping | #0074e8 | |
$color-background-primary-base Primary background color | colorBackgroundPrimaryBase | #e60023 | |
$color-background-primary-strong Strong version of the primary background color, used for hover | colorBackgroundPrimaryStrong | #b60000 | |
$color-background-primary-weak Weak version of the primary background color, used for hover | colorBackgroundPrimaryWeak | #f47171 | |
$color-background-secondary-base Secondary background color | colorBackgroundSecondaryBase | #767676 | |
$color-background-secondary-strong Strong version of secondary background color, used for hover | colorBackgroundSecondaryStrong | #2b2b2b | |
$color-background-secondary-weak Weak version of secondary background color, used for hover | colorBackgroundSecondaryWeak | #cdcdcd | |
$color-background-tertiary-base Tertiary background color | colorBackgroundTertiaryBase | #e9e9e9 | |
$color-background-tertiary-strong Strong version of tertiary background color, used for hover | colorBackgroundTertiaryStrong | #a5a5a5 | |
$color-background-tertiary-weak Weak version of tertiary background color, used for hover | colorBackgroundTertiaryWeak | #cdcdcd | |
$color-background-selected-base Background color to indicate selected state, like a selected IconButton | colorBackgroundSelectedBase | #111111 | |
$color-background-selected-weak Weak version of the selected background color, used for hover | colorBackgroundSelectedWeak | #2b2b2b | |
$color-background-selected-strong Strong version of the selected background color, used for hover | colorBackgroundSelectedStrong | #a5a5a5 | |
$color-background-inverse-base Background color for use on inverted backgrounds | colorBackgroundInverseBase | #ffffff | |
$color-background-inverse-strong Strong version of inverse background color, used for hover | colorBackgroundInverseStrong | #e9e9e9 | |
$color-background-brand Background color to signify the Pinterest brand | colorBackgroundBrand | #e60023 | |
$color-background-education Background color to indicate educational moments or messages | colorBackgroundEducation | #0074e8 |
Text color
CSS Token Name | JavaScript Prop Name | Value | Example |
|---|---|---|---|
$color-text-default Default text color | colorTextDefault | #111111 | Gestalt |
$color-text-subtle Secondary, subtle text color | colorTextSubtle | #767676 | Gestalt |
$color-text-success Text color to indicate success | colorTextSuccess | #005f3e | Gestalt |
$color-text-error Text color to indicate an error | colorTextError | #cc0000 | Gestalt |
$color-text-warning Text color to indicate a warning or caution | colorTextWarning | #bd5b00 | Gestalt |
$color-text-inverse Text color to use on inverted backgrounds | colorTextInverse | #ffffff | Gestalt |
$color-text-icon-default Default color for icons | colorTextIconDefault | #111111 | Gestalt |
$color-text-icon-subtle Subtle, secondary color for icons | colorTextIconSubtle | #767676 | Gestalt |
$color-text-icon-success Icon color to indicate success | colorTextIconSuccess | #005f3e | Gestalt |
$color-text-icon-error Icon color to indicate an error | colorTextIconError | #cc0000 | Gestalt |
$color-text-icon-warning Icon color to indicate a warning or caution | colorTextIconWarning | #bd5b00 | Gestalt |
$color-text-icon-inverse Icon color to use on inverted backgrounds | colorTextIconInverse | #ffffff | Gestalt |
Font size
CSS Token Name | JavaScript Prop Name | Value | Example |
|---|---|---|---|
$font-size-100 | fontSize100 | 12px | Gestalt |
$font-size-200 | fontSize200 | 14px | Gestalt |
$font-size-300 | fontSize300 | 16px | Gestalt |
$font-size-400 | fontSize400 | 20px | Gestalt |
$font-size-500 | fontSize500 | 28px | Gestalt |
$font-size-600 | fontSize600 | 36px | Gestalt |
Font weight
CSS Token Name | JavaScript Prop Name | Value | Example |
|---|---|---|---|
$font-weight-normal Default font weight | fontWeightNormal | 400 | Gestalt |
$font-weight-bold Font weight used for column headers, headings, and inline-links | fontWeightBold | 700 | Gestalt |
Font family
CSS Token Name | JavaScript Prop Name | Value | Example |
|---|---|---|---|
$font-family-default-latin Default font family used at Pinterest | fontFamilyDefaultLatin | -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 | fontFamilyDefaultJapanese | '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 | fontFamilyCode | SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace | Gestalt |