Perplexity Design System Reference

Foundation

Color Tokens

The full color palette extracted from Perplexity's design system, including brand primaries, interactive states, neutrals, and surfaces.

Teal Accent

#016A71

Primary CTA · Accent highlights · Active states

Dark Brown

#271A00

Text · Borders · Subtle tints

Rust Red

#A23544

Warning states · Alert messages

Coral

#DC6973

Error messages · Soft warnings

Warm Brown

#97431A

Tertiary accent · Secondary highlights

Success Green

#539E55

Success messages · Positive confirmations

Error Red

#E10600

Destructive actions · Error states

White

#FFFFFF

Primary surface · Input backgrounds

Off-White

#FDFBFA

Subtle background tint · Layer surface

Light Gray

#D6D5D4

Dividers · Disabled text

Black

#000000

Primary text · Headings

Typography

Type Scale

Inter drives Perplexity's voice — clean, modern, and optimized for reading. Single typeface family throughout for consistency and clarity.

Primary Inter UI · Headings · Body · Buttons

Display What do you want to know? 32px · 600 · 40px

H1 Heading Level 1 28px · 600 · 36px

H2 Heading Level 2 24px · 600 · 32px

H3 Heading Level 3 20px · 600 · 28px

Body The quick brown fox jumps over the lazy dog 16px · 400 · 24px

Body Small The quick brown fox jumps over the lazy dog 14px · 400 · 20px

Button Button Label 16px · 500 · 24px

Caption Helper text · Timestamps · Metadata 12px · 400 · 16px

Code const token = '#016A71'; 14px · 400 · 20px

Layout

Spacing & Shapes

4px base grid — every spacing token is a multiple of 4. Border radii range from sharp (4px) to pill (9999px) to match component context.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

24px lg

32px xl

48px 2xl

64px 3xl

Border Radius

Small 4px

Medium 6px

Large 8px

XL 11px

2XL 12px

Full 9999px

Shadows

Raised Card borders · Subtle lift

Floating Cards · Buttons · Tooltips

Elevated Modals · Dropdowns · Overlays

Border Widths

Thin 1px

Medium 2px

Thick 3px

Opacity

Full 100%

Disabled 50%

Subtle 3.5%

Z-index / Layering

Base 1

Dropdown 10–30

Sticky 500

Modal 1000

Elevation

Depth & Surfaces

Clean, minimal surface strategy. White primary surface with subtle tinted containers for visual hierarchy.

Primary Surface

Page background · Input fields · Base layer

L0 · #FFFFFF

Subtle Surface Tint

Cards · Containers · Secondary surfaces

L1 · rgba(39, 26, 0, 0.035)

Off-White Surface

Layered backgrounds · Accent containers

L2 · #FDFBFA

White #FFFFFF

Tinted rgba(39, 26, 0, 0.035)

Off-White #FDFBFA

Border rgba(39, 26, 0, 0.14)

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #016A71 bg · #FFFFFF text · 12px radius · 12/24px padding · 40px height. Secondary: transparent bg · rgba(39, 26, 0, 0.035) background. Ghost: icon-style, minimal styling.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · rgba(39, 26, 0, 0.14) border · 8px radius · 44px height. Focus: rgba(1, 106, 113, 0.5) border · 3px focus ring rgba(1, 106, 113, 0.08).

Card

Content container — elevated surface with shadow

.card

Information Card

Clean, minimal presentation of content with subtle depth and warm-neutral tones.

#FFFFFF bg · rgba(39, 26, 0, 0.08) border · 12px radius · floating shadow. Title: 14px/600/#000000. Body: 13px/rgba(39, 37, 30, 0.65). CTA: primary teal button.

Badges

Status indicators — Success, Error, Info

.badge

Complete Failed New

12px/500 · 4/8px padding · 6px radius. Success: #539E55. Error: #E10600. Info: #016A71.

Guidelines

Do's & Don'ts

Principles for consistent application of the Perplexity design language across surfaces and contexts.

Do — Embrace

Use Teal Accent (#016A71) exclusively for primary CTAs and key interactive states
Maintain the soft warm-brown tint (rgba(39, 26, 0, 0.035)) for card backgrounds
Apply semi-transparent overlays (rgba(39, 37, 30, 0.5)) for disabled states
Use Inter exclusively across all text roles; do not mix typeface families
Respect 16px body text size and 24px line height as readability baseline
Group spacing using multiples of 4px to maintain visual rhythm

Don't — Avoid

Do not use pure blue or other colors in place of the teal accent (#016A71)
Avoid using accent colors for main CTAs; reserve rust red and coral for status states
Do not stack multiple shadow layers; use only one shadow value per element
Avoid reducing font size below 12px for body text; preserves readability
Do not fully desaturate disabled elements; use semi-transparent neutral overlays instead
Avoid spacing elements with arbitrary values; always round to nearest 4px multiple

perplexity.ai

Preview