# Acceptandproceed

> # Acceptandproceed — Style Reference

## Prompt Content

```
# Acceptandproceed — Style Reference
> editorial broadsheet trên nền giấy ấm

**Theme:** light

Accept & Proceed xem trình duyệt như một tờ broadsheet biên tập: một sans-serif một weight ở chín kích cỡ, nền canvas kem ấm, và một bảng màu gần như hoàn toàn không màu — để nhiếp ảnh và layout đảm nhận vai trò biểu cảm. Hệ thống phân cấp được xây dựng hoàn toàn từ kích thước — weight 400 được dùng cho mọi thứ, từ caption 8px đến display 72px, vì vậy độ tương phản đến từ bước nhảy kích thước, không phải độ đậm. Bề mặt mang tông giấy ấm: #f9f7f3 là trang giấy, #ecebe7 là nền button, và chrome cấu trúc duy nhất là đường viền đen 1px mảnh. Các component được thiết kế một cách nhẹ nhàng có chủ đích — pill buttons với border-radius 100px, badge nhỏ với góc 3.4px, card radius 8px — để hình ảnh dự án và nội dung editorial dài mang tải trọng của trang. Hệ thống mang cảm giác như đang lật giở một cuốn niên giám thiết kế được typeset kỹ lưỡng, chứ không phải lướt một dashboard SaaS.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Ink | `#000000` | `--color-ink` | Text chính, đường viền mảnh, icon strokes, badge outlines, card outlines — màu đường kẻ cấu trúc duy nhất trong hệ thống |
| Paper Warm | `#f9f7f3` | `--color-paper-warm` | Canvas trang, bề mặt card, nền body — lớp nền kem ấm cho mọi nội dung |
| Bone | `#ecebe7` | `--color-bone` | Bề mặt nổi, nền pill button, nền input, nền link — ấm hơn/tối hơn canvas một bước để tạo chiều sâu xúc giác mà không cần shadow |
| White | `#ffffff` | `--color-white` | Màu headline trên overlay hero tối, highlight wash trên card, accent bề mặt đảo ngược |
| Graphite | `#8c8c8c` | `--color-graphite` | Đường viền phụ, text metadata mờ, text phụ và viền badge — bước xám ấm ở giữa thang màu trung tính |
| Ash | `#a2a1a1` | `--color-ash` | Viền badge cấp ba và divider nhẹ — xám cấu trúc nhạt nhất cho separator êm nhất |
| Charcoal | `#333333` | `--color-charcoal` | Text input và copy trong form field — mềm hơn đen tuyền cho việc đọc dài trong ngữ cảnh form |

## Tokens — Typography

### Messina Sans — Kiểu chữ workhorse duy nhất — dùng cho mọi thứ từ micro-label (8px) đến display headline (72px). Weight 400 là weight duy nhất; hệ thống phân cấp được tạo hoàn toàn bằng kích thước và line-height, không bao giờ dùng tương phản weight. Điều này tạo ra một giọng văn editorial nhẹ nhàng, nơi kiểu chữ thì thầm ở mọi cấp độ thay vì hét lên bằng độ đậm. · `--font-messina-sans`
- **Thay thế:** Inter, Söhne, GT America, hoặc Untitled Sans (neo-grotesque sạch sẽ với x-height và aperture tương tự)
- **Weights:** 400
- **Kích thước:** 8px, 10px, 14px, 17px, 20px, 24px, 34px, 50px, 72px
- **Line height:** 1.00 (8–10px) đến 1.71 (display 72px)
- **Letter spacing:** -0.01em nhất quán ở mọi kích thước — hơi siết nhẹ, càng rõ hơn ở kích thước display lớn, làm siết chặt silhouette của headline
- **Vai trò:** Kiểu chữ workhorse duy nhất — dùng cho mọi thứ từ micro-label (8px) đến display headline (72px). Weight 400 là weight duy nhất; hệ thống phân cấp được tạo hoàn toàn bằng kích thước và line-height, không bao giờ dùng tương phản weight. Điều này tạo ra một giọng văn editorial nhẹ nhàng, nơi kiểu chữ thì thầm ở mọi cấp độ thay vì hét lên bằng độ đậm.

