W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Pinterest is the visual-discovery platform — a place to find ideas for cooking, style, home, travel, and projects. Founded in 2010, Pinterest's brand voice is warm, optimistic, and inspiration-first. Visually, the identity is anchored on Pinterest Red (#E60023) — the saturated red that has carried the Pinterest "P" mark since the company's founding. The supporting system is intentionally recessive: white canvas, near-black text, and a tight set of UI grays let the user's pinned imagery — the actual content — carry the visual weight of every surface.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/pinterest/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/pinterest/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Pinterest is the visual-discovery platform — a place to find ideas for cooking, style, home, travel, and projects. Founded in 2010, Pinterest's brand voice is warm, optimistic, and inspiration-first. Visually, the identity is anchored on Pinterest Red (#E60023) — the saturated red that has carried the Pinterest "P" mark since the company's founding. The supporting system is intentionally recessive: white canvas, near-black text, and a tight set of UI grays let the user's pinned imagery — the actual content — carry the visual weight of every surface.
Tags: social, discovery, pinterest, red, light-first, consumer-tech
Atoms
Palette
Pinterest · [email protected] · Proprietary — All Rights Reserved
Pinterest corporate palette, anchored on Pinterest Red (#E60023) — the saturated red that has carried the Pinterest "P" mark and the wordmark since the company's founding. The brand is light-first: the canonical Pinterest product surface is white with the Red used on the mark, the "Save" pin button, and the highest-priority calls to action. The supporting system is a small set of neutrals that let pinned imagery — Pinterest's actual content — carry the visual weight of every surface.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Pinterest Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Pinterest Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
pinterest-red |
Pinterest Red | #E60023 |
pinterest-red-dark |
Pinterest Red Dark | #AD081B |
pinterest-white |
Pinterest White | #FFFFFF |
pinterest-near-white |
Pinterest Near-White | #F9F9F9 |
pinterest-text-primary |
Pinterest Text Primary | #111111 |
pinterest-text-secondary |
Pinterest Text Secondary | #5F5F5F |
pinterest-text-tertiary |
Pinterest Text Tertiary | #767676 |
pinterest-divider-light |
Pinterest Divider Light | #EFEFEF |
pinterest-canvas-dark |
Pinterest Canvas Dark | #111111 |
pinterest-surface-dark |
Pinterest Surface Dark | #1F1F1F |
pinterest-surface-elevated-dark |
Pinterest Surface Elevated Dark | #2A2A2A |
pinterest-text-on-dark |
Pinterest Text on Dark | #E9E9E9 |
pinterest-text-secondary-dark |
Pinterest Text Secondary on Dark | #B0B0B0 |
pinterest-green |
Pinterest Green | #0FA573 |
pinterest-yellow |
Pinterest Yellow | #E8B021 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
pinterest-white |
#FFFFFF |
surface |
pinterest-near-white |
#F9F9F9 |
surface-elevated |
pinterest-white |
#FFFFFF |
text-primary |
pinterest-text-primary |
#111111 |
text-secondary |
pinterest-text-secondary |
#5F5F5F |
text-tertiary |
pinterest-text-tertiary |
#767676 |
primary |
pinterest-red |
#E60023 |
primary-hover |
pinterest-red-dark |
#AD081B |
accent |
pinterest-red |
#E60023 |
accent-hover |
pinterest-red-dark |
#AD081B |
warning |
pinterest-yellow |
#E8B021 |
warning-hover |
pinterest-yellow |
#E8B021 |
error |
pinterest-red |
#E60023 |
success |
pinterest-green |
#0FA573 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
pinterest-canvas-dark |
#111111 |
surface |
pinterest-surface-dark |
#1F1F1F |
surface-elevated |
pinterest-surface-elevated-dark |
#2A2A2A |
text-primary |
pinterest-text-on-dark |
#E9E9E9 |
text-secondary |
pinterest-text-secondary-dark |
#B0B0B0 |
text-tertiary |
pinterest-text-secondary-dark |
#B0B0B0 |
primary |
pinterest-red |
#E60023 |
primary-hover |
pinterest-red-dark |
#AD081B |
accent |
pinterest-red |
#E60023 |
accent-hover |
pinterest-red-dark |
#AD081B |
warning |
pinterest-yellow |
#E8B021 |
warning-hover |
pinterest-yellow |
#E8B021 |
error |
pinterest-red |
#E60023 |
success |
pinterest-green |
#0FA573 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
pinterest-red |
#E60023 |
on-identity |
pinterest-white |
#FFFFFF |
primary |
pinterest-red |
#E60023 |
primary-hover |
pinterest-red-dark |
#AD081B |
accent |
pinterest-red |
#E60023 |
accent-hover |
pinterest-red-dark |
#AD081B |
success |
pinterest-green |
#0FA573 |
warning |
pinterest-yellow |
#E8B021 |
error |
pinterest-red |
#E60023 |
background-light |
pinterest-white |
#FFFFFF |
background-dark |
pinterest-canvas-dark |
#111111 |
surface-light |
pinterest-near-white |
#F9F9F9 |
surface-dark |
pinterest-surface-dark |
#1F1F1F |
surface-elevated-dark |
pinterest-surface-elevated-dark |
#2A2A2A |
text-primary-light |
pinterest-text-primary |
#111111 |
text-primary-dark |
pinterest-text-on-dark |
#E9E9E9 |
text-secondary-light |
pinterest-text-secondary |
#5F5F5F |
text-secondary-dark |
pinterest-text-secondary-dark |
#B0B0B0 |
divider |
pinterest-divider-light |
#EFEFEF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (8)
colorChoice → logo.mark
- allowed: pinterest-red, pinterest-white, pinterest-text-primary
- forbidden: any-non-brand-color, pinterest-yellow, pinterest-green
The Pinterest "P" mark and wordmark render in Pinterest Red, white (on dark surfaces), or near-black (in monochrome contexts). The status accents (yellow, green) are reserved for product affordances and never recolor the mark.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, cropped, p-redrawn
Pinterest's brand guidelines prescribe the "P" mark and wordmark in approved variants only. Recoloring, redrawing, or applying decorative effects violates the brand-use policy published at newsroom.pinterest.com.
variantSelection → logo
- use:
p-white - when:
backgroundColorScheme="dark"
On dark surfaces, the "P" mark renders in white for legibility. Pinterest Red on dark canvas can lose legibility against photographic pin imagery; the white variant is required.
variantSelection → logo
- use:
p-red - when:
backgroundColorScheme="light"
On light surfaces, the "P" mark renders in Pinterest Red — the canonical brand application on pinterest.com and across marketing materials.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Pinterest's near-black text (#111111) on Pinterest White clears AA comfortably; the dark-mode text tone (#E9E9E9) on the dark canvas also clears AA.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Pinterest Red (#E60023) on white reads at ~5.4:1 — clearing WCAG AA for body-text contrast. CTA buttons and the "Save" affordance must hold this threshold; failure compromises the interactive contract Pinterest's product depends on.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, busy-photographic-overlay
Pinterest's brand-use guidance restricts use of the "P" mark and wordmark in ways that imply affiliation, on competing-product surfaces, on third-party merchandise without license, or directly over busy photographic pin imagery where the mark loses contrast.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The light-first canvas combined with photographic content surfaces makes contrast verification mandatory on every new role pairing.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700, 800
Pinterest's display typography sits in the Medium (500) through Extra-Bold (800) band on the marketing surface and the product UI. Lighter cuts compromise the warm-but-confident voice the brand depends on.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: pinterest-white, pinterest-near-white, pinterest-text-primary
- doesNotPairWith: pinterest-yellow
Pinterest Red pairs cleanly with the warm-white canvas and the near-black text tone. Pairing Red with Yellow creates an unintended hot saturation that fights the inspirational, calm voice the platform's marketing depends on; reserve yellow for editorial accents on a neutral canvas.
Provenance
- Source: https://newsroom.pinterest.com/en/brand-guidelines
- License:
Proprietary — All Rights Reserved - Attribution: Pinterest, the Pinterest "P" mark, and the Pinterest wordmark are registered trademarks of Pinterest, Inc. Pinterest Red (#E60023) is documented across Pinterest's brand guidelines on the Pinterest newsroom and independently verified via the simple-icons brand database, which cites pinterest.com as the source. Pinterest Sans is Pinterest's proprietary corporate typeface and is referenced here with a public-web fallback to Inter when the licensed file is unavailable.
- Imported:
2026-05-18 - Notes: Pinterest's brand voice intentionally recedes behind the user's pins: a tight palette of one red, one white, one near-black, and a handful of UI grays is the entire brand surface. The dark-mode role mapping is an authored inversion supporting Pinterest's user-selectable dark theme; the canonical brand canvas remains light-first.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Pinterest
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
A clear hierarchy in Pinterest's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Pinterest
[email protected]font · heading
Pinterest Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Pinterest Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ pinterest-red #E60023 accent-hover
→ pinterest-red-dark #AD081B background-dark
→ pinterest-canvas-dark #111111 background-light
→ pinterest-white #FFFFFF divider
→ pinterest-divider-light #EFEFEF error
→ pinterest-red #E60023 identity
→ pinterest-red #E60023 on-identity
→ pinterest-white #FFFFFF primary
→ pinterest-red #E60023 primary-hover
→ pinterest-red-dark #AD081B success
→ pinterest-green #0FA573 surface-dark
→ pinterest-surface-dark #1F1F1F surface-elevated-dark
→ pinterest-surface-elevated-dark #2A2A2A surface-light
→ pinterest-near-white #F9F9F9 text-primary-dark
→ pinterest-text-on-dark #E9E9E9 text-primary-light
→ pinterest-text-primary #111111 text-secondary-dark
→ pinterest-text-secondary-dark #B0B0B0 text-secondary-light
→ pinterest-text-secondary #5F5F5F warning
→ pinterest-yellow #E8B021 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Pinterest Sans prose
→ body Pinterest Sans Palette mode mappings (from pinterest)
Light mode (14 roles)
accent
→ pinterest-red accent-hover
→ pinterest-red-dark background
→ pinterest-white error
→ pinterest-red primary
→ pinterest-red primary-hover
→ pinterest-red-dark success
→ pinterest-green surface
→ pinterest-near-white surface-elevated
→ pinterest-white text-primary
→ pinterest-text-primary text-secondary
→ pinterest-text-secondary text-tertiary
→ pinterest-text-tertiary warning
→ pinterest-yellow warning-hover
→ pinterest-yellow Dark mode (14 roles)
accent
→ pinterest-red accent-hover
→ pinterest-red-dark background
→ pinterest-canvas-dark error
→ pinterest-red primary
→ pinterest-red primary-hover
→ pinterest-red-dark success
→ pinterest-green surface
→ pinterest-surface-dark surface-elevated
→ pinterest-surface-elevated-dark text-primary
→ pinterest-text-on-dark text-secondary
→ pinterest-text-secondary-dark text-tertiary
→ pinterest-text-secondary-dark warning
→ pinterest-yellow warning-hover
→ pinterest-yellow Rules (10 typed constraints)
error · 8 rules
colorChoice logo.mark allowed pinterest-red, pinterest-white, pinterest-text-primary forbidden any-non-brand-color, pinterest-yellow, pinterest-green The Pinterest "P" mark and wordmark render in Pinterest Red, white (on dark surfaces), or near-black (in monochrome contexts). The status accents (yellow, green) are reserved for product affordances and never recolor the mark.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, cropped, p-redrawn Pinterest's brand guidelines prescribe the "P" mark and wordmark in approved variants only. Recoloring, redrawing, or applying decorative effects violates the brand-use policy published at newsroom.pinterest.com.
variantSelection logo use p-white when backgroundColorScheme="dark" On dark surfaces, the "P" mark renders in white for legibility. Pinterest Red on dark canvas can lose legibility against photographic pin imagery; the white variant is required.
variantSelection logo use p-red when backgroundColorScheme="light" On light surfaces, the "P" mark renders in Pinterest Red — the canonical brand application on pinterest.com and across marketing materials.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Pinterest's near-black text (#111111) on Pinterest White clears AA comfortably; the dark-mode text tone (#E9E9E9) on the dark canvas also clears AA.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Pinterest Red (#E60023) on white reads at ~5.4:1 — clearing WCAG AA for body-text contrast. CTA buttons and the "Save" affordance must hold this threshold; failure compromises the interactive contract Pinterest's product depends on.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, busy-photographic-overlay Pinterest's brand-use guidance restricts use of the "P" mark and wordmark in ways that imply affiliation, on competing-product surfaces, on third-party merchandise without license, or directly over busy photographic pin imagery where the mark loses contrast.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The light-first canvas combined with photographic content surfaces makes contrast verification mandatory on every new role pairing.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700, 800 Pinterest's display typography sits in the Medium (500) through Extra-Bold (800) band on the marketing surface and the product UI. Lighter cuts compromise the warm-but-confident voice the brand depends on.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith pinterest-white, pinterest-near-white, pinterest-text-primary doesNotPairWith pinterest-yellow Pinterest Red pairs cleanly with the warm-white canvas and the near-black text tone. Pairing Red with Yellow creates an unintended hot saturation that fights the inspirational, calm voice the platform's marketing depends on; reserve yellow for editorial accents on a neutral canvas.
Provenance
- Source
- https://newsroom.pinterest.com/en/brand-guidelines
- License
Proprietary — All Rights Reserved- Attribution
- Pinterest, the Pinterest "P" mark, and the Pinterest wordmark are registered trademarks of Pinterest, Inc. Pinterest Red (#E60023) is documented across Pinterest's brand guidelines on the Pinterest newsroom and independently verified via the simple-icons brand database, which cites pinterest.com as the source. Pinterest Sans is Pinterest's proprietary corporate typeface and is referenced here with a public-web fallback to Inter when the licensed file is unavailable.
- Imported
2026-05-18- Notes
- Pinterest's brand voice intentionally recedes behind the user's pins: a tight palette of one red, one white, one near-black, and a handful of UI grays is the entire brand surface. The dark-mode role mapping is an authored inversion supporting Pinterest's user-selectable dark theme; the canonical brand canvas remains light-first.