# Perplexity Peppermint
따뜻한 오프화이트(페퍼민트) 종이 위에 웜 오프블랙 텍스트, 딥 틸(#016A71) 브랜드 액센트와 부드러운 라운드로 완성한 답변 엔진의 차분한 코퍼릿 스타일.
- taxonomy: corporate-clean · ai-product, answer-engine, warm-neutral, teal-accent, peppermint, clean, rounded, product-ui · complexity=medium
- page types: app, landing, marketing, docs
- best for: AI 챗·답변·검색 프로덕트 UI, 웜 뉴트럴 기반의 차분한 SaaS 앱, 틸 액센트의 브랜드 프로덕트 랜딩
- avoid for: 고채도 마케팅·프로모션 중심 UI, 장난스러운 맥시멀리즘, 각진 브루탈리스트·터미널 코어
- provenance: website (Perplexity — AI answer engine) — confidence: colors_measured=computed-css, color_roles=vision-inferred, typography=computed-css, radius=computed-css, dark_set=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Perplexity Peppermint — theme.css (generated, do not edit) */
:root {
--radius: 12px;
--radius-selector: 9999px;
--radius-field: 8px;
--font-sans: 'pplxSans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
--spacing: 8px;
--shadow: 0px 4px 16px 0px color-mix(in oklab, oklch(0.264 0.013 94) 6%, transparent);
--ks-display-weight: 600;
--ks-display-tracking: -0.01em;
--background: oklch(0.990 0.004 106);
--foreground: oklch(0.264 0.013 94);
--card: oklch(0.989 0.003 49);
--card-foreground: oklch(0.264 0.013 94);
--popover: oklch(0.989 0.003 49);
--popover-foreground: oklch(0.264 0.013 94);
--primary: oklch(0.264 0.013 94);
--primary-foreground: oklch(0.990 0.004 106);
--secondary: oklch(0.967 0.005 101);
--secondary-foreground: oklch(0.264 0.013 94);
--muted: oklch(0.943 0.006 97);
--muted-foreground: oklch(0.541 0.009 91);
--accent: oklch(0.478 0.081 203);
--accent-foreground: oklch(0.990 0.004 106);
--destructive: oklch(0.577 0.220 27);
--destructive-foreground: oklch(0.990 0.004 106);
--border: oklch(0.895 0.009 93);
--input: oklch(0.895 0.009 93);
--ring: oklch(0.478 0.081 203);
--chart-1: oklch(0.478 0.081 203);
--chart-2: oklch(0.639 0.076 207);
--chart-3: oklch(0.264 0.013 94);
--chart-4: oklch(0.541 0.009 91);
--chart-5: oklch(0.895 0.009 93);
}
.dark {
--background: oklch(0.168 0.009 308);
--foreground: oklch(0.874 0.002 68);
--card: oklch(0.201 0.003 68);
--card-foreground: oklch(0.874 0.002 68);
--popover: oklch(0.231 0.002 68);
--popover-foreground: oklch(0.874 0.002 68);
--primary: oklch(0.874 0.002 68);
--primary-foreground: oklch(0.201 0.003 68);
--secondary: oklch(0.230 0.008 309);
--secondary-foreground: oklch(0.874 0.002 68);
--muted: oklch(0.230 0.008 309);
--muted-foreground: oklch(0.653 0.002 342);
--accent: oklch(0.478 0.081 203);
--accent-foreground: oklch(0.985 0.004 106);
--destructive: oklch(0.620 0.200 25);
--destructive-foreground: oklch(0.985 0.004 106);
--border: oklch(0.288 0.006 311);
--input: oklch(0.288 0.006 311);
--ring: oklch(0.478 0.081 203);
--chart-1: oklch(0.478 0.081 203);
--chart-2: oklch(0.639 0.076 207);
--chart-3: oklch(0.874 0.002 68);
--chart-4: oklch(0.653 0.002 342);
--chart-5: oklch(0.223 0.029 207);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/perplexity.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `