# Ada

> Ada — Style Reference

## Prompt Content

```
# Ada — Style Reference
> Phòng trưng bày ánh sáng ban ngày với điểm nhấn pastel — một căn phông nền trắng nhạt yên tĩnh, nơi bốn màu sắc quý được phép lên tiếng, và mọi thứ khác đều giữ tông than chì.

**Theme:** light

Ada hoạt động như một phòng trưng bày ánh sáng ban ngày: một canvas trắng nhạt với khoảng thở rộng rãi, một kiểu chữ humanist sans-serif duy nhất đảm nhận toàn bộ giọng nói, và các màu nhấn tông quý chỉ xuất hiện như những dấu chấm câu có chủ đích. Hệ thống thị giác kháng cự lại sự trang trí — không gradient trên button, không drop shadow trên card, không chrome cạnh tranh với nội dung. Thay vào đó, bản sắc đến từ một bảng màu nhỏ gọn, kỷ luật (xanh rừng, xanh periwinkle, hồng kẹo, vàng bơ) được dùng làm thanh nhấn cạnh trái trên stat card và làm pill button đặc. Hệ thống phân cấp được xây dựng qua tương phản kích thước và khoảng trắng, không phải khối lượng màu sắc. Các bề mặt nằm trên nền #f9f9f9 ấm áp với các card #ffffff nổi phía trên. Điểm xác định của hero là một nền ảnh được làm mờ mạnh, tạo cảm giác như nhìn qua kính mờ — nó thêm chiều sâu và độ ấm mà không cạnh tranh với headline trắng mang phong cách editorial typography.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Inkstone | `#0a0b0c` | `--color-inkstone` | Văn bản chính, body copy, heading, đường viền mảnh, bề mặt UI tối — xương sống gần như đen của toàn bộ giao diện, dùng ở tỷ lệ lớn cho đường viền và typography |
| Bone | `#f9f9f9` | `--color-bone` | Canvas trang, nền section, lớp bề mặt tinh tế bên dưới card — một tông trắng nhạt ấm áp làm mềm độ tương phản của giao diện |
| Paper | `#ffffff` | `--color-paper` | Bề mặt card, panel nổi, container chat widget, input — lớp sáng nhất trong stack bề mặt |
| Ash | `#d8d8d8` | `--color-ash` | Fill SVG trang trí, viền input bị vô hiệu hóa, divider trung tính |
| Plum Ash | `#392c38` | `--color-plum-ash` | Viền card tắt tiếng và pha màu bề mặt tối — một tông plum bão hòa thấp xuất hiện trên container thứ cấp |
| Forest Depth | `#00543d` | `--color-forest-depth` | Bản sắc thương hiệu chính, button tối đặc, thanh nhấn tối trên stat card, nền announcement bar — xanh đậm báo hiệu uy quyền và sự tin cậy mà không mang vẻ doanh nghiệp nhàm chán |
| Periwinkle | `#abcbf9` | `--color-periwinkle` | Màu hành động xanh cho button đặc, trạng thái điều hướng được chọn, và các khoảnh khắc chuyển đổi tập trung |
| Candy Pink | `#ffbbfc` | `--color-candy-pink` | Thanh nhấn trên stat card, lớp rửa bề mặt mềm trang trí — màu vui tươi nhất trong bốn màu nhấn, dùng tiết kiệm để thêm độ ấm |
| Butter | `#fce88b` | `--color-butter` | Thanh nhấn trên stat card, dấu câu ấm áp — màu ấm nhất, chỉ xuất hiện trên stat card thứ 4 như một điểm kết thúc nhịp điệu thị giác |

## Tokens — Typography

