# ElevenReader

> ElevenReader — Style Reference

## Prompt Content

```
# ElevenReader — Style Reference
> chủ nghĩa tối giản kiểu báo in với một điểm nhấn màu duy nhất

**Theme:** light

ElevenReader vận hành trên ngôn ngữ thị giác gần như đơn sắc: canvas trắng như giấy, chữ đen như mực, và viền xám mảnh (hairline) làm toàn bộ công việc cấu trúc. Một font display độc quyền (WaldenburgHF, chỉ dùng weight bold) đảm nhận mọi heading với leading cố định và chặt chẽ, tạo ra một giọng typography thống nhất trên toàn bộ bề mặt sản phẩm. Giao diện phẳng — không shadow, không phân tầng độ cao, không gradient trang trí trong UI — với một khoảnh khắc màu sắc duy nhất xuất hiện dưới dạng một vệt radial atmospheric trong hero (xanh rừng chuyển sang oải hương) tạo cảm xúc mà không bao giờ lặp lại trong các component bên trong. Pill controls (bán kính 9999px), gutter rộng rãi, và độ tương phản weight đơn (Inter 400 vs 700) khiến hệ thống giống như một trang editorial đã in — nội dung lên trước, trang trí là sau.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink | `#000000` | `--color-ink` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng cấp nó thành màu CTA chính |
| Paper | `#ffffff` | `--color-paper` | Surface sáng hỗ trợ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính |
| Mist | `#f2f2f2` | `--color-mist` | Canvas trang, nền section thay đổi tinh tế, tone surface phụ phía sau card |
| Bone | `#e5e5e5` | `--color-bone` | Viền hairline, divider giữa các row xếp chồng, đường viền FAQ item, separator tương phản thấp |
| Lavender Haze | `#c8d5f4` | `--color-lavender-haze` | Lớp phủ atmospheric mềm mại — chỉ xuất hiện dưới dạng dải nền gần xám pha màu gần hero, không bao giờ là màu UI chức năng |
| Graphite | `#767676` | `--color-graphite` | Body text tắt tiếng, metadata, helper copy — lớp đọc thứ cấp dưới Ink headline |
| Slate | `#6e6e6e` | `--color-slate` | Caption cấp ba, press attribution, nhãn bổ trợ |
| Hero Bloom | `radial-gradient(50% 50%, rgb(36, 63, 43) 0%, rgb(66, 141, 116) 54%, rgb(165, 177, 221) 78.5%, rgb(236, 230, 244) 99%)` | `--color-hero-bloom` | Radial gradient atmospheric trang trí — xanh rừng đến oải hương chỉ dùng phía sau khối hero media, không bao giờ lặp lại trong component |

## Tokens — Typography

### WaldenburgHF — Display và heading face — chỉ dùng ở weight 700 trên mọi cấp heading (28/32/48px). Kỷ luật single-weight này là chữ ký: không có biến thể light/medium, không italic. Leading cố định 1.10 và tracking 0.01em khiến heading nằm gần và chặt, giống như editorial pull quotes. · `--font-waldenburghf`
- **Thay thế:** Bricolage Grotesque (Google) ở weight 800, hoặc Mona Sans ở 800
- **Weights:** 700
- **Sizes:** 28px, 32px, 48px
- **Line height:** 1.10
- **Letter spacing:** 0.0100em
- **Vai trò:** Display và heading face — chỉ dùng ở weight 700 trên mọi cấp heading (28/32/48px). Kỷ luật single-weight này là chữ ký: không có biến thể light/medium, không italic. Leading cố định 1.10 và tracking 0.01em khiến heading nằm gần và chặt, giống như editorial pull quotes.

