# Handhold

> Handhold — Style Reference

## Prompt Content

```
# Handhold — Style Reference
> giấy da ấm áp dưới những serif thì thầm — một editorial spread được sắp chữ thủ công, không một chút nhiễu màu, nơi một hairline serif weight 200 mang toàn bộ giọng điệu.

**Theme:** light

Handhold vận hành ở một register gần như thuần editorial: một canvas kem ấm (#f2f1ed) thay thế màu trắng tinh SaaS tiêu chuẩn, và một custom serif weight 200 đảm nhận toàn bộ headline, trong khi Inter ở một weight duy nhất (400) xử lý mọi thứ còn lại. Bảng màu hoàn toàn đơn sắc — 0% màu sắc — nên hệ thống phân cấp được xây dựng hoàn toàn qua scale, tracking, và độ tương phản serif/sans thay vì màu sắc. Các surface phẳng, không có shadow; cấu trúc đến từ border-radius rộng (24-32px trên card, button hình pill hoàn toàn) và tracking chặt trên serif. Kết quả mang phong cách monograph của studio thiết kế hoặc catalog in ấn hạng sang, không phải landing page B2B SaaS điển hình. Mật độ thoải mái — base 4px, section gap 48px, card padding 28-32px — với hero một cột căn giữa, thoáng đãng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, nền CTA filled — là vật mang trọng lượng thị giác duy nhất trong một bảng màu vốn trống rỗng |
| Paper Cream | `#f2f1ed` | `--color-paper-cream` | Canvas trang, surface card, và nền mặc định — màu trắng ngà ấm áp giúp thương hiệu khác biệt với màu trắng SaaS lâm sàng |
| Warm Border | `#dbd7cd` | `--color-warm-border` | Surface nâng cao, đường kẻ mảnh, và sự phân cách card trên card — đậm hơn canvas một tông để tạo cấu trúc mà không cần độ tương phản cao |
| Stone Gray | `#737373` | `--color-stone-gray` | Body text phụ, label mờ, border nhẹ — không bao giờ dùng cho primary copy |
| Ash Gray | `#999999` | `--color-ash-gray` | Tertiary text, helper copy, trạng thái disabled — giọng nói nhỏ nhất trong hệ thống chữ |
| Pure White | `#ffffff` | `--color-pure-white` | Chữ trên nền CTA tối filled, thỉnh thoảng dùng làm surface card khi cần độ tương phản cao hơn với canvas kem |

## Tokens — Typography

### bureauSerif — Toàn bộ headline và display text. Weight 200 là phản quy tắc — hầu hết editorial site dùng weight 300-400 cho serif headlines; sự thì thầm siêu nhẹ buộc serif mang cảm giác uy quyền lặng lẽ thay vì tuyên bố. Line-height cố định ở 1.0 tạo ra baseline chồng lên nhau chặt chẽ, trông như được đặt có chủ đích thay vì mặc định trình duyệt. Tracking khóa ở -0.03em trên mọi kích thước, thắt chặt các chữ cái thành một giọng display gắn kết. · `--font-bureauserif`
- **Thay thế:** Cormorant Garamond (weight 300) hoặc EB Garamond (weight 400) — không có Google Font nào khớp chính xác weight 200; Cormorant ở weight 300 là serif gần nhất với trọng lượng thì thầm
- **Weights:** 200
- **Kích thước:** 20px, 28px, 40px, 72px
- **Line height:** 1.00
- **Letter spacing:** -0.03em đồng nhất trên mọi kích thước
- **OpenType features:** `"liga" on, "kern" on`
- **Vai trò:** Toàn bộ headline và display text. Weight 200 là phản quy tắc — hầu hết editorial site dùng weight 300-400 cho serif headlines; sự thì thầm siêu nhẹ buộc serif mang cảm giác uy quyền lặng lẽ thay vì tuyên bố. Line-height cố định ở 1.0 tạo ra baseline chồng lên nhau chặt chẽ, trông như được đặt có chủ đích thay vì mặc định trình duyệt. Tracking khóa ở -0.03em trên mọi kích thước, thắt chặt các chữ cái thành một giọng display gắn kết.

