perplexity_ai___style_reference:
  info: "> Terminal nghiên cứu ấm áp. Một thanh tìm kiếm màu kem nổi trên nền giấy cũ, bao quanh bởi các control đơn sắc yên tĩnh — sự tĩnh lặng của bàn đọc thư viện được cô đọng vào một ô nhập liệu duy nhất."

  theme: "light"

  info: "Giao diện của Perplexity vận hành như một terminal nghiên cứu yên tĩnh: một canvas ấm áp off-white (#faf8f5) mang cảm giác giấy cũ hơn là app-white vô trùng, một giọng văn typographic đơn sắc duy nhất, và một điểm nhấn teal kiềm chế (#016a71) chỉ xuất hiện như dấu câu chức năng. Toàn bộ hệ thống thị giác thu gọn lại thành một thanh tìm kiếm làm hero — mọi control xung quanh (sidebar, top nav, model selector, voice button) đều là vệ tinh phụ thuộc. Mật độ gọn nhưng không chật: 8px là gap chủ lực, 12–16px là padding tiêu chuẩn, với 9999px pill rounding trên tất cả interactive controls. Hầu như không có elevation — thiết kế cố tình flat, dùng border 1px gần như vô hình ở #d1d1cd và một shadow cực nhẹ để tách card layer khỏi canvas. Typography là custom (pplxSans) với đúng hai weight (400, 500) và ba kích thước (12, 14, 16) — scale được thu hẹp có chủ đích, khiến giao diện giống một tài liệu hơn là một dashboard."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Aged Paper | `#faf8f5` | `--color-aged-paper` | Canvas trang và bề mặt card — off-white ấm thay thế pure white vô trùng, tạo chất liệu giấy cho giao diện |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Text chính, icon strokes, và fill chủ đạo trên navigation và body copy |"
    info: "| Charcoal | `#27251e` | `--color-charcoal` | Nền action button chính và text emphasis cao — near-black ấm kết hợp với cream canvas tạo độ tương phản mềm hơn pure-black |"
    info: "| Ash Gray | `#72706b` | `--color-ash-gray` | Text phụ, icon muted, và nav fill không hoạt động — mang tông ấm của bảng màu |"
    info: "| Stone | `#92918b` | `--color-stone` | Text cấp ba/placeholder và label emphasis thấp |"
    info: "| Pebble | `#d1d1cd` | `--color-pebble` | Hairline borders trên card và input container — warm gray lùi về sau trên cream canvas |"
    info: "| Deep Teal | `#016a71` | `--color-deep-teal` | Điểm nhấn màu duy nhất — active nav indicator và selected state fill, cung cấp dấu câu màu sắc duy nhất trong giao diện |"

  tokens___typography:

    pplxsans___tất_cả_text_giao_diện___scale_cố_tình_hẹp_3_kích_thước__2_weight_khiến_hệ_thống_mang_cảm_giác_tài_liệu__weight_400_xử_lý_body__label_và_input_text__weight_500_dành_riêng_cho_active_selected_states_và_emphasis__custom_typeface_mang_phong_cách_geometric_và_humanist__chặt_chẽ_và_khác_biệt_hơn_system_sans_như_inter__normal_letter_spacing_xuyên_suốt_____font_pplxsans:
      - "**Thay thế:** Inter (system fallback) — gần nhất về tỷ lệ geometric; hoặc DM Sans cho độ ấm tương tự"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 12px, 14px, 16px"
      - "**Line height:** 1.25, 1.33, 1.43, 1.50, 2.00"
      - "**Vai trò:** Tất cả text giao diện — scale cố tình hẹp (3 kích thước, 2 weight) khiến hệ thống mang cảm giác tài liệu. Weight 400 xử lý body, label và input text; weight 500 dành riêng cho active/selected states và emphasis. Custom typeface mang phong cách geometric và humanist, chặt chẽ và khác biệt hơn system sans như Inter. Normal letter-spacing xuyên suốt."

    type_scale:

      info: "| Vai trò | Kích thước | 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: "| Tên | Giá trị | 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 | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 9999px |"
      info: "| cards | 16px |"
      info: "| input | 12px |"
      info: "| buttons | 9999px |"
      info: "| nav-items | 9999px |"

    shadows:

      info: "| Tên | Giá trị | 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:
      vai_trò: "Ô nhập liệu trung tâm — bề mặt action chính của sản phẩm"

      info: "Full-width trong container max-width 640px. Nền trắng (#ffffff) với border 1px #d1d1cd, border-radius 12px. Placeholder text 16px pplxSans weight 400 màu #92918b. Padding dọc 16px. Chứa icon '+' inline, mode toggle chip 'Computer', dropdown 'Model', icon microphone, và nút submit tối (#27251, radius 9999px, icon mũi tên lên màu trắng)."

    primary_submit_button:
      vai_trò: "Nút gửi tìm kiếm — nút tối filled duy nhất trong giao diện"

      info: "Hình tròn 28×28px, nền #27251, radius 9999px, icon mũi tên lên màu trắng (#ffffff) kích thước 14px. Nằm inline ở cạnh phải của search input."

    sidebar_nav_item:
      vai_trò: "Liên kết navigation rail trái"

      info: "Chiều cao 36px, padding ngang 8px, radius 9999px. pplxSans 14px weight 400 màu #27251e. Active state: nền fill #e8e6e1. Icon dẫn đầu 16px màu #27251e. Full-width trong sidebar 220px."

    top_nav_link:
      vai_trò: "Liên kết danh mục ngang trong header"

      info: "Inline 14px pplxSans weight 400 màu #27251e. Không có nền mặc định. Active/category indicator dùng teal fill #016a71 làm underline hoặc pill background."

    mode_toggle_chip:
      vai_trò: "Bộ chọn khả năng inline trong search input"

      info: "Pill nhỏ gọn với radius 6px, padding 4px 8px, nền #faf8f5, label 12px pplxSans weight 500 màu #27251, kèm icon nhỏ phía trước và dấu '+' phía sau để thêm mode."

    status_card:
      vai_trò: "Thông báo trạng thái hệ thống/kết nối bên dưới thanh tìm kiếm"

      info: "Full-width 640px, nền #ffffff, radius 16px, border 1px #d1d1cd, padding 12px. Label 14px pplxSans weight 500 màu #27251 với icon trạng thái nhỏ. Chứa 3-4 khối skeleton placeholder (rounded 9999px, fill #f0eeea) biểu thị trạng thái loading."

    skeleton_placeholder:
      vai_trò: "Trạng thái loading cho content cards"

      info: "Thanh rounded 9999px, chiều cao 8px, fill #f0eeea, có hiệu ứng shimmer nhẹ. Sắp xếp thành hàng với gap 8px."

    sign_in_button:
      vai_trò: "Lối vào xác thực ở cuối sidebar"

      info: "Chiều cao 28px, padding 8px 12px, radius 9999px, pplxSans 14px weight 500 màu #27251e. Avatar/icon hình tròn phía trước."

    model_selector:
      vai_trò: "Dropdown trigger để chọn AI model"

      info: "Nút text inline, 14px pplxSans weight 400 màu #27251, icon chevron-down ở cuối kích thước 12px. Không border hoặc background."

  do_s_and_don_ts:

    do:
      - "Dùng border-radius 9999px cho tất cả interactive controls (buttons, nav items, toggle chips, tags)"
      - "Duy trì narrow type scale: 12px caption, 14px body-sm, 16px body — không thêm kích thước ngoài bộ này"
      - "Đặt tất cả card và input backgrounds thành #ffffff trên canvas #faf8f5 để tạo hiệu ứng phân lớp paper-on-paper"
      - "Dùng border 1px #d1d1cd cho mọi phân cách container — tránh shadow ngoại trừ một card shadow cực nhẹ"
      - "Dùng teal #016a71 chỉ cho active/selected state indicators — nó chỉ nên xuất hiện trên dưới 5% element"
      - "Giữ cột nội dung chính ở max-width 640px căn giữa — thanh tìm kiếm là tiêu điểm, không phải canvas rộng"
      - "Dùng pplxSans weight 500 riêng cho emphasis và active states; weight 400 cho tất cả default và body text"

    don_t:
      - "Không thêm màu mới — bảng màu cố tình tối giản: cream, đen, warm grays, và một teal"
      - "Không dùng bold weights (600+) — hệ thống tối đa ở weight 500"
      - "Không dùng border-radius 0px hoặc 4px trên interactive elements — luôn pill (9999px) hoặc tối thiểu 12px"
      - "Không áp shadow nặng hoặc nhiều lớp shadow — thiết kế cố tình flat"
      - "Không dùng pure white (#ffffff) làm nền trang — canvas ấm #faf8f5 là lựa chọn đặc trưng"
      - "Không căn giữa body text — left-align tất cả labels, descriptions và input text"
      - "Không dùng teal accent trang trí — nó báo hiệu trạng thái chức năng (active, selected, live)"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Canvas | `#faf8f5` | Nền trang — off-white ấm mang cảm giác giấy hoặc cream cũ |"
    info: "| 1 | Card | `#ffffff` | Bề mặt container nâng cao — input fields, status cards, content blocks |"
    info: "| 2 | Subtle Fill | `#e8e6e1` | Nền active nav item, hover states — warm gray gần như vô hình |"

  elevation:

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

  imagery:

    info: "Không có photography, illustration hoặc decorative graphics. Ngôn ngữ thị giác là pure UI — typography, whitespace và một teal accent duy nhất làm tất cả công việc. Icons là minimal line-style kích thước 16-20px, hiển thị bằng #27251 hoặc #72706b. Brand wordmark 'perplexity' là element nhận diện typographic duy nhất. Không có product screenshots, hero images hoặc marketing visuals trên giao diện tìm kiếm chính."

  layout:

    info: "Cột đơn căn giữa ở max-width 640px. Left sidebar (220px) chứa primary navigation (New, Computer, Spaces, Customize, History) với nút Sign In ghim ở cuối. Top header bar (56px) chứa các liên kết danh mục ngang (Discover, Finance, Health, Academic, Patents) căn phải. Khu vực nội dung chính bị chi phối bởi wordmark 'perplexity' căn giữa và search input — hero thực sự là một thanh tìm kiếm, không phải hình ảnh. Bên dưới search, một status card và skeleton placeholders mở rộng cột. Layout cố tình tối giản: không có multi-column grids, không hero imagery, không card carousels trên màn hình chính. Navigation là compact sidebar + thin top bar. Nhịp điệu section được xác định bởi khoảng trống dọc rộng rãi (32px+) thay vì 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: không có màu CTA riêng biệt"

  example_component_prompts:

    - "**Search Input with Submit**: Tạo thanh tìm kiếm rộng 640px trên canvas #faf8f5. Input: nền trắng (#ffffff), border 1px #d1d1cd, radius 12px, padding 16px. Placeholder 'Ask anything…' bằng 16px pplxSans weight 400, #92918b. Bên trong: icon '+' (#27251e), mode chip ('Computer') với nền #faf8f5, radius 6px, 12px pplxSans weight 500, và nút submit tối hình tròn (28px, fill #27251e, radius 9999px, icon mũi tên trắng)."

    - "**Sidebar Nav Item**: Cao 36px, padding ngang 8px, radius 9999px. 14px pplxSans weight 400, text #27251e. Icon dẫn đầu 16px màu #27251e. Active state: nền fill #e8e6e1. Full width trong left sidebar 220px với nền #faf8f5."

    - "**Status Notification Card**: Rộng 640px, nền trắng (#ffffff), radius 16px, border 1px #d1d1cd, padding 12px, shadow nhẹ (rgba(0,0,0,0.08) 0px 1px 2px). Label 14px pplxSans weight 500 màu #27251e với icon trạng thái 12px. Bên dưới: 3-4 skeleton bars (radius 9999px, fill #f0eeea, cao 8px) với gap 8px."

    - "**Teal Active Nav Indicator**: Text ngang 14px pplxSans weight 500 màu #27251e với thanh underline teal #016a71 (cao 2px, rộng 8px) hoặc nền pill teal. Đây là nơi duy nhất teal nên xuất hiện trong giao diện."

    - "**Top Header Category Link**: Inline 14px pplxSans weight 400, #27251e, không nền. Spacing: gap 16px giữa các link, căn phải trong header bar cao 56px trên nền #faf8f5."

  similar_brands:

    - "**Notion AI** — Cùng canvas off-white ấm, hệ thống text đơn sắc và cách tiếp cận single accent color — cả hai đều mang cảm giác tài liệu hơn là dashboard"
    - "**Phind** — Giao diện tìm kiếm tập trung vào developer với centered input hero, chrome tối giản và bảng màu teal/tối hai tông"
    - "**You.com** — Giao diện AI ưu tiên tìm kiếm với compact sidebar nav, centered query input làm page hero và restrained accent usage"
    - "**Linear** — Cùng triết lý flat elevation, hairline borders thay vì shadows, narrow type scale và 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;
        }