### Inter — Body, UI labels, navigation, button text, captions, footer. Nhị phân 400/700 (không 500/600) giữ hệ thống hạn chế về mặt thị giác — chỉ tồn tại hai giọng text. Body text đọc ở 16px/1.40, nhịp đọc thoải mái tiêu chuẩn; UI label nhỏ giảm xuống 14px/1.43 và 12px/1.60. · `--font-inter`
- **Thay thế:** Inter (cùng họ — đã được Google hosting)
- **Weights:** 400, 700
- **Sizes:** 12px, 14px, 16px, 18px
- **Line height:** 1.40–1.60 (12px: 1.60, 14px: 1.43, 16px: 1.40, 18px: 1.10)
- **Letter spacing:** 0.0100em
- **OpenType features:** `"ss01" off, "cv11" off`
- **Vai trò:** Body, UI labels, navigation, button text, captions, footer. Nhị phân 400/700 (không 500/600) giữ hệ thống hạn chế về mặt thị giác — chỉ tồn tại hai giọng text. Body text đọc ở 16px/1.40, nhịp đọc thoải mái tiêu chuẩn; UI label nhỏ giảm xuống 14px/1.43 và 12px/1.60.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.6 | 0.12px | `--text-caption` |
| body-sm | 14px | 1.43 | 0.14px | `--text-body-sm` |
| body | 16px | 1.4 | 0.16px | `--text-body` |
| subheading | 18px | 1.1 | 0.18px | `--text-subheading` |
| heading-sm | 28px | 1.1 | 0.28px | `--text-heading-sm` |
| heading-lg | 32px | 1.1 | 0.32px | `--text-heading-lg` |
| display | 48px | 1.1 | 0.48px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** 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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 44 | 44px | `--spacing-44` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |
| 140 | 140px | `--spacing-140` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 9999px |
| cards | 16px |
| other | 8px |
| buttons | 9999px |
| link-underline | 2px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 28px
- **Element gap:** 8px

## Components

### Filled CTA Button
**Vai trò:** Hành động chính — đăng ký dùng thử, tải app

Hình pill (bán kính 9999px), nền #000000, text #ffffff, Inter 700 ở 14px, letter-spacing 0.14px, padding 10px 20px. Không viền. Pill đen-trắng là control filled duy nhất trong hệ thống.

### Ghost/Outlined Button
**Vai trò:** Hành động phụ — 'TRY IT NOW', 'TRY NOW'

Hình pill (bán kính 9999px), nền #ffffff, viền hairline #e5e5e5 (1px), text #000000, Inter 700 ở 14px, padding 10px 20px. Phản chiếu hình học của filled CTA để cả hai có thể đặt cạnh nhau như một cặp primary/secondary.

### Pill Navigation Link
**Vai trò:** Mục nav trên cùng và nav footer

Hình pill (9999px), nền #ffffff, text #000000 ở Inter 400–700 tại 14px, padding 8px 16px. Trạng thái active dùng nền đen đặc với text trắng.

### Video Play Button
**Vai trò:** Lời kêu gọi xem (call-to-watch) ở trung tâm trên panel gradient hero

Hình pill (9999px), nền #000000, text #ffffff 'Watch film' ở Inter 700 14px, kèm một vòng tròn trắng đường kính 32px dẫn đầu chứa hình tam giác play màu đen. Padding 12px 20px 12px 12px.

### FAQ Accordion Row
**Vai trò:** Câu hỏi có thể mở rộng trong phần FAQ

Row toàn chiều rộng, viền trên/dưới 1px #e5e5e5, không viền hai bên, nền #ffffff. Text câu hỏi ở Inter 700 tại 16px màu #000000, icon '+' căn phải màu #000000 ở 16px. Padding 16px 20px. Các row xếp chồng dọc với gap 0px giữa các sibling — viền đảm nhận việc phân cách.

### Press Mention Card
**Vai trò:** Ô coverage editorial trong dải press

Không có card container hiển thị — text được đặt trực tiếp trên canvas #ffffff. Headline ở Inter 700 tại 16px, #000000, tối đa 3 dòng, tiếp theo là logo của ấn phẩm (TechCrunch xanh, VentureBeat tím, Variety đen, v.v.) với màu thương hiệu riêng. Logo ấn phẩm là màu sắc duy nhất trên trang bên dưới hero.

### Phone App Mockup
**Vai trò:** Minh họa sản phẩm hero

Khung thiết bị dạng chân dung cao (bo góc 30px), bề mặt màn hình #ffffff, hiển thị UI app. Nằm ở trung tâm bên dưới hero headline, được neo trực quan bởi lớp phủ gradient radial phía sau. Mockup không có drop shadow — nó nổi trên gradient.

### QR Download Widget
**Vai trò:** Lời nhắc tải app nổi (góc dưới-bên trái)

Thẻ trắng nhỏ, bán kính 16px, viền 1px #e5e5e5, padding 16px. Chứa brand wordmark ở Inter 700, mã QR đen-trắng, và nhãn 'GET THE APP' ở Inter 700 12px caps. Nút × đóng nhỏ ở góc trên-bên phải.

### Hero Atmospheric Panel
**Vai trò:** Phần gradient dùng một lần phía sau CTA watch-film

