Skip to content
perplexity.ai logo

Just a moment...

perplexity.ai

“A hyper-minimalist, utilitarian interface that prioritizes function and security verification over aesthetic flair. The brand feels like a transparent, invisible layer of infrastructure—calm, precise, and technically robust.”

utilitarian
minimalist
technical
transparent
secure
flat
system-native
invisible

Color Palette

Colors

#ffffff

background

#313131

text

#0000ee

link

Typography

Fonts

system-ui

body
400
system

-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

system-ui

heading
600
system

-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

monospace

mono
400
system
body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

Voice & Tone

Personality

Visual Energy

2/10

Design Era

contemporary-minimal

Emotional Tone

calm-competent

Target Audience

Developers, technical users, and privacy-conscious consumers who value speed, security, and lack of friction.

Comparable Brands

Cloudflare
Vercel
Linear
GitHub
Stripe

Brand Rules

Dos & Don'ts

Do

  • Use system-ui font family for all text, with 600 weight for headings and 400 for body text.
  • Apply sentence-case capitalization to all headings and UI labels.
  • Maintain a strict monochrome palette: #ffffff for backgrounds and #313131 for primary text.
  • Use monospace font family for any code snippets or technical identifiers.
  • Set body line-height to exactly 18.4px for optimal readability.
  • Use a base spacing unit of 2px for all margins and paddings to ensure tight, compact layouts.
  • Keep border-radius at 0px (sharp corners) for all UI elements, including buttons and inputs.
  • Use simple, instructional directive copy for CTAs (e.g., 'Verify', 'Continue') without emojis or exclamations.

Don't

  • Do not use any box-shadows or drop-shadows on any element.
  • Do not use gradients, patterns, or decorative backgrounds.
  • Do not use title case or ALL CAPS for headings.
  • Do not use emojis, icons, or illustrations in the verification flow.
  • Do not use serif fonts or custom web fonts; stick strictly to system fonts.
  • Do not use rounded corners (border-radius > 0px) for buttons or containers.
  • Do not use vibrant or accent colors; maintain high-contrast black/white/gray only.
  • Do not use playful or overly enthusiastic tone; keep copy matter-of-fact and formal.

Design Assets

Visual Elements

Icon for www.perplexity.ai
other48×48

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/perplexity.ai \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free