# Quo (formerly OpenPhone)

> # Quo (trước đây là OpenPhone) — Style Reference

## Prompt Content

```
# Quo (formerly OpenPhone) — Style Reference
> highlighter trên giấy báo — một nét vẽ chartreuse duy nhất trên nền layout editorial đen trắng tương phản mạnh.

**Theme:** light

Quo vận hành trên một hệ thống gần như đơn sắc triệt để — canvas trắng và trắng ngà, mực đen, viền siêu mảnh (hairline), gần như không có độ nâng (elevation) — với một điểm nhấn chartreuse duy nhất hoạt động như highlighter, chứ không phải vật trang trí. Headline có tỉ lệ editorial (Roobert lên đến 88px, tracking chặt -0.02em) trong khi UI vẫn gọn gàng với Inter, tạo ra nhịp điệu báo-in-gặp-app: display type lớn, tự tin bên trên các bề mặt chức năng dày đặc. Các component phẳng và hình chữ nhật với góc 10px; chiều sâu được thể hiện qua product screenshots và một soft shadow thay vì xếp chồng. Màu chartreuse (#edfc47) không bao giờ lấp đầy một button — nó làm nổi bật từ ngữ bên trong headline, tô icon, và thu hút ánh nhìn vào điểm nhấn, khiến cho primary action (một button đen đặc) trở thành mặc định thay vì một ngoại lệ sặc sỡ.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Newsprint | `#f7f6f5` | `--color-newsprint` | Canvas trang và nền xung quanh — nền trắng ngà ấm áp làm dịu đi chữ đen tương phản mạnh |
| Paper | `#ffffff` | `--color-paper` | Bề mặt card, khung product screenshot, nền nav — lớp nâng cao, sạch sẽ phía trên canvas |
| Press Black | `#000000` | `--color-press-black` | Action fill tương phản cao cho primary button trên bề mặt sáng. |
| Midnight | `#0a0a0c` | `--color-midnight` | Nền announcement bar và dark band — gần như đen cho dải quảng cáo mỏng phía trên |
| Graphite | `#4d4d4d` | `--color-graphite` | Body text và secondary heading — dễ đọc nhưng lùi lại so với Press Black để tạo hierarchy |
| Ash | `#808080` | `--color-ash` | Helper text mờ, icon strokes, metadata thứ ba |
| Silver | `#cccccc` | `--color-silver` | Viền hairline, divider, cạnh UI không hoạt động — màu viền duy nhất trong hệ thống |
| Highlighter | `#edfc47` | `--color-highlighter` | Điểm nhấn cho từ ngữ bên trong headline, icon fills, tag highlights — chartreuse không bao giờ lấp đầy button, chỉ đánh dấu những gì quan trọng |

## Tokens — Typography

### Roobert — Toàn bộ display và heading copy — geometric sans với tracking chặt cho phép headline đọc như các khối editorial. Weight 500 (không phải 700) giữ cho kích thước lớn không bị giống poster; sự tiết chế chính là điểm mấu chốt. · `--font-roobert`
- **Thay thế:** DM Sans, General Sans, hoặc Manrope ở weight tương ứng
- **Weights:** 500
- **Sizes:** 20px, 24px, 40px, 48px, 56px, 64px, 88px
- **Line height:** 0.90–1.20
- **Letter spacing:** -0.02em ở 48–88px, -0.01em ở 20–24px
- **OpenType features:** `"ss01" on, "ss02" on`
- **Vai trò:** Toàn bộ display và heading copy — geometric sans với tracking chặt cho phép headline đọc như các khối editorial. Weight 500 (không phải 700) giữ cho kích thước lớn không bị giống poster; sự tiết chế chính là điểm mấu chốt.