Dải toàn chiều rộng chứa radial gradient từ xanh rừng đậm (36, 63, 43) qua teal (66, 141, 116) đến oải hương (165, 177, 221) đến lilac gần trắng (236, 230, 244). Không viền, không bo góc, không shadow. Bề mặt có màu duy nhất trong hệ thống — được dùng có chủ đích một lần.

### Eyebrow Tag
**Vai trò:** Định danh section nhỏ phía trên hero headline

Inter 700 ở 12px, #000000, chữ hoa, letter-spacing 0.12px, đứng trước một container icon 16px vuông với bán kính 4px.

## Do's and Don'ts

### Nên làm
- Dùng WaldenburgHF (hoặc thay thế Bricolage Grotesque 800) ở 28/32/48px với lineHeight 1.10 cho mọi heading — không bao giờ dùng Inter cho kích thước display
- Dùng border-radius 9999px trên mọi button, nav item và pill control; dành 16px cho card và 8px cho container inline nhỏ
- Đặt body text ở Inter 400/16px với leading 1.40 và letter-spacing 0.16px — không bao giờ xuống dưới 1.40 leading cho text 16px
- Phân cách FAQ row và danh sách xếp chồng bằng viền 1px #e5e5e5 thay vì tint nền hoặc gap
- Dùng #f2f2f2 cho canvas trang và #ffffff cho tất cả card/bề mặt nâng cao — hai giá trị này mang toàn bộ hệ thống surface
- Render hero atmospheric gradient (radial, xanh rừng đến oải hương) chính xác một lần mỗi trang — không bao giờ lặp lại trong các section body
- Ghép filled black pill button với white ghost pill button như cặp CTA primary/secondary chuẩn

### Không nên làm
- Đừng đưa màu nhấn chromatic cho CTA hoặc trạng thái tương tác — hệ thống không có màu hành động riêng biệt; mọi hành động đọc qua cặp pill đen/trắng
- Đừng dùng WaldenburgHF ở weight nào khác ngoài 700 — kỷ luật single-weight là chữ ký
- Đừng áp drop shadow ở bất kỳ đâu ngoại trừ một shadow 1px 0 1 2 rgba(16,24,40,0.05) duy nhất trên filled CTA — elevation cố tình vắng mặt
- Đừng dùng #c8d5f4 làm màu UI chức năng — nó là tint atmospheric, không phải token
- Đừng dùng Inter ở weight 500 hoặc 600 — chỉ 400 và 700 tồn tại trong hệ thống
- Đừng thêm gap giữa các FAQ accordion row — viền 1px CHÍNH LÀ separator
- Đừng để section gap xuống dưới 48px — thiết kế dựa vào khoảng trắng dọc rộng rãi để tạo cảm giác editorial

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#f2f2f2` | Nền trang cơ bản, dùng làm khoảng trống âm giữa các dải nội dung |
| 1 | Surface | `#ffffff` | Nền card, FAQ rows, button fills (ghost), màn hình product mockup |
| 2 | Tinted Band | `#f2f5fc` | Nền section pha xanh lam nhẹ bắt nguồn từ hero gradient |
| 3 | Atmospheric | `#c8d5f4` | Lớp phủ oải hương trong radial gradient — trang trí, không tương tác |

## Elevation

- **Filled CTA Button:** `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`

## Imagery

Product mockup chiếm ưu thế: khung thiết bị hình điện thoại cao hiển thị giao diện app nằm ở trung tâm hero, và khung thiết bị thứ hai xuất hiện trong panel gradient watch-film. Cả hai mockup đều dùng nền màn hình #ffffff và không có device shadow — chúng nổi trên bất kỳ bề mặt nào giữ chúng. Không có photography, không lifestyle imagery, không stock visuals. Logo báo chí (TechCrunch xanh, VentureBeat tím, Variety đen, Bolt U) xuất hiện với màu thương hiệu gốc của chúng như là nội dung chromatic duy nhất bên dưới hero, đóng vai trò bằng chứng xã hội. Icon tối giản — một hình vuông 16px, một mã QR, một hình tam giác play, và dấu chuyển đổi ± — tất cả đều được render bằng #000000 phẳng, không trang trí.

## Layout

