# Charlie Phipps

> Charlie Phipps — Style Reference

## Prompt Content

```
# Charlie Phipps — Style Reference
> oversized editorial gallery wall — một headline Helvetica khổng lồ duy nhất và một bức ảnh full-bleed, không gì khác

**Theme:** mixed

Charlie Phipps là portfolio của một graphic designer London, được thể hiện như một hệ thống poster editorial cỡ lớn: ảnh full-bleed làm hero canvas, một headline Helvetica Neue đồ sộ trên mỗi màn hình, và sự im lặng gần như tuyệt đối về màu sắc. Trang web mang phong cách như một zine in ấn được phóng to lên kích thước tường — weight 400 ở 162px là một sự phá vỡ quy tắc có chủ đích (không có tiếng hét in đậm, chỉ là những chữ cái mỏng manh tự tin) kết hợp với negative tracking mạnh, khiến headline cắt vào viewport. Canvas nền gần như đen (#101011) để những mảng màu chụp ảnh bùng nổ mạnh hơn, nhưng các content section lại chuyển sang trắng với cùng sự kiềm chế đầy kịch tính. Không có nút bấm, không góc bo tròn, không đổ bóng, không color token — tương tác được gợi ý bằng gạch chân mảnh và trạng thái con trỏ, navigation được rút gọn thành ba link mảnh ở một góc. Khoảng trắng là công cụ cấu trúc chính, không phải card hay divider.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Canvas Black | `#101011` | `--color-canvas-black` | Canvas nền trang bên dưới ảnh full-bleed và các dải tối; màu chữ chính trên bề mặt sáng; gạch chân link trong ngữ cảnh tối |
| Paper White | `#ffffff` | `--color-paper-white` | Màu chữ chính trên nền tối/ảnh chụp; background content section; màu border chủ đạo (đường kẻ mảnh và divider xuyên suốt layout) |
| Ink Black | `#000000` | `--color-ink-black` | Màu heading và body text trên bề mặt sáng; màu border cấu trúc thứ hai — được dùng ở bất cứ đâu cần một cạnh cứng hơn #101011 |
| Fog Gray | `#ededed` | `--color-fog-gray` | Surface tint nhẹ để phân tách content block khỏi nền trắng; border mềm trên body text và card nơi đường kẻ trắng tinh sẽ biến mất |
| Smoke Gray | `#bab7b2` | `--color-smoke-gray` | Accent heading nhẹ nhàng — dùng cho secondary heading và border nơi hierarchy cần lùi xuống dưới primary type |
| Ash Gray | `#888888` | `--color-ash-gray` | Body text metadata, gạch chân link trong ngữ cảnh sáng, và border có trọng lượng trung bình — neutral đa năng cho bất cứ thứ gì cần được thấy nhưng không nổi bật |
| Charcoal | `#262627` | `--color-charcoal` | Secondary border tối nhất và muted text trên content section sáng — chỉ sáng hơn canvas black một bước, giúp các phần tử tối cảm thấy thuộc cùng một hệ |
| Void | `#080809` | `--color-void` | Gần như đen tuyền cho border link tối nhất và emphasis text — không thể phân biệt bằng mắt với #000000 nhưng được giữ riêng biệt trong thang đo để nhấn mạnh sâu nhất |

## Tokens — Typography

### Helvetica Neue — Toàn bộ hệ thống typography. Weight 400 ở 162px là signature move — hầu hết portfolio sẽ dùng 700-900 cho hero lớn thế này; Phipps dùng regular, để kích thước khổng lồ và negative tracking mạnh mẽ tự mang lại uy lực thay vì stroke weight. LineHeight 0.90 ở display size khiến hero hai dòng thực sự khóa liên kết thị giác. Tất cả text khác (body, label, navigation, link) đều cùng family và cùng weight — không có secondary typeface voice. · `--font-helvetica-neue`
- **Thay thế:** Inter, Neue Haas Grotesk, Arial, hoặc bất kỳ neo-grotesque trung tính nào — nhưng font thay thế phải giữ weight 400 cho display; fallback weight 700 sẽ phá hỏng cảm giác editorial
- **Weights:** 400 (chỉ regular — không bold, không medium, không light)
- **Sizes:** 13px, 16px, 17px, 19px, 21px, 52px, 64px, 162px
- **Line height:** 0.90 (display) / 1.00 (large headings) / 1.20 (body)
- **Letter spacing:** -0.024em ở 162px (≈-3.9px), -0.013em ở 64px (≈-0.8px), -0.012em ở 52px (≈-0.6px), -0.010em ở 21px (≈-0.2px), -0.004em ở 16-19px (≈-0.06 to -0.08px)
- **Vai trò:** Toàn bộ hệ thống typography. Weight 400 ở 162px là signature move — hầu hết portfolio sẽ dùng 700-900 cho hero lớn thế này; Phipps dùng regular, để kích thước khổng lồ và negative tracking mạnh mẽ tự mang lại uy lực thay vì stroke weight. LineHeight 0.90 ở display size khiến hero hai dòng thực sự khóa liên kết thị giác. Tất cả text khác (body, label, navigation, link) đều cùng family và cùng weight — không có secondary typeface voice.

