# Literal

> Literal — Style Reference

## Prompt Content

```
# Literal — Style Reference
> Thư viện trong ánh sáng dịu nhẹ — một phòng đọc nơi tường kem ấm áp giao hòa với kệ gỗ óc chó tối màu.

**Theme:** light

Literal là một phòng đọc văn học được tái hiện trong ánh sáng dịu nhẹ: một canvas gần như đơn sắc, nơi điểm nhấn màu sắc duy nhất là một tông xanh rừng (forest green) đánh dấu hành động chính. Headlines sử dụng serif ấm áp mang chất sách vở (Libre Baskerville), trong khi mọi thành phần chức năng đều dùng geometric Inter sạch sẽ, tạo nên sự căng thẳng nhẹ nhàng giữa phong cách editorial và digital. Các bề mặt mang chất giấy — canvas xám ấm mềm mại bên dưới những card trắng tinh với viền mảnh và hầu như không có bóng. Toàn bộ trải nghiệm mang cảm giác tĩnh lặng, thoáng đãng, lấy nội dung làm trung tâm, với bìa sách và ảnh chụp màn hình sản phẩm đảm nhận vai trò thị giác mà màu sắc và trang trí không làm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Forest Green | `#278458` | `--color-forest-green` | Màu nền cho primary CTA, điểm nhấn thương hiệu, ký tự ngôi sao trong wordmark, trạng thái active — một điểm nhấn màu duy nhất neo giữ một giao diện gần như không màu |
| Charcoal | `#444340` | `--color-charcoal` | Văn bản body chính và UI text, icon strokes, đường viền mặc định |
| Soft Gray | `#f8f8f8` | `--color-soft-gray` | Nền canvas trang và nền section — tông trắng ngà ấm giúp card trắng có cảm giác phân lớp thay vì lơ lửng |
| Warm Gray | `#9a988b` | `--color-warm-gray` | Văn bản phụ trợ mờ, metadata thứ cấp, đường phân cách danh sách, link đã giảm nhấn mạnh |
| Hairline Gray | `#eeeeee` | `--color-hairline-gray` | Viền card và component, đường phân cách tinh tế giữa các section và mục danh sách |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, văn bản trên button, nền input — bề mặt nâng cao phía trên canvas xám |
| Ink Black | `#000000` | `--color-ink-black` | Văn bản heading, nền cho dark secondary action (App Store button), viền đậm trên heading nổi bật |

## Tokens — Typography

### Inter — Toàn bộ UI chức năng — body copy, buttons, navigation, inputs, captions, mô tả tính năng, hero subtext · `--font-inter`
- **Thay thế:** system-ui, -apple-system, Segoe UI, Roboto
- **Weights:** 400, 500, 700
- **Kích thước:** 14, 15, 16, 22, 40
- **Line height:** 1.35–1.50
- **Vai trò:** Toàn bộ UI chức năng — body copy, buttons, navigation, inputs, captions, mô tả tính năng, hero subtext

### Libre Baskerville — Chỉ dành riêng cho heading của section và trang — serif là tín hiệu editorial phân tách display khỏi interface · `--font-libre-baskerville`
- **Thay thế:** Lora, Source Serif Pro, Crimson Text
- **Weights:** 500
- **Kích thước:** 28
- **Line height:** 1.35
- **Vai trò:** Chỉ dành riêng cho heading của section và trang — serif là tín hiệu editorial phân tách display khỏi interface

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.45 | — | `--text-caption` |
| body | 16px | 1.45 | — | `--text-body` |
| subheading | 22px | 1.4 | — | `--text-subheading` |
| heading | 28px | 1.35 | — | `--text-heading` |
| display | 40px | 1.35 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ sở:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 40 | 40px | `--spacing-40` |
| 80 | 80px | `--spacing-80` |
| 160 | 160px | `--spacing-160` |
| 180 | 180px | `--spacing-180` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 8px |
| other | 16px |
| images | 4px |
| buttons | 4px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 20px
- **Element gap:** 20px

## Components

### Primary CTA Button
**Vai trò:** Hành động chuyển đổi chính — xuất hiện một hoặc hai lần mỗi section, luôn màu xanh

Nền #278458, chữ trắng, Inter 15px weight 500, radius 4px, padding dọc 14px × ngang 28px, glyph mũi tên phải sau label. 100% width trên mobile, auto trên desktop.

### Dark App Store Button
**Vai trò:** Secondary download CTA đặt cạnh primary CTA

Nền #000000, chữ trắng, Inter 15px weight 500, radius 4px, padding 14px × 28px. Glyph Apple đứng trước label hai dòng 'Download on the App Store'.

### Ghost Nav Button (Sign in)
**Vai trò:** Tertiary navigation action trong header

Nền trong suốt, chữ #444340, Inter 15px weight 400, không viền. Gạch chân khi hover.

### Search Input
**Vai trò:** Trường tìm kiếm toàn cục trong navigation bar

Không viền, nền trong suốt, placeholder text #444340, icon kính lúp bên trái. Nằm gọn trong nav bar mà không có container hiển thị — sự vắng mặt của viền là tuyên ngôn thiết kế.

### Feature Card
**Vai trò:** Card mô tả khả năng sản phẩm trong lưới 3 cột

Nền #ffffff, viền 1px #eeeeee, radius 8px, padding 20px. Chứa một subheading serif (Inter 22px weight 700 hoặc Libre Baskerville 28px weight 500) theo sau là bullet text hoặc ảnh chụp màn hình sản phẩm. Tùy chọn bóng rất nhẹ (rgba 0,0,0,0.04) giúp củng cố cảm giác nâng cao mà không tạo nặng nề.

### Testimonial Card
**Vai trò:** Card bằng chứng xã hội trong lưới 'Loved by everyone'

Nền #ffffff, viền 1px #eeeeee, radius 8px, padding 20px. Layout: avatar (hình tròn, ~40px) + tên hiển thị Inter 15px weight 500 + dấu tích xác minh + glyph nền tảng trên một hàng, quote text Inter 15px weight 400 bên dưới.

### Section Heading (Serif)
**Vai trò:** Tiêu đề section editorial — khoảnh khắc trang thở

Libre Baskerville 28px weight 500, #000000, căn giữa, line-height 1.35. Nơi duy nhất serif xuất hiện ngoài feature card subheading.

### Hero Headline (Serif)
**Vai trò:** Tiêu đề editorial cấp trang

Serif phong cách Libre Baskerville ở 40px weight 500, #000000, căn giữa, line-height 1.35. Xếp chồng hai dòng, khoảng 8–12 từ.

### Book Cover Collage
**Vai trò:** Hình ảnh hero trang trí — sách được sắp xếp thành cụm rải rác nhưng cân bằng

Bìa sách riêng lẻ được hiển thị dưới dạng thumbnail hình chữ nhật radius 4px, không bóng, xoay nhẹ, xếp chồng với độ chồng lấn tinh tế. Bìa sách cung cấp toàn bộ màu sắc trong hero; không có nền tint hay khung bao.

### Product Screenshot Tile
**Vui lòng cung cấp nội dung cần dịch cho phần còn lại.**
```