# Surface

> Surface — Style Reference

## Prompt Content

```
# Surface — Style Reference
> editorial gallery trên nền vải lanh màu xương — một từ duy nhất 230px neo giữ các bức ảnh rải rác trên nền trắng tinh khiết, mọi thứ còn lại chỉ là thì thầm của chữ đen.

**Theme:** light

Surface là một ấn phẩm editorial kỹ thuật số mang hình hài tạp chí in: canvas trắng xương (#f7f7f7) nơi hầu như mọi thứ đều là chữ đen, và bố cục tự thân đóng vai trò thương hiệu. Hệ thống thị giác mang tính triệt để trong sự kiềm chế — không màu nhấn, không border, không shadow, không gradient, không bo góc. Thay vào đó, cá tính đến từ scale chữ (display weight 230px) và từ những bức ảnh editorial được đặt có chủ đích, phá vỡ grid theo nhiều góc. Navigation được rút gọn thành monogram, wordmark và hamburger. Các khối nội dung thở với lề trái rộng và padding dọc thoáng đãng, đọc như một trang tạp chí hơn là một sản phẩm web. Một AI agent nên xem đây là 'design system của sự vắng mặt' — mỗi phần tử thêm vào phải chứng minh được vị trí của nó trên nền trắng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Bone | `#f7f7f7` | `--color-bone` | Canvas trang, bề mặt card, nền section — màu duy nhất không phải đen trong toàn bộ hệ thống |
| Pressed Ink | `#000000` | `--color-pressed-ink` | Toàn bộ chữ, border, icon, trạng thái link, nav strokes, heading rules — toàn bộ giao diện giao tiếp bằng đen tuyền trên nền Bone |

## Tokens — Typography

### Munken Sans Web — Typeface duy nhất cho mọi thứ. Munken Sans là một editorial grotesque kiểu Thụy Điển được thiết kế cho in ấn — phiên bản web tùy chỉnh giữ nguyên cảm giác giấy. Weight 900 ở 230px tạo nên headline display đặc trưng (ví dụ: 'HOPE'). Weight 700 ở 30–40px cho section heading. Weight 400 ở 16–20px cho body text. Hệ thống một typeface, ba weight là bản sắc typographic — không đưa vào typeface thứ hai. · `--font-munken-sans-web`
- **Thay thế:** Neue Haas Grotesk, Inter (weight 900), hoặc Aktiv Grotesk
- **Weights:** 400, 700, 900
- **Sizes:** 16, 20, 30, 40, 230
- **Line height:** 1.00 (display), 1.20 (heading), 1.35 (subheading), 1.50 (body/caption)
- **Letter spacing:** normal ở mọi kích thước — Munken Sans đã có tracking được hiệu chỉnh, không ghi đè
- **Vai trò:** Typeface duy nhất cho mọi thứ. Munken Sans là một editorial grotesque kiểu Thụy Điển được thiết kế cho in ấn — phiên bản web tùy chỉnh giữ nguyên cảm giác giấy. Weight 900 ở 230px tạo nên headline display đặc trưng (ví dụ: 'HOPE'). Weight 700 ở 30–40px cho section heading. Weight 400 ở 16–20px cho body text. Hệ thống một typeface, ba weight là bản sắc typographic — không đưa vào typeface thứ hai.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|------|
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| body | 20px | 1.5 | — | `--text-body` |
| subheading | 30px | 1.35 | — | `--text-subheading` |
| heading | 40px | 1.2 | — | `--text-heading` |
| display | 230px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 0px |
| cards | 0px |
| images | 0px |
| buttons | 0px |

### Layout

- **Section gap:** 96px
- **Card padding:** 0px
- **Element gap:** 10px

## Components

### Wordmark Navigation
**Vai trò:** Site header chính

