# Henry

> Henry — Style Reference

## Prompt Content

```
# Henry — Style Reference
> Poster broadside Gothic trên giấy kem ấm. Một trăm phần trăm đơn sắc, không có điểm nhấn màu, toàn bộ cường độ thị giác được tạo ra bởi display type và các đảo ngược mực-giấy full-bleed.

**Theme:** mixed

Henry Codes mang phong cách broadside biên tập in bằng mực ấm: headline gần đen khắc trên nền giấy kem, xen kẽ với các mảng tối full-bleed nơi serif type màu kem phát sáng. Bảng màu là đơn sắc ấm một trăm phần trăm — không có điểm nhấn màu, không có màu sản phẩm, không có link xanh — mọi quyết định thị giác đều đến từ scale, weight và đảo ngược. Type chính là thương hiệu: một display serif (Louize) đặt thơ và văn xuôi biên tập, một condensed display sans (Manuka) đóng dấu header section ở 200–370px, và một neo-grotesque (Neue Montreal) đảm nhận toàn bộ UI ở 12–24px. Hệ thống spacing hà khắc: bước nhảy 4–32px, một radius duy nhất (12px), không có shadow. Các section lật giữa giấy và mực như một tờ broadsheet, và hầu hết màn hình nên bị chi phối bởi hai hoặc ba từ khổng lồ thay vì ảnh sản phẩm minh họa.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Paper | `#fafafa` | `--color-paper` | Nền trang, bề mặt card, type trong section inverted — nền kem trắng nơi mọi chữ tối nằm trên |
| Hairline | `#eeeeee` | `--color-hairline` | Viền card và tile — chỉ hiện khi đặt trên Paper |
| Midstone | `#9f9f9f` | `--color-midstone` | Viền nav, viền muted, viền trang trí nhạt trên section tối |
| Ash | `#666666` | `--color-ash` | Viền thứ cấp, UI text muted, divider ưu tiên thấp |
| Pebble | `#b3b3b3` | `--color-pebble` | Text và viền nav không hoạt động |
| Sepia | `#3e3b36` | `--color-sepia` | Viền đậm, text heading thứ cấp — màu nâu-đen ấm nằm cạnh Headline Ink |
| Headline Ink | `#2a2722` | `--color-headline-ink` | Text chính, body ink, viền chủ đạo, nav rules — màu đen ấm mang mọi từ trên trang |

## Tokens — Typography

### Neue Montreal — Toàn bộ UI, body, nav và label nhỏ ở 12–32px. Weight 400 cho body, 700 cho nav items và label. Tracking -0.01em siêu chặt ngay cả ở body size — type condensed, không thoáng · `--font-neue-montreal`
- **Thay thế:** Inter, Söhne, General Sans
- **Weights:** 400, 700
- **Sizes:** 12px, 16px, 20px, 24px, 32px
- **Line height:** 1.00–1.50
- **Letter spacing:** -0.01em ở mọi size
- **Vai trò:** Toàn bộ UI, body, nav và label nhỏ ở 12–32px. Weight 400 cho body, 700 cho nav items và label. Tracking -0.01em siêu chặt ngay cả ở body size — type condensed, không thoáng

### Louize Display — Display serif biên tập cho headline, section title và khối văn xuôi căn giữa trong section tối. Italic serif hẹp, tương phản cao kết hợp với roman tạo cảm giác broadside. 77px là section hero tiêu chuẩn, 116–132px là marquee headline · `--font-louize-display`
- **Thay thế:** Fraunces, GT Sectra, Lyon Display
- **Weights:** 400
- **Sizes:** 32px, 35px, 77px, 116px, 126px, 132px
- **Line height:** 0.80–1.20
- **Vai trò:** Display serif biên tập cho headline, section title và khối văn xuôi căn giữa trong section tối. Italic serif hẹp, tương phản cao kết hợp với roman tạo cảm giác broadside. 77px là section hero tiêu chuẩn, 116–132px là marquee headline

