# Perplexity AI

> Perplexity AI — Style Reference

## Prompt Content

```
# Perplexity AI — Style Reference
> 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

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

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| 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 |
| Ink Black | `#000000` | `--color-ink-black` | Text chính, icon strokes, và fill chủ đạo trên navigation và body copy |
| 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 |
| 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 |
| Stone | `#92918b` | `--color-stone` | Text cấp ba/placeholder và label emphasis thấp |
| Pebble | `#d1d1cd` | `--color-pebble` | Hairline borders trên card và input container — warm gray lùi về sau trên cream canvas |
| 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

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

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 32 | 32px | `--spacing-32` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 16px |
| input | 12px |
| buttons | 9999px |
| nav-items | 9999px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| 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

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

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

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

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

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

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

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

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

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

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Canvas | `#faf8f5` | Nền trang — off-white ấm mang cảm giác giấy hoặc cream cũ |
| 1 | Card | `#ffffff` | Bề mặt container nâng cao — input fields, status cards, content blocks |
| 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

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

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

1. **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).

2. **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.

3. **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.

4. **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.

5. **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;
}
```