Header ba phần tử trên layout column-gap 72px. Trái: monogram logo ('AV' với đường cắt chéo, đen). Giữa: 'ARCTIC VOLUME' ở 16px weight 400, letter-spacing normal, all caps. Phải: hamburger icon (3 đường kẻ ngang đen). Không background, không border-bottom, không shadow — nav nổi trực tiếp trên canvas Bone. Sticky hoặc static tùy ngữ cảnh, nhưng luôn không border.

### Display Headline (Hero Word)
**Vai trò:** Phần tử neo của hero và feature sections

Munken Sans weight 900 ở 230px, line-height 1.0, color #000000. Văn bản là một từ hoặc cụm từ ngắn (ví dụ: 'HOPE') chiếm toàn bộ chiều ngang canvas. Đây là phần tử ồn ào nhất trong hệ thống và là nơi duy nhất designer có quyền dùng 230px. Không bao giờ áp màu, shadow hay decoration — kích thước và weight tự thân mang sức nặng.

### Scattered Editorial Image
**Vai trò:** Ảnh làm khung cho display headline

Ảnh editorial hình vuông hoặc chữ nhật được đặt ở các offset dọc khác nhau xung quanh từ display, tạo hiệu ứng collage. Ảnh có radius 0px (góc sắc), full-color, không overlay hay border. Vị trí cố tình không đều — không theo grid. Mỗi ảnh có thể xoay nhẹ hoặc ở scale khác nhau để tạo nhịp điệu thị giác bên cạnh chữ khổng lồ.

### Article Heading
**Vai trò:** Tiêu đề section trong nội dung dài

Munken Sans weight 700 ở 30px, line-height 1.35, color #000000. Canh trái với lề trái 225px từ mép canvas (cột nội dung bắt đầu sâu vào trang). Heading có thể xuống 2–3 dòng và dùng tiền tố số (ví dụ: 'Surface N° 3:') để báo hiệu cấu trúc editorial.

### Body Copy Block
**Vai trò:** Văn bản bài viết dài

Munken Sans weight 400 ở 20px, line-height 1.5, color #000000. Đặt trong cùng cột lề trái 225px như article heading. Đoạn văn chạy đến độ dài tự nhiên (khoảng 50–60 ký tự mỗi dòng) không thụt đầu dòng, không spacing thêm giữa các đoạn — line-height tự tạo nhịp điệu. Kích thước body lớn (20px so với 16px mặc định web) là lựa chọn đặc trưng báo hiệu khả năng đọc kiểu in ấn.

### Section Spacer
**Vai trò:** Khoảng thở dọc giữa các khối nội dung

96px hoặc 128px canvas Bone thuần túy giữa các section. Không divider, không rule, không chuyển background — khoảng trống tự thân là divider. Đây là lựa chọn editorial có chủ đích: sự vắng mặt của visual chrome khiến trang đọc như một spread in ấn.

### Inline Link
**Vai trò:** Hyperlink trong body text và navigation

Cùng typeface với văn bản xung quanh (Munken Sans 400 ở 20px) với color #000000. Gạch chân để phân biệt — underline là affordance duy nhất của link. Không đổi màu, không chuyển bold, không hover animation ngoài khả năng thay đổi độ dày underline.

### Outlined Action Button
**Vai trò:** Interactive element thứ cấp (hiếm khi dùng trong hệ thống này)

Border 1px solid #000000, fill trong suốt (#f7f7f7), padding dọc 6px–14px, padding ngang 38px. Text ở Munken Sans weight 400 ở 16px, color #000000. Radius 0px — góc sắc. Hệ thống chỉ dùng neutral-action-border, không bao giờ dùng chromatic fill. Button là tối thiểu; hầu hết tương tác là text link hoặc image-based.

### Footer
**Vai trò:** Thông tin cuối trang

Padding ngang 80px, padding dưới 52px. Munken Sans weight 400 ở 16px, color #000000. Không đổi background so với canvas. Nội dung thưa thớt — copyright, colophon, social links. Footer được thiết kế như một suy nghĩ phụ, không phải phần tử thị giác.

## Do's and Don'ts

### Do
- Dùng #f7f7f7 cho mọi bề mặt và #000000 cho mọi mark, text, border và icon — hệ thống có hai màu, không phải một màu với điểm nhấn
- Để display headline làm việc nặng ở 230px weight 900 với line-height 1.0; bao quanh nó bằng canvas Bone rộng rãi, không phải phần tử cạnh tranh
- Đặt body copy ở 20px (không phải 16px) với line-height 1.5 — body type cỡ lớn là signature của ấn phẩm in, phân biệt hệ thống này với UI web thông thường
- Áp dụng lề trái 225px cho cột nội dung editorial để text đọc như trang tạp chí, không phải trang web căn giữa
- Dùng section gap 96px hoặc 128px với zero divider — khoảng trắng CHÍNH LÀ cấu trúc
- Đặt ảnh editorial ở vị trí không đều và xoay nhẹ xung quanh display type để tạo năng lượng collage; giữ tất cả ảnh ở radius 0px để có cạnh cắt in sắc nét

### Don't
- Không đưa vào bất kỳ màu nào ngoài #000000 và #f7f7f7 — không xanh, không đỏ, không xám, không hover-state tints
- Không thêm box-shadow, gradient hay border-radius — hệ thống cố tình phẳng và góc sắc
- Không dùng typeface thứ hai cho body, caption hay UI labels; Munken Sans xử lý mọi thứ ở ba weight
- Không dùng accent color, icon background hay colored badges — phân cấp thông tin đến từ kích thước và weight, không bao giờ từ hue
- Không căn giữa body text hay cột nội dung; canh trái mọi thứ với lề editorial 225px
- Không thêm card background, border hay elevation surfaces — nội dung nằm trực tiếp trên canvas Bone, chấm hết
- Không dùng icon có fill, màu hoặc multi-stroke; nếu cần icon, dùng 1px-weight single-color black strokes

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Bone Canvas | `#f7f7f7` | Background toàn trang; màu bề mặt duy nhất trong hệ thống |
| 2 | Pressed Ink | `#000000` | Type và graphic elements đọc như lớp thị giác thứ hai trên nền Bone canvas |

## Imagery

Nhiếp ảnh là màu sắc duy nhất trong hệ thống và đóng vai trò là thanh âm cảm xúc của thương hiệu. Ảnh mang tính editorial: chân dung, ảnh sản phẩm, still life và artwork minh họa liên quan đến văn hóa bền vững và thiết kế. Xử lý là full-color, không filter, với góc sắc 0px (không crop bo tròn, không mask, không duotone). Vị trí cố tình rải rác — ảnh nổi ở vị trí không đều xung quanh display type khổng lồ, đôi khi chồng lên letterforms, đôi khi lơ lửng ở mép trang. Hiệu ứng là một bức tường curated hoặc tờ tạp chí xé ra, không phải e-commerce grid bóng bẩy. Không lifestyle staging, không overlay, không text-on-image treatments. Ảnh nên có cảm giác như được nhấc từ catalog in ấn và ghim lên trang.

## Layout

Mô hình trang là full-bleed không có max-width container — canvas Bone kéo dài từ mép này sang mép kia, và cột nội dung được định vị bằng margin thay vì container căn giữa. Navigation là một hàng ngang duy nhất (logo, wordmark ở giữa, hamburger) với column-gap 72px. Hero là signature: một từ display 230px trải dài toàn bộ chiều rộng trong khi ảnh editorial vuông/chữ nhật được rải ở các offset dọc và vị trí khác nhau xung quanh nó, tạo collage. Bên dưới hero, các section nội dung xen kẽ giữa full-width image bands và cột text đặt với lề trái sâu 225px. Không có card grids, pricing tables, feature matrices — trang đọc như một chuỗi editorial spreads. Nhịp điệu section được định nghĩa bởi vertical gap 96–128px không divider hay chuyển background. Mật độ tổng thể cực kỳ thưa thớt: hầu hết trang là canvas Bone, với text và ảnh đóng vai trò dấu câu có chủ đích.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000
- background: #f7f7f7
- border: #000000
- accent: không có màu accent riêng (hệ thống là monochrome)
- primary action: không có màu CTA riêng