### Louize — Serif thứ cấp cho copy biên tập ngắn và link text đi cùng Louize Display · `--font-louize`
- **Thay thế:** Fraunces, GT Sectra
- **Weights:** 400
- **Sizes:** 16px, 20px, 24px
- **Line height:** 1.20–1.30
- **Letter spacing:** -0.0100em
- **Vai trò:** Serif thứ cấp cho copy biên tập ngắn và link text đi cùng Louize Display

### Manuka — Ultra-condensed display sans đóng dấu ở scale gần kiến trúc (226–371px) cho masthead section như SELECTED WORKS. Line-height 0.75 khóa glyph thành một slab ngang chặt chẽ trải dài edge-to-edge. Chỉ dùng white-on-ink hoặc ink-on-paper, luôn một weight, luôn uppercase · `--font-manuka`
- **Thay thế:** Druk, Condor, Antonio
- **Weights:** 400
- **Sizes:** 226px, 371px
- **Line height:** 0.75–0.80
- **Vai trò:** Ultra-condensed display sans đóng dấu ở scale gần kiến trúc (226–371px) cho masthead section như SELECTED WORKS. Line-height 0.75 khóa glyph thành một slab ngang chặt chẽ trải dài edge-to-edge. Chỉ dùng white-on-ink hoặc ink-on-paper, luôn một weight, luôn uppercase

### Type Scale

| Vai trò | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.12px | `--text-caption` |
| body | 16px | 1.5 | -0.16px | `--text-body` |
| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.24px | `--text-heading-sm` |
| heading | 32px | 1.1 | -0.32px | `--text-heading` |
| heading-lg | 77px | 0.9 | — | `--text-heading-lg` |
| display | 132px | 0.8 | — | `--text-display` |
| display-xl | 371px | 0.75 | — | `--text-display-xl` |

## 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` |
| 32 | 32px | `--spacing-32` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 224 | 224px | `--spacing-224` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 12px |
| cards | 12px |
| buttons | 12px |

### Layout

- **Section gap:** 64-96px
- **Card padding:** 16px
- **Element gap:** 16px

## Components

### Masthead Display Headline
**Vai trò:** Typography định nghĩa hero và section

Louize Display ở 116–132px, weight 400, line-height 0.8, màu #2a2722 trên Paper hoặc #fafafa trên Ink. Đôi khi được xen với một cụm italic Louize Display ở nửa kích thước đặt trong cùng baseline (ví dụ: 'of the' italic ở 35px đặt trong 'TRUE TERRORS / NEW DARK WEB' ở 132px). Không tracking, không all-caps, dựa vào tương phản serif để tạo sự hiện diện.

### Stamped Display Section Header
**Vai trò:** Tiêu đề section full-bleed trên dải inverted tối

Manuka ở 226–371px, weight 400, line-height 0.75, uppercase, màu #fafafa trên #2a2722. Trải dài edge-to-edge với dấu em-dash hoặc rule theo sau. Một weight, một màu — slab type condensed là toàn bộ bản sắc của section.

### Top Ticker Banner
**Vai trò:** Dải thông báo full-bleed phía trên masthead

Neue Montreal 12px, weight 400, letter-spacing -0.12px, màu #2a2722, đặt uppercase trên Paper. Tùy chọn hairline divider ngang #2a2722 1px ở trên và dưới. Padding 4–6px dọc, full-bleed.

### Inverted Editorial Letter
**Vai trò:** Khối văn xuôi căn giữa trên section tối full-bleed

Nền #2a2722, padding 48–64px dọc, full-bleed. Body text trong Louize Display ở 32px, weight 400, line-height 1.2, màu #fafafa, text-align center. Tùy chọn small-caps eyebrow ở trên và dưới ('A BRIEF LETTER FROM THE EDITOR', 'A LETTER FROM THE WORK DESK') trong Neue Montreal 12px, weight 400, letter-spacing -0.12px, màu #fafafa, opacity 0.6.

### Nav Link (Uppercase)
**Vai trò:** Mục điều hướng đầu trang

Neue Montreal 12–16px, weight 700, uppercase, màu #2a2722, letter-spacing -0.12px. Không gạch chân, không nền. Trạng thái active giữ nguyên màu nhưng được đặt ở size lớn hơn (16–20px) — sự nhấn mạnh đến từ scale, không phải màu sắc hay weight.