### Letterformvariations 04 Dmgx — Kiểu chữ display trang trí, dùng rất hạn chế cho những khoảnh khắc typographic — giọng văn thử nghiệm hoặc tương phản để phá vỡ sự đơn điệu của Messina Sans, dành riêng cho những điểm nhấn editorial · `--font-letterformvariations-04-dmgx`
- **Weights:** 400
- **Kích thước:** 34px
- **Line height:** 1.00
- **Vai trò:** Kiểu chữ display trang trí, dùng rất hạn chế cho những khoảnh khắc typographic — giọng văn thử nghiệm hoặc tương phản để phá vỡ sự đơn điệu của Messina Sans, dành riêng cho những điểm nhấn editorial

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 10px | 1.4 | -0.1px | `--text-caption` |
| body-sm | 14px | 1.41 | -0.14px | `--text-body-sm` |
| body | 17px | 1.43 | -0.17px | `--text-body` |
| subheading | 20px | 1.4 | -0.2px | `--text-subheading` |
| heading-sm | 24px | 1.33 | -0.24px | `--text-heading-sm` |
| heading | 34px | 1.29 | -0.34px | `--text-heading` |
| heading-lg | 50px | 1.28 | -0.5px | `--text-heading-lg` |
| display | 72px | 1 | -0.72px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** 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` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 44 | 44px | `--spacing-44` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 8px |
| pills | 100px |
| badges | 3.4px |
| buttons | 20px |

### Layout

- **Section gap:** 64px
- **Card padding:** 12px
- **Element gap:** 8px

## Components

### Pill Button (Primary)
**Vai trò:** Nút hành động chính cho CTA như 'See More' và 'Listen'

Nút pill có nền: nền #ecebe7, border-radius 100px, padding ngang 12–20px, padding dọc 15px. Text bằng Messina Sans weight 400 cỡ 14px, màu #000000. Không viền. Không shadow. Bán kính cao (100px) là dấu ấn — button là pill tròn, không bao giờ là hình chữ nhật.

### Medium Radius Button
**Vai trò:** Nút hành động phụ

Nút bo tròn ít hơn với border-radius 20px. Cùng nền #ecebe7, cùng text weight 400. Được dùng khi pill quá mềm và medium radius mang lại trọng lượng thị giác lớn hơn.

### Project Card
**Vai trò:** Tile dự án nổi bật trong grid 2 cột

Vùng ảnh với border-radius 8px ở mọi góc. Không có nền fill trên card — ảnh nằm trực tiếp trên canvas #f9f7f3. Bên dưới ảnh: tên dự án cỡ 14px weight 400, mô tả cỡ 14px weight 400 màu #000000, tiếp theo là một hàng tag badge có outline.

### Outlined Tag Badge
**Vai trò:** Nhãn phân loại cho dự án (Technology, Design, Digital, Climate, Space)

Badge inline-flex: viền 1px màu #000000 hoặc #8c8c8c, border-radius 3.4px, padding dọc 4–8px, padding ngang 12px. Text bằng Messina Sans weight 400 cỡ 10–14px, màu #000000. Một icon nhỏ có thể xuất hiện inline trước nhãn. Bán kính nhỏ (3.4px) là điểm đặc trưng — không bo tròn hoàn toàn, không sắc cạnh.

### Audio List Row
**Vai trò:** Hàng dạng bảng trong danh mục podcast/audio Endless Vital Activity

Hàng full-width được phân cách bằng đường viền trên 1px #000000. Bốn cột: tên tập (14px, #000000), mô tả (14px, #000000), mã mùa/tập (14px, #000000, căn phải), và nút pill 'Listen' ở ngoài cùng bên phải. Không có padding hàng ngoài divider 1px — cực kỳ dạng bảng và editorial.

### Text Input
**Vai trò:** Trường form cho nhập liệu người dùng

border-radius 100px (pill tròn) trên nền #ecebe7, text màu #333333 cỡ 14px Messina Sans. Không viền nhìn thấy được. Padding ngang 20px. Hình dạng pill báo hiệu ngữ nghĩa thanh tìm kiếm hoặc trường chat.

### Full-Bleed Hero
**Vai trò:** Ảnh phần trên fold

Ảnh full viewport-width không có border-radius. Headline phủ chồng màu trắng (Messina Sans 34–50px, weight 400) căn giữa hoặc căn trái trên ảnh. Không có gradient overlay — text dựa vào độ tương phản của ảnh hoặc một lớp scrim tối nhẹ. Nhãn caption góc dưới bên trái cỡ 10–14px màu trắng.

### Top Navigation
**Vai trò:** Điều hướng toàn site

Thanh ngang trên nền #f9f7f3. Brand wordmark 'Accept & Proceed' ngoài cùng bên trái bằng Messina Sans 14px weight 400. Nhóm link trung tâm: Work, Journal, About, Contact, tất cả weight 400 cỡ 14px. Ngoài cùng bên phải: một link hành động theo ngữ cảnh (ví dụ: 'Endless Vital Activity') cỡ 14px. Không có thanh nền, không có border-bottom — nav nổi trên trang.

### Section Header
**Vai trò:** Nhãn cho các phần nội dung như 'Featured Projects'

Messina Sans 14–17px weight 400 màu #000000, căn trái với margin-bottom 16–24px. Không có divider line, không có uppercase tracking — tiêu đề section chỉ là một từ được đặt kích thước nhẹ nhàng, không phải banner.

### Project Description Block
**Vai trò:** Mô tả dài dưới tiêu đề dự án

Body text bằng Messina Sans 14–17px, weight 400, #000000, line-height ~1.43. Nhiều dòng, wrap tự nhiên. Không có drop cap, không có thụt lề dòng đầu — copy editorial căn trái thẳng.

## Do's and Don'ts

### Nên
- Dùng weight 400 của Messina Sans cho mọi loại chữ — từ caption 8px đến headline 72px. Không bao giờ dùng bold hoặc medium weight; hệ thống phân cấp đến từ kích thước.
- Chỉ dùng bảng màu kem ấm: #f9f7f3 cho canvas, #ecebe7 cho bề mặt tương tác nổi, #000000 cho text và đường viền mảnh. Không có màu sắc nào khác.
- Dùng border-radius 100px cho mọi nút hành động chính và trường input. Pill là hình dạng nút chủ đạo.
- Dùng border-radius 8px cho ảnh dự án và card container. Bo tròn nhẹ này giữ độ sắc nét như in ấn trong khi tránh góc nhọn.
- Phân cách các phần nội dung bằng đường viền mảnh 1px #000000, không phải dải màu hoặc thay đổi nền. Trang đọc như một tờ giấy liền mạch, không phải các panel phân mảnh.
- Để ảnh phủ kín full viewport-width trong hero và các phần nổi bật. Ảnh là trang; type và chrome lùi lại phía sau.
- Dùng border-radius 3.4px cho mọi badge và tag chip. Đây là micro-radius đặc trưng — không bo tròn hoàn toàn, không sắc cạnh — đọc như nhãn editorial.

### Không nên
- Không dùng bold, semibold, hoặc bất kỳ weight nào không phải 400. Hệ thống single-weight là toàn bộ giọng văn typographic; một headline bold sẽ phá vỡ lời thì thầm editorial.
- Không thêm bất kỳ màu nào — không có link xanh, không có lỗi đỏ, không có trạng thái thành công xanh. Mọi thay đổi trạng thái dùng chuyển đổi độ mờ #000000 ↔ #8c8c8c, hoặc bước bề mặt #f9f7f3 ↔ #ecebe7.
- Không áp dụng drop shadow hoặc box-shadow cho bất kỳ element nào. Chiều sâu được truyền đạt bằng màu bề mặt và đường viền mảnh.
- Không dùng border-radius ngoài hệ thống bốn cấp: 3.4px (badges), 8px (cards/images), 20px (secondary buttons), 100px (pills/inputs). Không có 4px, không 12px, không 16px.
- Không dùng uppercase tracking hoặc tăng letter-spacing cho nhãn. Độ siết -0.01em nhất quán trên toàn bộ type scale — không bao giờ mở rộng nó.
- Không thêm icon, illustration, hoặc đồ họa trang trí. Nhiếp ảnh là hình ảnh duy nhất; mọi thứ khác là type và cấu trúc đường viền mảnh.
- Không dùng trạng thái hover có màu. Hover changes trên link và button nên chuyển đổi giữa text/viền #000000 và #8c8c8c, hoặc đảo ngược bề mặt #ecebe7 → #f9f7f3.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Page Canvas | `#f9f7f3` | Nền kem ấm bên dưới mọi thứ — không bao giờ trắng tinh, luôn có tông giấy |
| 1 | Raised Surface | `#ecebe7` | Tối hơn một bước cho pill buttons, inputs, và bề mặt tương tác nhẹ |
| 2 | Inverted Overlay | `#000000` | Phần tối full-bleed (hero overlays) nơi type trắng đọc trên hình ảnh |