### Inter — Body text, nav items, buttons, labels, metadata — toàn bộ UI không phải display. Một weight duy nhất (400) không có biến thể bold giúp phía sans trung tính để serif chiếm ưu thế. Tracking hơi âm trên body (-0.011em ở 16px) và gần như bằng 0 trên text nhỏ, mang lại cho Inter cảm giác set, editorial thay vì cảm giác web mặc định. · `--font-inter`
- **Thay thế:** Inter (Google Font khớp chính xác)
- **Weights:** 400
- **Kích thước:** 12px, 14px, 16px
- **Line height:** 1.33, 1.43, 1.50
- **Letter spacing:** -0.013em ở 12px, -0.011em ở 14px, -0.009em ở 16px, 0em ở 16px+
- **Vai trò:** Body text, nav items, buttons, labels, metadata — toàn bộ UI không phải display. Một weight duy nhất (400) không có biến thể bold giúp phía sans trung tính để serif chiếm ưu thế. Tracking hơi âm trên body (-0.011em ở 16px) và gần như bằng 0 trên text nhỏ, mang lại cho Inter cảm giác set, editorial thay vì cảm giác web mặc định.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 16 | -0.01px | `--text-caption` |
| body-sm | 14px | 20 | -0.11px | `--text-body-sm` |
| body | 16px | 24 | -0.18px | `--text-body` |
| subheading | 20px | 20 | -0.6px | `--text-subheading` |
| heading-sm | 28px | 28 | -0.84px | `--text-heading-sm` |
| heading | 40px | 40 | -1.2px | `--text-heading` |
| display | 72px | 72 | -2.16px | `--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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 24-32px |
| inputs | 8px |
| buttons | 9999px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 48px
- **Card padding:** 28-32px
- **Element gap:** 16px

## Components

### Primary Filled CTA Button
**Vai trò:** Element hành động có độ tương phản cao duy nhất trong hệ thống

Nền đen (#000000), chữ trắng (#ffffff) ở Inter 14px weight 400, radius hình pill hoàn toàn (9999px), padding 10px 18px. Không border, không shadow. Hình học pill tròn trên button đơn sắc là phong cách hành động đặc trưng — nó giống như một con dấu vật lý đóng lên trang kem.

### Ghost Navigation Link
**Vai trò:** Nav items cấp cao nhất và inline links

Inter 14px weight 400, màu chữ #000000, không gạch chân mặc định. Radius 8px từ dữ liệu border-radius áp dụng cho bất kỳ underline hoặc indicator nào. Nằm trực tiếp trên canvas kem, không có nền.

### Top Announcement Bar
**Vai trò:** Thanh thông báo mỏng trên cùng trang

Strip full-width, Inter 12-14px weight 400, chữ #000000, không fill nền (trong suốt trên canvas). Padding dọc chặt (~8px). Thanh này sát mép trang — không inset, không tách biệt khỏi canvas kem.

### Editorial Display Headline
**Vai trò:** Hero và section titles

bureauSerif weight 200, kích thước 40-72px, line-height 1.0, letter-spacing -0.03em. Căn giữa. Trọng lượng siêu nhẹ ở kích thước lớn với tracking chặt tạo ra cảm giác thì thầm lặng lẽ, được sắp chữ thủ công — đây là lựa chọn thị giác định hình toàn bộ hệ thống.

### Body Subtitle
**Vai trò:** Copy hỗ trợ dưới headlines

Inter 16px weight 400, màu #000000, line-height 1.5, letter-spacing -0.009em. Căn giữa bên dưới display headlines. Không có màu mờ — ngay cả subtitle copy cũng giữ màu đen hoàn toàn, để độ tương phản serif/sans và kích thước làm công việc phân cấp.

### Partner Logo Strip
**Vai trò:** Hàng bằng chứng xã hội bên dưới hero

Hàng ngang các logo thương hiệu đơn sắc (aikido, Parim, LIVEFORCE, finbite, ParcelTracker), wordmarks Inter 16px hoặc SVG marks thang độ xám. Khoảng cách đều nhau (~32-40px column gap), căn giữa trên canvas kem. Logo được render ở #000000 — không xử lý màu.

### Card Surface
**Vai trò:** Content cards và feature blocks

Nền #ffffff (cao hơn canvas kem một bậc), border-radius 24-32px, padding 28-32px. Không shadow, không border. Radius lớn là lựa chọn đặc trưng — cards trông như những tấm slab mềm, bo tròn thay vì panel sắc cạnh.

### Navigation Bar
**Vai trò:** Navigation cố định phía trên

Nền trong suốt trên canvas kem. Logo trái, nav links và sign-in phải. Inter 14px weight 400, #000000. Chiều cao tối thiểu (~56-64px), không border dưới, không fill nền — nó nổi trên canvas.

### Sign In Link
**Vai trò:** Hành động nav phụ

Inter 14px weight 400, chữ #000000, không nền, không border. Đặt căn phải trong nav bar. Trọng lượng thị giác ngang bằng nav link — không có xử lý 'button' riêng cho sign-in.

## Do's and Don'ts

### Do
- Dùng bureauSerif weight 200 cho mọi headlines — không bao giờ thay thế bằng weight serif nặng hơn; sự thì thầm chính là bản sắc
- Chỉ dùng Inter weight 400 cho mọi text không phải display — không đưa vào biến thể bold, medium, hoặc semibold
- Đặt line-height của serif headline chính xác là 1.0 — điều này tạo ra baseline editorial chặt chẽ, chồng lên nhau, định nghĩa giọng display
- Áp dụng -0.03em letter-spacing cho mọi text serif bất kể kích thước — tracking đồng nhất là thứ làm serif cảm thấy gắn kết trên toàn bộ scale
- Dùng #f2f1ed làm canvas trang — không bao giờ dùng pure white #ffffff cho nền trang; kem ấm là nền tảng của thương hiệu
- Xây dựng sự phân cách component qua radius (24-32px) và whitespace, không phải shadow hay border — hệ thống cố tình không có shadow
- Dùng button hình pill (9999px radius) cho mọi hành động — không có button góc sắc hoặc bo nhẹ trong hệ thống này

### Don't
- Không đưa vào bất kỳ màu sắc nào — bảng màu 0% colorful theo thiết kế; thêm xanh, đỏ, hoặc xanh lá phá vỡ register editorial
- Không dùng weight bold hoặc semibold trong bất kỳ font family nào — hệ thống nói ở đúng một weight mỗi family
- Không đặt serif line-height trên 1.0 — leading thoải mái phá hủy cảm giác editorial chặt chẽ
- Không dùng #ffffff làm nền trang hoặc section — kem ấm là bất khả thương lượng; trắng chỉ dành cho surface card và chữ trên button
- Không thêm drop shadows, glows, hoặc bất kỳ hiệu ứng nâng cao nào — xử lý surface phẳng là nguyên tắc cốt lõi
- Không dùng border mỏng hơn 1px hoặc sáng hơn #dbd7cd để phân cách cấu trúc — dựa vào radius và whitespace thay vào đó
- Không trộn serif và sans trong một khối text — headings là serif, body là sans, ranh giới giữa chúng phải tuyệt đối

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#f2f1ed` | Nền toàn trang — base kem ấm |
| 1 | Card | `#ffffff` | Cards và panel nâng cao cần màu trắng sạch trên nền kem |
| 2 | Ink Surface | `#000000` | CTA buttons filled và khối UI tối |

