# Photographer

> # Photographer — Style Reference

## Prompt Content

```
# Photographer — Style Reference
> Wordmark đen khổng lồ đổ xuống xuyên qua một phòng trưng bày ảnh tường trắng — chữ CHÍNH LÀ kiến trúc.

**Theme:** light

Julia là một portfolio nhiếp ảnh ưu tiên thị giác: một canvas trắng chứa một masonry lỏng lẻo gồm các khung hình editorial cỡ lớn, bị ngắt quãng bởi một wordmark đen khổng lồ, vừa đóng vai trò nhận diện vừa là công cụ đồ họa. Giao diện cố tình chỉ còn bộ xương — không menu, không card, không nút bấm — để nhiếp ảnh editorial bão hòa màu sắc gánh vác toàn bộ màu sắc, trong khi chrome chỉ đen trên trắng. Mỗi ô ảnh được bao quanh bởi một đường viền mảnh màu sắc (chromatic hairline border) lấy từ màu chủ đạo của chính bức ảnh, biến grid thành một nghiên cứu về màu sắc. Typography chỉ làm một việc và làm thật to: một wordmark cực đậm, tracking chặt, neo trang và chứng minh rằng hệ thống thiết kế đủ tự tin để để khoảng trắng làm phần còn lại.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, khoảng trắng âm giữa các tile, bề mặt để wordmark hiện rõ |
| Wordmark Black | `#000000` | `--color-wordmark-black` | Wordmark Julia, toàn bộ body và nav text, đường viền grid mảnh, và các đường cấu trúc — màu cấu trúc duy nhất trong hệ thống |
| Vermillion Frame | `#e21715` | `--color-vermillion-frame` | Đường viền màu mảnh trên các tile ảnh có màu chủ đạo đỏ — đường viền accent xuất hiện nhiều nhất trong grid |
| Cobalt Frame | `#086392` | `--color-cobalt-frame` | Đường viền màu mảnh trên các tile ảnh xanh lam — kết hợp với Vermillion làm trục phụ của hệ thống khung màu |
| Marigold Frame | `#f2572c` | `--color-marigold-frame` | Accent cam cho đường viền action dạng outline, link label, và điểm nhấn tương tác nhẹ |
| Fern Frame | `#5bc52c` | `--color-fern-frame` | Đường viền màu cho tile ảnh chủ đạo xanh lá — hoàn thiện vòng quay bốn màu trên masonry |
| Brass Frame | `#b3813c` | `--color-brass-frame` | Đường viền màu cho tile ảnh tông vàng/gold — mở rộng vốn từ vựng khung màu lên năm sắc |
| Signal Red | `#f11216` | `--color-signal-red` | Đường viền action dạng outline và accent link trong navigation và các cạnh tương tác — màu đỏ bão hòa nhất trong hệ thống |
| Cyan Blue | `#2e99c9` | `--color-cyan-blue` | Đường viền action dạng outline và accent link trong navigation, kết hợp với Signal Red cho các cạnh link tương tác |

## Tokens — Typography

### Helvetica — Primary display + UI typeface. Weight 700 là bất di bất dịch — dùng ở 700 cho nav, link, và wordmark Julia khổng lồ. Tracking chặt -0.02em kéo các chữ cái khổng lồ thành một khối điêu khắc duy nhất thay vì một dòng chữ. Wordmark nằm ở hàng trăm pixel trong khi nav/label ở 10-18px, tạo ra độ tương phản typography cực đoan giữa nhận diện và chrome. · `--font-helvetica`
- **Thay thế:** Inter (700), Arial Black, Neue Haas Grotesk Display Pro Bold
- **Weights:** 700
- **Sizes:** 10px, 18px (thô); 200-400px cho wordmark Julia (suy ra từ bằng chứng thị giác)
- **Line height:** 1.00
- **Letter spacing:** -0.0200em
- **Vai trò:** Primary display + UI typeface. Weight 700 là bất di bất dịch — dùng ở 700 cho nav, link, và wordmark Julia khổng lồ. Tracking chặt -0.02em kéo các chữ cái khổng lồ thành một khối điêu khắc duy nhất thay vì một dòng chữ. Wordmark nằm ở hàng trăm pixel trong khi nav/label ở 10-18px, tạo ra độ tương phản typography cực đoan giữa nhận diện và chrome.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| nav | 10px | 1 | -0.2px | `--text-nav` |
| body-sm | 14px | 1.4 | — | `--text-body-sm` |
| body | 18px | 1.5 | -0.36px | `--text-body` |
| display | 320px | 0.85 | -6.4px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 8 | 8px | `--spacing-8` |
| 15 | 15px | `--spacing-15` |
| 43 | 43px | `--spacing-43` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tiles | 0px |
| borders | 0px |
| buttons | 0px |

### Layout