### Times — Chỉ dùng làm caption ảnh 13px hoặc photo metadata — serif xuất hiện như một điểm đối trọng editorial có chủ đích với hệ thống Helvetica, phá vỡ sự đơn điệu toàn-grotesque ở micro scale · `--font-times`
- **Thay thế:** Times New Roman, bất kỳ transitional serif nào (Lora, Source Serif)
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.20
- **Vai trò:** Chỉ dùng làm caption ảnh 13px hoặc photo metadata — serif xuất hiện như một điểm đối trọng editorial có chủ đích với hệ thống Helvetica, phá vỡ sự đơn điệu toàn-grotesque ở micro scale

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|-----------|-------------|----------------|-------|
| caption | 13px | 1.2 | — | `--text-caption` |
| body-sm | 16px | 1.2 | -0.06px | `--text-body-sm` |
| subheading | 19px | 1.2 | -0.08px | `--text-subheading` |
| heading-sm | 21px | 1.2 | -0.21px | `--text-heading-sm` |
| heading | 52px | 1 | -0.62px | `--text-heading` |
| heading-lg | 64px | 1 | -0.83px | `--text-heading-lg` |
| display | 162px | 0.9 | -3.89px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|-------|-------|
| 6 | 6px | `--spacing-6` |
| 13 | 13px | `--spacing-13` |
| 26 | 26px | `--spacing-26` |
| 41 | 41px | `--spacing-41` |

### Border Radius

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

### Layout

- **Page max-width:** 1400px
- **Section gap:** 80px
- **Card padding:** 13px
- **Element gap:** 26px

## Components

### Full-Bleed Hero Photograph
**Vai trò:** Background mở đầu màn hình

Ảnh chiếm 100vw × 100vh, không overlay, không làm tối, không gradient. Tất cả UI element nổi lên trên: navigation, display headline, description, scroll indicator. Hình ảnh chính là thương hiệu — không thêm gradient trang trí hay vignette.

### Display Headline
**Vai trò:** Câu tuyên bố một dòng trên hero

Helvetica Neue 162px / lineHeight 0.90 / weight 400 / letter-spacing -3.89px / color #ffffff. Cố tình kéo dài ra ngoài mép viewport — việc cắt xén là một phần của bố cục. Một câu duy nhất, không dấu chấm, thì hiện tại. Neo góc trên bên trái với căn chỉnh không padding — type nằm sát mép trang.

### Thin Top Navigation
**Vai trò:** Site chrome cố định

Ba text link bằng Helvetica Neue 13-16px / weight 400 ở đầu mỗi màn hình: tên thương hiệu (trái), section index (giữa), profile (phải). Không background, không border, không logo mark. Link chỉ dùng gạch chân 1px khi hover. Khi nằm trên ảnh, text là #ffffff; trên content section trắng, text là #101011.

### Section Label (EXPLORE / LATEST WORKS)
**Vai trò:** Section identifier dạng small-caps

Xếp chồng hai dòng: nhãn category viết hoa (ví dụ "EXPLORE") + số đếm trong ngoặc đơn + dòng phụ (ví dụ "Case Studies"). Helvetica Neue 16px / weight 400 / #000000. Không bullet, không border, không background — chỉ typography chặt chẽ neo ở lề trái.

### Editorial Section Headline
**Vai trò:** Mở đầu content section lớn

Helvetica Neue 52-64px / lineHeight 1.00 / weight 400 / letter-spacing -0.6 đến -0.8px / #000000. Dùng trong content section trắng như điểm đối trọng với display hero — cùng weight, cùng family, chỉ nhỏ hơn. Dấu chấm ở cuối câu là một lựa chọn chấm câu đặc trưng.