## Elevation

- **Tất cả component:** `none — thiết kế cố tình tránh drop shadow`

## Imagery

Nhiếp ảnh là phương tiện thị giác chủ đạo và là biểu hiện chính của thương hiệu. Mọi hình ảnh đều mang tính tài liệu hoặc editorial: đám đông hòa nhạc, sắp đặt bán lẻ, kết xuất sản phẩm của một đồ họa quả địa cầu, không gian triển lãm. Ảnh được trình bày full-bleed (góc zero-radius trong hero, radius 8px trong card), độ phân giải cao, và được xử lý trung thực — không duotone, không gradient overlay, không mặt nạ trang trí. Nhiếp ảnh đảm nhận công việc tạo cảm xúc cho thương hiệu; type và chrome đứng ngoài. Không có illustration, không có bộ icon ở bất kỳ trọng lượng thị giác nào, và không có 3D render. Điểm nhấn đồ họa duy nhất là hình ảnh quả địa cầu/họa tiết chấm được dùng làm hình ảnh dự án. Tỷ lệ ảnh so với text ở mức vừa phải: một ảnh lớn trên mỗi project card, sau đó là một khối mô tả editorial chặt chẽ bên dưới.

## Layout

Hero full-bleed mở đầu trang — một ảnh duy nhất trải dài toàn bộ viewport-width với headline căn giữa hoặc căn trái phủ chồng màu trắng. Bên dưới fold, phần 'Featured Projects' dùng grid bất đối xứng 2 cột (một card lớn bên trái, một card tiêu chuẩn bên phải) với gutter rộng. Project cards có ảnh ở trên, type ở dưới, không có card chrome. Phần 'Endless Vital Activity' dùng layout hàng dạng bảng nghiêm ngặt — 4 cột được phân cách bằng đường kẻ ngang 1px, không có divider dọc, không có nền card. Chuyển tiếp section chỉ được đánh dấu bằng khoảng trắng dọc rộng rãi và một tiêu đề section 14px, không bao giờ bằng thay đổi màu nền. Top nav là một hàng ngang duy nhất nổi trên canvas kem, không có thanh nền hoặc viền. Toàn bộ trang không có max-width, nội dung mở rộng đến full viewport với padding trong khoảng ~24–48px ở mỗi bên.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000
- background: #f9f7f3
- surface (raised): #ecebe7
- border: #000000 (hairline) hoặc #8c8c8c (muted)
- muted text: #8c8c8c
- primary action: không có màu CTA riêng biệt

