Home
DESIGN.mdStar on GitHub

Perplexity

Clean, answer-first — an AI search interface that gets out of the way and lets the content breathe.

Colors

Primary

primary #1FB8CD CTAs, links, active states
primary-hover #1A9FB0 Hover on primary

Surfaces

background #FFFFFF Page background
surface #F9F9F9 Cards, input backgrounds
surface-secondary #F2F2F2 Hover states, fills
border #E5E5E5 Dividers, input borders
border-strong #CCCCCC Emphasized borders

Text

text-primary #1C1C1C Body text, headings
text-secondary #666666 Supporting text, metadata
text-muted #999999 Placeholders, disabled

Semantic

error #E53935 Error states
success #2E7D32 Success states

Typography

display Display heading 28px600lh 1.2
heading-lg Large heading text 20px600lh 1.3
heading-md Medium heading text 16px600lh 1.4
body Body text for content and reading 15px400lh 1.65
body-sm Small body text for metadata 13px400lh 1.5
caption Caption and label text 12px400lh 1.4
code const answer = await search(query) 13pxmonolh 1.6

Components

Buttons
Inputs
Badges
Citation 1 Tag Verified Error
Source Card
How large language models work
A comprehensive overview of transformer architectures and attention mechanisms in modern AI systems.
1 arxiv.org
Answer Thread
How does vector search work in practice?
Vector search converts data into high-dimensional embeddings 1 and finds semantically similar items by measuring distance — typically cosine similarity — between those vectors 2. Unlike keyword search, it captures meaning rather than exact string matches, making it ideal for AI-powered retrieval and recommendation systems 3.
1
pinecone.io
Vector embeddings explained
2
weaviate.io
Distance metrics in vector search
3
arxiv.org
Approximate nearest neighbors

Spacing

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px

Guardrails

DO
Let the answer be the hero — minimize surrounding UI chrome
Use teal accent sparingly — links and one CTA max per view
Keep line lengths under 75 characters for readability
Show source citations prominently — trust is the product
DON'T
Add decorative gradients or background textures
Use heavy shadows — keep the UI flat and clean
Use more than 2 font weights on a single screen
Add animations that delay showing the answer
Use colored backgrounds for content sections
Copied!