# Bpowell

> Bpowell — Style Reference

## Prompt Content

```
# Bpowell — Style Reference
> type as architecture on white plaster

**Theme:** mixed

Một portfolio chỉ gồm chữ, để typography đảm nhận mọi vai trò — không hình ảnh, không trang trí, không chrome. Trang đọc như một danh sách kiến trúc: những label nhỏ được set dày đặc đóng vai trò đánh dấu section, sau đó tên dự án cỡ lớn xếp chồng lên nhau như những khối bê tông trên tường. Hai bề mặt xen kẽ — canvas trắng sáng cho tác phẩm design, canvas gần đen đảo ngược cho film — và sự tương phản giữa chúng là nhịp điệu thị giác duy nhất. Layout bất đối xứng triệt để: một cột duy nhất gồm text cỡ lớn neo bên trái, gutter rộng rãi của negative space, và top nav trải dài trên toàn bộ chiều rộng viewport thay vì dồn vào một góc. Hệ thống không có button, không có card, không có border theo nghĩa truyền thống — thứ gần nhất với border là một đường kẻ mảnh 1px màu đen, và ngay cả đường đó cũng được dùng rất hạn chế. Kết quả mang cảm giác như đọc một credits sequence in trên tường gallery: khắc khổ, có chủ đích, và đầy tự tin rằng chính những cái tên đã mang đủ sức nặng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Plaster White | `#ffffff` | `--color-plaster-white` | Canvas chính cho các section sáng; màu text trên section tối; đường kẻ mảnh (hairline) trên section tối |
| Carbon | `#111111` | `--color-carbon` | Nền trang cho section tối/film; body text chính trên section sáng; fill cấu trúc cho tên dự án dạng typography |
| Ink Black | `#000000` | `--color-ink-black` | Text phụ và fill trên section sáng; dùng khi cần độ tương phản tối đa trên canvas trắng |
| Graphite | `#2b2b2b` | `--color-graphite` | Border tối nhẹ cho các đường kẻ ít quan trọng trên bề mặt sáng |

## Tokens — Typography

### Teg — Display — dành riêng cho tên dự án lớn nhất và hero text. Tracking -0.033em ở 86px siết chặt các chữ cái thành một khối gần như nguyên khối; đây là font tạo cảm giác 'bê tông xếp chồng'. Thay thế: Migra, Editorial New, hoặc Canela Display. · `--font-teg`
- **Thay thế:** Migra hoặc Editorial New
- **Weights:** 500, 600
- **Kích thước:** 58px, 86px
- **Line height:** 1.04, 1.05
- **Letter spacing:** -0.0330em ở 86px, -0.0170em ở 58px
- **Vai trò:** Display — dành riêng cho tên dự án lớn nhất và hero text. Tracking -0.033em ở 86px siết chặt các chữ cái thành một khối gần như nguyên khối; đây là font tạo cảm giác 'bê tông xếp chồng'. Thay thế: Migra, Editorial New, hoặc Canela Display.

### Beatrice Display — Editorial type cỡ trung — xuất hiện dưới dạng text danh sách dự án phụ bên cạnh các tên Teg lớn hơn, tạo điểm nhấn typographic ở tỷ lệ nhẹ nhàng hơn. Thay thế: Tiempos Headline, Canela, hoặc Reckless. · `--font-beatrice-display`
- **Thay thế:** Tiempos Headline hoặc Canela
- **Weights:** 500, 600
- **Kích thước:** 26px
- **Line height:** 1.15
- **Letter spacing:** normal
- **Vai trò:** Editorial type cỡ trung — xuất hiện dưới dạng text danh sách dự án phụ bên cạnh các tên Teg lớn hơn, tạo điểm nhấn typographic ở tỷ lệ nhẹ nhàng hơn. Thay thế: Tiempos Headline, Canela, hoặc Reckless.

### Beatrice — Biến thể Beatrice trọng lượng body cho cùng vai trò 26px nhưng với bộ ký tự text-figure. Thay thế: giống Beatrice Display. · `--font-beatrice`
- **Thay thế:** Tiempos Text
- **Weights:** 500
- **Kích thước:** 26px
- **Line height:** 1.15
- **Letter spacing:** normal
- **Vai trò:** Biến thể Beatrice trọng lượng body cho cùng vai trò 26px nhưng với bộ ký tự text-figure. Thay thế: giống Beatrice Display.