### Section Divider Rule
**Vai trò:** Phân cách ngang giữa các section biên tập

1px solid #2a2722, rộng full-bleed, không margin. Dùng làm ngắt typographic, không bao giờ trang trí.

### Brand Ticker Strip
**Vai trò:** Tên thương hiệu lặp lại trong dải marquee ngang

Dải tối full-bleed (#2a2722). Tên thương hiệu trong Louize Display ở 24–32px, weight 400, màu #fafafa, lặp lại ngang với gap chặt. Xen kẽ với tag 'COMING SOON' nhỏ (Neue Montreal 12px, weight 400, uppercase, #fafafa, radius 12px, padding 4px 8px, border 1px #fafafa).

### Coming Soon Tag
**Vai trò:** Status pill phủ trên mục nhập brand ticker

Neue Montreal 12px, weight 400, uppercase, màu #fafafa, border 1px solid #fafafa, radius 12px, padding 4px 8px. Không nền fill — chỉ biến thể ghost outline.

### Coordinate Footer
**Vai trò:** Dòng footer nhỏ phong cách monospaced

Neue Montreal 12px, weight 400, letter-spacing -0.12px, màu #2a2722, định dạng một dòng '° 43°31'56" N 104° 58' 0.94" (DENVER, COLORADO) — 11:27 PM — ● 48°9 @ N 39°43'31'56" W 104°58' 0.94" (DENVER, COLOR...'. Uppercase với dấu phân cách em-dash.

### Hero Halftone Plate
**Vai trò:** Khối minh họa bên phải trong hero

Vùng ảnh full-height (~60% chiều rộng hero), không border-radius (góc vuông), minh họa halftone đơn sắc trong Headline Ink trên Paper. Hoạt động như đối trọng typographic với display headline — không caption, không label.

### Footnotes / Meta Line
**Vai trò:** Caption small-caps nhỏ bên dưới tác phẩm chính

Neue Montreal 12px, weight 400, uppercase, letter-spacing -0.12px, màu #2a2722. Dùng cho dòng attribution kiểu 'READ THE CASE STUDY ON GODCOMMON.COM'.

## Do's and Don'ts

### Do
- Dùng Louize Display ở 77px+ cho mọi headline định nghĩa section; dưới mức đó, cảm giác biên tập sụp đổ thành web type chung chung
- Đặt body và UI type trong Neue Montreal ở 12/16/20/24/32px với letter-spacing -0.01em — không bao giờ để body text thoáng hơn line-height 1.5
- Xen kẽ section Paper (#fafafa) và Ink (#2a2722) dưới dạng dải full-bleed; không bao giờ gradient-blend giữa chúng, không bao giờ đặt card vượt qua ranh giới
- Dùng 12px làm border-radius duy nhất cho card, button và tag — không góc vuông, không pill shapes (không 9999px)
- Đặt toàn bộ display typography trong #2a2722 trên Paper hoặc #fafafa trên Ink — không màu bề mặt thứ ba, không card có shadow, không panel tinted
- Chỉ dùng Manuka cho masthead section lớn nhất (226–371px) và luôn một weight, một case, một màu — type tự làm việc một mình
- Để 90% trang là Paper hoặc Ink trống; vùng dày đặc chỉ giới hạn ở brand ticker và bottom-byline

### Don't
- Không bao giờ đưa màu nhấn chromatic vào — hệ thống là đơn sắc ấm một trăm phần trăm, bất kỳ màu xanh/đỏ/xanh lá nào cũng phá vỡ bản sắc broadside
- Không bao giờ dùng button CTA màu có fill — role evidence cho thấy không có action background nào; sự nhấn mạnh đến từ scale và inversion, không phải fill
- Không bao giờ áp box-shadow, drop-shadow hoặc glow — không có shadow nào được phát hiện và thêm chúng biến cảm giác in ấn biên tập thành card UI SaaS chung chung
- Không bao giờ đặt body copy trong Louize Display ở 116–132px; display serif chỉ dành cho headline và trở nên khó đọc dưới 32px trên đoạn văn dài
- Không bao giờ dùng border-radius khác 12px; không 0px sắc, không pill, không làm tròn bất đối xứng
- Không bao giờ phá vỡ nhị phân Paper/Ink bằng panel xám, bề mặt muted hoặc hero gradient tinted — những thứ đó không tồn tại trong token set
- Không bao giờ căn giữa body copy trong Neue Montreal; chỉ Louize Display/Louize editorial block dùng căn giữa, và chỉ bên trong Ink section

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Paper | `#fafafa` | Canvas trang — nền kem trắng |
| 2 | Ink | `#2a2722` | Section tối full-bleed nơi serif type màu kem được đặt inverted |

## Elevation

Hệ thống không có shadow theo thiết kế. Không phát hiện box-shadow, drop-shadow hay elevation token nào. Hierarchy được truyền đạt hoàn toàn qua type scale, color inversion và viền hairline 1px — không bao giờ qua depth. Đây là phép ẩn dụ in ấn biên tập, không phải mô hình elevation Material/iOS: trang nằm phẳng trên bề mặt giấy, và section tối đạt được bằng cách lật canvas sang mực, không phải bằng cách thả panel nổi phía trên.

## Imagery

Hình ảnh chỉ được xử lý dưới dạng minh họa halftone đơn sắc — không nhiếp ảnh, không ảnh chụp màn hình sản phẩm, không gradient, không ảnh màu. Hero dùng một plate vuông bên phải hiển thị sinh vật bướm/ngài đen trong chấm halftone trên nền giấy kem. Tất cả hình ảnh có độ tương phản cao đen-trên-trắng hoặc trắng-trên-đen, góc vuông sắc, không mặt nạ bo tròn, không chồng lấn với type. Minh họa hoạt động như đối trọng typographic trong bố cục giấy/mực chứ không phải hình ảnh độc lập. Iconography không xuất hiện trong interface — không system icons, không nav icons, không UI pictograms. Social proof và client logo được thể hiện dưới dạng wordmark Louize Display trong dải ticker tối thay vì file ảnh.

## Layout

Layout là biên tập full-bleed — không max-width container, không sidebar, không card grid theo nghĩa truyền thống. Trang xếp chồng dưới dạng chuỗi section tràn ngang xen kẽ dải Paper và Ink. Hero là bố cục chia đôi: headline Louize Display cỡ lớn chiếm hai phần ba bên trái không có ràng buộc padding, và một plate minh họa halftone vuông neo bên phải một phần ba. Các section tiếp theo là khối biên tập một cột căn giữa (inverted letter) hoặc dải marquee ticker ngang. Navigation là danh sách dọc tối thiểu các mục uppercase ở góc trên bên trái, không có thanh nền. Mô hình trang là zine/broadsheet, không phải SaaS dashboard: nhịp dọc lỏng lẻo (64–96px giữa các section) nhưng mỗi section bên trong dày đặc type. Không có grid card tính năng, không bảng giá, không khối so sánh — nội dung được phân phối dưới dạng văn xuôi biên tập dài và một works ticker duy nhất.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #2a2722 (Headline Ink) trên #fafafa (Paper)
- background: #fafafa (Paper) cho mặc định, #2a2722 (Ink) cho section inverted
- border: #2a2722 cho rule đậm, #9f9f9f cho muted, #eeeeee cho hairline trên card
- accent: không (hệ thống hoàn toàn đơn sắc)
- primary action: không có màu CTA riêng biệt

3-5 Ví dụ Component Prompt:
Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button neutral đã trích xuất thay vì phát minh màu CTA có fill.
2. Tạo một section editorial inverted: nền #2a2722 full-bleed, padding 64px dọc. Eyebrow 'A BRIEF LETTER FROM THE EDITOR' trong Neue Montreal 12px weight 400 uppercase letter-spacing -0.12px màu #fafafa căn giữa ở trên. Body trong Louize Display 32px weight 400 line-height 1.2 màu #fafafa text-align center, 3–5 dòng ngắn. Phản chiếu eyebrow ở dưới.
3. Tạo một section header đóng dấu: nền #2a2722 full-bleed, padding 48px dọc. Một dòng 'SELECTED WORKS' trong Manuka 226px weight 400 line-height 0.75 màu #fafafa uppercase, với một rule ngang trắng kéo dài đến cạnh phải.
4. Tạo một brand ticker band: nền #2a2722 full-bleed, không padding. Tên thương hiệu Louize Display 24px weight 400 màu #fafafa ('Stripe', 'YouTube', 'The New York Times', 'Matter', 'Uber Eats x Taco Bell') lặp lại ngang với gap 32px, một hàng. Phủ tag 'COMING SOON' ghost (Neue Montreal 12px weight 400 uppercase, border 1px solid #fafafa, radius 12px, padding 4px 8px) trên các mục chọn.
5. Tạo một top nav: nền Paper (#fafafa), không bar. Danh sách dọc căn trái các mục Neue Montreal 12px weight 700 uppercase trong #2a2722, row gap 12px. Mục active hiển thị lớn hơn (16px) nhưng cùng màu/weight. Không gạch chân, không highlight nền.

## Similar Brands

- **Pentagram** — Cùng cách tiếp cận broadsheet biên tập: display serif headline, canvas giấy trắng, không điểm nhấn màu, type là tài sản thị giác duy nhất
- **Manual (manualcreative.com)** — Cùng condensed display sans (họ Druk/Manuka) đóng dấu ở scale gần kiến trúc cho masthead section, cùng bảng màu đơn sắc giấy ấm
- **Locomotive (locomotive.ca)** — Cùng hero display-serif cỡ lớn với xử lý subhead italic inline, cùng dải biên tập sáng/tối full-bleed xen kẽ
- **Cereal magazine** — Cùng phép ẩn dụ tạp chí in: giấy kem, mực đen ấm, serif display cho headline, không shadow, một radius (12px), không điểm nhấn màu
- **Rauno Freiberg** — Cùng bản năng portfolio cá nhân brutalist: hero chỉ type, bảng màu đơn sắc, không CTA, không ảnh sản phẩm, thiết kế CHÍNH LÀ tác phẩm

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-paper: #fafafa;
  --color-hairline: #eeeeee;
  --color-midstone: #9f9f9f;
  --color-ash: #666666;
  --color-pebble: #b3b3b3;
  --color-sepia: #3e3b36;
  --color-headline-ink: #2a2722;

  /* Typography — Font Families */
  --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-louize-display: 'Louize Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-louize: 'Louize', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-manuka: 'Manuka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.12px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.24px;
  --text-heading: 32px;
  --leading-heading: 1.1;
  --tracking-heading: -0.32px;
  --text-heading-lg: 77px;
  --leading-heading-lg: 0.9;
  --text-display: 132px;
  --leading-display: 0.8;
  --text-display-xl: 371px;
  --leading-display-xl: 0.75;

  /* 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-32: 32px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-224: 224px;

  /* Layout */
  --section-gap: 64-96px;
  --card-padding: 16px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-xl: 12px;

  /* Named Radii */
  --radius-tags: 12px;
  --radius-cards: 12px;
  --radius-buttons: 12px;

  /* Surfaces */
  --surface-paper: #fafafa;
  --surface-ink: #2a2722;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-paper: #fafafa;
  --color-hairline: #eeeeee;
  --color-midstone: #9f9f9f;
  --color-ash: #666666;
  --color-pebble: #b3b3b3;
  --color-sepia: #3e3b36;
  --color-headline-ink: #2a2722;

  /* Typography */
  --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-louize-display: 'Louize Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-louize: 'Louize', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-manuka: 'Manuka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.12px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.24px;
  --text-heading: 32px;
  --leading-heading: 1.1;
  --tracking-heading: -0.32px;
  --text-heading-lg: 77px;
  --leading-heading-lg: 0.9;
  --text-display: 132px;
  --leading-display: 0.8;
  --text-display-xl: 371px;
  --leading-display-xl: 0.75;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-224: 224px;

  /* Border Radius */
  --radius-xl: 12px;
}
```