# Perplexity Peppermint

## Overview
The visual language of an AI answer engine: calm, trustworthy, and product-grade. Warm off-white ("Peppermint") paper with warm off-black text, soft rounding, and a single deep-teal brand accent used as punctuation. Hierarchy is built from type weight and whitespace, not color. The teal is precious — it appears on the mic button, focus rings, and the occasional CTA, never as a wash. A native dark theme mirrors the same restraint on near-black.

## Colors & Roles
Warm-neutral foundation. Light: `background` warm off-white (#FCFCF9, page) over a slightly warmer #FAF8F5 canvas, `foreground` warm off-black (#27251E, hue ~94). Surfaces separate by warm tonal steps (`secondary`/`muted` = off-black at 3.5–7% alpha) and a low-chroma hairline `border` (off-black 14% alpha), never by heavy shadow. `primary` is the actual dark CTA fill (#27251E) — not the teal. The teal is the `accent` and `ring` (#016A71, measured "true turquoise"), a low-frequency brand mark. Dark: near-black `background` (#100E12, a faint violet cast), surfaces #171615 / #1E1D1C, off-white `foreground` (#D6D5D4), with `primary` flipping to the off-white pill button; the same teal accent is retained.

## Typography Rules
One humanist-neo-grotesque sans — Perplexity's proprietary `pplxSans`, with Inter as the Google-Fonts fallback. Measured weights: 400 body, 500 labels/buttons, 600 headings. The wordmark-scale h1 is 40px/600 with slightly tight tracking (−0.01em); everything is mixed-case (no uppercase labels). Body is a comfortable 16px at 1.55 line-height. Hierarchy leans on weight (600) and size, keeping color out of it. Modular scale ≈ 1.25.

## Layout Principles
Left fixed sidebar navigation + a centered content column (max ~1200px). The home view centers a wordmark above a rounded search input, with a 2-column promo-card row beneath. Vertical rhythm is generous (`clamp(3rem, 6vw, 5rem)` section gaps); the warm off-white background reads as whitespace.

## Depth & Elevation
Near-flat. No gradients, glass, or noise. Shadows are minimal and very soft (a ~6%-opacity, 16px-blur soft shadow on popovers, modals, and the search input only). Depth comes from warm tonal steps (background → card → muted) and hairlines.

## Shapes
Soft rounding by rule: cards 12px, fields 8px, and buttons/chips as full pills (9999px). Corners are never sharp — but also never heavily bubbled.

## Component Stylings
- **Button**: primary = off-black (#27251E) fill, off-white text, radius 8px or pill, padding 0 16px, weight 500, mixed-case. Accent variant = deep teal (#016A71) fill for the rare brand CTA / mic. Ghost = transparent + warm hairline border, muted text, faint tint on hover (150ms). Focus = 2px teal ring.
- **Card**: warm off-white surface, radius 12px, no/near-zero shadow. A dark-surface variant (off-black fill, white text) appears for feature promo cards.
- **Input**: rounded (12–16px) search field, `card` background, warm hairline border, teal focus ring, muted placeholder.
- **Nav**: left vertical sidebar; icon + small mixed-case label rows, active item gets a faint tint; login pinned to the bottom.
- **Chip**: full-pill toggle/filter chips in warm neutral or a light teal tint.

## Motion
Fast and understated. Hover = subtle background tint / opacity; focus = teal ring. Short fades with translateY(4–6px), 150–250ms, standard easing. No bounce, spring, or parallax.

## Do's and Don'ts
**Do:** use warm off-white instead of pure white; make primary CTAs off-black fills; reserve the deep teal for punctuation (mic, focus ring, tints, rare CTA); round softly (12px cards, pill buttons); divide with warm hairlines; build hierarchy from weight 600 + size + space.
**Don't:** fill every button (or wide backgrounds) with teal; set body text in pure black (#000) — use warm off-black; use 0px hard edges or brutalist framing; add high-chroma gradients, glassmorphism, or colorful multi-hue palettes; drift to cold pure-gray neutrals.

## Responsive Behavior
The sidebar collapses to a top bar / drawer on narrow viewports; the centered content column stays single-column. Display type scales via `clamp()`. Promo cards stack from 2 columns to 1.

## Agent Prompt Guide
> Build this in the 'Perplexity Peppermint' style: warm off-white (#FCFCF9/#FAF8F5) background, warm off-black (#27251E) text, one humanist sans (pplxSans → Inter), soft rounding (12px cards, 9999px pill buttons), warm hairline borders instead of shadows, weight-600 headings for hierarchy, off-black primary CTAs, and the deep teal (#016A71) brand accent reserved for the mic, focus rings, tints, and the occasional CTA. Dark mode: near-black #100E12 with #D6D5D4 off-white text and the same teal.

## Known Gaps / Confidence
Extracted live from perplexity.ai via `getComputedStyle` — colors, typography, and radius are `computed-css` for **both** the native dark (default) theme and the forced light ("Peppermint") theme; the dark set is measured, not synthesized. Color-role assignment (primary vs accent), taxonomy, motion, and layout are `vision-inferred`. Cloudflare caveat: the deterministic stage-1 pipeline bundle was blocked (page title "Just a moment…", screenshots were the challenge interstitial) and its values were discarded; the real page was reached with a live browser that passed only Cloudflare's **passive** JS challenge — no CAPTCHA or human-verification interaction. `destructive` was not present on the home surface, so a sensible red was supplied. The primary sans `pplxSans` is proprietary; Inter is the practical reproduction fallback.