### Diatype — Sans đa năng cho body copy, nav items, và supporting text. Weight 500 là mặc định; 700 dành riêng cho tên nav 'Ben Powell' để tạo trọng lượng neo trong nav phân tán. Thay thế: Söhne, Inter, hoặc ABC Diatype. · `--font-diatype`
- **Thay thế:** Söhne hoặc Inter
- **Weights:** 500, 700
- **Kích thước:** 26px, 58px
- **Line height:** 1.04, 1.05, 1.15
- **Letter spacing:** -0.0170em
- **Vai trò:** Sans đa năng cho body copy, nav items, và supporting text. Weight 500 là mặc định; 700 dành riêng cho tên nav 'Ben Powell' để tạo trọng lượng neo trong nav phân tán. Thay thế: Söhne, Inter, hoặc ABC Diatype.

### New Grotesk — Label face all-caps tracking rộng cho các section marker ('Design', 'Film'). Tracking +0.069em cực đoan biến các từ ngắn thành type-art dãn cách — đây là lựa chọn 'trang trí' duy nhất của hệ thống. Thay thế: ABC Diatype Mono Upper, Space Grotesk, hoặc Neue Haas Grotesk Display. · `--font-new-grotesk`
- **Thay thế:** Space Grotesk hoặc ABC Diatype Mono
- **Weights:** 600
- **Kích thước:** 58px, 60px
- **Line height:** 1.00, 1.04
- **Letter spacing:** 0.0690em
- **Vai trò:** Label face all-caps tracking rộng cho các section marker ('Design', 'Film'). Tracking +0.069em cực đoan biến các từ ngắn thành type-art dãn cách — đây là lựa chọn 'trang trí' duy nhất của hệ thống. Thay thế: ABC Diatype Mono Upper, Space Grotesk, hoặc Neue Haas Grotesk Display.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 26px | 1.15 | — | `--text-caption` |
| heading | 58px | 1.05 | -0.17px | `--text-heading` |
| display | 86px | 1.04 | -2.84px | `--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` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 56 | 56px | `--spacing-56` |
| 104 | 104px | `--spacing-104` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| none | 0px |

### Layout

- **Page max-width:** 1400px
- **Section gap:** 104px
- **Card padding:** 0px
- **Element gap:** 16px

## Components

### Distributed Top Nav
**Vai trò:** Primary navigation — thay thế layout logo-cluster thông thường

Một hàng ngang duy nhất neo ở đầu viewport, padding ngang 40px, các item phân bố trên toàn bộ chiều rộng bằng flexbox space-between (không có logo trung tâm, không có hamburger). Bốn text item: tên chủ sở hữu (Diatype 500/700), mô tả ('Designer & filmmaker'), địa chỉ email, và trạng thái availability. Font: Diatype 500 ở 26px, màu #111111. Item đầu tiên (tên chủ sở hữu) được set ở weight 700 để đóng vai trò là neo thị giác duy nhất trong một hàng phẳng.

### Section Label
**Vai trò:** Marker giới thiệu một khối category mới

Chữ nhỏ, tracking rộng, đóng vai trò như một cờ typographic phía trên mỗi danh sách dự án. Font: New Grotesk 600, ~12-14px, letter-spacing 0.069em, all uppercase hoặc sentence case. Màu: #111111 trên section sáng, #ffffff trên section tối. Nằm cách 40-56px phía trên tên dự án đầu tiên. Không gạch chân, không icon — tracking tự đảm nhận công việc.

### Project List Item — Large
**Vai trò:** Đơn vị nội dung chính; tên dự án tạo nên cấu trúc trang

Text cỡ lớn trong Teg 500 hoặc 600, 86px trên desktop, line-height 1.04, letter-spacing -0.033em. Màu: #111111 trên section sáng, #ffffff trên section tối. Xếp chồng dọc với khoảng cách 0-4px giữa các dòng (các dòng gần như chạm nhau, tạo thành một khối liên tục). Không bullet, không link styling, không metadata — tên là toàn bộ item.

### Project List Item — Secondary
**Vai trò:** Điểm nhấn typographic trong stack danh sách

Tên dự án nhỏ hơn một chút ở 58px, set bằng Beatricedisplay hoặc Teg weight 500, line-height 1.05, letter-spacing -0.017em. Xuất hiện cùng các tên 86px để tạo nhịp điệu xen kẽ kích thước trong danh sách — một số tên hét lên, số khác thì nói. Cùng quy tắc màu sắc như biến thể lớn.

### Light Canvas Section
**Vai trò:** Bề mặt trang mặc định cho tác phẩm design

