# Readwise

> Readwise — Style Reference

## Prompt Content

```
# Readwise — Style Reference
> Một cuốn nhật ký có chú thích của người đọc — nền trắng giấy yên tĩnh, headline serif, và một cây bút xanh.

**Theme:** light

Readwise mang đến một không gian làm việc văn chương cho productivity: canvas gần như trắng với một điểm nhấn editorial blue duy nhất và những mảng highlight vàng ấm, thể hiện trực quan mục đích của sản phẩm. Hệ thống typography kết hợp serif chuyển tiếp (Charter) cho headline với humanist sans (Mulish) cho mọi thứ còn lại, tạo ra bầu không khí phòng đọc sách vở nhưng hiện đại, thay vì cảm giác dashboard SaaS điển hình. Các bề mặt phẳng và yên tĩnh — card nổi trên nền giấy trắng mát (#f1f5f8) với viền mảnh, hầu như không có shadow, và bo góc tròn trông giống như những tấm thẻ in hơn là app tiles. Màu vàng (#fff7ca) hoạt động như một highlighter thực thụ phía sau văn bản được nhấn mạnh trong dòng, không phải là một điểm nhấn trang trí — bản sắc của sản phẩm CHÍNH LÀ hành động đánh dấu những điều quan trọng. Các component luôn gọn nhẹ và tập trung vào chữ, với một nút blue filled duy nhất mang toàn bộ trọng lượng, mọi thứ còn lại được thể hiện dưới dạng ghost hoặc text-link.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Pen Blue | `#478cd0` | `--color-pen-blue` | Điểm nhấn blue hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính |
| Highlighter Yellow | `#fff7ca` | `--color-highlighter-yellow` | Điểm nhấn vàng hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. |
| Reader Orange | `#fb9100` | `--color-reader-orange` | Điểm nhấn cam hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, nền ảnh chụp màn hình sản phẩm, màu chữ trên nút filled, và nền nav. Tầng bề mặt cao nhất |
| Ink | `#1f1f1f` | `--color-ink` | Heading chính và body text. Gần đen thay vì đen tuyền — mềm mại cho mắt, đọc như mực in thay vì màn hình kỹ thuật số |
| Page Mist | `#f1f5f8` | `--color-page-mist` | Nền canvas của trang. Một màu xanh-xám rất nhạt, mát, đọc như giấy trắng ngà thay vì xám phẳng, tạo cho toàn bộ trang một sắc thái xanh nhẹ |
| Deep Slate | `#2d2f33` | `--color-deep-slate` | Văn bản phụ và chi tiết bề mặt tối. Được dùng trong nav và viền component khi cần một tông màu hơi khác so với Ink |
| True Black | `#000000` | `--color-true-black` | Màu trung tính tối hỗ trợ cho văn bản, icon và độ tương phản mạnh. |

## Tokens — Typography

### Charter — Serif editorial chỉ dùng cho headline và display text cỡ lớn. Việc chọn một serif chuyển tiếp trong một SaaS productivity là signature move của trang — nó báo hiệu 'đọc sách' và 'sách vở' trước khi bất kỳ nội dung nào được đọc. Weight 400 ở 50px với lineHeight 1.00 tạo ra display kiểu book-title chặt chẽ; weight 600 ở 29px xử lý section headline. Thay thế: Source Serif Pro hoặc Lora nếu không có Charter. · `--font-charter`
- **Thay thế:** Source Serif Pro
- **Weights:** 400, 600
- **Kích thước:** 22px, 29px, 50px
- **Line height:** 1.00–1.25
- **Letter spacing:** normal
- **Vai trò:** Serif editorial chỉ dùng cho headline và display text cỡ lớn. Việc chọn một serif chuyển tiếp trong một SaaS productivity là signature move của trang — nó báo hiệu 'đọc sách' và 'sách vở' trước khi bất kỳ nội dung nào được đọc. Weight 400 ở 50px với lineHeight 1.00 tạo ra display kiểu book-title chặt chẽ; weight 600 ở 29px xử lý section headline. Thay thế: Source Serif Pro hoặc Lora nếu không có Charter.

