W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Perplexity
Perplexity is an AI-native answer engine — a conversational search product that returns cited, sourced answers in place of the traditional ten-blue-links results page. The brand voice is authoritative and reference-grade: every claim is footnoted with primary sources, every answer cards a citation rail. Visually, Perplexity is dark-first and cool: a deep "Inky" near-black canvas with a warm "Paper" cream inverse, fronted by the signature Peacock teal — a cyan-green accent that marks every citation, action button, and Pro upgrade surface. Typography is the proprietary FK Grotesk Neue paired with Newsreader for serif passages and Berkeley Mono for code.
1 palette 4 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/perplexity/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/perplexity/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.
Perplexity
Perplexity is an AI-native answer engine — a conversational search product that returns cited, sourced answers in place of the traditional ten-blue-links results page. The brand voice is authoritative and reference-grade: every claim is footnoted with primary sources, every answer cards a citation rail. Visually, Perplexity is dark-first and cool: a deep "Inky" near-black canvas with a warm "Paper" cream inverse, fronted by the signature Peacock teal — a cyan-green accent that marks every citation, action button, and Pro upgrade surface. Typography is the proprietary FK Grotesk Neue paired with Newsreader for serif passages and Berkeley Mono for code.
Tags: perplexity, ai, search, answer-engine, brand, dark-first, teal, citation
Atoms
Palette
Perplexity · [email protected] · Proprietary — All Rights Reserved
Perplexity's brand palette as captured from the live answer engine (perplexity.ai) and the docs surface (docs.perplexity.ai). The brand is dark-first by default: a deep "Inky" near-black canvas with a warm "Paper" cream inverse, fronted by Perplexity's signature "Peacock" teal accent — a calibrated cyan-green that appears as the action color across answer cards, citations, and Pro upgrade surfaces. A muted secondary palette of pale-yellow paper tones and OKLCH-pale-cyan neutrals carries the typography. Perplexity is dark-first; the light mode used by users who prefer it flips Inky to a warm Paper canvas with deep ink text.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Space Grotesk ([email protected]) |
OFL-1.1 | sans-serif |
body |
Space Grotesk ([email protected]) |
OFL-1.1 | sans-serif |
serif |
PT Serif ([email protected]) |
OFL-1.1 | serif |
mono |
Geist Mono ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
inky |
Inky | #100E12 |
inky-deep |
Inky Deep | #082125 |
inky-elevated |
Inky Elevated | #1F2121 |
inky-quiet |
Inky Quiet | #211B1A |
paper |
Paper | #FCFCF9 |
paper-elevated |
Paper Elevated | #F5F5F5 |
paper-warm |
Paper Warm | #F7F7F8 |
peacock |
Peacock | #1FB8CD |
peacock-bright |
Peacock Bright | #32B8C6 |
peacock-deep |
Peacock Deep | #139FB2 |
peacock-soft |
Peacock Soft | #92DCE2 |
peacock-button |
Peacock Button | #35BDC8 |
peacock-banner |
Peacock Banner | #1A6872 |
peacock-pale |
Peacock Pale | #27CAE0 |
marigold |
Marigold | #F0B435 |
marigold-soft |
Marigold Soft | #FFAB44 |
marigold-pale |
Marigold Pale | #FEF08A |
rust |
Rust | #E68161 |
ember |
Ember | #E10600 |
violet-soft |
Violet Soft | #C48ED8 |
text-on-paper |
Text on Paper | #121516 |
text-on-inky |
Text on Inky | #E0E0E0 |
text-secondary |
Text Secondary | #5D5F5F |
border-quiet |
Border Quiet | #84754E |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
paper |
#FCFCF9 |
surface |
paper-elevated |
#F5F5F5 |
surface-elevated |
paper |
#FCFCF9 |
text-primary |
text-on-paper |
#121516 |
text-secondary |
text-secondary |
#5D5F5F |
text-tertiary |
border-quiet |
#84754E |
primary |
peacock-deep |
#139FB2 |
primary-hover |
peacock-banner |
#1A6872 |
accent |
peacock |
#1FB8CD |
accent-hover |
peacock-deep |
#139FB2 |
warning |
marigold |
#F0B435 |
warning-hover |
marigold-soft |
#FFAB44 |
error |
ember |
#E10600 |
success |
peacock |
#1FB8CD |
border |
paper-elevated |
#F5F5F5 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
inky |
#100E12 |
surface |
inky-elevated |
#1F2121 |
surface-elevated |
inky-quiet |
#211B1A |
text-primary |
text-on-inky |
#E0E0E0 |
text-secondary |
paper-warm |
#F7F7F8 |
text-tertiary |
text-secondary |
#5D5F5F |
primary |
peacock-bright |
#32B8C6 |
primary-hover |
peacock-soft |
#92DCE2 |
accent |
peacock |
#1FB8CD |
accent-hover |
peacock-soft |
#92DCE2 |
warning |
marigold |
#F0B435 |
warning-hover |
marigold-soft |
#FFAB44 |
error |
ember |
#E10600 |
success |
peacock-pale |
#27CAE0 |
border |
inky-quiet |
#211B1A |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
inky |
#100E12 |
on-identity |
text-on-inky |
#E0E0E0 |
primary |
peacock-bright |
#32B8C6 |
primary-hover |
peacock-soft |
#92DCE2 |
accent |
peacock |
#1FB8CD |
accent-hover |
peacock-deep |
#139FB2 |
mark |
peacock |
#1FB8CD |
success |
peacock-pale |
#27CAE0 |
warning |
marigold |
#F0B435 |
error |
ember |
#E10600 |
text-primary-light |
text-on-paper |
#121516 |
text-primary-dark |
text-on-inky |
#E0E0E0 |
background-light |
paper |
#FCFCF9 |
background-dark |
inky |
#100E12 |
surface-light |
paper-elevated |
#F5F5F5 |
surface-dark |
inky-elevated |
#1F2121 |
text-secondary-light |
text-secondary |
#5D5F5F |
text-tertiary-light |
border-quiet |
#84754E |
border-light |
paper-elevated |
#F5F5F5 |
border-dark |
inky-quiet |
#211B1A |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
serif |
serif |
code |
mono |
Rules
🛑 error (4)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Soft warm-white (#E0E0E0) on Inky (#100E12) gives roughly 15:1 — clears AAA decisively. Perplexity's reference-grade reading posture, with dense citation rails and long-form sourced answers, justifies an AAA target rather than the AA floor.
colorChoice → roles.colors.primary
- allowed: peacock, peacock-bright, peacock-deep, peacock-button
- forbidden: marigold, ember, rust, violet-soft
Peacock teal (#1FB8CD / #32B8C6 / #35BDC8) is Perplexity's signature accent and the action color on perplexity.ai and docs.perplexity.ai. Marigold is reserved for Pro / Max surface indicators, ember for destructive actions, rust and violet-soft for editorial illustration only — none of these substitute for the Peacock primary.
colorChoice → roles.colors.identity
- allowed: inky, inky-deep
- forbidden: paper, peacock, peacock-bright, marigold
Perplexity is dark-first by construction; the documented dark theme-color meta is #100E12. The identity surface is the Inky canvas — Peacock teal flows across it as accent, not as the identity ground. The Paper canvas is the secondary mode reserved for users who prefer light.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
Perplexity's wordmark and citation glyph are precise brand assets. Recoloring, skewing, or applying gradient fills conflicts with the brand's reference-grade, citation-first posture where every visual element is exact.
⚠️ warning (4)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
FK Grotesk Neue is delivered on perplexity.ai with Regular (400), Medium (500), SemiBold (600), and Bold (700) cuts. The marketing and product surfaces use 400 for body, 500–600 for emphasis, and 700 for hero headings. Display weights outside this band are not in the licensed variable-font cut.
fontPairing → typography.display
- requires:
serif - minSizeRatio:
1.5
FK Grotesk Neue pairs with Newsreader serif on perplexity.ai — sans for interface chrome and citation rails, serif for long-form answer body prose. A 1.5× minimum display-to-serif size ratio preserves the typographic hierarchy when an answer renders headings, body, and citations together.
contextRestriction → roles.colors.accent
- forbiddenContexts: large-fill, hero-background
- allowedContexts: link, focus-ring, data-viz-primary, citation-marker, cta
Peacock teal is the link / citation / CTA color on perplexity.ai — bright, small-area, attention-drawing. Large peacock background fills conflict with the brand's Inky-canvas dark posture where the teal is a directional signal, not a flood fill.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The brand's dense citation-rail and long-form sourced answer surface justifies the enhanced 7:1 target rather than the AA 4.5:1 floor.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: inky, inky-deep, paper, paper-warm
- doesNotPairWith: marigold, rust, ember
Peacock teal reads cleanest against the dark Inky canvas or the warm Paper canvas. Placing it adjacent to marigold, rust, or ember introduces a warm-cool chromatic conflict that fights for attention — these accents belong in separated regions (citations vs. status indicators vs. destructive confirmations), not as adjacent foreground/ background pairs.
Provenance
- Source: https://www.perplexity.ai/
- License:
Proprietary — All Rights Reserved - Attribution: Perplexity AI, Inc. — visual identity captured from the deployed stylesheet on perplexity.ai (OKLCH token families --pale-cyan-, --pale-yellow-, --costa-, --pale-blue-) and the docs.perplexity.ai documentation surface (rendered accent-button colors). Perplexity, the Perplexity wordmark, and associated marks are property of Perplexity AI, Inc.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://www.perplexity.ai/ on 2026-05-18 (theme-color meta tags and the /_spa/assets/ spa-shell-*.css bundle) and from https://docs.perplexity.ai/ where the same peacock teal renders as the primary button. No public brand guide located. The proprietary FK Grotesk Neue, Newsreader serif, and Berkeley Mono faces are declared on perplexity.ai via @font-face but are not publicly distributed. This atom references space-grotesk@1 as the open-source rendering substitute for the sans/display role, pt-serif@1 as the substitute for the serif role used in answer body prose, and geist-mono@1 as the substitute for the mono role.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Perplexity
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.
Perplexity
A clear hierarchy in Perplexity'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
Perplexity
[email protected]font · heading
Space Grotesk
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Space Grotesk
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · serif
PT Serif
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
Geist Mono
[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
→ peacock #1FB8CD accent-hover
→ peacock-deep #139FB2 background-dark
→ inky #100E12 background-light
→ paper #FCFCF9 border-dark
→ inky-quiet #211B1A border-light
→ paper-elevated #F5F5F5 error
→ ember #E10600 identity
→ inky #100E12 mark
→ peacock #1FB8CD on-identity
→ text-on-inky #E0E0E0 primary
→ peacock-bright #32B8C6 primary-hover
→ peacock-soft #92DCE2 success
→ peacock-pale #27CAE0 surface-dark
→ inky-elevated #1F2121 surface-light
→ paper-elevated #F5F5F5 text-primary-dark
→ text-on-inky #E0E0E0 text-primary-light
→ text-on-paper #121516 text-secondary-light
→ text-secondary #5D5F5F text-tertiary-light
→ border-quiet #84754E warning
→ marigold #F0B435 Typography
code
→ mono Geist Mono display
→ heading Space Grotesk prose
→ body Space Grotesk serif
→ serif PT Serif Palette mode mappings (from perplexity)
Light mode (15 roles)
accent
→ peacock accent-hover
→ peacock-deep background
→ paper border
→ paper-elevated error
→ ember primary
→ peacock-deep primary-hover
→ peacock-banner success
→ peacock surface
→ paper-elevated surface-elevated
→ paper text-primary
→ text-on-paper text-secondary
→ text-secondary text-tertiary
→ border-quiet warning
→ marigold warning-hover
→ marigold-soft Dark mode (15 roles)
accent
→ peacock accent-hover
→ peacock-soft background
→ inky border
→ inky-quiet error
→ ember primary
→ peacock-bright primary-hover
→ peacock-soft success
→ peacock-pale surface
→ inky-elevated surface-elevated
→ inky-quiet text-primary
→ text-on-inky text-secondary
→ paper-warm text-tertiary
→ text-secondary warning
→ marigold warning-hover
→ marigold-soft Rules (9 typed constraints)
error · 4 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Soft warm-white (#E0E0E0) on Inky (#100E12) gives roughly 15:1 — clears AAA decisively. Perplexity's reference-grade reading posture, with dense citation rails and long-form sourced answers, justifies an AAA target rather than the AA floor.
colorChoice roles.colors.primary allowed peacock, peacock-bright, peacock-deep, peacock-button forbidden marigold, ember, rust, violet-soft Peacock teal (#1FB8CD / #32B8C6 / #35BDC8) is Perplexity's signature accent and the action color on perplexity.ai and docs.perplexity.ai. Marigold is reserved for Pro / Max surface indicators, ember for destructive actions, rust and violet-soft for editorial illustration only — none of these substitute for the Peacock primary.
colorChoice roles.colors.identity allowed inky, inky-deep forbidden paper, peacock, peacock-bright, marigold Perplexity is dark-first by construction; the documented dark theme-color meta is #100E12. The identity surface is the Inky canvas — Peacock teal flows across it as accent, not as the identity ground. The Paper canvas is the secondary mode reserved for users who prefer light.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo Perplexity's wordmark and citation glyph are precise brand assets. Recoloring, skewing, or applying gradient fills conflicts with the brand's reference-grade, citation-first posture where every visual element is exact.
warning · 4 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 FK Grotesk Neue is delivered on perplexity.ai with Regular (400), Medium (500), SemiBold (600), and Bold (700) cuts. The marketing and product surfaces use 400 for body, 500–600 for emphasis, and 700 for hero headings. Display weights outside this band are not in the licensed variable-font cut.
fontPairing typography.display requires serif minSizeRatio 1.5 FK Grotesk Neue pairs with Newsreader serif on perplexity.ai — sans for interface chrome and citation rails, serif for long-form answer body prose. A 1.5× minimum display-to-serif size ratio preserves the typographic hierarchy when an answer renders headings, body, and citations together.
contextRestriction roles.colors.accent forbiddenContexts large-fill, hero-background allowedContexts link, focus-ring, data-viz-primary, citation-marker, cta Peacock teal is the link / citation / CTA color on perplexity.ai — bright, small-area, attention-drawing. Large peacock background fills conflict with the brand's Inky-canvas dark posture where the teal is a directional signal, not a flood fill.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The brand's dense citation-rail and long-form sourced answer surface justifies the enhanced 7:1 target rather than the AA 4.5:1 floor.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith inky, inky-deep, paper, paper-warm doesNotPairWith marigold, rust, ember Peacock teal reads cleanest against the dark Inky canvas or the warm Paper canvas. Placing it adjacent to marigold, rust, or ember introduces a warm-cool chromatic conflict that fights for attention — these accents belong in separated regions (citations vs. status indicators vs. destructive confirmations), not as adjacent foreground/ background pairs.
Provenance
- Source
- https://www.perplexity.ai/
- License
Proprietary — All Rights Reserved- Attribution
- Perplexity AI, Inc. — visual identity captured from the deployed stylesheet on perplexity.ai (OKLCH token families --pale-cyan-*, --pale-yellow-*, --costa-*, --pale-blue-*) and the docs.perplexity.ai documentation surface (rendered accent-button colors). Perplexity, the Perplexity wordmark, and associated marks are property of Perplexity AI, Inc.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://www.perplexity.ai/ on 2026-05-18 (theme-color meta tags and the /_spa/assets/ spa-shell-*.css bundle) and from https://docs.perplexity.ai/ where the same peacock teal renders as the primary button. No public brand guide located. The proprietary FK Grotesk Neue, Newsreader serif, and Berkeley Mono faces are declared on perplexity.ai via @font-face but are not publicly distributed. This atom references space-grotesk@1 as the open-source rendering substitute for the sans/display role, pt-serif@1 as the substitute for the serif role used in answer body prose, and geist-mono@1 as the substitute for the mono role.