perplexity_ai___style_reference:
  info: "> Thư viện giấy ấm lúc bình minh — một trang sách mở giữa những dụng cụ yên tĩnh, được vẽ bằng than chì trên nền kem."

  theme: "light"

  info: "Giao diện Perplexity mang phong cách sổ tay học thuật được render trong trình duyệt — một canvas kem ấm (#faf8f5) tránh được màu trắng vô trùng, kết hợp với text than chì đậm (#27251e) phảng phất hơi ấm nâu. Toàn bộ hệ thống gần như hoàn toàn achromatic: không có brand color, không accent hue, không gradient. Bản sắc đến từ sự kiềm chế: một custom sans-serif (pplxSans) dùng ở 12–16px, pill controls với border-radius 9999px, viền mảnh như sợi tóc, và gần như không có elevation. Layout là fixed two-pane shell — một navigation rail trái 260px và một main column căn giữa — tạo cảm giác giống công cụ nghiên cứu hơn là sản phẩm tiêu dùng. Mọi interactive element đều đơn sắc và hình học; ngôn ngữ shape duy nhất là pill cho button/tag và góc 12–16px cho surface."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Ink | `#27251e` | `--color-ink` | Primary text, sidebar surface, active nav background, submitted query fills — than chì đậm với hơi ấm nâu, neo giữ canvas kem |"
    info: "| Cream | `#faf8f5` | `--color-cream` | Page canvas, sidebar background, input fields, card surfaces — off-white ấm thay thế cho trắng tinh khiết vô trùng, mang chất giấy mềm mại |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Dark supporting neutral cho text, icon, và độ tương phản mạnh. Không dùng làm primary CTA color |"
    info: "| Smoke | `#72706b` | `--color-smoke` | Secondary text, inactive nav labels, icon strokes, helper text — xám ấm lùi về sau mà không biến mất |"
    info: "| Ash | `#92918b` | `--color-ash` | Tertiary text, placeholders, disabled states, subtle metadata — neutral nhẹ nhất có thể đọc được cho nội dung giảm chú ý |"

  tokens___typography:

    pplxsans___universal_ui_typeface___dùng_cho_nav_labels__body_text__input_text__button_text__và_headings__custom_sans_serif_của_perplexity__toàn_bộ_giao_diện_nói_bằng_một_giọng_duy_nhất_ở_12_16px__weight_400_cho_body_và_nav__weight_500_cho_active_selected_states_và_label_được_nhấn_nhẹ__không_có_display_weight___ngay_cả_wordmark__perplexity__cũng_dùng_cùng_một_family__không_phải_headline_cut_riêng_____font_pplxsans:
      - "**Thay thế:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 12px, 14px, 16px"
      - "**Line height:** 1.33 (12px), 1.43 (14px), 1.50 (16px), 2.00 (14px loose)"
      - "**Vai trò:** Universal UI typeface — dùng cho nav labels, body text, input text, button text, và headings. Custom sans-serif của Perplexity; toàn bộ giao diện nói bằng một giọng duy nhất ở 12–16px. Weight 400 cho body và nav, weight 500 cho active/selected states và label được nhấn nhẹ. Không có display weight — ngay cả wordmark 'perplexity' cũng dùng cùng một family, không phải headline cut riêng."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      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 | 12px |"
      info: "| inputs | 16px |"
      info: "| buttons | 9999px |"
      info: "| navItems | 8px |"

    layout:

      - "**Page max-width:** 768px"
      - "**Section gap:** 32px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    sidebar_navigation:
      vai_trò: "Fixed left rail — primary navigation container"

      info: "Sidebar fixed rộng 260px, nền #faf8f5, không có border ở cạnh phải (phân cách bằng vị trí). Chứa: search field ở trên cùng, nav items xếp dọc với gap 8px, sau đó là heading 'History' và danh sách thread. Tổng thể nội dung compact và căn trái với padding ngang 16px."

    sidebar_search:
      vai_trò: "Tìm kiếm thread nhanh trong sidebar"

      info: "Input full-width trong sidebar, nền #faf8f5, border-radius 8px, padding dọc 8px, placeholder 'Search' màu #92918b ở 14px. Không border hoặc hairline border. Search icon prefix màu #72706b."

    nav_item_default:
      vai_trò: "Mục điều hướng trong sidebar — trạng thái không active"

      info: "Icon + label, nền trong suốt, text và icon #27251 ở 14px pplxSans weight 400. Padding dọc 8px / ngang 12px, border-radius 8px. Không có hover state background shift — item luôn phẳng."

    nav_item_active_selected:
      vai_trò: "Mục điều hướng trong sidebar — section hiện tại"

      info: "Cùng kích thước với default nhưng text #27251 chuyển weight lên 500 và có nền #27251 rất nhẹ ở low-opacity hoặc fill hơi tối hơn. Mục 'Computer' trong ảnh chụp màn hình thể hiện điều này — label đậm, không có background fill nặng."

    primary_search_input:
      vai_trò: "Input truy vấn chính trên trang home và thread"

      info: "Căn giữa trong main column, max-width ~768px, border-radius 16px, border 1px màu #e8e6e0 hoặc warm hairline tương tự, nền #faf8f5. Placeholder 'Type @ for connectors and sources' màu #92918b ở 16px. Hỗ trợ multi-line với internal row: bên trái có nút '+' attach và source tag pill 'Computer', bên phải có dropdown 'Model', microphone icon, và nút submit hình tròn 32px màu đen với mũi tên trắng."

    source_tag_pill:
      vai_trò: "Chỉ báo source/focus đã đính kèm bên trong input"

      info: "Hình pill với border-radius 9999px, border 1px màu #d4d2cc, nền trong suốt, label màu #27251 ở 14px kèm icon nhỏ và dấu '+' để thêm. Nằm inline trong input row."

    submit_button_primary_action:
      vai_trò: "Gửi truy vấn — button được fill duy nhất trong hệ thống"

      info: "Hình tròn 32px × 32px, nền #000000, icon mũi tên trắng căn giữa. Border-radius 9999px. Là element chromatic-tối duy nhất trên màn hình — thu hút mắt mà không cần dùng màu sắc."

    model_selector:
      vai_trò: "Bộ chọn AI model bên trong input row"

      ghost_button: "nền trong suốt, label 'Model' + chevron ở 14px pplxSans màu #27251e. Không border. Nằm bên trái nút submit."

    suggested_query_card:
      vai_trò: "Gợi ý truy vấn có sẵn trên màn hình home"

      info: "Hàng card xếp ngang bên dưới search input. Mỗi card: border-radius 12px, nền #faf8f5, border 1px màu #ece9e2, padding 16px, icon + label ở 14px pplxSans #27251e. Hàng tiêu đề hiển thị icon và label 'Try Computer'; vùng phụ đề chứa thanh placeholder text ngắn màu #ece9e2 để gợi ý preview phản hồi."

    sidebar_history_item:
      vai_trò: "Mục thread gần đây trong sidebar"

      info: "Tiêu đề thread được rút gọn ở 14px pplxSans #27251, nền trong suốt, border-radius 8px, padding dọc 8px. Không hiển thị timestamp hay metadata ở trạng thái mặc định. Helper text 'Recent and active threads will appear here.' ở 12px #72706b nằm phía trên danh sách khi trống."

    section_heading_sidebar:
      vai_trò: "Nhãn nhóm trong sidebar"

      info: "Label 'History' ở 14px pplxSans weight 500 #27251, kèm helper text tùy chọn bên dưới ở 12px #72706b. Không gạch chân, không divider — sự thay đổi weight của heading là điểm khác biệt duy nhất."

    wordmark_logo:
      vai_trò: "Nhận diện thương hiệu — căn giữa phía trên main input"

      info: "'perplexity' viết thường ở kích thước display lớn (~48–56px), pplxSans weight 400, #27251e. Không phải typeface riêng — cùng UI font được phóng to, với letter-spacing rộng rãi. Đây là instance duy nhất của hệ thống type vượt quá 16px và nó đóng vai trò hero của trang mà không cần màu sắc hay trang trí."

    expand_toggle__more:
      vai_trò: "Hiển thị thêm mục điều hướng"

      info: "Cùng kích thước với Nav Item nhưng có icon dấu '...' prefix thay vì glyph có tên. Text và icon #27251, padding 8px, radius 8px."

  do_s_and_don_ts:

    do:
      - "Dùng #faf8f5 làm universal canvas — không bao giờ dùng pure white (#ffffff) cho nền trang hoặc card"
      - "Đặt border-radius 9999px cho tất cả button, tag, và small interactive controls; 16px cho main search input; 12px cho suggestion cards; 8px cho sidebar items"
      - "Dùng pplxSans weight 400 cho body và nav, weight 500 chỉ dành riêng cho active/selected states và section headings — không bao giờ dùng weight nặng hơn như 600 hay 700"
      - "Giữ tất cả text trong khoảng #27251 đến #92918b — toàn bộ palette là warm và desaturated, không có chromatic text bao giờ"
      - "Thể hiện primary action qua fill #000000, không phải màu sắc — submit button là element black-on-cream duy nhất và nên giữ là duy nhất trên mỗi view"
      - "Duy trì spacing base 4px — dùng các bước tăng 4, 8, 12, 16, 32px; không bao giờ đưa vào giá trị phá vỡ nhịp điệu"
      - "Phân cách sidebar khỏi main column bằng fixed positioning và width — không bao giờ thêm vertical divider line giữa chúng"

    don_t:
      - "Không đưa vào bất kỳ chromatic color nào — không xanh, lục, đỏ, hay tím cho button, badge, link, hay accent; hệ thống hoàn toàn achromatic"
      - "Không dùng box-shadows trên card, input, button, hay modal — depth chỉ đến từ surface inversion và hairlines"
      - "Không dùng display hay headline typeface riêng biệt với pplxSans — wordmark scale cùng UI font, không phải serif hay display cut"
      - "Không dùng border-radius khác 9999px (pills), 16px (input), 12px (cards), hoặc 8px (nav items) — tránh góc 4px hay 6px"
      - "Không thêm background color cho default nav items — active state là state duy nhất được fill, và nó invert thành #27251"
      - "Không dùng pure white (#ffffff) cho bất kỳ surface nào — nó phá vỡ chất giấy ấm; luôn lệch nhẹ về cream"
      - "Không vượt quá 16px cho body, nav, button, hay input text — giao diện cố tình compact và wordmark là ngoại lệ typographic duy nhất"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Cream Canvas | `#faf8f5` | Page background và main column — nền off-white ấm |"
    info: "| 1 | Sidebar | `#faf8f5` | Left navigation rail — cùng cream ấm với canvas, phân cách bằng vị trí không phải độ tương phản |"
    info: "| 2 | Input Field | `#faf8f5` | Search input và tag pill backgrounds — trên canvas, không thay đổi độ tương phản |"
    info: "| 3 | Active Item | `#27251` | Selected nav item và submitted query fill — invert canvas thành than chì |"

  elevation:

    info: "Hệ thống cố tình tránh box-shadows. Depth được thể hiện qua inversion (bề mặt tối trên nền sáng), border weight (hairline 1px màu xám ấm), và vị trí (fixed sidebar so với scrolling main). Không có drop shadow nào trên card, input, hay button — mọi thứ nằm phẳng trên bề mặt cream như mực trên giấy."

  imagery:

    info: "Giao diện hầu như không dùng imagery. Các yếu tố hình ảnh duy nhất là: wordmark 'perplexity' viết thường (đặt trong UI typeface, không phải logo illustration), monochrome line icons khắp sidebar (16–20px, stroke 1.5px, #27251 hoặc #72706b), và một bộ nhỏ category icons (search magnifier, plus, clock, compass, grid, finance chart, heart, dot-menu). Không có photography, illustration, product screenshots, 3D render, hay decorative graphics. Canvas cream trống CHÍNH LÀ ngôn ngữ hình ảnh — thiết kế giao tiếp qua type, geometry, và negative space, không phải imagery."

  layout:

    fixed_two_pane_shell: "sidebar trái 260px và main column có width linh hoạt. Sidebar có position:fixed bên trái, chứa toàn bộ navigation hierarchy (search, primary nav items, history section, 'More' expand), và giữ nguyên vị trí trong khi main column scroll. Main column căn giữa với content max-width ~768px, tạo khoảng trống margin trái/phải rộng rãi của cream. Home page hero được căn giữa theo chiều dọc: wordmark ở trên, search input bo tròn lớn ở giữa, và hàng 4–5 suggested query cards bên dưới. Không có full-bleed sections, không alternating bands, không multi-column grids trong main area — mọi thứ đọc như một stack căn giữa duy nhất trên một trang. Navigation chỉ dùng sidebar (không top bar, không mega-menu); density compact với gap 8px giữa các nav items và 32px giữa các sidebar groups."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #27251e (primary) / #72706b (secondary) / #92918b (tertiary)"
    - "background: #faf8f5"
    - "border: #ece9e2 hoặc #d4d2cc (hairline 1px)"
    - "accent: không có — hệ thống hoàn toàn achromatic"
    - "primary action: không có distinct CTA color"

    example_component_prompts:
    - "Tạo main search input: căn giữa trong column, max-width 768px, fill #faf8f5, border 1px màu #ece9e2, radius 16px, placeholder 16px pplxSans #92918b 'Type @ for connectors and sources', line-height 16px. Bên trong row: bên trái có nút '+' icon màu #72706b và source pill 'Computer' (radius 9999px, border 1px #d4d2cc, 14px pplxSans #27251e). Bên phải có ghost text 'Model ▾' ở 14px #27251e, microphone icon màu #72706b, và nút submit hình tròn 32px #000000 với icon mũi tên phải màu trắng."
    - "Tạo sidebar nav item: radius 8px, padding dọc 8px / ngang 12px, nền trong suốt, monochrome line icon 16px màu #27251e + label 14px pplxSans weight 400 #27251e, gap 8px giữa icon và text. Khi active: weight chuyển lên 500, không thay đổi background fill."
    - "Tạo suggested query card: radius 12px, nền #faf8f5, border 1px #ece9e2, padding 16px, icon + label 'Try Computer' ở 14px pplxSans #27251e, tiếp theo là 2–3 thanh placeholder xám ngắn (#ece9e2, height 8px, radius 4px) gợi ý response preview."
    - "Tạo wordmark: 'perplexity' căn giữa ở ~48px pplxSans weight 400 #27251e, letter-spacing bình thường, viết thường, không có logo mark riêng — chỉ text là brand."
    - "Tạo history section: heading 'History' ở 14px pplxSans weight 500 #27251e, sau đó helper text 12px #72706b 'Recent and active threads will appear here.', sau đó danh sách thread dọc (radius 8px, padding dọc 8px, text rút gọn 14px pplxSans #27251e, nền trong suốt)."

  geometry_system:

    info: "Toàn bộ radius vocabulary gồm bốn giá trị: 9999px cho pills (button, source tags, bất kỳ element nào bo tròn hoàn toàn), 16px cho main search input, 12px cho content cards, và 8px cho nav items và small surfaces. Thang bốn giá trị nghiêm ngặt này có nghĩa là visual hierarchy được đọc qua kích thước và fill, không qua sự biến đổi radius. Không bao giờ đưa vào giá trị radius thứ năm — kỷ luật lặp lại là điều làm cho hệ thống có cảm giác bình yên."

  achromatic_discipline:

    info: "Không có chromatic colors nào tồn tại trong giao diện. Mọi màu trong palette đều là warm-tinted neutral — #27251e có undertone nâu, #faf8f5 có undertone vàng, các gam xám nghiêng về ấm. Đây là lựa chọn có chủ đích: một sản phẩm trả lời câu hỏi nên có cảm giác như đọc một trang sách được in đẹp, không phải tương tác với một thương hiệu. Nếu cần thu hút sự chú ý, dùng weight (400→500), kích thước, hoặc fill inversion (cream→charcoal) — không bao giờ dùng hue."

  similar_brands:

    - "**Notion AI** — Cùng palette achromatic warm-neutral (cream canvas, charcoal text) và cùng cách tiếp cận single-typeface compact ở kích thước nhỏ"
    - "**Linear** — Cùng two-pane shell với fixed sidebar và centered main column, cùng geometry kiềm chế và gần như không có màu sắc"
    - "**Are.na** — Cùng canvas cream như giấy với charcoal text đậm và hầu như không có decorative imagery — cả hai đều có cảm giác như công cụ nghiên cứu yên tĩnh"
    - "**iA Writer** — Cùng tập trung vào một cream surface duy nhất với custom sans-serif ở kích thước nhỏ và không có chromatic accents"
    - "**Read.cv** — Cùng background off-white ấm và monochrome interface language, cùng pill controls và hairline borders"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #27251e;
          --color-cream: #faf8f5;
          --color-pure-black: #000000;
          --color-smoke: #72706b;
          --color-ash: #92918b;
        
          /* 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.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-32: 32px;
        
          /* Layout */
          --page-max-width: 768px;
          --section-gap: 32px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 12px;
          --radius-inputs: 16px;
          --radius-buttons: 9999px;
          --radius-navitems: 8px;
        
          /* Surfaces */
          --surface-cream-canvas: #faf8f5;
          --surface-sidebar: #faf8f5;
          --surface-input-field: #faf8f5;
          --surface-active-item: #27251;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #27251e;
          --color-cream: #faf8f5;
          --color-pure-black: #000000;
          --color-smoke: #72706b;
          --color-ash: #92918b;
        
          /* 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.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-32: 32px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        }