### Mulish — Humanist sans cho mọi thứ không phải display: nav, body, button, label, icon. Dải weight rộng — 400 cho body, 600 cho button, 700/800 cho bold tags và nhấn mạnh. lineHeight chặt hơn (1.09) ở 11px giữ caption gọn gàng; 1.50 ở 16–18px cho body copy không gian thoáng. tracking -0.02em nhất quán ở mọi kích thước thắt chặt sans thành một giọng utility sạch sẽ. · `--font-mulish`
- **Thay thế:** Inter hoặc DM Sans
- **Weights:** 400, 600, 700, 800
- **Kích thước:** 11px, 14px, 16px, 18px, 22px
- **Line height:** 1.09–1.50
- **Letter spacing:** -0.02em
- **OpenType features:** `"tnum" on, "lnum" on`
- **Vai trò:** Humanist sans cho mọi thứ không phải display: nav, body, button, label, icon. Dải weight rộng — 400 cho body, 600 cho button, 700/800 cho bold tags và nhấn mạnh. lineHeight chặt hơn (1.09) ở 11px giữ caption gọn gàng; 1.50 ở 16–18px cho body copy không gian thoáng. tracking -0.02em nhất quán ở mọi kích thước thắt chặt sans thành một giọng utility sạch sẽ.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.09 | -0.22px | `--text-caption` |
| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |
| body | 16px | 1.5 | -0.32px | `--text-body` |
| subheading | 18px | 1.5 | -0.36px | `--text-subheading` |
| heading-sm | 22px | 1.25 | -0.44px | `--text-heading-sm` |
| heading | 29px | 1.13 | — | `--text-heading` |
| display | 50px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|------|
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 16px |
| tags | 10px |
| cards | 10px |
| buttons | 10px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 12px

## Components

### Primary CTA Button
**Vai trò:** Hành động chuyển đổi chính trên hero và feature sections