## Elevation

Không có shadow ở bất kỳ đâu. Cấu trúc được xây dựng hoàn toàn qua độ tương phản màu giữa canvas kem, surface card trắng, và mực đen. Border được dùng một cách tiết kiệm — thiết kế dựa vào radius rộng (24-32px) và whitespace để xác định ranh giới component thay vì elevation hay drop shadows.

## Imagery

Hình ảnh tối giản và mang tính trang trí hơn là thông tin. Hero được neo bởi một illustration ribbon/wave xanh-vàng uốn lượn tràn full-width — đây là element có màu sắc duy nhất trên trang và mang phong cách chữ ký thương hiệu hơn là ảnh chụp màn hình sản phẩm. Bên dưới hero, một hàng logo đối tác đơn sắc cung cấp bằng chứng xã hội. Không có product photography, không có UI screenshots, và không có lifestyle imagery trên trang hiển thị. Hệ thống mặc định là pure typography trên canvas kem, với wave illustration là điểm nhấn biểu cảm duy nhất.

## Layout

Hero một cột căn giữa với serif display headline, Inter subtitle, và một CTA button filled duy nhất — tất cả xếp chồng và căn giữa với khoảng không dọc thoáng đãng. Hero nằm trên canvas kem full-width không có khung hình. Bên dưới, một wave illustration xanh/vàng trang trí trải dài edge-to-edge như một section divider. Nội dung sau đó chảy theo các band căn giữa xen kẽ: partner logo strip, tiếp theo có thể là feature sections ở dạng xếp chồng hoặc hai cột. Nhịp điệu tổng thể rộng rãi và editorial — section gap rộng (48px+), không sidebar, không multi-column grids trong vùng hiển thị. Navigation là top bar tối giản với logo trái, links phải, trong suốt trên canvas kem.

## Agent Prompt Guide