### Body Description Block
**Vai trò:** Đoạn văn ngữ cảnh căn giữa

Ba đến bốn dòng Helvetica Neue 19-21px / lineHeight 1.2 / weight 400 / #ffffff trên nền tối hoặc #000000 trên nền sáng. Max-width 480-520px, căn giữa theo chiều ngang trên màn hình. Nhịp dọc 26px rộng rãi giữa các dòng.

### Social Link Row
**Vai trò:** External link ở footer

Hai hoặc ba inline text link bằng Helvetica Neue 16px / weight 400, cách nhau bằng khoảng cách ngang 26px. Mỗi link được đặt trước bởi tên nền tảng cùng kích thước; mũi tên ngoài (↗) là affordance duy nhất — không icon, không button, không gạch chân mặc định. Nằm sát lề trái ở cuối trang.

### Scroll Indicator
**Vai trò:** Một mũi tên xuống duy nhất ở cuối viewport

Ký tự mũi tên xuống mảnh (↓) bằng Helvetica Neue 16px / weight 400 / #ffffff. Đặt absolute ở góc dưới bên trái, không animation, không label. Biến mất khi người dùng cuộn qua hero.

### Project Card (case study tile)
**Vai trò:** Mẫu work ưu tiên hình ảnh trong project index

Ảnh full-bleed ở tỷ lệ khung hình tự nhiên (thường là 4:3 hoặc 16:9) không padding, không border, không radius. Caption xuất hiện bên dưới bằng Times 13px / #000000 nếu có. Hình ảnh là element duy nhất — không card surface, không metadata overlay, không hover state nào ngoài con trỏ.

### Email Contact Link
**Vai trò:** Footer contact ở góc dưới bên phải

Một chuỗi text duy nhất (địa chỉ email) bằng Helvetica Neue 16px / weight 400 / #ffffff trên nền tối hoặc #000000 trên nền sáng. Không icon phong bì, không button chrome — chỉ địa chỉ dưới dạng link.

## Do's and Don'ts

### Do
- Chỉ dùng Helvetica Neue weight 400 cho toàn bộ giao diện — không bao giờ dùng bold, medium, hay light variant; hệ thống một weight là signature
- Đặt display headline ở 162px với lineHeight 0.90 và letter-spacing -3.89px; để dòng ngắt tự nhiên và cho phép viewport cắt text
- Chỉ dùng spacing scale 6 / 13 / 26 / 41px — không dùng giá trị tùy ý ở giữa, và dành 41px cho các section break lớn nhất
- Đặt ảnh full-bleed phía sau text mà không có overlay gradient hay scrim làm tối — độ tương phản của chính ảnh phải đảm bảo khả năng đọc, hoặc dịch chuyển vị trí text đến vùng sạch của ảnh
- Giữ bảng màu 100% achromatic — #101011 canvas, #ffffff text-on-photo, #000000 text-on-paper, và thang xám chỉ dùng cho border và metadata
- Thả navigation ở mép viewport ở ba vị trí (trái / giữa / phải) dùng text 13-16px — không bao giờ đóng khung, thêm border, hay background cho nó
- Kết thúc editorial section headline bằng dấu chấm ("Selected works ©2022.") — dấu chấm hết câu khẳng định là một phần của giọng điệu typographic

### Don't
- Không đưa bất kỳ màu sắc nào — không brand red, không accent blue, không button fill; ảnh chụp là nguồn màu duy nhất
- Không thêm border-radius vào bất kỳ element nào — giữ tất cả góc ở 0px; góc bo tròn sẽ phá vỡ logic printed-poster
- Không dùng box-shadow, drop-shadow, hay bất kỳ hiệu ứng elevation nào — thiết kế phẳng trên mặt phẳng ảnh là chủ đích
- Không chuyển display weight sang 700 hay 800 trong bất kỳ ngữ cảnh nào — nếu heading cần nặng hơn, hãy tăng kích thước; 400 ở scale là quyền lực duy nhất hệ thống cho phép
- Không bọc text content trong card, panel, hay container có border — các section được phân tách chỉ bằng khoảng trắng, không bao giờ bằng chrome
- Không dùng icon cho social link, email, hay navigation — text cộng với mũi tên ngoài ↗ là toàn bộ vốn từ vựng icon
- Không dùng label viết hoa tracking-wide cho body copy — chỉ các section identifier nhỏ (EXPLORE, LATEST WORKS) mới dùng pattern xếp chồng

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|--------|----------|
| 0 | Canvas | `#101011` | Lớp nền tối — chỉ hiện ở phần trên cùng và dưới dạng dải nav mảnh; tạo sân khấu cho ảnh full-bleed |
| 1 | Photographic Surface | `#101011` | Ảnh full-bleed nằm trên canvas tối, khiến màu bão hòa (tàu điện ngầm đỏ, billboard art) trở thành sự kiện màu sắc duy nhất trên màn hình |
| 2 | Paper | `#ffffff` | Background content section — lật ngược tâm trạng từ điện ảnh sang editorial, mang đến bề mặt đọc sạch cho body type và case study imagery |
| 3 | Tinted Card | `#ededed` | Lớp phân tách tinh tế cho metadata block, project tile, hoặc thông tin phụ nhóm trên nền trắng |