### Roobert — Kiểu chữ duy nhất trên toàn bộ giao diện — body, heading, button, nav, footer, card, input. Weight luôn giữ ở 400; hệ thống phân cấp được xây dựng hoàn toàn qua kích thước, không qua tương phản đậm/nhạt. Tỷ lệ geometric humanist mang lại chất văn học cho headline trong khi single weight buộc phải kiềm chế. · `--font-roobert`
- **Thay thế:** Inter, DM Sans, hoặc Söhne
- **Weights:** 400
- **Kích thước:** 12, 14, 15, 16, 18, 20, 24, 32, 36, 48, 60, 72
- **Line height:** 1.00–1.56
- **Letter spacing:** normal ở mọi kích thước — tỷ lệ của chính kiểu chữ mang nhịp điệu
- **Vai trò:** Kiểu chữ duy nhất trên toàn bộ giao diện — body, heading, button, nav, footer, card, input. Weight luôn giữ ở 400; hệ thống phân cấp được xây dựng hoàn toàn qua kích thước, không qua tương phản đậm/nhạt. Tỷ lệ geometric humanist mang lại chất văn học cho headline trong khi single weight buộc phải kiềm chế.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.56 | — | `--text-body` |
| subheading | 20px | 1.38 | — | `--text-subheading` |
| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |
| heading | 32px | 1.25 | — | `--text-heading` |
| heading-lg | 48px | 1.11 | — | `--text-heading-lg` |
| display | 72px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** thoải mái

### 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` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 72 | 72px | `--spacing-72` |
| 96 | 96px | `--spacing-96` |
| 112 | 112px | `--spacing-112` |
| 120 | 120px | `--spacing-120` |
| 160 | 160px | `--spacing-160` |
| 176 | 176px | `--spacing-176` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 32px |
| cards | 8px |
| inputs | 4px |
| buttons | 9999px |

### Layout

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

## Components

### Announcement Bar
**Vai trò:** Thanh tiện ích tối full-width ở đầu trang

Nền #0a0b0c, full-bleed chiều cao ~40px, chữ trắng 14px Roobert 400, label text căn trái, pill button tối căn phải (nền #00543d, chữ trắng, radius 9999px, padding 8px 16px) với viền nhẹ.

### Primary Navigation
**Vai trò:** Thanh điều hướng dính phía trên với logo, dropdown menu và CTA chính

Nền trắng, chiều cao ~64px, logo chữ Ada bên trái, link nav ngang màu #0a0b0c cỡ 15px với chevron dropdown, icon avatar người dùng, và một pill CTA tối ('Speak to an expert') với nền #0a0b0c, chữ trắng, radius 9999px, padding 12px 24px, và icon mũi tên tròn.

### Hero Section
**Vai trò:** Khu vực landing full-viewport với headline, subtext và product demo

Nền full-bleed với gradient ảnh mờ mạnh (hình dạng hữu cơ hổ phách/teal ấm — cảm giác như kính mờ phủ lên phong cảnh). Cột trái: headline lớn 60-72px Roobert 400 màu #0a0b0c, letter-spacing normal, line-height ~1.05, xếp dọc. Subtext 18px màu #0a0b0c độ mờ 70%. Cột phải: card trắng nổi (radius 8px, viền 1px #f9f9f9 nhẹ) hiển thị chat widget với logo đối tác thương hiệu, avatar dots, và pill button tối ('Listen to a real call') với icon mũi tên.

### Logo Strip
**Vai trò:** Dải chứng minh xã hội hiển thị logo khách hàng doanh nghiệp

Hàng ngang 7-8 logo đối tác đơn sắc trên nền #f9f9f9, cách đều nhau, mỗi logo hiển thị bằng #0a0b0c ở độ tương phản thấp (khoảng 60% opacity), cao 40-60px, không có heading kèm trên dải.

### Stat Card (4-Color Variant Set)
**Vai trò:** Card hiển thị số liệu với thanh nhấn màu đặc trưng ở cạnh trái