- **Section gap:** 120px
- **Card padding:** 0px
- **Element gap:** 15px

## Components

### Masonry Tile
**Vai trò:** Đơn vị nội dung chính — một bức ảnh editorial trong grid

Ảnh full-bleed, không có internal padding, không border-radius (0px). Được bao quanh bởi đường viền màu mảnh 1px, màu sắc được lấy từ tông màu chủ đạo của ảnh (Vermillion, Cobalt, Marigold, Fern, hoặc Brass). Tiles có tỷ lệ khung hình đa dạng — portrait, landscape, và square xen kẽ — tạo nhịp điệu masonry tự nhiên. Các tile cách nhau 15px gutter.

### Julia Wordmark Overlay
**Vai trò:** Yếu tố nhận diện thương hiệu, đồng thời là công cụ đồ họa xuyên suốt trang

Helvetica Bold khổng lồ ở khoảng 320px, line-height 0.85, letter-spacing -6.4px. Màu #000000 trên nền trắng. Nằm ở lề trái trang, trải dài toàn bộ chiều cao dọc của grid. Chữ 'J' trong Julia kéo dài xuống dưới baseline. Đóng vai trò vừa là anchor navigation vừa là khung hình thị giác cho masonry.

### Navigation Links
**Vai trò:** Navigation site tối giản

Helvetica 700 ở 10px, letter-spacing -0.2px. Text #000000 trên nền trắng. Gạch chân bằng đường viền màu 1px (thường là Signal Red hoặc Cobalt Blue). Viết hoa hoặc viết thường, căn trái. Không có background fill, không padding, không hình dạng nút — link là các yếu tố typography trần trụi.

### Chromatic Hairline Frame
**Vai trò:** Hệ thống đường viền trang trí cho các tile ảnh