## Elevation

Thiết kế có zero elevation — không shadow, không border-as-frame, không card nổi. Phân cấp bề mặt được thiết lập hoàn toàn thông qua bleed ảnh (full-bleed image = level 1) so với white paper (content surface = level 2) so với dark canvas bên dưới mọi thứ (level 0). Khi một block cần cảm giác riêng biệt, nó được gán một bức ảnh, được thêm khoảng trắng, hoặc chuyển sang white paper — không bao giờ được xử lý bằng shadow hay border.

## Imagery

Photography là tài sản thương hiệu chính và là nguồn màu sắc duy nhất trong toàn bộ hệ thống. Hero dùng một bức ảnh môi trường lớn duy nhất (hiện tại là tàu điện ngầm đỏ London bên cạnh một collage billboard) chụp ở tầm đường phố với độ tương phản cao và màu bão hòa — kiểu khung hình một designer có thể chụp bằng điện thoại khi đang đi bộ. Ảnh luôn full-bleed, luôn không bị cắt theo tỷ lệ cố định, và luôn được phép tràn ra cả bốn cạnh của viewport. Bên dưới hero, project case study được trình bày dưới dạng ảnh full-bleed bổ sung ở tỷ lệ khung hình gốc, không padding, không góc bo tròn, và không text chồng lên. Không có illustration, không 3D render, không abstract graphic, không icon system, không decorative shape — khung hình chụp ảnh CHÍNH LÀ ngôn ngữ thị giác.

## Layout

Page model luân phiên giữa hai trạng thái: (1) hero ảnh tối full-bleed nơi type nổi trong không gian gần như đen không có ranh giới nội dung, và (2) content section editorial trắng nơi text block max-width 1400px nằm trên một trường giấy sạch. Navigation là một hàng text ba link cố định ở trên cùng, không menu bar, không sidebar. Hero bất đối xứng — headline neo góc trên bên trái cắt cạnh phải, description block căn giữa, nav phân bố trái/giữa/phải, scroll indicator góc dưới trái, social link góc dưới trái, email góc dưới phải. Content section là một cột với section label (EXPLORE / Case Studies) làm neo lề trái và một headline lớn + đoạn văn ở khu vực đọc trên bên trái, sau đó là ảnh project lớn xuất hiện bên dưới dưới dạng tile chỉ có hình ảnh. Nhịp điệu là: một tuyên bố đồ sộ, một hơi thở khoảng trắng, một bức ảnh, một câu caption. Không có card grid, không multi-column feature row, không pricing table — layout là một scroll dọc của các editorial spread, mỗi spread bị chi phối bởi một hình ảnh duy nhất và một suy nghĩ duy nhất.

## Agent Prompt Guide

**Quick Color Reference**
- text (trên nền trắng): #000000
- text (trên ảnh/nền tối): #ffffff
- background (content section): #ffffff
- background (canvas/bên dưới ảnh): #101011
- border / hairline: #ededed (sáng) hoặc #000000 (nhấn mạnh)
- muted text: #888888
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

1. **Full-bleed photographic hero** — Bắt đầu mỗi trang với ảnh 100vw × 100vh lấp đầy viewport edge-to-edge. Đặt headline Helvetica Neue 162px / weight 400 / lineHeight 0.90 / letter-spacing -3.89px màu #ffffff, neo góc trên bên trái, cho phép cắt ra ngoài cạnh phải viewport. Thêm tên thương hiệu bằng 16px Helvetica Neue 400 ở góc trên bên trái và hai link nav nữa ở trên-giữa và trên-phải. Không overlay, không gradient, không scrim — ảnh phải là toàn bộ background.