Card trắng (#ffffff) với radius 8px, không shadow, padding 24px. Một thanh màu dọc rộng 4px chạy dọc cạnh trái — màu thanh là điểm nhấn thị giác xác định: #00543d Forest, #ffbbfc Candy Pink, #abcbf9 Periwinkle, #fce88b Butter — mỗi card một màu, tạo nhịp điệu bốn nhịp. Bên trong: số liệu lớn 36-48px Roobert 400 màu #0a0b0c, tiếp theo là mô tả hai dòng 14-16px màu #0a0b0c độ mờ 70%.

### Feature Card (Image Variant)
**Vai trò:** Card ảnh full-bleed với overlay text và CTA mũi tên tròn

Card hình chữ nhật lấp đầy cột grid của nó, ảnh full-bleed (không padding quanh ảnh), overlay gradient tối ở phía dưới (trong suốt đến ~40% #0a0b0c) để text vẫn dễ đọc. Chữ trắng 32px Roobert 400 cho tiêu đề card, body 14-16px trắng độ mờ 85%. Một button tối tròn 48px (#0a0b0c, icon mũi tên phải trắng) nằm ở góc dưới-phải với radius 8px.

### Circular Arrow Button
**Vai trò:** Phần tử CTA tái sử dụng trên card và khối nội dung

Hình tròn đường kính 48px, nền #0a0b0c, mũi tên phải trắng (→) cỡ 18px, radius 8px (trông tròn hoàn toàn). Dùng nhất quán như một affordance hành động thứ cấp trên feature card.

### Section Heading Block
**Vai trò:** Khối text căn giữa giới thiệu một section nội dung mới

Headline căn giữa 36-48px Roobert 400 màu #0a0b0c, line-height ~1.2, tối đa một hoặc hai dòng. Subtext tùy chọn 18px bên dưới màu #0a0b0c độ mờ 65%, max-width 640px, căn giữa. Không có yếu tố trang trí, không có eyebrow tag.

### Chat Widget Card
**Vai trò:** Card demo sản phẩm nổi trong hero

Card trắng với radius 8px, viền 1px #f9f9f9 nhẹ, padding rộng (~24px). Chứa wordmark thương hiệu đối tác ở góc trên-trái, một hàng status dots nhỏ ở góc trên-phải, một label cỡ 32px weight trung bình ('AI agent'), và 2-3 dòng text hội thoại phong cách monospace cỡ 14px màu #0a0b0c. Một pill button tối được gắn hoặc đặt liền kề.

## Do's and Don'ts

### Do
- Dùng Roobert 400 ở mọi kích thước — không bao giờ chuyển sang bold/light để tạo hệ thống phân cấp; để kích thước tự làm việc đó.
- Chỉ áp dụng bốn màu nhấn (#00543d, #abcbf9, #ffbbfc, #fce88b) dưới dạng thanh cạnh trái rộng 4px trên stat card hoặc làm bề mặt hành động đặc đơn lẻ — không bao giờ dùng làm nền rộng.
- Đặt card radius là 8px, input radius là 4px, và button radius là 9999px (pill) — hệ thống radius ba tầng là bất di bất dịch.
- Giữ canvas ở #f9f9f9 và nâng card lên #ffffff — hệ thống bề mặt hai tầng này là tất cả những gì thiết kế cần để tạo độ cao.
- Dùng #0a0b0c cho tất cả đường viền ở 1px — thiết kế dựa vào đường viền mảnh, không phải shadow, để xác định vùng.
- Duy trì section gap rộng 80px giữa các dải nội dung; không bao giờ nén xuống dưới 48px.
- Neo mọi card ảnh full-bleed bằng overlay gradient tối (trong suốt → ~40% #0a0b0c) để text chồng lên vẫn dễ đọc.

### Don't
- Không thêm drop shadow trên card hoặc button — thiết kế phẳng về mặt triết lý, dựa vào đường viền mảnh và tương phản màu bề mặt.
- Không dùng bốn màu nhấn làm màu text — chúng chỉ là thanh trang trí và fill bề mặt, không bao giờ dùng cho body copy hay heading.
- Không áp gradient cho button, card, hoặc navigation — gradient duy nhất trong hệ thống là nền hero.
- Không dùng kiểu chữ thứ hai hoặc thêm weight bold/light của Roobert — kỷ luật single-weight là một lựa chọn đặc trưng.
- Không đặt màu trên nhiều hơn một element trên mỗi viewport section — hệ thống thở qua sự kiềm chế; gom nhóm accent phá hỏng nhịp điệu.
- Không dùng #ffffff làm nền trang — nó giết chết độ ấm; luôn dùng #f9f9f9 cho canvas và #ffffff chỉ cho card nổi.
- Không thêm divider trang trí, icon badge, hoặc section eyebrow — chuyển tiếp section được điều khiển bằng khoảng trắng, không cần chrome thị giác.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Canvas | `#f9f9f9` | Nền trang, dải section, lớp cơ sở mà mọi thứ nằm trên |
| 2 | Card | `#ffffff` | Bề mặt card nổi, chat widget, panel tính năng — nổi phía trên canvas |
| 3 | Dark Surface | `#0a0b0c` | Announcement bar, pill button, CTA mũi tên tròn, điểm kết thúc overlay gradient ảnh — bề mặt tối duy nhất trong hệ thống |
| 4 | Accent Wash | `#abcbf9` | Nền pha màu nhẹ cho vùng được làm nổi bật, nav chip, callout nhẹ |

## Elevation

Hệ thống thiết kế cố tình tránh drop shadow như một cơ chế tạo độ cao. Chiều sâu và hệ thống phân cấp được thiết lập qua stack bề mặt ba bước (#f9f9f9 canvas → #ffffff card → #0a0b0c dark surface) kết hợp với đường viền mảnh 1px #0a0b0c ở độ mờ cực thấp. Kết quả là một cảm giác phẳng, editorial, nơi tín hiệu chiều sâu duy nhất là tương phản màu bề mặt — không có shadow blur, không có mô phỏng trục z.

## Imagery

Hình ảnh được dùng ở hai chế độ riêng biệt. Nền hero là một gradient ảnh mờ mạnh (hình dạng hữu cơ hổ phách/teal/xanh) đọc như độ ấm không khí hơn là chủ thể cụ thể — nó hoạt động như một nền màu, không phải một bức ảnh. Feature card dùng ảnh editorial full-bleed: người trong bối cảnh hợp tác, một người trình bày trước màn hình, tay trên laptop hiển thị UI sản phẩm — luôn được crop chặt, luôn được xử lý với overlay gradient tối ở phía dưới để text dễ đọc. Không có hệ thống minh họa; không có đồ họa phẳng, không có kể chuyện bằng icon. Logo đối tác trong dải chứng minh xã hội được hiển thị bằng #0a0b0c đơn sắc ở độ mờ giảm, tạo một nhịp điệu ngang yên tĩnh.

## Layout

Trang tuân theo mô hình cột căn giữa max-width 1200px với các dải section full-bleed vươn ra mép viewport. Hero là split hai cột: headline editorial cỡ lớn bên trái (60% width), card demo sản phẩm nổi bên phải (40% width), cả hai căn giữa dọc so với nền mờ full-bleed. Bên dưới hero, các section xen kẽ giữa dải #f9f9f9 và #ffffff với khoảng cách dọc 80px. Khối stat dùng grid 4 cột bằng nhau với mỗi card giữ một thanh màu nhấn. Section feature dùng grid 3 cột bằng nhau của card ảnh full-bleed. Headline luôn được căn giữa và cỡ lớn (36-72px); body text căn trái trong card nhưng căn giữa trong phần giới thiệu section. Navigation là một thanh ngang sạch với dropdown menu — không sidebar, không mega-menu chrome. Nhịp điệu tổng thể rộng rãi và editorial: mỗi khối nội dung có đủ không gian thở thị giác trước khi khối tiếp theo bắt đầu.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #0a0b0c
- background: #f9f9f9
- card surface: #ffffff
- border: #0a0b0c ở 1px (dùng ở 8-15% opacity cho đường viền mảnh tinh tế)
- dark surface / button: #0a0b0c
- primary action: #abcbf9 (filled action)

**Ví dụ Component Prompts**
1. *Hero với nền mờ*: Nền full-bleed dùng linear-gradient(oklch(0.5555 0 0), oklch(0.331 0.0104 253.98)) phủ lên một lớp rửa ảnh hữu cơ mờ. Cột trái: headline 72px Roobert 400, #0a0b0c, line-height 1.05. Subtext 18px Roobert 400, #0a0b0c độ mờ 70%. Cột phải: card trắng (#ffffff, radius 8px, viền 1px #f9f9f9, padding 24px) chứa khối hội thoại 14px phong cách monospace Roobert và pill button tối (#0a0b0c, chữ trắng, radius 9999px, padding 12px 24px) với icon mũi tên phải 16px.

2. *Stat card với thanh nhấn*: Card trắng (#ffffff, radius 8px, không shadow, padding 24px). Một thanh dọc rộng 4px màu #ffbbfc chạy dọc cạnh trái. Số liệu 48px Roobert 400, #0a0b0c. Mô tả 14px Roobert 400, #0a0b0c độ mờ 70%, tối đa hai dòng.

3. *Feature image card*: Ảnh full-bleed lấp đầy card (không padding bên trong quanh ảnh). 40% phía dưới card được phủ bởi overlay linear-gradient(transparent, rgba(10,11,12,0.5)). Tiêu đề trắng 32px Roobert 400, body trắng 14px Roobert 400 độ mờ 85%. Một button tối tròn 48px (#0a0b0c, radius 8px, mũi tên phải trắng) đặt ở góc dưới-phải với margin 16px.

4. Tạo Primary Action Button: nền #abcbf9, text #0a0b0c, radius 9999px, padding pill gọn. Dùng xử lý filled này cho CTA chính.

5. *Section intro*: Headline căn giữa 48px Roobert 400, #0a0b0c, max-width 720px. Subtext 18px Roobert 400, #0a0b0c độ mờ 65%, max-width 640px, căn giữa bên dưới. Khoảng cách 40px giữa headline và subtext. Không eyebrow, không đường trang trí.

## Similar Brands

- **Linear** — Cùng kỷ luật single-weight humanist sans-serif, bề mặt phẳng với đường viền mảnh, và cách dùng màu nhấn kiềm chế xuất hiện như dấu câu có chủ đích
- **Pitch** — Cùng cách tiếp cận headline editorial cỡ lớn trên khoảng trắng rộng rãi, với một pill button tối duy nhất làm pattern hành động chính
- **Notion** — Cùng canvas trắng nhạt ấm áp (cảm giác #f9f9f9) với card phẳng nổi phía trên, và một humanist sans đảm nhận toàn bộ giọng nói ở một weight duy nhất
- **Arc Browser** — Cùng cách dùng màu nhấn pastel vui tươi làm dấu câu thị giác nhỏ trên nền gần như đơn sắc, với typography editorial cỡ lớn

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-inkstone: #0a0b0c;
  --color-bone: #f9f9f9;
  --color-paper: #ffffff;
  --color-ash: #d8d8d8;
  --color-plum-ash: #392c38;
  --color-forest-depth: #00543d;
  --color-periwinkle: #abcbf9;
  --color-candy-pink: #ffbbfc;
  --color-butter: #fce88b;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.56;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.11;
  --text-display: 72px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* 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-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --spacing-160: 160px;
  --spacing-176: 176px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-3xl: 28px;
  --radius-3xl-2: 32px;

  /* Named Radii */
  --radius-nav: 32px;
  --radius-cards: 8px;
  --radius-inputs: 4px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-canvas: #f9f9f9;
  --surface-card: #ffffff;
  --surface-dark-surface: #0a0b0c;
  --surface-accent-wash: #abcbf9;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-inkstone: #0a0b0c;
  --color-bone: #f9f9f9;
  --color-paper: #ffffff;
  --color-ash: #d8d8d8;
  --color-plum-ash: #392c38;
  --color-forest-depth: #00543d;
  --color-periwinkle: #abcbf9;
  --color-candy-pink: #ffbbfc;
  --color-butter: #fce88b;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.56;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.11;
  --text-display: 72px;
  --leading-display: 1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --spacing-160: 160px;
  --spacing-176: 176px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-3xl: 28px;
  --radius-3xl-2: 32px;
}
```