Perplexity AI

Perplexity Computer — naturalistic interface camouflage. The design mimics a lush garden: white flower clusters (cards) float against softly blurred botanical photography, like UI elements composited onto nature footage. Warm sepia text (#271a00 — nearly brown) and cream surfaces (#faf8f5) create the impression of aged parchment overlaid on living greenery. Serif headlines at display sizes contrast with sans-serif UI, echoing the organic/digital tension. 4px and 12px radii appear across all elements except nav pills (40px), maintaining subtle roundness without full-pill uniformity. Generous whitespace (28-40px vertical rhythm) lets content breathe like clearings in foliage. The typeface suite — pplxSans for interface, pplxSerif for declarations — reinforces brand identity through custom letterforms rather than stock choices. Use 40px borderRadius exclusively for navigation pills and primary CTAs — full-pill buttons against 4-12px everywhere else creates instant visual hierarchy Set display headlines at weight 300 (pplxSans 96px or pplxSerif 72-96px) — the whisper-weight approach creates authority through restraint, not volume Layer white (#ffffff) cards on Parchment (#faf8f5) canvas — never put white directly on white or cream directly on cream. The 2-3% luminance difference creates subtle depth without shadows Apply -0.028em letter-spacing to all pplxSans text — the custom tracking is part of the typeface's identity, not optional stylistic flourish Use pplxSansMono at 10-14px for all code-adjacent elements (/query markers, task IDs, status labels) — monospace signals technical credibility in an AI agent context Maintain 28-40px vertical rhythm between major sections — the generous whitespace lets content breathe like clearings in botanical density Keep #271a00 (Aged Sepia) as primary text across all contexts — the near-brown warmth is the brand's chromatic signature, not interchangeable with true black Never use drop shadows or box-shadow — depth comes from color layering (#ffffff → #faf8f5 → #d1cfc7) and blur filters on imagery, not elevation shadows Never set body text below 15px for primary content — the comfortable line-height: 1.5 pattern requires sufficient font size to maintain readability Never use 40px borderRadius on cards or content containers — full-pill radius is reserved for nav and CTAs. Cards stay at 12px, inputs/badges at 4px Never introduce saturated accent colors beyond #0f3639 (Teal Accent) — the warm sepia palette is intentionally muted. Vivid blues/greens/reds break the botanical atmosphere Never use true black (#000000) for primary text — reserve Absolute Black for footer backgrounds and terminal page anchors. Primary text uses #271a00 or #121516 Never set pplxSerif below 24px — serif is for declarations at display/heading scale. Body text and UI elements use pplxSans Never stack multiple layers of transparency without sufficient contrast — frosted-glass buttons (rgba(255,255,255,0.6)) work over blurred imagery, not over other transparent surfaces