## 3-5 Example Component Prompts
1. **Tạo một project card**: Canvas #f9f7f3. Ảnh lấp đầy phần trên của card với border-radius 8px. Bên dưới: tên dự án bằng Messina Sans weight 400, 14px, #000000, letter-spacing -0.14px. Mô tả cùng style. Một hàng tag badge có outline ở dưới cùng: viền 1px #000000, radius 3.4px, padding 4px 12px, Messina Sans 10px weight 400.

2. **Tạo một full-bleed hero**: Ảnh full viewport-width không có radius. Headline 'Design with community.' phủ chồng căn giữa màu trắng, Messina Sans weight 400, 50px, letter-spacing -0.5px, line-height 1.28. Caption góc dưới bên trái bằng Messina Sans 10px màu trắng.

3. **Tạo một navigation row**: Trên canvas #f9f7f3. Brand 'Accept & Proceed' bên trái bằng Messina Sans 14px weight 400, #000000. Link trung tâm (Work, Journal, About, Contact) cùng style, cách nhau 24px. Link hành động bên phải cùng style. Không nền, không viền.

4. **Tạo một pill button**: Nền #ecebe7, border-radius 100px, padding 12px 20px. Text bằng Messina Sans weight 400, 14px, #000000, letter-spacing -0.14px. Không viền, không shadow. Hình dạng pill tròn — không bao giờ hình chữ nhật.