Filled với Pen Blue (#478cd0), chữ trắng, Mulish 16px weight 600 uppercase tracking, border-radius 10px, padding dọc 10px / ngang 24px. Một nút duy nhất, tự tin — không có secondary action bên cạnh trên hero.

### Ghost Sign In Button
**Vai trò:** Hành động điều hướng góc trên bên phải

Nền trắng, viền 1px True Black, radius 10px, Mulish 14px weight 600, padding dọc 10px / ngang 18px. Outlined, không filled — giữ cho nav yên tĩnh.

### Feature Badge Tag
**Vai trò:** Đánh dấu tính năng mới hoặc beta trong nav

Nền pill Reader Orange (#fb9100), chữ trắng, Mulish 11px weight 700, radius 10px, padding chặt (dọc 2–4px, ngang 6px). Đủ nhỏ để là một footnote, đủ màu sắc để thu hút sự chú ý.

### Step Icon Circle
**Vai trò:** Neo thị giác cho các bước 'How it works'

Vòng tròn filled 36–40px với icon line trắng bên trong. Ba instance dùng ba màu khác nhau: Pen Blue, một màu tím desaturated, và Reader Orange. Mỗi vòng tròn nằm trên tiêu đề bước Charter 22px và mô tả Mulish 14–16px.

### Testimonial Card
**Vai trò:** Bằng chứng xã hội từ người dùng trong horizontal scroll

Card trắng trên nền Page Mist, radius 10px, padding 24px, viền hairline 1px màu #f1f5f8 (tối hơn canvas một chút), shadow rất nhẹ tùy chọn. Chứa avatar, tên, handle, ngày tháng và nội dung tweet ở Mulish 14px. Thẩm mỹ Twitter card — trông giống ảnh chụp màn hình, không phải card được thiết kế.

### In-line Highlighted Text
**Vai trò:** Nhấn mạnh các cụm từ khóa trong body copy

Văn bản được bọc trong một lớp nền Highlighter Yellow (#fff7ca), không viền, không điều chỉnh padding. Màu vàng kéo dài nhẹ lên trên và xuống dưới baseline của văn bản. Đây là yếu tố thị giác signature của sản phẩm — nó CHÍNH LÀ thương hiệu.

### Product Hero Mockup
**Vai trò:** Hiển thị ứng dụng thực tế trên laptop và điện thoại

Khung laptop và iPhone photorealistic, căn giữa trên nền Page Mist, xoay/nghiêng nhẹ để tạo chiều sâu. Màn hình laptop hiển thị giao diện Daily Review; điện thoại hiển thị mobile view được kết nối. Đóng vai trò là hình ảnh chính của hero — không phải minh họa, mà là ảnh chụp sản phẩm thật.

### Navigation Bar
**Vai trò:** Điều hướng cấp cao nhất của trang

Nền trắng, radius 16px trên container bên ngoài (thanh hình pill), bố cục ngang: logo trái, nav links giữa, Sign In button phải. Padding dọc chặt (~14px). Tối giản, yên tĩnh, gần như vô hình.

### Text Link
**Vai trò:** Điều hướng trong nội dung và tham chiếu

Pen Blue (#478cd0), gạch chân, Mulish kế thừa kích thước văn bản xung quanh. Dùng cho username, hashtag và tham chiếu trong nội dung testimonial. Không cần xử lý hover đặc biệt — gạch chân CHÍNH LÀ affordance.

### Section Heading
**Vai trò:** Tiêu đề đầu section như 'Here's how Readwise works:' và 'Here's what our users say:'

Charter 29px weight 400, màu Ink, lineHeight 1.13, căn giữa. Đặt tông editorial ngay lập tức — một serif headline nói với người đọc rằng họ đang ở trong một không gian gần với sách vở, không phải dashboard.

## Do's and Don'ts

### Do
- Dùng Charter 50px weight 400 cho hero display headline, lineHeight 1.00, không điều chỉnh letter-spacing — leading chặt làm cho headline có cảm giác như tiêu đề sách.
- Áp dụng #fff7ca làm nền wash phía sau các cụm 2–4 từ trong body copy để báo hiệu sự nhấn mạnh; không bao giờ dùng làm nền toàn bề mặt hoặc button fill.
- Đặt primary CTA là nút solid #478cd0 với chữ trắng, radius 10px, padding 10/24px — không gradient, không shadow trên chính nút.
- Dùng Mulish tracking -0.02em ở mọi kích thước; letter-spacing được thắt chặt là thứ làm cho sans cảm thấy như một lựa chọn có chủ đích thay vì mặc định.
- Xếp lớp card trên canvas #f1f5f8 với fill trắng #ffffff và viền hairline thay vì dựa vào shadow để phân tách.
- Giới hạn màu chromatic ở một điểm nhấn Pen Blue duy nhất cho hành động và link; chỉ dùng Reader Orange cho feature badge 'Reader' duy nhất.
- Ghép mọi serif headline với Mulish body text ở 16–18px — sự tương phản giữa serif chuyển tiếp và humanist sans là bản sắc typographic của trang.

### Don't
- Không dùng Charter cho body copy, nav hoặc button — nó chỉ dành cho headline từ 22px trở lên.
- Không áp dụng #fff7ca cho toàn bộ bề mặt card, nền section hoặc các khu vực lớn — nó mất đi ý nghĩa highlighter nếu bao phủ nhiều hơn một dòng văn bản.
- Không thêm các màu accent khác ngoài Pen Blue, Highlighter Yellow và Reader Orange — hệ thống cố tình gần như đơn sắc.
- Không dùng drop shadow nặng trên card hoặc button; nếu cần elevation, hãy giữ nó mềm (spread ≤ 20px) và pha với Ink thay vì đen tuyền.
- Không đặt display headline ở dạng all-caps hoặc với letter-spacing dương — Charter ở 50px hoạt động tốt nhờ leading 1.00 chặt và tracking tự nhiên.
- Không dùng nút màu filled cho secondary action; hãy dùng kiểu Ghost Sign In (fill trắng, viền 1px) hoặc text link thường màu Pen Blue.
- Không đặt nền trang là trắng tuyền #ffffff — Page Mist #f1f5f8 là thứ làm cho card trắng và product mockup đọc như các bề mặt được nâng lên.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Page Canvas | `#f1f5f8` | Nền trang cơ bản. Tông giấy trắng ngà mát. |
| 1 | Card Surface | `#ffffff` | Testimonial card, nền product mockup, khối nội dung được nâng lên. |
| 2 | Highlight Wash | `#fff7ca` | Nhấn mạnh trong dòng phía sau văn bản. Cũng được dùng làm bề mặt callout mềm. |

## Elevation

- **Product mockup laptop frame:** `0 20px 40px rgba(31,31,31,0.15)`
- **Testimonial cards:** `0 2px 8px rgba(31,31,31,0.08)`

## Imagery

Product mockup chiếm ưu thế trong hệ thống phân cấp thị giác: một laptop photorealistic hiển thị giao diện Daily Review kết hợp với iPhone hiển thị mobile companion, cả hai căn giữa trên hero. Các mockup là ảnh chụp màn hình sản phẩm thật, không phải minh họa hoặc 3D render. Bên dưới hero, nội dung do người dùng tạo (ảnh chụp tweet) cung cấp bằng chứng xã hội trong một hàng ngang cuộn ngang — được xử lý như những vật thể tìm thấy thay vì card được thiết kế. Minh họa duy nhất là ba icon bước tròn nhỏ trong section 'How it works', mỗi icon là một vòng tròn filled phẳng với glyph line trắng. Không có ảnh chụp lối sống, không có đồ họa trừu tượng, không có hình ảnh trang trí — mọi hình ảnh hoặc hiển thị sản phẩm hoặc hiển thị những gì người dùng nói về nó.

## Layout

Container trang căn giữa, max-width ~1200px với hero gần như full-bleed. Hero là một chồng dọc: nav bar ở trên cùng, headline serif lớn, sub-headline với inline highlight vàng, CTA xanh duy nhất, sau đó là product mockup bên dưới — không split-screen, không text/image song song. Các section bên dưới hero xen kẽ giữa khối text-and-icon căn giữa (grid 3 cột cho 'How it works') và hàng card cuộn ngang (testimonial). Nhịp điệu dọc thoải mái nhưng không rộng rãi — ~64px giữa các section, ~24px padding bên trong. Nav là một thanh ngang duy nhất, không sticky, với container hình pill nằm trên nền Page Mist. Không có sidebar, không có mega-menu, không có footer hiển thị phía trên fold.

## Agent Prompt Guide

**Quick Color Reference**
- text: #1f1f1f
- background: #f1f5f8
- card surface: #ffffff
- border / hairline: #e2e8f0 (suy ra từ họ #f1f5f8)
- highlight wash: #fff7ca
- primary action: không có màu CTA riêng biệt
- feature badge: #fb9100 (Reader Orange, dùng một lần)

**3-5 Example Component Prompts**

Không quan sát thấy màu primary action riêng biệt; hãy dùng các xử lý nút neutral đã trích xuất thay vì tự tạo màu CTA filled.

2. **Section heading block**: Charter 29px weight 400, #1f1f1f, lineHeight 1.13, căn giữa. Theo sau bởi gap dọc 64px đến grid 3 cột của step card trên canvas #f1f5f8.

3. **Step card**: cột căn giữa. Vòng tròn filled 40px màu #478cd0 với icon line trắng. Bên dưới: tiêu đề bước Charter 22px weight 600 màu #1f1f1f. Bên dưới: mô tả Mulish 16px weight 400 màu #1f1f1f, max-width 280px.

4. **Testimonial card**: nền #ffffff, radius 10px, padding 24px, viền hairline 1px (#e2e8f0), shadow mềm 0 2px 8px rgba(31,31,31,0.08). Avatar hình tròn 32px góc trên bên trái, tên Mulish 14px weight 700 #1f1f1f, handle Mulish 14px weight 400 #478cd0, ngày tháng Mulish 14px weight 400 #1f1f1f. Body text Mulish 14px weight 400 #1f1f1f với link text gạch chân #478cd0 trong dòng.

5. **Ghost nav button**: nền #ffffff, viền 1px solid #000000, radius 10px, Mulish 14px weight 600 #1f1f1f, padding dọc 10px / ngang 18px. Nằm ở cạnh phải của nav bar.

## Typographic Identity

Sự kết hợp serif/sans là lựa chọn đặc biệt nhất trong hệ thống này. Charter ở 50px weight 400 với lineHeight 1.00 cho hero, Charter ở 29px weight 400 cho section headline, sau đó Mulish cho mọi thứ từ 22px trở xuống. Serif không xuất hiện trong body copy, nav hoặc button — nó là một display-only face. Sự phân chia này có chủ đích: serif báo hiệu 'tài liệu đọc / sách vở / editorial', trong khi Mulish xử lý tất cả UI chức năng. Đừng làm mờ ranh giới này; đừng đặt Charter ở 14px hoặc 16px, và đừng để Mulish len lỏi vào vai trò headline.

## Similar Brands

- **Medium** — Cùng cách kết hợp serif-display-headline + sans-body trên nền gần trắng, với một màu accent duy nhất được dùng tiết kiệm cho CTA và link.
- **Substack** — Serif editorial headline trên nền giấy trắng yên tĩnh, hero lấy sản phẩm làm trung tâm với ảnh chụp thật, và bảng màu gần như đơn sắc để nội dung mang màu sắc.
- **Notion** — Density thoải mái, nav tối giản, product mockup làm hình ảnh hero, và bảng màu gần như đơn sắc với một màu accent duy nhất làm tất cả công việc.
- **Pocket (Mozilla)** — Sản phẩm tập trung vào đọc sách với một điểm nhấn xanh duy nhất trên nền trắng, section bằng chứng xã hội nặng về testimonial, và nhịp điệu typographic gọn nhẹ.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pen-blue: #478cd0;
  --color-highlighter-yellow: #fff7ca;
  --color-reader-orange: #fb9100;
  --color-paper-white: #ffffff;
  --color-ink: #1f1f1f;
  --color-page-mist: #f1f5f8;
  --color-deep-slate: #2d2f33;
  --color-true-black: #000000;

  /* Typography — Font Families */
  --font-charter: 'Charter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mulish: 'Mulish', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.09;
  --tracking-caption: -0.22px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.44px;
  --text-heading: 29px;
  --leading-heading: 1.13;
  --text-display: 50px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 16px;

  /* Named Radii */
  --radius-nav: 16px;
  --radius-tags: 10px;
  --radius-cards: 10px;
  --radius-buttons: 10px;

  /* Surfaces */
  --surface-page-canvas: #f1f5f8;
  --surface-card-surface: #ffffff;
  --surface-highlight-wash: #fff7ca;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pen-blue: #478cd0;
  --color-highlighter-yellow: #fff7ca;
  --color-reader-orange: #fb9100;
  --color-paper-white: #ffffff;
  --color-ink: #1f1f1f;
  --color-page-mist: #f1f5f8;
  --color-deep-slate: #2d2f33;
  --color-true-black: #000000;

  /* Typography */
  --font-charter: 'Charter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mulish: 'Mulish', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.09;
  --tracking-caption: -0.22px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.44px;
  --text-heading: 29px;
  --leading-heading: 1.13;
  --text-display: 50px;
  --leading-display: 1;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
}
```