--- name: perplexity-design description: Builds web app screens and marketing pages in Perplexity's design language - answer-first layouts, a calm one-ink palette with a rare teal accent, serif answers with sans chrome, the composer as hero, inline source citations - from measured tokens that can be swapped for any brand. Use whenever the user asks for a Perplexity-style, Perplexity-like or answer-engine look; an AI search, research, chat or knowledge-product interface; a landing or pricing page "like Perplexity"; a calm, editorial, restrained or "not generic AI" UI and names Perplexity as the reference; or wants this system applied to their own brand colours and fonts. Also use when restyling an existing screen toward Perplexity, or when the project already contains this skill's tokens.css. Not for generic UI requests that name no style or reference, other brands' design systems, slide decks, or print. license: MIT compatibility: Works in any agent that supports Agent Skills. The optional lint script needs Node 18+. metadata: version: "1.0.0" observed: "2026-10" --- # Perplexity design Build interfaces that read as Perplexity: quiet chrome, content first, every claim traceable to a source. The values here were measured from perplexity.ai's live CSS (October 2026), not guessed. Everything visual flows from `assets/tokens.css`, whose BRAND block is the only thing to edit when applying the system to another brand. All paths are relative to this file's directory. ## What makes it read as Perplexity Hold these ten; they matter more than any single value. 1. **The composer is the hero.** Every app screen is organised around the ask box: centred on home, docked at the bottom of threads. Raised surface, radius 16, a 0.5px shadow ring instead of a border. 2. **One ink, many strengths.** Text, hairlines and fills are one ink at 100 / 75 / 50 / 15 / 7 / 3.5%. Two near-identical grounds (`#fbfbfb` page, `#fff` raised). No ladders of unrelated greys. This is why it feels calm. 3. **The accent is a signature, not a button.** Teal (`#016a71` / `#4e99a3`) appears only on the caret, small badges, the featured pricing card, hover titles and tiny meta links. Primary buttons are inverse (charcoal on light, pale grey on dark). 4. **What it says is serif; what you operate is sans.** Answers, headlines and the home question are a text serif at 16/26; all chrome is a compact grotesk at 14/20. That split is the main typographic signature. 5. **Sources are inline evidence.** Citations are tiny mono domain chips placed after the claim, on a 7% fill, never numbered superscripts or coloured links. Favicons stack in a "8 sources" pill; details live in a hover card. 6. **Flat at rest, elevated only when floating.** Cards and tables get a hairline or nothing. Only the composer, popovers, menus and panels get a soft stacked shadow. 7. **Radius follows input.** 16 for things you type into, 12 for cards and popovers, 8 for buttons and rows, 6 for chips, full for pills and icon buttons. 8. **Dark mode is designed, not inverted.** Cool grounds (`#15191d` / `#1a1e21`), pale ink, and every font weight about 10% lighter (400 → 360, 500 → 470) so text doesn't bloom. 9. **Fast, damped motion.** 75ms focus, 150ms colour and entrances (expo-out, 5px rise), 300ms buttons. Nothing bounces. 10. **Plain, short copy.** Questions as prompts ("What do you want to know?"), status in two words ("8 sources"), empty states as facts ("No projects"), sentence case, no emoji. ## Choose the mode first Decide from the surface being built, not the product: - **App screen (Operate):** anything used repeatedly to get work done: home, threads, library, settings, feeds, dashboards. Read `references/app-screens.md` and start from `assets/templates/app-shell.html`. - **Marketing page (Persuade):** landing, pricing, product, about, blog. Read `references/marketing-pages.md` and start from `assets/templates/landing.html`. A product with both gets both, sharing the same tokens. ## Workflow Copy this checklist and tick it off: ``` - [ ] 1. Read the brief and the project: stack, existing tokens or brand, target file(s) - [ ] 2. Pick the mode; read its reference file and look at its template - [ ] 3. Brand: keep Perplexity's values, or fill the BRAND block from the user's brand (references/rebrand.md) - [ ] 4. Fonts: load them explicitly (assets/fonts.md); never assume they're installed - [ ] 5. Bring in tokens.css (+ base.css, components.css for plain HTML; tailwind-theme.css for Tailwind) - [ ] 6. Sketch the hierarchy in a few lines: the one primary action, what's serif, where sources show - [ ] 7. Build, using references/components.md for every control - [ ] 8. Lint: node scripts/lint.mjs — fix every FAIL, justify or fix each WARN - [ ] 9. Look: screenshot at 1440 and 390 wide, light and dark, if a browser tool is available; fix the top 3 issues - [ ] 10. Report: what you built, brand choices, anything placeholder, any check you couldn't run ``` **Step 5 detail.** For plain HTML, link or inline (in this order) the fonts, `assets/tokens.css`, `assets/base.css`, `assets/components.css`, then a short page `