Container căn giữa max-width 1200px với gutter hai bên rộng rãi. Trang là một cuộn dọc đơn với các dải surface xen kẽ: hero trắng → panel atmospheric gradient → dải press trắng → section FAQ trắng. Hero được chia bất đối xứng — headline và CTA căn trái ở góc trên-bên trái, phone mockup căn giữa bên dưới. Panel gradient là một dải ngang full-bleed phá vỡ chiều rộng container để kéo dài toàn viewport. Các section được phân cách bằng khoảng trắng dọc (64px+) thay vì divider. FAQ dùng stack một cột toàn chiều rộng. Press mention chảy trong grid 4 cột trên desktop. Navigation là một top bar tối giản: brand wordmark trái, hai link giữa, hai button phải — không mega-menu, không sidebar.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #000000 (Ink)
- background: #f2f2f2 (Mist)
- card/surface: #ffffff (Paper)
- border: #e5e5e5 (Bone)
- muted text: #767676 (Graphite)
- primary action: không có màu CTA riêng biệt

**3–5 Ví Dụ Component Prompt**
1. *Xây dựng một filled pill button:* bán kính 9999px, nền #000000, text #ffffff, Inter 700 ở 14px với letter-spacing 0.14px, padding 10px 20px, không viền, tùy chọn shadow 0 1px 2px rgba(16,24,40,0.05).
Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatment đã trích xuất thay vì phát minh ra màu filled CTA.
3. *Xây dựng một FAQ accordion row:* toàn chiều rộng, nền #ffffff, viền trên và dưới 1px #e5e5e5 (không viền hai bên), text câu hỏi ở Inter 700/16px #000000, icon '+' căn phải màu #000000, padding 16px 20px. Xếp chồng với gap 0px giữa các row — viền đảm nhận việc phân cách.
5. *Xây dựng một press mention card:* không container, headline ở Inter 700/16px #000000 trên nền #ffffff, tiếp theo là logo ấn phẩm với màu thương hiệu riêng ở chiều cao ~32px. Sắp xếp trong grid 4 cột với column gap 20px.

## Similar Brands

- **Readwise Reader** — Cùng cách tiếp cận editorial-print: canvas trắng như giấy, divider xám hairline, giọng heading single-weight, khoảng trắng rộng rãi, và không có accent UI chromatic
- **Notion** — Bảng màu gần như đơn sắc với text đen như mực, pill controls, và surface phẳng — ElevenReader đẩy sự hạn chế đó xa hơn với không màu và một custom display face
- **Are.na** — Chủ nghĩa tối giản kiểu in với một weight heading đậm duy nhất, row separator xám 1px trong danh sách, và phân lớp trắng-trên-trắng không shadow
- **Linear** — Pill-shaped buttons, leading typography chặt chẽ, và giao diện gần như không màu — nhưng ElevenReader loại bỏ hoàn toàn accent tím của Linear
- **The Browser Company (Arc)** — Custom display typography cho heading, nhịp dọc rộng rãi, và sẵn sàng dùng một atmospheric gradient làm khoảnh khắc màu duy nhất của trang

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-mist: #f2f2f2;
  --color-bone: #e5e5e5;
  --color-lavender-haze: #c8d5f4;
  --color-graphite: #767676;
  --color-slate: #6e6e6e;
  --color-hero-bloom: #a5b1dd;
  --gradient-hero-bloom: radial-gradient(50% 50%, rgb(36, 63, 43) 0%, rgb(66, 141, 116) 54%, rgb(165, 177, 221) 78.5%, rgb(236, 230, 244) 99%);

  /* Typography — Font Families */
  --font-waldenburghf: 'WaldenburgHF', 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-caption: 12px;
  --leading-caption: 1.6;
  --tracking-caption: 0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 0.14px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.1;
  --tracking-subheading: 0.18px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: 0.28px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: 0.32px;
  --text-display: 48px;
  --leading-display: 1.1;
  --tracking-display: 0.48px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-200: 200px;

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

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 30px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-nav: 9999px;
  --radius-cards: 16px;
  --radius-other: 8px;
  --radius-buttons: 9999px;
  --radius-link-underline: 2px;

  /* Shadows */
  --shadow-subtle: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;

  /* Surfaces */
  --surface-canvas: #f2f2f2;
  --surface-surface: #ffffff;
  --surface-tinted-band: #f2f5fc;
  --surface-atmospheric: #c8d5f4;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-mist: #f2f2f2;
  --color-bone: #e5e5e5;
  --color-lavender-haze: #c8d5f4;
  --color-graphite: #767676;
  --color-slate: #6e6e6e;
  --color-hero-bloom: #a5b1dd;

  /* Typography */
  --font-waldenburghf: 'WaldenburgHF', 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-caption: 12px;
  --leading-caption: 1.6;
  --tracking-caption: 0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 0.14px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.1;
  --tracking-subheading: 0.18px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: 0.28px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: 0.32px;
  --text-display: 48px;
  --leading-display: 1.1;
  --tracking-display: 0.48px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}
```