Perplexity — design system & UI screens
A radically minimal AI-search home: the lowercase "perplexity" wordmark sits centered as the sole hero, with no headline or imagery, floating above a large rounded prompt composer that reads "Type / for search modes" and carries inline Search / Computer mode pills, a Model dropdown, mic, and a dark circular voice button. A persistent left sidebar (New, Computer, Spaces, Artifacts, Customize) and a thin top nav of topic verticals (Discover, Finance, Health, Academic, Patents) frame the canvas, while two equal feature cards below ("Search anything" and "Get work done with Computer" with a NEW badge) anchor the layout. The signature element is the centered wordmark-as-hero on a warm off-white background paired with the multi-mode composer — quiet, editorial, and tool-forward.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/perplexity.
Decoded design system
Perplexity's decoded design system: background #FCFCF9, text #000000, accent #8EBEC3, link #8EBEC3, primary #1A73E8; type scale h1 16px / h2 16px / body 16px; 4px spacing base; 8px base radius. The single interactive/action color is #F5F4F0 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FCFCF9 |
| surface | #ECECEA |
| border | #D6D6D3 |
| text | #000000 |
| text_muted | #5F5F5E |
| primary | #1A73E8 |
| accent | #8EBEC3 |
| link | #8EBEC3 |
| secondary | #1FB8CD |
| button_bg | #F5F4F0 |
| button_text | #000000 |
Using these colors
- Action color
#F5F4F0— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#8EBEC3— one role, not several (the action color).- accent
#8EBEC3— accent for emphasis — keep it rare on the page. - primary
#1A73E8— a brand color — but the call-to-action uses #F5F4F0, not this. - secondary
#1FB8CD— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: PPLX Sans
- Body: PPLX Sans
- h1: 16px
- h2: 16px
- body: 16px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
Radii
- base: 8px
- button: 11px
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →