# Twocreate

> # Twocreate — Style Reference

## Prompt Content

```
# Twocreate — Style Reference
> gallery wall trên nền giấy kem

**Theme:** light

Twocreate vận hành theo logic của một gallery floor: nền canvas ấm màu kem, một màu mực gần đen duy nhất, một typeface, và tuyệt đối không gì khác. Mọi quyết định giao diện đều phục tùng typography — không có hệ thống màu sắc, không hệ thống đổ bóng, không hệ thống border, không hệ thống icon, không hệ thống button. Trang web mang phong cách như một catalogue triển lãm in ấn, được đặt trong PP Neue Montreal với những bước nhảy tỷ lệ cực đoan, từ label footer 10px đến display headline 111px chiếm nửa viewport. Các component không thực sự là component; chúng là những khối typographic được phân cách bởi whitespace. Ảnh sản phẩm xuất hiện là một ảnh editorial đơn lẻ — không card, không grid, không hiệu ứng — được đặt trong luồng nội dung với sự kiềm chế tương tự như text. Đây là một studio site tin tưởng vào tác phẩm và typeface để gánh toàn bộ trọng lượng thị giác, và coi mọi discipline thiết kế khác là trang trí cần loại bỏ.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink | `#0c0c0c` | `--color-ink` | Toàn bộ text, link, nav items, body copy, tên client, list items, và nét icon. Màu gần đen thay vì đen tuyền giúp type không bị gắt trên nền canvas ấm |
| Paper | `#f9f7f4` | `--color-paper` | Nền trang và canvas chính. Màu trắng ngà ấm với ánh vàng-hồng nhẹ — thay thế sự lạnh lẽo của #fff bằng cảm giác xúc giác của giấy không tráng phủ |
| Stone | `#e3e1dd` | `--color-stone` | Tông bề mặt phụ, đường phân cách tinh tế, và các section banded cần một nửa bước xa khỏi canvas mà không đưa vào màu tương phản thực sự |
| Carbon | `#000000` | `--color-carbon` | Dành riêng cho những khoảnh khắc text có trọng lượng cao nhất cần màu đen tuyền — thường là display headline và nav lockups. Nặng hơn Ink một chút để nhấn mạnh typographic thay vì tương phản màu |

## Tokens — Typography

### PP Neue Montreal — Typeface duy nhất mang toàn bộ text — nav, body, list items, section headers, và display headline 111px. Việc chỉ sử dụng weight 400 là điểm đặc trưng: không có các cut bold, vì vậy hệ thống phân cấp được xây dựng hoàn toàn qua các bước nhảy tỷ lệ (10→22→33→44→67→111) và dải line-height hẹp duy nhất. Điều này tạo ra một hệ thống typeface mang phong cách kiềm chế đầy tự tin thay vì khối lượng typographic. Tính cách hình học nhưng ấm áp của PP Neue Montreal kết hợp với nền Paper ấm để mang lại cảm giác editorial thay vì corporate. · `--font-pp-neue-montreal`
- **Thay thế:** Inter, Söhne, hoặc General Sans dưới dạng open-source alternatives gần nhất
- **Weights:** 400
- **Kích thước:** 10px, 22px, 33px, 44px, 67px, 111px
- **Line height:** 1.00–1.10
- **Letter spacing:** -0.0100em trên mọi kích thước — một sự thắt chặt gần như không thể nhận thấy, chỉ trở nên rõ ràng ở kích thước display 67px và 111px, nơi nó ngăn các chữ cái trôi xa nhau về mặt quang học.
- **OpenType features:** `Default OpenType features; không kích hoạt stylistic alternates hoặc tabular numerals.`
- **Vai trò:** Typeface duy nhất mang toàn bộ text — nav, body, list items, section headers, và display headline 111px. Việc chỉ sử dụng weight 400 là điểm đặc trưng: không có các cut bold, vì vậy hệ thống phân cấp được xây dựng hoàn toàn qua các bước nhảy tỷ lệ (10→22→33→44→67→111) và dải line-height hẹp duy nhất. Điều này tạo ra một hệ thống typeface mang phong cách kiềm chế đầy tự tin thay vì khối lượng typographic. Tính cách hình học nhưng ấm áp của PP Neue Montreal kết hợp với nền Paper ấm để mang lại cảm giác editorial thay vì corporate.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1 | -0.1px | `--text-caption` |
| body | 22px | 1 | -0.22px | `--text-body` |
| subheading | 33px | 1.02 | -0.33px | `--text-subheading` |
| heading | 44px | 1.02 | -0.44px | `--text-heading` |
| heading-lg | 67px | 1.02 | -0.67px | `--text-heading-lg` |
| display | 111px | 1 | -1.11px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 19 | 19px | `--spacing-19` |
| 20 | 20px | `--spacing-20` |
| 36 | 36px | `--spacing-36` |
| 50 | 50px | `--spacing-50` |
| 67 | 67px | `--spacing-67` |
| 139 | 139px | `--spacing-139` |
| 180 | 180px | `--spacing-180` |

### Border Radius

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

### Layout

- **Section gap:** 50px
- **Element gap:** 10px

## Components

### Sticky Text Nav
**Vai trò:** Primary site navigation

Hai text anchors ở 22px, weight 400, màu Ink (#0c0c0c), căn trái theo mép trang với 20px horizontal padding từ viewport. Không background, không border, không shadow — nằm trực tiếp trên Paper. Anchor bên phải đối xứng với bên trái ở mép trang đối diện. Không logo, không hamburger, không container. Khi state thay đổi (ví dụ 'TWO CREATE / STUDIO' ở trên cùng chuyển thành 'WORK / ABOUT' khi scroll), chỉ nội dung text thay đổi; layout giống hệt nhau.

### Display Headline
**Vai trò:** Hero và typography mở đầu section

PP Neue Montreal ở 111px, weight 400, line-height 1.0, letter-spacing -1.11px, màu Ink (#0c0c0c). Căn trái, sát với page padding bên trái. Chiếm 3–4 dòng, mỗi dòng chạy theo chiều rộng text tự nhiên không cắt bớt. Khối này là trung tâm thị giác của trang — không gradient, không background treatment, không hình ảnh hỗ trợ cạnh tranh với nó.

### Section Header Bar
**Vai trò:** Nhãn subsection và điều hướng

Một dải ngang ở 22px weight 400, Ink trên Paper, với 20px vertical padding và 10px horizontal padding. Bên trái chứa nhãn section tĩnh ('Selected work', 'Clients'); bên phải chứa text link hoặc anchor ('+ MORE WORK'). Một đường hairline 1px màu Stone (#e3e1dd) có thể phân cách dải này với nội dung bên dưới.

### Client List
**Vai trò:** Hiển thị độ tin cậy trong section work

Một stack dọc các tên thương hiệu ở 33–44px, weight 400, Ink, căn trái, không bullet markers, không dấu phân cách, và 10px vertical gap giữa các mục. Mỗi tên nằm trên một dòng riêng. Danh sách này vừa là nội dung vừa là đồ họa — kích thước lớn của type biến một danh sách tên thành một bức tường typographic.

### Editorial Product Image
**Vai trò:** Xử lý hình ảnh duy nhất trên site

Một ảnh sản phẩm đơn lẻ được đặt trong luồng nội dung, tỷ lệ khung hình tự nhiên, không border, không radius, không caption, không overlay. Nằm trên nền Paper với khoảng không dọc 50px+ phía trên và dưới. Không lightbox, không hover treatment, không gallery frame — ảnh được xử lý như một tấm in trong catalogue.

### Footer Lockup
**Vai trò:** Kết thúc site và secondary nav

Khối text tối giản ở 10px weight 400, Ink trên Paper, với 50px padding-top từ khối nội dung cuối cùng. Có thể chứa thông tin liên hệ và small-print links ở kích thước type nhỏ nhất trong hệ thống, củng cố hệ thống phân cấp tỷ lệ editorial.

## Do's and Don'ts

### Do
- Chỉ sử dụng PP Neue Montreal ở weight 400 — không bao giờ đưa vào weight bold hoặc light để tạo hierarchy
- Xây dựng hierarchy thông qua các bước nhảy tỷ lệ (10 → 22 → 33 → 44 → 67 → 111), không phải qua biến thể màu sắc hoặc weight
- Duy trì nền Paper ấm (#f9f7f4) trên mọi trang; không bao giờ chuyển sang trắng tuyền hoặc đưa vào màu nền thực sự
- Giữ tất cả spacing trong nhịp điệu đã thiết lập: 10px giữa các element, 20px page padding cho khối type, 50px giữa các section, 67–139px right-side whitespace cho layout bất đối xứng
- Đặt line-height ở 1.00–1.10 cho mọi kích thước display để giữ cảm giác editorial nén chặt
- Để ảnh sản phẩm nằm raw trên canvas — không frame, không radii, không overlay, không caption
- Viết copy đủ ngắn để sống ở 44–67px mà không quấn thành một đoạn văn dày đặc

### Don't
- Không đưa vào bất kỳ accent, brand, hoặc semantic color nào — hệ thống cố tình achromatic
- Không thêm shadow, border, hoặc bo góc cho bất kỳ element nào; sự phân cách đến từ whitespace và type đơn thuần
- Không sử dụng nhiều typeface; PP Neue Montreal (hoặc substitute của nó) là giọng nói duy nhất
- Không tạo button component — tương tác là text links với optional underline khi hover, không bao giờ là filled hoặc outlined controls
- Không thêm icon, badge, tag, hoặc bất kỳ UI ornament nhỏ nào phá vỡ vốn từ vựng typographic-only
- Không căn giữa body copy hoặc list items; mọi thứ nằm flush left với page padding
- Không áp dụng card patterns, grid backgrounds, hoặc bất kỳ container treatment nào xung quanh khối text hoặc image

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Paper | `#f9f7f4` | Base canvas cho toàn bộ site. Màu trắng ấm mang tất cả nội dung. |
| 2 | Stone | `#e3e1dd` | Inset bands hoặc sự chuyển section tinh tế cần một bước tông màu mà không phá vỡ kỷ luật đơn sắc. |

## Elevation

Không có hệ thống elevation nào tồn tại. Thiết kế cố tình từ chối shadow, border, và chiều sâu — mọi element nằm phẳng trên nền Paper. Sự phân cách đạt được thông qua whitespace, kích thước type, và đôi khi là sự chuyển tông màu sang Stone, không bao giờ thông qua độ sâu trục z.

## Imagery

Ngôn ngữ thị giác về cơ bản là typographic — không có hệ thống nhiếp ảnh, minh họa, hoặc đồ họa lặp lại. Ảnh sản phẩm đơn lẻ hiển thị (một flat-lay mỹ phẩm trên nền màu hoa cà/hồng) mang tính editorial: được dàn dựng, high-key, tight crop, không có chủ thể con người, không có bối cảnh lifestyle. Nó hoạt động như một tấm in thay vì một digital asset. Iconography vắng mặt; điều hướng và tương tác chỉ là text. Không có SVG illustrations, không có đồ họa trừu tượng, không có element hoạt hình. 'Imagery' của site chính là type của nó ở tỷ lệ cực đoan.

## Layout

Trang web là full-bleed, edge-to-edge, không có max-width container và không có cột căn giữa. Nội dung neo vào mép trái với horizontal padding nhất quán (20–67px) và để bên phải thở vào whitespace — một bố cục bất đối xứng, nặng bên trái. Điều hướng là một sticky bar text hai anchor ở trên cùng, với các anchor trái/phải cập nhật khi người dùng scroll qua các section. Hero là một display headline khổng lồ căn trái chiếm hai phần ba đầu viewport, tiếp theo là section header bar, sau đó là các khối nội dung xen kẽ giữa vùng chỉ text và ảnh editorial đơn lẻ. Không có card grids, không có multi-column feature rows, không có pricing tables, không có testimonials blocks. Nhịp điệu dọc rộng rãi: 50px giữa các section, với 67–139px right-side whitespace tạo ra sự bất đối xứng của gallery wall.

## Agent Prompt Guide

Quick Color Reference:
  - text: #0c0c0c
  - background: #f9f7f4
  - secondary surface: #e3e1dd
  - border: #e3e1dd
  - accent: không có accent color riêng biệt
  - primary action: không có CTA color riêng biệt

Example Component Prompts:

1. Tạo hero block: Paper background (#f9f7f4), không max-width. Display headline trong PP Neue Montreal weight 400, 111px, line-height 1.0, letter-spacing -1.11px, màu #0c0c0c, căn trái với 20px page padding. Headline trải dài 3–4 dòng, mỗi dòng ở chiều rộng text tự nhiên. Không button, không subtext, không hình ảnh hỗ trợ.

2. Tạo sticky top nav: Paper background, 20px vertical padding, 10px horizontal padding. Left anchor ở 22px PP Neue Montreal weight 400, #0c0c0c. Right anchor cùng style sát mép phải. Không background, không border, không shadow. Nội dung text cập nhật khi scroll nhưng layout giống hệt nhau.

3. Tạo client list block: 50px margin-top từ section trước. Header bar ở 22px weight 400 với 'Clients' bên trái và '+ MORE WORK' bên phải. Bên dưới, một stack dọc các tên thương hiệu ở 33px PP Neue Montreal weight 400, #0c0c0c, 10px vertical gap giữa các mục, không bullets, không dấu phân cách, căn trái.

4. Tạo editorial image plate: 50px margin-top, Paper background, ảnh sản phẩm đơn lẻ ở tỷ lệ khung hình tự nhiên, không border, không radius, không caption, không overlay. Nằm trong luồng nội dung cùng hoặc bên dưới text với whitespace rộng rãi ở cả hai bên.

5. Tạo section header bar: 20px vertical padding, 10px horizontal padding. Label trái ở 22px PP Neue Montreal weight 400, #0c0c0c (ví dụ 'Selected work'). Anchor phải cùng style. Optional 1px hairline màu #e3e1dd bên dưới bar để phân cách với nội dung.

## Similar Brands

- **Resn** — Cùng navigation typographic-only và display headline tỷ lệ khổng lồ trên nền off-white ấm; cả hai đều xem studio site như một art object thay vì product page.
- **Pentagram** — Cùng sự tự tin editorial — single serif/sans typeface, không accent color, whitespace rộng rãi, và niềm tin rằng bản thân tác phẩm là hệ thống thị giác.
- **Manual (manualcreative.com)** — Cùng nền cream-paper, pattern flush-left type-as-hero, và triết lý zero-decoration nơi whitespace và tỷ lệ làm tất cả công việc.
- **Locomotive (locomotive.ca)** — Cả hai đều đẩy type đến kích thước cực đoan trên nền neutral ấm, dựa vào các bước nhảy tỷ lệ thay vì màu sắc hoặc weight để tạo hierarchy, và sử dụng một boutique sans-serif duy nhất xuyên suốt.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #0c0c0c;
  --color-paper: #f9f7f4;
  --color-stone: #e3e1dd;
  --color-carbon: #000000;

  /* Typography — Font Families */
  --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1;
  --tracking-caption: -0.1px;
  --text-body: 22px;
  --leading-body: 1;
  --tracking-body: -0.22px;
  --text-subheading: 33px;
  --leading-subheading: 1.02;
  --tracking-subheading: -0.33px;
  --text-heading: 44px;
  --leading-heading: 1.02;
  --tracking-heading: -0.44px;
  --text-heading-lg: 67px;
  --leading-heading-lg: 1.02;
  --tracking-heading-lg: -0.67px;
  --text-display: 111px;
  --leading-display: 1;
  --tracking-display: -1.11px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-36: 36px;
  --spacing-50: 50px;
  --spacing-67: 67px;
  --spacing-139: 139px;
  --spacing-180: 180px;

  /* Layout */
  --section-gap: 50px;
  --element-gap: 10px;

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

  /* Surfaces */
  --surface-paper: #f9f7f4;
  --surface-stone: #e3e1dd;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #0c0c0c;
  --color-paper: #f9f7f4;
  --color-stone: #e3e1dd;
  --color-carbon: #000000;

  /* Typography */
  --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1;
  --tracking-caption: -0.1px;
  --text-body: 22px;
  --leading-body: 1;
  --tracking-body: -0.22px;
  --text-subheading: 33px;
  --leading-subheading: 1.02;
  --tracking-subheading: -0.33px;
  --text-heading: 44px;
  --leading-heading: 1.02;
  --tracking-heading: -0.44px;
  --text-heading-lg: 67px;
  --leading-heading-lg: 1.02;
  --tracking-heading-lg: -0.67px;
  --text-display: 111px;
  --leading-display: 1;
  --tracking-display: -1.11px;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-36: 36px;
  --spacing-50: 50px;
  --spacing-67: 67px;
  --spacing-139: 139px;
  --spacing-180: 180px;
}
```