**3-5 Example Component Prompts**
1. **Editorial Hero**: Canvas #f7f7f7 full-bleed. Một từ display duy nhất ở Munken Sans weight 900 tại 230px, line-height 1.0, color #000000, canh trái. 4–6 ảnh editorial vuông đặt ở vị trí rải rác xung quanh từ, mỗi ảnh radius 0px, không border, không shadow, không giới hạn xoay.

2. **Article Content Section**: Background #f7f7f7. Article heading ở Munken Sans weight 700 tại 30px, line-height 1.35, color #000000, đặt với lề trái 225px. Body text ở Munken Sans weight 400 tại 20px, line-height 1.5, color #000000, cùng lề trái 225px, chạy đến độ dài tự nhiên (~55 ký tự mỗi dòng). 96px khoảng trống #f7f7f7 ở trên và dưới.

3. **Outlined Action Button**: Fill trong suốt (#f7f7f7), border 1px solid #000000, radius 0px, padding dọc 14px, padding ngang 38px. Label ở Munken Sans weight 400 tại 16px, color #000000. Không đổi màu hover state — chỉ underline hoặc border-weight shift.

4. **Navigation Header**: Background #f7f7f7 (không fill, trong suốt trên canvas). Ba phần tử với column-gap 72px: monogram logo bên trái màu #000000, wordmark 'ARCTIC VOLUME' ở giữa Munken Sans weight 400 tại 16px all-caps color #000000, hamburger icon bên phải (3 đường kẻ ngang #000000). Không bottom border, không shadow.

5. **Image-Only Content Block**: Section full-width trên background #f7f7f7. Một ảnh editorial duy nhất tại radius 0px, đặt với padding ngang 80px. 128px khoảng trống #f7f7f7 ở trên và dưới. Không caption, không overlay, không text trên ảnh.

## Similar Brands

- **It's Nice That** — Cùng thẩm mỹ ấn phẩm editorial với canvas monochrome, display type cỡ lớn và vị trí ảnh rải rác xung quanh headline
- **Are.na** — Cùng canvas gần trắng với chữ đen tuyền, không chrome hay decoration, và nội dung thở trong khoảng trắng rộng rãi
- **Kinfolk Magazine** — Cùng DNA tạp chí in: headline không serif cỡ lớn, margin rộng, và ảnh editorial được xử lý như nội dung chính
- **Heller Gallery** — Cùng cách tiếp cận gallery-wall với layout — ảnh rải rác ở vị trí không đều trên nền trắng tinh khiết với UI tối thiểu

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-bone: #f7f7f7;
  --color-pressed-ink: #000000;

  /* Typography — Font Families */
  --font-munken-sans-web: 'Munken Sans Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 20px;
  --leading-body: 1.5;
  --text-subheading: 30px;
  --leading-subheading: 1.35;
  --text-heading: 40px;
  --leading-heading: 1.2;
  --text-display: 230px;
  --leading-display: 1;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --section-gap: 96px;
  --card-padding: 0px;
  --element-gap: 10px;

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

  /* Surfaces */
  --surface-bone-canvas: #f7f7f7;
  --surface-pressed-ink: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-bone: #f7f7f7;
  --color-pressed-ink: #000000;

  /* Typography */
  --font-munken-sans-web: 'Munken Sans Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 20px;
  --leading-body: 1.5;
  --text-subheading: 30px;
  --leading-subheading: 1.35;
  --text-heading: 40px;
  --leading-heading: 1.2;
  --text-display: 230px;
  --leading-display: 1;

  /* Spacing */
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
}
```