2. **Editorial content opener** — Content section trắng (#ffffff), max-width 1400px căn giữa. Lề trái giữ một label xếp chồng: "EXPLORE" bằng 16px Helvetica Neue 400 #000000 trên dòng một, "(04)" trên dòng hai, "Case Studies" trên dòng ba. Bên phải, headline 52px Helvetica Neue 400 #000000 với lineHeight 1.00 và letter-spacing -0.62px, kết thúc bằng dấu chấm. Bên dưới headline, một đoạn văn 21px / lineHeight 1.2 / #000000, max-width 520px.

3. **Project photograph tile** — Một ảnh full-bleed duy nhất ở tỷ lệ khung hình gốc (target 4:3 hoặc 16:9), border-radius 0px, không padding, không border, không shadow, không caption overlay. Nếu cần caption, đặt chuỗi 13px Times 400 #000000 trực tiếp bên dưới ảnh với top margin 13px. Hình ảnh là toàn bộ component — không card surface.

4. **Footer link row** — Ba inline text link 16px Helvetica Neue 400 màu #ffffff, cách nhau bằng khoảng cách ngang 26px. Mỗi link chỉ là tên nền tảng hoặc trang (ví dụ "Instagram", "LinkedIn", "Email") với mũi tên mảnh ↗ được thêm vào external link. Không icon, không gạch chân mặc định, không button. Đặt sát lề trái hoặc lề phải ở cạnh dưới viewport với page padding 26px.

5. **Scroll indicator** — Một ký tự ↓ duy nhất bằng 16px Helvetica Neue 400 #ffffff, đặt absolute ở góc dưới bên trái của hero viewport. Không animation, không label, không border. Biến mất sau khi người dùng cuộn qua màn hình đầu tiên.

## Similar Brands

- **Manual (manual.co)** — Cùng Helvetica Neue một weight 400, display headline cỡ lớn bị cắt ở mép viewport, và bảng màu gần như hoàn toàn achromatic nơi màu sắc duy nhất đến từ ảnh sản phẩm full-bleed
- **Rauno Freiberg (raunofreiberg.com)** — Cùng cách tiếp cận portfolio editorial phẳng — không card surface, không góc bo tròn, không shadow, sans-serif một weight ở kích thước cực lớn, và text nổi trực tiếp trên ảnh full-bleed
- **Studio Bruch (studiobruch.com)** — Cùng cảm giác printed-poster với UI 100% achromatic, radii 0px ấn tượng, và type regular cỡ lớn dùng kích thước và tracking thay vì bold weight để thu hút sự chú ý
- **Pentagram (pentagram.com)** — Cùng sự kiềm chế editorial của agency thiết kế London — khoảng trắng rộng rãi làm công cụ cấu trúc chính, hệ thống type một weight, và photography được xử lý như element màu sắc duy nhất

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-black: #101011;
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-fog-gray: #ededed;
  --color-smoke-gray: #bab7b2;
  --color-ash-gray: #888888;
  --color-charcoal: #262627;
  --color-void: #080809;

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

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --text-body-sm: 16px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.06px;
  --text-subheading: 19px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.08px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.21px;
  --text-heading: 52px;
  --leading-heading: 1;
  --tracking-heading: -0.62px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.83px;
  --text-display: 162px;
  --leading-display: 0.9;
  --tracking-display: -3.89px;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-6: 6px;
  --spacing-13: 13px;
  --spacing-26: 26px;
  --spacing-41: 41px;

  /* Layout */
  --page-max-width: 1400px;
  --section-gap: 80px;
  --card-padding: 13px;
  --element-gap: 26px;

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

  /* Surfaces */
  --surface-canvas: #101011;
  --surface-photographic-surface: #101011;
  --surface-paper: #ffffff;
  --surface-tinted-card: #ededed;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-black: #101011;
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-fog-gray: #ededed;
  --color-smoke-gray: #bab7b2;
  --color-ash-gray: #888888;
  --color-charcoal: #262627;
  --color-void: #080809;

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

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --text-body-sm: 16px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.06px;
  --text-subheading: 19px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.08px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.21px;
  --text-heading: 52px;
  --leading-heading: 1;
  --tracking-heading: -0.62px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.83px;
  --text-display: 162px;
  --leading-display: 0.9;
  --tracking-display: -3.89px;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-13: 13px;
  --spacing-26: 26px;
  --spacing-41: 41px;
}
```