Viền solid 1px với một trong năm màu accent: Vermillion (#e21715), Cobalt (#086392), Marigold (#f2572c), Fern (#5bc52c), hoặc Brass (#b3813c). Áp dụng cho cạnh ngoài của tile ảnh. Đường viền là một phần nhận diện thị giác của tile, không phải affordance UI — nó phản chiếu màu chủ đạo của bức ảnh bên trong.

### Image Caption / Label
**Vai trò:** Metadata tùy chọn bên dưới tile (tên dự án, khách hàng, ngày tháng)

Helvetica 700 ở 10px, #000000, letter-spacing -0.2px. Không background, không border. Nằm ngay dưới tile với khoảng cách dọc tối thiểu. Có thể có một đường gạch chân màu mảnh khớp với màu viền của tile.

### Full-Width Image Break
**Vai trò:** Các tile nhấn mạnh editorial trải dài toàn bộ chiều rộng grid

Một bức ảnh duy nhất phá vỡ masonry grid và chiếm toàn bộ chiều rộng nội dung. Không border, không padding, không caption chrome — để ảnh chiếm lĩnh viewport. Được sử dụng có chừng mực, khoảng một lần mỗi scroll-fold.

### Outlined Link / Action
**Vai trò:** Loại element tương tác duy nhất trong hệ thống

Không có filled buttons. Tất cả hành động đều là text link trần với đường viền màu 1px (Signal Red #f11216, Cobalt Blue #2e99c9, hoặc Vermillion #e21715). Helvetica 700, 18px, text #000000. Không background fill, không border-radius, không padding ngoài footprint của đường viền.

## Do's and Don'ts

### Do
- Dùng Helvetica 700 với độ tương phản kích thước cực đoan: 10-18px cho chrome, 200-400px cho wordmark Julia — tỷ lệ CHÍNH LÀ hệ thống phân cấp
- Áp dụng letter-spacing -0.02em cho tất cả type; tracking chặt hơn kéo các chữ cái đậm thành khối điêu khắc
- Bọc các tile ảnh trong đường viền màu mảnh 1px lấy từ tông màu chủ đạo của mỗi ảnh — grid trở thành một nghiên cứu màu sắc
- Giữ line-height ở 1.00 cho wordmark; các chữ cái phải chồng lên hoặc gần như chạm nhau theo chiều dọc để đạt hiệu ứng tối đa
- Dùng #000000 làm màu cấu trúc duy nhất — canvas trắng, text đen, đường mảnh đen; tất cả màu sắc đến từ nhiếp ảnh
- Để các tile cách nhau 15px gutter; không bao giờ thêm internal padding hoặc margin bên trong tile
- Duy trì border-radius 0px ở mọi nơi — chỉ có cạnh sắc, nhất quán với thẩm mỹ in ấn editorial

### Don't
- Không bao giờ thêm drop shadows, gradients, hoặc blur — hệ thống flat vì niềm tin
- Không bao giờ thêm background fill vào nút hoặc link; hệ thống này không có interactive elements dạng filled
- Không bao giờ dùng border-radius lớn hơn 0px trên tiles, frames, hoặc bất kỳ container nào
- Không bao giờ dùng màu cho body text — tất cả text là #000000; màu sắc chỉ dành cho borders và nội dung ảnh
- Không bao giờ thêm navigation bar, header, hoặc footer chrome cạnh tranh không gian thị giác với wordmark
- Không bao giờ dùng light hoặc thin weight của Helvetica; weight 700 là weight duy nhất trong hệ thống
- Không bao giờ thêm card padding, drop shadows, hoặc surface elevation để nhóm ảnh — grid CHÍNH LÀ cách nhóm

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang full-bleed — bức tường phòng trưng bày |
| 1 | Tile Surface | `#000000` | Nội dung tile ảnh — ảnh lấp đầy khung hình từ cạnh này sang cạnh kia |

## Elevation

Không có shadow. Các tile ảnh nằm sát trên canvas trắng; sự phân tách đạt được nhờ khoảng trắng rộng rãi và đường viền màu mảnh, không phải drop shadows. Hệ thống coi elevation là vật trang trí không cần thiết, sẽ cạnh tranh với hình ảnh.

## Imagery

Site là portfolio nhiếp ảnh, vì vậy hình ảnh là sản phẩm. Tất cả visuals đều là editorial photography bão hòa: fashion editorials, chân dung, và campaign work với color grading đậm. Ảnh full-bleed trong tile của chúng, không có góc bo tròn, không drop shadows, và không có overlay treatments. Bản thân nhiếp ảnh trải dài từ các mảnh chân dung cắt sát (bàn tay đeo nhẫn, thân trên, chi tiết khuôn mặt) đến các bức ảnh thời trang toàn cảnh. Xử lý màu sắc sống động và bão hòa — đỏ đậm, xanh điện, xanh lá axit, cam ấm — không desaturated hoặc u ám. Không có lifestyle staging hoặc candid reportage; mọi khung hình đều được kiểm soát và art-directed. Các ảnh mang bản sắc màu sắc riêng, và hệ thống đường viền màu của hệ thống lấy từ tông màu chủ đạo của mỗi bức ảnh, khiến grid hoạt động như một bảng màu tự tổ chức.

## Layout

Trang là một masonry grid full-bleed duy nhất, không có chiều rộng nội dung tối đa — tiles trải dài từ cạnh này sang cạnh kia. Wordmark Julia khổng lồ nằm ở phần bên trái viewport như một overlay cố định hoặc scroll-anchored, và masonry chảy về bên phải (và có thể phía sau) nó. Tiles có tỷ lệ khung hình đa dạng — portrait cao, landscape rộng, và square — tạo nhịp điệu hữu cơ, không đồng đều. Không có section breaks, không card grouping, không alternating bands. Navigation tối giản: một vài link typography trần, có lẽ ở góc trên bên phải hoặc ở vị trí cố định. Trang là một scroll liên tục duy nhất, không có hero, features, hoặc footer sections riêng biệt — nó LÀ một bức tường phòng trưng bày. Khoảng cách giữa các tile là 15px; chiều cao dọc của wordmark xác định ranh giới section ngầm của trang. Nội dung cực kỳ nặng về hình ảnh — text có lẽ chỉ chiếm 5% viewport tại bất kỳ thời điểm nào.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000
- background: #ffffff
- border: #000000 (cấu trúc) | #e21715, #086392, #f2572c, #5bc52c, #b3813c (khung tile màu)
- accent: Signal Red #f11216 (link tương tác)
- primary action: #e21715 (đường viền action dạng outline)

## Example Component Prompts

1. **Julia Wordmark Overlay**: Render 'Julia' ở 320px, Helvetica 700, line-height 0.85, letter-spacing -6.4px, #000000 trên canvas #ffffff. Căn trái, trải dài toàn bộ chiều cao viewport dọc. Phần đuôi chữ 'J' phải kéo dài xuống dưới baseline khoảng 30px. Không có element nào khác chồng lên các chữ cái.

2. **Masonry Tile with Chromatic Frame**: Một bức ảnh editorial full-bleed (tỷ lệ khung hình 3:4 portrait). Viền solid 1px màu #e21715 (Vermillion) ở cả bốn cạnh. Border-radius 0px. Không padding, không shadow, không caption bên trong. Khoảng cách 15px với các tile lân cận. Màu viền phải khớp với tông màu chủ đạo của ảnh.

3. **Navigation Link**: Text link trần, Helvetica 700, 10px, #000000, letter-spacing -0.2px. Gạch chân bằng viền 1px #f11216 (Signal Red). Không background, không padding, không border-radius, không hình dạng nút. Nằm ở góc trên bên phải trang.

4. **Full-Width Image Break**: Một bức ảnh editorial landscape tỷ lệ 16:9 trải dài toàn bộ chiều rộng viewport. Border-radius 0px, không border, không overlay, không caption. Dùng một lần mỗi scroll-fold để phá vỡ nhịp điệu masonry.

5. **Tile with Fern Border**: Một bức ảnh với chủ thể chủ đạo màu xanh lá. Được bọc trong viền solid 1px #5bc52c (Fern). Bên dưới tile, một caption Helvetica 700 10px màu #000000, với gạch chân 1px #5bc52c khớp với màu khung.

## Typography Philosophy

Wordmark Julia không phải là logo được đặt trên trang — nó là một tác phẩm sắp đặt typography. Ở 320px+ với Helvetica 700 và tracking -0.02em, cái tên này hoạt động như kiến trúc, chia trang thành các vùng không gian và chứng minh sự tự tin của hệ thống thiết kế. Bước nhảy kích thước cực đoan từ 18px (body) lên 320px (wordmark) — tỷ lệ gần 18:1 — cố tình chống lại hệ thống phân cấp. Hầu hết các hệ thống dùng tỷ lệ 3-4x giữa display và body. Julia dùng gần 20x vì wordmark không phải là 'nội dung' để đọc; nó là một bề mặt để sống trong đó. UI type ở 10-18px và không bao giờ lớn hơn, vì wordmark đã chiếm giữ thanh ghi trên.

## Color Philosophy

Hệ thống đường viền màu là lựa chọn cấu trúc đặc biệt nhất. Thay vì gán màu cho các danh mục (như hệ thống thiết kế điển hình với blue=link, red=error), Julia lấy màu viền của mỗi tile từ bức ảnh mà nó chứa. Grid trở nên tự tổ chức: một cái nhìn lướt qua trang cho thấy nhịp điệu màu sắc do nhiếp ảnh quyết định, không phải do một bảng màu cố định. Điều này có nghĩa là 'hệ thống màu sắc' là nổi lên (emergent) — nó không thể được xác định trước, chỉ có thể được giới hạn. Năm màu viền chính tắc (Vermillion, Cobalt, Marigold, Fern, Brass) đại diện cho các họ màu mà portfolio có xu hướng làm việc, và các tile mới sẽ tự nhiên rơi vào một trong các phạm vi này.

## Similar Brands

- **Garage Magazine** — Cùng sensibility editorial-print: nhận diện typography khổng lồ, tile ảnh full-bleed, canvas trắng, không UI chrome
- **System Magazine** — Cùng layout masonry-of-editorial-shots với wordmark sans-serif đậm overlay và nhiếp ảnh màu sắc
- **Mert & Marcus portfolio** — Cùng cách tiếp cận fashion-photography-first: image grid chiếm ưu thế, text tối giản và khổng lồ, màu sắc sống bên trong khung hình
- **Document Journal** — Cùng xử lý wordmark Helvetica-Bold-ở-kích-thước-cực-đoan với cấu trúc phòng trưng bày ảnh tường trắng
- **AnOther Magazine** — Cùng nhận diện typography đậm xếp lớp trên editorial photography bão hòa trên nền canvas trắng sạch

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-wordmark-black: #000000;
  --color-vermillion-frame: #e21715;
  --color-cobalt-frame: #086392;
  --color-marigold-frame: #f2572c;
  --color-fern-frame: #5bc52c;
  --color-brass-frame: #b3813c;
  --color-signal-red: #f11216;
  --color-cyan-blue: #2e99c9;

  /* Typography — Font Families */
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-nav: 10px;
  --leading-nav: 1;
  --tracking-nav: -0.2px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --text-body: 18px;
  --leading-body: 1.5;
  --tracking-body: -0.36px;
  --text-display: 320px;
  --leading-display: 0.85;
  --tracking-display: -6.4px;

  /* Typography — Weights */
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-8: 8px;
  --spacing-15: 15px;
  --spacing-43: 43px;

  /* Layout */
  --section-gap: 120px;
  --card-padding: 0px;
  --element-gap: 15px;

  /* Named Radii */
  --radius-tiles: 0px;
  --radius-borders: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-tile-surface: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-wordmark-black: #000000;
  --color-vermillion-frame: #e21715;
  --color-cobalt-frame: #086392;
  --color-marigold-frame: #f2572c;
  --color-fern-frame: #5bc52c;
  --color-brass-frame: #b3813c;
  --color-signal-red: #f11216;
  --color-cyan-blue: #2e99c9;

  /* Typography */
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-nav: 10px;
  --leading-nav: 1;
  --tracking-nav: -0.2px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --text-body: 18px;
  --leading-body: 1.5;
  --tracking-body: -0.36px;
  --text-display: 320px;
  --leading-display: 0.85;
  --tracking-display: -6.4px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-15: 15px;
  --spacing-43: 43px;
}
```