5. **Tạo một audio list row**: Full-width trên nền #f9f7f3. Chỉ có border-top 1px #000000. Bốn cột: title (14px #000000), description (14px #000000), season code (14px #000000 căn phải), nút pill 'Listen' (radius 100px, nền #ecebe7, text 14px #000000). Không có padding dọc ngoài ~16px.

## Similar Brands

- **Pentagram** — Cùng hệ thống editorial không màu: sans-serif một weight, ảnh dự án full-bleed, cấu trúc đường viền mảnh, và bảng màu gần như bằng không để công việc lên tiếng
- **Manual Studio** — Cùng sự kiềm chế: weight 400 trên mọi kích thước chữ, canvas trắng ngà ấm, pill buttons, và layout portfolio dạng project-grid không có chrome trang trí
- **Locomotive (locomotive.ca)** — Cùng typography editorial một weight, ảnh full-bleed, và kỷ luật để một kiểu chữ làm tất cả công việc ở mọi kích thước
- **Buck (buck.co)** — Cùng hero cinematic full-bleed, chrome không màu, và layout portfolio dạng project-card nơi hình ảnh mang biểu hiện thương hiệu
- **Resn** — Cùng thẩm mỹ agency vừa thử nghiệm vừa kiềm chế: nhiếp ảnh quy mô lớn làm giọng văn thị giác, hệ thống phân cấp type tối thiểu, và không trang trí màu sắc

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-paper-warm: #f9f7f3;
  --color-bone: #ecebe7;
  --color-white: #ffffff;
  --color-graphite: #8c8c8c;
  --color-ash: #a2a1a1;
  --color-charcoal: #333333;

  /* Typography — Font Families */
  --font-messina-sans: 'Messina Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-letterformvariations-04-dmgx: 'Letterformvariations 04 Dmgx', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.4;
  --tracking-caption: -0.1px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.41;
  --tracking-body-sm: -0.14px;
  --text-body: 17px;
  --leading-body: 1.43;
  --tracking-body: -0.17px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.24px;
  --text-heading: 34px;
  --leading-heading: 1.29;
  --tracking-heading: -0.34px;
  --text-heading-lg: 50px;
  --leading-heading-lg: 1.28;
  --tracking-heading-lg: -0.5px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -0.72px;

  /* 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-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;

  /* Layout */
  --section-gap: 64px;
  --card-padding: 12px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 3.4px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-cards: 8px;
  --radius-pills: 100px;
  --radius-badges: 3.4px;
  --radius-buttons: 20px;

  /* Surfaces */
  --surface-page-canvas: #f9f7f3;
  --surface-raised-surface: #ecebe7;
  --surface-inverted-overlay: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-paper-warm: #f9f7f3;
  --color-bone: #ecebe7;
  --color-white: #ffffff;
  --color-graphite: #8c8c8c;
  --color-ash: #a2a1a1;
  --color-charcoal: #333333;

  /* Typography */
  --font-messina-sans: 'Messina Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-letterformvariations-04-dmgx: 'Letterformvariations 04 Dmgx', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.4;
  --tracking-caption: -0.1px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.41;
  --tracking-body-sm: -0.14px;
  --text-body: 17px;
  --leading-body: 1.43;
  --tracking-body: -0.17px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.24px;
  --text-heading: 34px;
  --leading-heading: 1.29;
  --tracking-heading: -0.34px;
  --text-heading-lg: 50px;
  --leading-heading-lg: 1.28;
  --tracking-heading-lg: -0.5px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -0.72px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;

  /* Border Radius */
  --radius-md: 3.4px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-full: 100px;
}
```