### Inter — Body, nav, buttons, badges, labels, icons — UI face chủ lực. 400 cho body, 500 cho nav và labels, 600 cho button text và UI được nhấn mạnh. · `--font-inter`
- **Thay thế:** Inter (đã miễn phí qua Google Fonts)
- **Weights:** 400, 500, 600
- **Sizes:** 12px, 14px, 16px, 18px, 20px
- **Line height:** 1.20–1.50
- **Vai trò:** Body, nav, buttons, badges, labels, icons — UI face chủ lực. 400 cho body, 500 cho nav và labels, 600 cho button text và UI được nhấn mạnh.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| small | 12px | 1.3 | — | `--text-small` |
| caption | 14px | 1.5 | — | `--text-caption` |
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| body | 18px | 1.5 | — | `--text-body` |
| body-lg | 20px | 1.3 | -0.2px | `--text-body-lg` |
| subheading | 24px | 1.2 | -0.24px | `--text-subheading` |
| heading-sm | 48px | 1.1 | -0.96px | `--text-heading-sm` |
| heading | 56px | 1.1 | -1.12px | `--text-heading` |
| heading-lg | 64px | 1.05 | -1.28px | `--text-heading-lg` |
| display | 88px | 1 | -1.76px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 100 | 100px | `--spacing-100` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 6px |
| cards | 10px |
| pills | 100px |
| inputs | 10px |
| buttons | 10px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| lg | `rgba(0, 0, 0, 0.1) 0px 11px 17px -10px` | `--shadow-lg` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64-80px
- **Card padding:** 24-32px
- **Element gap:** 16px

## Components

### Primary Filled Button
**Vai trò:** Main conversion action (Try for free, Get started)