Nền full-bleed trắng (#ffffff), cột nội dung canh trái bắt đầu từ margin trang 40px, padding trong trên/dưới 104px. Chứa section label và danh sách dự án. Không border, không shadow, không card containers.

### Dark Canvas Section
**Vai trò:** Bề mặt đảo ngược cho category film

Nền full-bleed gần đen (#111111) với nhịp điệu layout giống hệt section sáng — cùng margin trái 40px, cùng padding dọc 104px, cùng cấu trúc typographic. Text và label đảo ngược thành #ffffff. Sự xen kẽ giữa hai bề mặt là điểm ngắt section thị giác duy nhất của trang; không có đường chia hay gradient giữa chúng.

### Content Column
**Vai trò:** Cột text canh trái duy nhất chứa toàn bộ nội dung

Neo bên trái cách mép viewport 40px, mở rộng về bên phải xa nhất theo độ dài dòng. Không có max-width cap trên text, nhưng các tên dự án dài nhất (ví dụ 'Iceland in Winter') tự nhiên giới hạn cột ở khoảng 800-900px. Không căn giữa, không right rail.

## Do's and Don'ts

### Do
- Chỉ dùng đúng hai bề mặt — #ffffff và #111111 — và xen kẽ chúng dưới dạng section full-bleed để tạo nhịp điệu mà không cần bất kỳ đường phân cách nào
- Set tên dự án bằng Teg ở 86px / line-height 1.04 / letter-spacing -0.033em trên desktop; tracking mạnh này là thứ làm cho danh sách đọc như một bức tường chữ
- Dùng New Grotesk 600 với tracking 0.069em cho tất cả section labels — spacing rộng là động thái typographic 'trang trí' duy nhất của hệ thống
- Phân bố nav items trên toàn bộ chiều rộng viewport với space-between; không bao giờ dồn chúng vào một góc hoặc căn giữa
- Neo item nav ngoài cùng bên trái ở weight 700 (Diatype) để tên chủ sở hữu đọc như trọng lượng thị giác duy nhất trong một hàng phẳng
- Duy trì padding trái 40px từ mép viewport cho content column trên tất cả các section
- Dùng 104px cho padding dọc section chính — đây là đơn vị spacing lớn nhất trong hệ thống và định nghĩa nhịp thở của trang

### Don't
- Không thêm bất kỳ màu nào ngoài #ffffff, #111111, #000000, và #2b2b2b — hệ thống là đơn sắc theo thiết kế
- Không thêm hình ảnh, thumbnail, hoặc artwork xem trước vào project list items; chỉ tên là lối vào
- Không căn giữa tên dự án hoặc căn chỉnh chúng vào grid — chúng được neo vào margin trái và để độ dài tự quyết định cột
- Không dùng card containers, góc bo tròn, hoặc drop shadows; hệ thống có zero elevation và zero radius
- Không set body hoặc nav text lớn hơn 26px; scale nhảy trực tiếp lên 58px cho sub-headings và 86px cho display, và việc lấp đầy khoảng trống đó phá hủy sự tương phản
- Không thêm hover color changes, underlines, hoặc button styles vào tên dự án — chúng đọc như một danh sách, không phải link
- Không dùng nhiều hơn một typeface trên mỗi khối text; việc trộn Teg với Beatricedisplay trong cùng một dòng phá vỡ hệ thống typographic

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Plaster White | `#ffffff` | Canvas trang mặc định cho section design; tất cả text và label hiển thị dưới dạng #111111 trên đó |
| 2 | Carbon | `#111111` | Canvas đảo ngược cho section film; tất cả text và label hiển thị dưới dạng #ffffff trên đó |

## Imagery

Không có bất kỳ hình ảnh nào — trang web là typography thuần túy. Không có ảnh chụp, minh họa, ảnh chụp màn hình sản phẩm, thumbnail dự án, icon, hoặc đồ họa trang trí. Mọi quyết định thị giác đều được thực hiện thông qua type, đảo ngược màu sắc, và nhịp điệu không gian. Ngay cả email liên hệ trong nav cũng được hiển thị dưới dạng text thô thay vì icon. Sự vắng mặt của hình ảnh là ngôn ngữ thị giác định nghĩa: bản thân tác phẩm là portfolio, và typography yêu cầu bạn nhận ra các tên.

## Layout

Trang là một scroll dọc gồm các section full-bleed xen kẽ giữa bề mặt trắng và gần đen. Không có hero truyền thống — viewport mở trực tiếp vào distributed top nav, sau đó ngay lập tức vào một danh sách tên dự án canh trái. Mỗi section bắt đầu bằng một label nhỏ tracking rộng ('Design', 'Film') tiếp theo là một stack tên dự án cỡ lớn neo ở margin trái. Nội dung bất đối xứng và canh trái xuyên suốt; không có text căn giữa, không có right rail, không có grid columns. Bản thân nav là quyết định layout ngang duy nhất, và nó dùng space-between để đẩy bốn text item ra bốn cạnh của viewport. Section breaks được tạo hoàn toàn bằng đảo ngược màu bề mặt — không có divider, rule, hoặc spacing thêm giữa các section ngoài padding trong 104px. Mật độ tổng thể cực kỳ thưa thớt: một hoặc hai text element trên mỗi chiều cao viewport, với những vùng rộng lớn của negative space.

## Agent Prompt Guide

## Quick Color Reference
- background (light): #ffffff
- background (dark): #111111
- text (on light): #111111
- text (on dark): #ffffff
- border: #2b2b2b
- accent: none (monochrome system)
- primary action: no distinct CTA color

## Example Component Prompts
1. **Distributed top nav**: Hàng ngang full-width ở đầu trang, padding 40px từ mép viewport. Bốn text item được đẩy ra các cạnh xa với space-between justification. Items dùng Diatype 500 ở 26px, màu #111111. Item ngoài cùng bên trái (tên chủ sở hữu) là weight 700; ba item còn lại là weight 500.

2. **Section label**: Text marker nhỏ tracking rộng đọc 'Design' hoặc 'Film'. Set bằng New Grotesk 600, ~12-14px, letter-spacing 0.069em, màu #111111 trên nền trắng. Nằm cách 40-56px phía trên tên dự án đầu tiên trong danh sách bên dưới.

3. **Oversized project name**: Khối text neo ở margin trái, font Teg 500, 86px, line-height 1.04, letter-spacing -0.033em, màu #111111. Không gạch chân, không hover state, không card xung quanh — tên nằm trực tiếp trên canvas trắng với zero decoration.

4. **Full-bleed dark section**: Một section lấp đầy toàn bộ chiều rộng viewport với background #111111. Padding trong là 104px trên và dưới, 40px trái. Tất cả text bên trong đảo ngược thành #ffffff. Section chứa cùng cấu trúc label-cộng-danh sách như các section sáng, không có chuyển tiếp thị giác hoặc divider từ section trắng phía trước.

5. **Project list stack**: Một cột dọc gồm các tên dự án với kích thước xen kẽ — một số ở 86px trong Teg 500/600, số khác ở 58px trong Beatricedisplay 500/600. Mỗi tên trên một dòng riêng với khoảng cách dọc 0-4px giữa các dòng để các tên gần như chạm nhau, đọc như một bức tường typographic liên tục.

## Similar Brands

- **Manual (manual.co)** — Cùng triết lý text-as-portfolio với tên dự án cỡ lớn xếp chồng trên canvas gần như trống
- **Rauno Freiberg (raunofreiberg.com)** — Typography canh trái một cột, bảng màu đơn sắc, không hình ảnh, tác phẩm được trình bày dưới dạng danh sách typographic
- **Frank Chimero** — Cảm giác editorial manuscript với whitespace rộng rãi và typography mang toàn bộ trọng lượng thị giác
- **Bret Victor** — Sự kiềm chế typographic cực độ, cấu trúc trang chỉ có text, mật độ nội dung được thể hiện qua các bước nhảy kích thước thay vì hình ảnh

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-plaster-white: #ffffff;
  --color-carbon: #111111;
  --color-ink-black: #000000;
  --color-graphite: #2b2b2b;

  /* Typography — Font Families */
  --font-teg: 'Teg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-beatrice-display: 'Beatrice Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-beatrice: 'Beatrice', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-diatype: 'Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-new-grotesk: 'New Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 26px;
  --leading-caption: 1.15;
  --text-heading: 58px;
  --leading-heading: 1.05;
  --tracking-heading: -0.17px;
  --text-display: 86px;
  --leading-display: 1.04;
  --tracking-display: -2.84px;

  /* Typography — Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-104: 104px;

  /* Layout */
  --page-max-width: 1400px;
  --section-gap: 104px;
  --card-padding: 0px;
  --element-gap: 16px;

  /* Named Radii */
  --radius-none: 0px;

  /* Surfaces */
  --surface-plaster-white: #ffffff;
  --surface-carbon: #111111;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-plaster-white: #ffffff;
  --color-carbon: #111111;
  --color-ink-black: #000000;
  --color-graphite: #2b2b2b;

  /* Typography */
  --font-teg: 'Teg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-beatrice-display: 'Beatrice Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-beatrice: 'Beatrice', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-diatype: 'Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-new-grotesk: 'New Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 26px;
  --leading-caption: 1.15;
  --text-heading: 58px;
  --leading-heading: 1.05;
  --tracking-heading: -0.17px;
  --text-display: 86px;
  --leading-display: 1.04;
  --tracking-display: -2.84px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-104: 104px;
}
```