**Quick Color Reference**
- Text: #000000
- Background: #f2f1ed
- Card surface: #ffffff
- Border: #dbd7cd
- Muted text: #737373
- primary action: #000000 (filled action)

**3 Example Component Prompts**

1. Tạo một hero section: canvas #f2f1ed, layout căn giữa. Display headline ở 72px bureauSerif weight 200, #000000, line-height 1.0, letter-spacing -2.16px. Subtitle ở 16px Inter weight 400, #000000, căn giữa. Primary CTA button: nền #000000, chữ #ffffff ở 14px Inter weight 400, radius 9999px, padding 10px 18px, không shadow.

2. Tạo một feature card: nền #ffffff, border-radius 32px, padding 32px. Không shadow, không border. Headline ở 28px bureauSerif weight 200, #000000, line-height 1.0, letter-spacing -0.84px. Body text ở 16px Inter weight 400, #000000, line-height 1.5. Khoảng cách 24px giữa headline và body.

3. Tạo một partner logo strip: hàng full-width trên canvas #f2f1ed, 5 logo đơn sắc #000000, căn giữa với khoảng cách 40px giữa mỗi logo, không label, padding dọc 48px phía trên và dưới.

## Typographic Philosophy

Hệ thống thực thi một hợp đồng hai font, hai weight nghiêm ngặt: bureauSerif ở 200 cho display, Inter ở 400 cho mọi thứ khác. Đây không phải giới hạn — đây là một tuyên bố thiết kế. Bằng cách từ chối thêm biến thể weight, whisper-weight của serif trở thành thứ ồn ào nhất trên trang, và sự trung tính của sans trở nên vô hình. Một AI agent xây dựng trang mới không được đưa vào weight 500/600/700 để tạo điểm nhấn — điểm nhấn đến từ việc chuyển đổi font family, tăng kích thước, và điều chỉnh tracking mà thôi.

## Similar Brands

- **Linear** — Cùng sự kiềm chế đơn sắc với một surface pha tông ấm duy nhất và độ tương phản typographic serif/sans — dù Linear nghiêng về tối hơn
- **Pitch** — Typography editorial với custom serif headlines trên nền neutral canvas, mật độ thoải mái, và hình học card bo tròn
- **Vercel** — Chủ nghĩa tối giản cực đoan với bảng màu gần như bằng không, whitespace rộng rãi, và display typography cỡ lớn làm element thị giác chính
- **Stripe** — Nhịp điệu spacing thoải mái, pattern hero căn giữa, và việc sử dụng tông trung tính ấm thay vì đen/trắng thuần

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper-cream: #f2f1ed;
  --color-warm-border: #dbd7cd;
  --color-stone-gray: #737373;
  --color-ash-gray: #999999;
  --color-pure-white: #ffffff;

  /* Typography — Font Families */
  --font-bureauserif: 'bureauSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 16;
  --tracking-caption: -0.01px;
  --text-body-sm: 14px;
  --leading-body-sm: 20;
  --tracking-body-sm: -0.11px;
  --text-body: 16px;
  --leading-body: 24;
  --tracking-body: -0.18px;
  --text-subheading: 20px;
  --leading-subheading: 20;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 28;
  --tracking-heading-sm: -0.84px;
  --text-heading: 40px;
  --leading-heading: 40;
  --tracking-heading: -1.2px;
  --text-display: 72px;
  --leading-display: 72;
  --tracking-display: -2.16px;

  /* Typography — Weights */
  --font-weight-extralight: 200;
  --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-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 48px;
  --card-padding: 28-32px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 24-32px;
  --radius-inputs: 8px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-canvas: #f2f1ed;
  --surface-card: #ffffff;
  --surface-ink-surface: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper-cream: #f2f1ed;
  --color-warm-border: #dbd7cd;
  --color-stone-gray: #737373;
  --color-ash-gray: #999999;
  --color-pure-white: #ffffff;

  /* Typography */
  --font-bureauserif: 'bureauSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 16;
  --tracking-caption: -0.01px;
  --text-body-sm: 14px;
  --leading-body-sm: 20;
  --tracking-body-sm: -0.11px;
  --text-body: 16px;
  --leading-body: 24;
  --tracking-body: -0.18px;
  --text-subheading: 20px;
  --leading-subheading: 20;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 28;
  --tracking-heading-sm: -0.84px;
  --text-heading: 40px;
  --leading-heading: 40;
  --tracking-heading: -1.2px;
  --text-display: 72px;
  --leading-display: 72;
  --tracking-display: -2.16px;

  /* 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-48: 48px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-128: 128px;

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