Nền đen (#000000), chữ trắng Inter 600 ở 16px, radius 10px, padding dọc 12px / ngang 20px, không viền. Button filled không màu sắc duy nhất trong hệ thống — khi cần click vào thứ gì đó, nó sẽ là màu đen.

### Ghost Button
**Vai trò:** Secondary action (See how it works, Talk to Sales)

Nền trong suốt, chữ Press Black Inter 500 ở 16px, radius 10px, padding 12px/20px, không viền nhìn thấy được. Nằm cạnh primary button với một glyph play hoặc mũi tên nhỏ để báo hiệu nó mở demo.

### Nav Login Link
**Vai trò:** Tertiary nav action

Chữ Inter 500 thường ở Press Black 14px, không nền, không viền, radius 6px nếu nó bọc một pill. Nằm gọn trong hàng nav.

### Announcement Bar
**Vai trò:** Dải quảng cáo đầu trang

Thanh full-bleed Midnight (#0a0a0c), chữ trắng Inter 500 ở 14px, một emoji/icon chartreuse nhỏ, và nút đóng (×) bên phải màu trắng. Nằm phía trên nav chính như một dải riêng biệt.

### Top Navigation Bar
**Vai trò:** Primary site navigation

Nền Paper (#ffffff), radius 6px trên bất kỳ phần tử có viền nào, nav links Inter 500 ở Press Black 14px với chevron dropdown, wordmark Quo bên trái, login + Talk to Sales + Try for free bên phải. Không có viền dưới nhìn thấy được, nổi trên canvas.

### Hero Section
**Vai trò:** Value proposition phía trên fold

Canh giữa trên canvas Newsprint. Trust line (★ 4.7 stars, số lượng đánh giá) Inter 500 ở 14px. Headline Roobert 500 ở 88px với tracking -1.76px, Press Black, với một hoặc hai từ được bọc trong một hình chữ nhật highlighter chartreuse (#edfc47) để nhấn mạnh. Subtext Graphite Inter 400 ở 18px. Cặp primary + ghost button canh giữa bên dưới. Platform availability line Ash Inter 400 ở 14px.

### Product Screenshot Frame
**Vai trò:** Xem trước app hiển thị bên dưới hero

Bề mặt Paper (#ffffff) với radius 10px, soft shadow duy nhất (rgba(0,0,0,0.1) 0px 11px 17px -10px), và toàn bộ UI app được render bên trong. Đóng vai trò là bằng chứng trực quan — 'hình ảnh' duy nhất mà hầu hết các section cần.

### Feature Card (3-Column Grid)
**Vai trò:** Tile khả năng sản phẩm

Card Paper (#ffffff) trên canvas Newsprint, radius 10px, không shadow, không viền, padding trong 24-32px. Headline Roobert 500 ở 24px (tracking -0.24px), Press Black. Một minh họa UI nhỏ hoặc crop sản phẩm lấp đầy nửa dưới. Các card căn chỉnh trong grid 3 cột với khoảng cách 16px.

### Tab/Pill Nav
**Vai trò:** Bộ chuyển đổi tính năng trong section

Ba tab hình pill (radius 100px) trong một hàng: tab đầu tiên là Paper đặc với viền Silver nhạt và chữ Press Black, các tab khác là ghost với chữ Ash. Padding dọc 8px / ngang 16px, Inter 500 ở 14px.

### Chat Bubble — Sent
**Vai trò:** Element UI tin nhắn trong app

Nền xanh dương đặc (dải #007bff) với chữ trắng Inter 400 ở 14px, radius 10px ở tất cả các góc, padding 12px. Xuất hiện bên trong product screenshots để demo inbox.

### Chat Bubble — Received
**Vai trò:** Element UI tin nhắn trong app

Nền xám nhạt (dải #f0f0f0) với chữ Press Black, radius 10px, padding 12px. Kết hợp với sent bubble để hiển thị cuộc trò chuyện.

### Logo Bar
**Vai trò:** Social proof / logo khách hàng

Một hàng logo khách hàng duy nhất màu Ash (#808080) hoặc Graphite, cách đều nhau, canh giữa trên dải Paper hoặc Newsprint. Logo là đơn sắc — không có màu thương hiệu nào lọt vào hệ thống.

### Phone Number Row
**Vai trò:** Trust/feature list item bên trong card

Mỗi hàng kết hợp một icon cờ nhỏ, số điện thoại Press Black Inter 500 ở 16px, và nhãn vùng Ash Inter 400 ở 14px. Các hàng được phân cách bởi viền hairline Silver, padding dọc 12-16px.

### Stat Card
**Vai trò:** Tile metric được làm nổi bật

Nền Paper, radius 10px, số lớn Roobert 500 ở 48px Press Black, label Ash Inter 400 ở 14px bên dưới. Không viền, không shadow.

### Footer Link Column
**Vai trò:** Site footer navigation

Tiêu đề cột Inter 600 Press Black ở 14px, danh sách link Inter 400 Graphite ở 14px với khoảng cách hàng 8px. Không bullet, không gạch chân cho đến khi hover.

## Do's and Don'ts

### Do
- Chỉ sử dụng #edfc47 chartreuse như một nét nhấn mạnh — một hình chữ nhật highlight phía sau một từ trong headline, một icon fill, một tag — không bao giờ dùng làm nền button hoặc bề mặt lớn
- Đặt headline ở Roobert 500 với kích thước 48-88px và tracking -0.02em; chữ thường hình học (geometric lowercase) và tracking chặt là yếu tố làm nên tỉ lệ editorial
- Sử dụng button đặc #000000 làm primary action duy nhất; hệ thống chỉ có đúng một màu fill cho button
- Chỉ dùng soft shadow duy nhất (rgba(0,0,0,0.1) 0px 11px 17px -10px) trên product screenshot frames; mọi thứ khác giữ phẳng với viền hairline Silver hoặc không viền
- Phân tách hệ thống type theo vai trò: Roobert 500 cho tất cả heading từ 20px trở lên, Inter cho mọi thứ ở 18px trở xuống — không bao giờ trộn chúng ở cùng một kích thước
- Giữ canvas ở #f7f6f5 Newsprint cho nền toàn trang và sử dụng #ffffff Paper cho cards, nav, và product frames để xây dựng ngăn xếp hai bề mặt
- Sử dụng radius 10px cho cards và buttons, 6px cho nav, 100px cho pills — ba radius này mang toàn bộ ngôn ngữ hình khối

### Don't
- Không tô button bằng chartreuse — điểm nhấn dành cho sự nhấn mạnh, không phải hành động
- Không sử dụng nhiều màu sắc cho button; hệ thống là đơn sắc với một điểm nhấn, vì vậy một button màu sắc sẽ phá vỡ hợp đồng thị giác
- Không thêm gradient màu, drop shadows, hoặc hiệu ứng glow lên bề mặt UI — thiết kế cố tình phẳng
- Không đặt body copy bằng Roobert; nó là display face và mất khả năng đọc dưới 24px
- Không sử dụng letter-spacing lỏng hơn -0.01em trên heading — tracking chặt là một phần của cảm giác editorial
- Không giới thiệu màu nhấn thứ hai; ngay cả các bổ sung xanh dương/xanh lá nhẹ cũng cạnh tranh với chartreuse và làm loãng hệ thống
- Không xếp chồng elevation: không card-trên-card, không modal với shadow nặng, không hover-lift transforms — thay vào đó, sử dụng tương phản màu sắc và viền hairline
- Không đặt display headline dưới 40px; weight Roobert 500 cần tỉ lệ để được ghi nhận là editorial

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 1 | Newsprint | `#f7f6f5` | Canvas trang |
| 2 | Paper | `#ffffff` | Cards, nav, product frames |
| 3 | Press Black | `#000000` | Filled buttons, dark CTAs |
| 4 | Midnight | `#0a0a0c` | Announcement bar, dark promo strips |

## Elevation

- **Product screenshot card:** `rgba(0, 0, 0, 0.1) 0px 11px 17px -10px`

## Imagery

Hình ảnh chủ yếu là product screenshots — UI app Quo thực tế được render bên trong khung Paper với một soft shadow. Không có lifestyle photography, không stock imagery, không đồ họa trừu tượng. Yếu tố minh họa duy nhất là hình chữ nhật highlighter chartreuse đặt phía trên các từ trong headline, vừa đóng vai trò trang trí vừa là điểm nhấn. Icon trong toàn bộ UI là line-style glyphs đơn giản màu Press Black hoặc Ash, không bao giờ nhiều màu. Product screenshots làm phần việc nặng nhọc là cho thấy sản phẩm làm gì, trong khi editorial type và highlighter accents làm phần việc thương hiệu.

## Layout

Mô hình trang canh giữa, max-width 1200px trên canvas Newsprint (#f7f6f5). Hero là một ngăn xếp canh giữa: trust line, headline 88px, subtext, hàng button kép, platform line, sau đó là product screenshot frame toàn chiều rộng bên dưới. Bên dưới hero, trang chuyển sang grid feature card 3 cột với khoảng cách 16px và khoảng trống dọc rộng rãi (64-80px giữa các section). Feature card headlines nằm ở góc trên bên trái trong mỗi tile, với crop sản phẩm hoặc minh họa UI lấp đầy nửa dưới. Một logo bar trong một hàng duy nhất phá vỡ nhịp điệu section. Navigation là một top bar sạch sẽ không có sticky shadow — nó nổi trên canvas. Nhịp điệu tổng thể xen kẽ giữa các khối editorial canh giữa và grid 3 cột có cấu trúc, không bao giờ là layout chia đôi text+image.

## Agent Prompt Guide

**Quick Color Reference**
- Text: #000000 (Press Black)
- Background: #f7f6f5 (Newsprint canvas), #ffffff (Paper cards)
- Border: #cccccc (Silver hairlines)
- Accent: #edfc47 (Highlighter — chỉ để nhấn mạnh)
- Body text: #4d4d4d (Graphite)
- Muted text: #808080 (Ash)
- primary action: #000000 (filled action)

**3-5 Ví Dụ Component Prompts**

1. Tạo một Primary Action Button: nền #000000, chữ #ffffff, radius 9999px, padding pill gọn. Sử dụng filled treatment này cho CTA chính.

2. *Tạo một hàng feature card 3 cột:* Ba card Paper (#ffffff) trên canvas Newsprint, radius 10px, không shadow, padding trong 24px, khoảng cách 16px giữa các card. Mỗi card có headline Roobert 500 ở 24px (tracking -0.24px) màu #000000, mô tả Inter 400 ở 16px màu #4d4d4d bên dưới, và crop UI sản phẩm lấp đầy 60% dưới của card. Các card headline căn trái, không canh giữa.

3. *Tạo một top navigation bar:* Nền Paper (#ffffff), toàn chiều rộng, cao 64px. Bên trái: wordmark Quo Roobert 500 ở 20px #000000. Giữa: nav links Inter 500 ở 14px #000000 với chevron dropdown nhỏ. Bên phải: 'Log in' dạng chữ Inter 500 #000000 thường, 'Talk to Sales' dạng ghost button (trong suốt, chữ #000000, radius 6px), 'Try for free' dạng button đặc #000000 với chữ trắng Inter 600, radius 10px. Không viền dưới.

4. *Tạo một announcement bar:* Dải full-bleed Midnight (#0a0a0c), cao 40px, chữ trắng canh giữa Inter 500 ở 14px hiển thị 'New: Quo's Claude connector →' với một icon chartreuse #edfc47 nhỏ bên trái và nút đóng × màu trắng bên phải.

5. *Tạo một logo bar:* Một hàng ngang duy nhất gồm 8-10 logo khách hàng màu #808080 Ash, cách đều nhau và canh giữa, trên dải Paper (#ffffff) với padding dọc 48px. Logo là đơn sắc — không có màu thương hiệu gốc nào tồn tại. Section heading phía trên Inter 500 ở 14px Ash: 'Powering conversations for 90,000+ businesses'.

## Similar Brands

- **Linear** — Cùng bảng màu gần như đơn sắc với một màu nhấn sống động duy nhất, bề mặt phẳng, và headline tỉ lệ editorial ưu tiên type hơn chrome
- **Mercury** — Cùng thẩm mỹ fintech đen-trên-trắng-ấm tiết chế với Inter UI type và giọng điệu trầm lặng, tự tin
- **Vercel** — Cùng chủ nghĩa tối giản đen/trắng với hierarchy typographic chính xác và chiến lược trực quan product-screenshot-as-hero
- **Notion** — Cùng marketing driven-by-product-UI-screenshot nơi app tự nó là tài sản trực quan chính thay vì photography dàn dựng
- **Stripe** — Cùng xử lý editorial display type và sự tự tin để một headline một câu duy nhất mang cả hero section

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-newsprint: #f7f6f5;
  --color-paper: #ffffff;
  --color-press-black: #000000;
  --color-midnight: #0a0a0c;
  --color-graphite: #4d4d4d;
  --color-ash: #808080;
  --color-silver: #cccccc;
  --color-highlighter: #edfc47;

  /* Typography — Font Families */
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-small: 12px;
  --leading-small: 1.3;
  --text-caption: 14px;
  --leading-caption: 1.5;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.3;
  --tracking-body-lg: -0.2px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.96px;
  --text-heading: 56px;
  --leading-heading: 1.1;
  --tracking-heading: -1.12px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -1.28px;
  --text-display: 88px;
  --leading-display: 1;
  --tracking-display: -1.76px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-100: 100px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64-80px;
  --card-padding: 24-32px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-nav: 6px;
  --radius-cards: 10px;
  --radius-pills: 100px;
  --radius-inputs: 10px;
  --radius-buttons: 10px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 11px 17px -10px;

  /* Surfaces */
  --surface-newsprint: #f7f6f5;
  --surface-paper: #ffffff;
  --surface-press-black: #000000;
  --surface-midnight: #0a0a0c;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-newsprint: #f7f6f5;
  --color-paper: #ffffff;
  --color-press-black: #000000;
  --color-midnight: #0a0a0c;
  --color-graphite: #4d4d4d;
  --color-ash: #808080;
  --color-silver: #cccccc;
  --color-highlighter: #edfc47;

  /* Typography */
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-small: 12px;
  --leading-small: 1.3;
  --text-caption: 14px;
  --leading-caption: 1.5;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.3;
  --tracking-body-lg: -0.2px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.96px;
  --text-heading: 56px;
  --leading-heading: 1.1;
  --tracking-heading: -1.12px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -1.28px;
  --text-display: 88px;
  --leading-display: 1;
  --tracking-display: -1.76px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-100: 100px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 11px 17px -10px;
}
```