perplexity_ai___style_reference:
  info: "> Warm research terminal. A cream-toned search bar floats on aged-paper canvas, surrounded by quiet monochrome controls — the calm of a library reading desk distilled into a single input field."

  theme: "light"

  info: "Perplexity's interface operates like a quiet research terminal: a warm off-white canvas (#faf8f5) that reads more like aged paper than sterile app-white, a single monochrome typographic voice, and one restrained teal accent (#016a71) that appears only as functional punctuation. The entire visual system compresses to a search bar as the hero — every surrounding control (sidebar, top nav, model selector, voice button) is a subordinate satellite. Density is compact but not cramped: 8px is the workhorse gap, 12–16px the padding standard, with 9999px pill rounding on all interactive controls. There is almost no elevation — the design is deliberately flat, using a barely-there 1px border at #d1d1cd and a single whisper-soft shadow to separate the card layer from the canvas. Typography is custom (pplxSans) at exactly two weights (400, 500) and three sizes (12, 14, 16) — the scale is intentionally narrow, making the interface feel like a document rather than a dashboard."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Aged Paper | `#faf8f5` | `--color-aged-paper` | Page canvas and card surfaces — warm off-white replaces sterile pure white, giving the interface a document-like, paper-textured quality |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, and the dominant fill across navigation and body copy |"
    info: "| Charcoal | `#27251e` | `--color-charcoal` | Primary action button background and high-emphasis text — warm near-black that pairs with the cream canvas for a softer than pure-black contrast |"
    info: "| Ash Gray | `#72706b` | `--color-ash-gray` | Secondary text, muted icons, and inactive nav fills — carries the warm tint of the palette |"
    info: "| Stone | `#92918b` | `--color-stone` | Tertiary/placeholder text and low-emphasis labels |"
    info: "| Pebble | `#d1d1cd` | `--color-pebble` | Hairline borders on cards and input containers — warm gray that recedes against the cream canvas |"
    info: "| Deep Teal | `#016a71` | `--color-deep-teal` | Sole chromatic accent — active nav indicator and selected state fill, provides the only color punctuation in the interface |"

  tokens___typography:

    pplxsans___all_interface_text___the_deliberately_narrow_scale_3_sizes__2_weights_makes_the_system_feel_document_like__weight_400_handles_body__labels__and_input_text__weight_500_is_reserved_for_active_selected_states_and_emphasis__the_custom_typeface_is_geometric_and_humanist__tighter_and_more_distinctive_than_a_system_sans_like_inter__normal_letter_spacing_throughout_____font_pplxsans:
      - "**Substitute:** Inter (system fallback) — closest in geometric proportions; alternatively DM Sans for similar warmth"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.25, 1.33, 1.43, 1.50, 2.00"
      - "**Role:** All interface text — the deliberately narrow scale (3 sizes, 2 weights) makes the system feel document-like. Weight 400 handles body, labels, and input text; weight 500 is reserved for active/selected states and emphasis. The custom typeface is geometric and humanist, tighter and more distinctive than a system sans like Inter. Normal letter-spacing throughout."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.43 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.43 | — | `--text-body` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 32 | 32px | `--spacing-32` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 16px |"
      info: "| input | 12px |"
      info: "| buttons | 9999px |"
      info: "| nav-items | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 640px"
      - "**Section gap:** 32px"
      - "**Card padding:** 12px"
      - "**Element gap:** 8px"

  components:

    search_input:
      role: "Central input field — the primary action surface of the product"

      info: "Full-width within 640px max-width container. White (#ffffff) background with 1px border in #d1d1cd, 12px border-radius. 16px pplxSans weight 400 placeholder text in #92918b. 16px vertical padding. Contains an inline '+' icon, a 'Computer' mode toggle chip, a 'Model' dropdown, a microphone icon, and a dark submit button (#27251, 9999px radius, white up-arrow icon)."

    primary_submit_button:
      role: "Search submission — the only filled dark button in the interface"

      info: "28×28px circle, #27251 background, 9999px radius, white (#ffffff) up-arrow icon at 14px. Sits inline at the right edge of the search input."

    sidebar_nav_item:
      role: "Left rail navigation links"

      info: "36px height, 8px horizontal padding, 9999px radius. pplxSans 14px weight 400 in #27251e. Active state: #e8e6e1 background fill. Leading icon 16px in #27251e. Full-width within 220px sidebar."

    top_nav_link:
      role: "Horizontal category links in the header"

      info: "Inline 14px pplxSans weight 400 in #27251e. No background by default. Active/category indicator uses #016a71 teal fill as an underline or pill background."

    mode_toggle_chip:
      role: "Inline capability selector within the search input"

      info: "Compact pill with 6px radius, 4px 8px padding, #faf8f5 background, 12px pplxSans weight 500 label in #27251, with a small icon prefix and '+' suffix for adding more modes."

    status_card:
      role: "System/connection status notification below the search"

      info: "Full-width 640px, #ffffff background, 16px radius, 1px #d1d1cd border, 12px padding. 14px pplxSans weight 500 label in #27251 with a small status icon. Contains 3-4 skeleton placeholder blocks (rounded 9999px, #f0eeea fill) indicating loading state."

    skeleton_placeholder:
      role: "Loading state for content cards"

      info: "Rounded 9999px bar, 8px height, #f0eeea fill, animated with a subtle shimmer. Arranged in rows with 8px gap."

    sign_in_button:
      role: "Authentication entry at sidebar bottom"

      info: "28px height, 8px 12px padding, 9999px radius, pplxSans 14px weight 500 in #27251e. Circular avatar/icon prefix."

    model_selector:
      role: "Dropdown trigger for AI model selection"

      info: "Inline text button, 14px pplxSans weight 400 in #27251, trailing chevron-down icon at 12px. No border or background."

  do_s_and_don_ts:

    do:
      - "Use 9999px border-radius for all interactive controls (buttons, nav items, toggle chips, tags)"
      - "Maintain the narrow type scale: 12px caption, 14px body-sm, 16px body — do not introduce sizes outside this set"
      - "Set all card and input backgrounds to #ffffff on the #faf8f5 canvas to create the paper-on-paper layering effect"
      - "Use 1px #d1d1cd borders for all container separation — avoid shadows except the single whisper-soft card shadow"
      - "Use #016a71 teal only for active/selected state indicators — it should appear on fewer than 5% of elements"
      - "Keep the main content column at 640px max-width centered — the search bar is the focal point, not a wide canvas"
      - "Use pplxSans weight 500 exclusively for emphasis and active states; weight 400 for all default and body text"

    don_t:
      - "Do not introduce new colors — the palette is deliberately minimal: cream, black, warm grays, and one teal"
      - "Do not use bold weights (600+) — the system maxes at weight 500"
      - "Do not use 0px or 4px border-radius on interactive elements — always pill (9999px) or 12px minimum"
      - "Do not apply heavy shadows or multiple shadow layers — the design is intentionally flat"
      - "Do not use pure white (#ffffff) as a page background — the warm #faf8f5 canvas is a signature choice"
      - "Do not center-align body text — left-align all labels, descriptions, and input text"
      - "Do not use the teal accent decoratively — it signals a functional state (active, selected, live)"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#faf8f5` | Page background — warm off-white that reads as paper or aged cream |"
    info: "| 1 | Card | `#ffffff` | Elevated container surfaces — input fields, status cards, content blocks |"
    info: "| 2 | Subtle Fill | `#e8e6e1` | Active nav item backgrounds, hover states — a barely-visible warm gray |"

  elevation:

    - "**Status Card:** `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px`"

  imagery:

    info: "No photography, illustration, or decorative graphics. The visual language is pure UI — typography, whitespace, and a single teal accent do all the work. Icons are minimal line-style at 16-20px, rendered in #27251 or #72706b. The brand wordmark 'perplexity' is the only typographic identity element. There are no product screenshots, hero images, or marketing visuals on the primary search interface."

  layout:

    info: "Centered single-column layout at 640px max-width. Left sidebar (220px) contains primary navigation (New, Computer, Spaces, Customize, History) with a Sign In button pinned at the bottom. Top header bar (56px) holds horizontal category links (Discover, Finance, Health, Academic, Patents) right-aligned. The main content area is dominated by the centered 'perplexity' wordmark and the search input — the hero is literally a search bar, not a visual. Below the search, a status card and skeleton placeholders extend the column. The layout is deliberately minimal: no multi-column grids, no hero imagery, no card carousels on the primary screen. Navigation is a compact sidebar + thin top bar. Section rhythm is defined by generous vertical breathing room (32px+) rather than visual dividers."

  agent_prompt_guide:

  quick_color_reference:
    - "canvas: #faf8f5"
    - "card/surface: #ffffff"
    - "text primary: #000000"
    - "text secondary: #72706b"
    - "text placeholder: #92918b"
    - "border: #d1d1cd"
    - "active fill: #e8e6e1"
    - "accent (selected/active only): #016a71"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    - "**Search Input with Submit**: Create a 640px-wide search bar on #faf8f5 canvas. Input: white (#ffffff) background, 1px #d1d1cd border, 12px radius, 16px padding. Placeholder 'Ask anything…' in 16px pplxSans weight 400, #92918b. Inside: a '+' icon (#27251e), a mode chip ('Computer') with #faf8f5 background, 6px radius, 12px pplxSans weight 500, and a dark submit circle (28px, #27251e fill, 9999px radius, white arrow icon)."

    - "**Sidebar Nav Item**: 36px tall, 8px horizontal padding, 9999px radius. 14px pplxSans weight 400, #27251e text. 16px leading icon in #27251e. Active state: #e8e6e1 background fill. Full width within a 220px left sidebar with #faf8f5 background."

    - "**Status Notification Card**: 640px wide, white (#ffffff) background, 16px radius, 1px #d1d1cd border, 12px padding, subtle shadow (rgba(0,0,0,0.08) 0px 1px 2px). 14px pplxSans weight 500 label in #27251e with a 12px status icon. Below: 3-4 skeleton bars (9999px radius, #f0eeea fill, 8px height) with 8px gap."

    - "**Teal Active Nav Indicator**: Horizontal 14px pplxSans weight 500 text in #27251e with a #016a71 teal underline bar (2px height, 8px width) or teal pill background. This is the only place teal should appear in the interface."

    - "**Top Header Category Link**: Inline 14px pplxSans weight 400, #27251e, no background. Spacing: 16px gap between links, right-aligned in a 56px-tall header bar on #faf8f5 background."

  similar_brands:

    - "**Notion AI** — Same warm off-white canvas, monochrome text system, and single accent color approach — both feel like documents rather than dashboards"
    - "**Phind** — Developer-focused search interface with centered input hero, minimal chrome, and teal/dark dual-tone palette"
    - "**You.com** — Search-first AI interface with compact sidebar nav, centered query input as the page hero, and restrained accent usage"
    - "**Linear** — Same flat elevation philosophy, hairline borders instead of shadows, narrow type scale, and pill-shaped interactive controls"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-aged-paper: #faf8f5;
          --color-ink-black: #000000;
          --color-charcoal: #27251e;
          --color-ash-gray: #72706b;
          --color-stone: #92918b;
          --color-pebble: #d1d1cd;
          --color-deep-teal: #016a71;
        
          /* Typography — Font Families */
          --font-pplxsans: 'pplxSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.43;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-32: 32px;
        
          /* Layout */
          --page-max-width: 640px;
          --section-gap: 32px;
          --card-padding: 12px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 16px;
          --radius-input: 12px;
          --radius-buttons: 9999px;
          --radius-nav-items: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-canvas: #faf8f5;
          --surface-card: #ffffff;
          --surface-subtle-fill: #e8e6e1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-aged-paper: #faf8f5;
          --color-ink-black: #000000;
          --color-charcoal: #27251e;
          --color-ash-gray: #72706b;
          --color-stone: #92918b;
          --color-pebble: #d1d1cd;
          --color-deep-teal: #016a71;
        
          /* Typography */
          --font-pplxsans: 'pplxSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.43;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-32: 32px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px;
        }