# Charlie

> Charlie — Style Reference

## Prompt Content

```
# Charlie — Style Reference
> Typography khắc đá tu viện trên nền obsidian. Một portfolio dùng một mảng tường đỏ để khiến sự im lặng trở nên chói tai.

**Theme:** dark

Portfolio của Charlie Le Maignan là một canvas editorial brutalism: khoảng đen thuần khiết làm nền trang, chữ trắng cỡ lớn là kiến trúc duy nhất, và một tấm đỏ dữ dội nổ tung trên nền đơn sắc. Ngôn ngữ thị giác là sự va chạm giữa một display face custom bị cắt xẻ (Brasparz) ở tỷ lệ phi lý với một neo-grotesque kiềm chế (NeueHaas) làm công việc thầm lặng. Mọi thứ đều được phép trở nên khổng lồ — line-height nén xuống 0.70, letter-spacing đẩy đến -0.079em — để chữ tràn ra ngoài viewport thay vì nằm gọn bên trong. Khối hero đỏ duy nhất hoạt động như dấu câu màu sắc duy nhất trong toàn bộ hệ thống; mọi thứ khác đều giữ sắc độ xám. Bề mặt phẳng, không có elevation, không gradient, không shadow trang trí — thiết kế giao tiếp qua tỷ lệ, độ tương phản, và một vụ nổ sắc độ duy nhất.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Obsidian | `#000000` | `--color-obsidian` | Canvas trang, bề mặt sâu — khoảng không mà mọi thứ nổi trên đó |
| Bone White | `#ffffff` | `--color-bone-white` | Chữ chính, viền nav pill, fill trạng thái active, đường kẻ mảnh, iconography |
| Ash Gray | `#838383` | `--color-ash-gray` | Chữ phụ muted, nhãn nav inactive, metadata thứ cấp |
| Alarm Red | `#ed1c24` | `--color-alarm-red` | Khối detonation hero — khoảnh khắc sắc độ duy nhất, dùng làm bề mặt full-bleed trên nền đen. Khiến đơn sắc như một hơi thở nín trước tiếng hét |

## Tokens — Typography

### Brasparz Variable — Signature display face cho hero detonations và wordmark. Dùng ở kích thước cực lớn tràn viewport với line-height nén xuống 0.70 để các ký tự chồng lên nhau theo chiều dọc. Negative tracking mạnh (xuống -0.079em ở 360px) siết chặt các ký tự thành một khối điêu khắc duy nhất. Các stylistic sets custom ss01 và ss02 bị TẮT rõ ràng (set thành 0) — các dạng hình học thô là thương hiệu, không có alternates · `--font-brasparz-variable`
- **Thay thế:** Druk Wide, Antonio
- **Weights:** 400
- **Kích thước:** 145px, 360px
- **Line height:** 0.70
- **Letter spacing:** -0.079em ở 360px co dần về -0.020em ở 145px
- **OpenType features:** `"ss01" 0, "ss02" 0`
- **Vai trò:** Signature display face cho hero detonations và wordmark. Dùng ở kích thước cực lớn tràn viewport với line-height nén xuống 0.70 để các ký tự chồng lên nhau theo chiều dọc. Negative tracking mạnh (xuống -0.079em ở 360px) siết chặt các ký tự thành một khối điêu khắc duy nhất. Các stylistic sets custom ss01 và ss02 bị TẮT rõ ràng (set thành 0) — các dạng hình học thô là thương hiệu, không có alternates

### NeueHaas — Body, navigation, UI labels. Ở 40px weight 700 đóng vai trò editorial heading cỡ trung. Weight 400 ở 19-20px đảm nhiệm paragraph và caption. Có calt, case, liga, ss01, ss02 đều active — font duy nhất được phép dùng stylistic alternates · `--font-neuehaas`
- **Thay thế:** Neue Haas Grotesk, Inter, Helvetica Neue
- **Weights:** 400, 700
- **Kích thước:** 19px, 20px, 40px
- **Line height:** 1.08, 1.25, 1.32
- **Letter spacing:** normal
- **OpenType features:** `"calt", "case", "liga", "ss01", "ss02"`
- **Vai trò:** Body, navigation, UI labels. Ở 40px weight 700 đóng vai trò editorial heading cỡ trung. Weight 400 ở 19-20px đảm nhiệm paragraph và caption. Có calt, case, liga, ss01, ss02 đều active — font duy nhất được phép dùng stylistic alternates

### Trajan-style serif (editorial credits, không có trong dữ liệu trích xuất nhưng có thể thấy) — Dòng credit small-caps dưới khối display — serif cổ điển ở kích thước nhỏ tạo gravitas editorial đối lập với kiểu chữ brutalism · `--font-trajan-style-serif-editorial-credits-not-in-extracted-data-but-visible`
- **Thay thế:** Cormorant SC, EB Garamond small caps
- **Weights:** 400
- **Kích thước:** 
- **Line height:** 1.3
- **Letter spacing:** 0.05em
- **Vai trò:** Dòng credit small-caps dưới khối display — serif cổ điển ở kích thước nhỏ tạo gravitas editorial đối lập với kiểu chữ brutalism

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body-sm | 19px | 1.32 | — | `--text-body-sm` |
| subheading | 40px | 1.08 | — | `--text-subheading` |
| display | 145px | 0.7 | -29px | `--text-display` |
| display-xl | 360px | 0.7 | -28.4px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 7 | 7px | `--spacing-7` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 50 | 50px | `--spacing-50` |
| 59 | 59px | `--spacing-59` |
| 127 | 127px | `--spacing-127` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 0px |
| pills | 100px |
| buttons | 100px |
| surfaces | 0px |

### Layout

- **Section gap:** 59px
- **Card padding:** 20px
- **Element gap:** 15px

## Components

### Outlined Pill Nav Button
**Vai trò:** Navigation items chính (Work, Type, About)

100px border-radius, viền 1px solid #ffffff, nền trong suốt, chữ #ffffff. Padding 7px dọc × 20px ngang. Font: NeueHaas 19px weight 400. Right margin 15px giữa các pill. Trạng thái inactive — viền đảm nhận công việc thị giác

### Active Filled Pill Nav Button
**Vai trò:** Navigation item hiện tại/được chọn

Cùng 100px radius, nhưng fill #ffffff với chữ #000000. Cùng padding 7px/20px, cùng NeueHaas 19px. Sự đảo ngược là điểm khác biệt duy nhất — không màu, không nhấn viền, chỉ đảo figure-ground

### Display Wordmark (Brasparz Massive)
**Vai trò:** Tên thương hiệu và hero detonation text

Brasparz Variable ở 145-360px, line-height 0.70, letter-spacing -0.079em ở 360px co dần về -0.020em ở 145px. Trắng trên đen, hoặc đen trên đỏ. Không max-width — tràn ra ngoài container có chủ đích. Line-height nén khiến các ký tự gần như chạm nhau theo chiều dọc

### Red Detonation Hero Block
**Vai trò:** Khoảnh khắc sắc độ duy nhất — hero/cover full-bleed

Nền #ed1c24, không viền, 0px radius, full viewport width. Chứa Brasparz display màu đen ở tỷ lệ tối đa. Vertical padding rộng rãi (50px+). Khối này là một bức tường, không phải card

### Editorial Credit Line
**Vai trò:** Attribution small-caps dưới display type

Serif cổ điển (Trajan-style), ~14px, letter-spacing 0.05em, trắng trên đỏ hoặc đen trên đỏ. Tạo chuyển đổi tông từ brutalism sang editorial-museum

### Caption Stack
**Vai trò:** Văn bản mô tả nhỏ (ví dụ: 'A COLLECTION OF INDEPENDENT & STUDIO WORK')

NeueHaas 19px weight 700, uppercase, #ffffff hoặc #000000 tùy bề mặt. Line-height chặt 1.25. Hoạt động như một nhãn, không phải body copy

### Floating Social Icon Stack
**Vai trò:** Utility icons cố định (heart, info, share) neo vào cạnh hero

Vertical stack căn phải ở cạnh phải của hero block. Viền 1px #000000 trên container tròn hoặc vuông, icon #000000. Không fill nền — icons nổi trên nền đỏ

### Project Tile (suy ra từ spacing tokens)
**Vai trò:** Mục portfolio work

Container ảnh full-bleed hoặc lớn, 0px radius, không shadow. Internal padding rộng ~30px. Image-first, không card chrome

## Do's and Don'ts

### Do
- Chỉ dùng Brasparz Variable ở 145px hoặc lớn hơn với line-height 0.70 — nhỏ hơn sẽ mất tác động điêu khắc
- Giữ letter-spacing trên display type ở -0.06em đến -0.08em; càng chặt khi kích thước càng lớn
- Đặt ss01 và ss02 thành 0 trên Brasparz — các dạng thô là bất khả thương lượng
- Dùng 100px border-radius trên tất cả interactive elements (buttons, tags, nav)
- Để hero block đỏ chạy full-bleed ở viewport width — không bao giờ đặt nó trong card
- Giữ tất cả text hoặc #ffffff (trên nền đen/đỏ) hoặc #000000 (trên nền đỏ) — không có body type xám trung
- Dùng NeueHaas 19-20px cho tất cả UI; không bao giờ đặt body dưới 19px

### Don't
- Đừng thêm gradient, shadow, hoặc bất kỳ depth-cueing nào — hệ thống phẳng theo doctrine
- Đừng dùng Brasparz cho body text hoặc UI labels — nó chỉ dành cho display và sẽ sụp đổ ở kích thước nhỏ
- Đừng thêm accent color thứ hai — đỏ là vốn từ vựng sắc độ duy nhất
- Đừng dùng mid-gray (#838383) cho bất cứ thứ gì lớn hơn caption — nó thất bại độ tương phản trên nền đen ở 3.8:1
- Đừng đặt display type trong hộp max-width — hãy để nó tràn ra viewport edges
- Đừng áp card-style padding, border, hoặc radius lên content surfaces — chỉ nav pills mới có 100px radius
- Đừng dùng uppercase letter-spacing chặt hơn -0.02em trên NeueHaas body — tracking pattern chỉ thuộc về Brasparz

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Obsidian Void | `#000000` | Canvas trang — baseline mà tất cả chữ trắng và red detonations nằm trên |
| 1 | Alarm Red | `#ed1c24` | Bề mặt sắc độ duy nhất — hero blocks full-bleed, van xả cảm xúc duy nhất của hệ thống |

## Elevation

Zero shadow. Zero elevation. Thiết kế giao tiếp qua scale contrast và chromatic detonation, không phải depth. Các bề mặt gặp nhau ở cạnh cứng không làm mềm — độ bo tròn duy nhất trong hệ thống là 100px pill radius trên nav buttons.

## Imagery

Screenshot hiển thị không có photography hoặc illustration — thiết kế CHÍNH LÀ typography như hình ảnh. 'Imagery' là các sliced geometric letterforms của Brasparz được render ở tỷ lệ kiến trúc, hoạt động như cả nội dung lẫn hình ảnh. Bất kỳ imagery nào trong tương lai (project thumbnails, case study photos) nên được xử lý với cùng containment brutalism: full-bleed, không rounded corners, không decorative framing, image-as-wall không phải image-as-illustration.

## Layout

Full-bleed, không max-width container. Trang là một vertical stack các section tràn viewport: nav pills căn giữa ở trên với khoảng thở rộng rãi, sau đó wordmark trong Brasparz ở tỷ lệ hero, sau đó full-viewport red detonation block với display type khổng lồ, tiếp theo là content sections tiếp tục nhịp 100% width. Section gaps ~59px tạo khoảng dừng giữa các detonations. Navigation tối giản — ba pill buttons căn giữa ngang, không có sticky behavior, không sidebar. Ngữ pháp layout là: im lặng, chữ trắng, detonation, im lặng, chữ trắng, detonation. Content không bao giờ sống trong cột bị giới hạn — nó luôn hướng ra viewport edge.

## Agent Prompt Guide

## Quick Color Reference
- text: #ffffff
- background: #000000
- border: #ffffff (1px)
- muted text: #838383
- accent surface: #ed1c24 (full-bleed red hero blocks only)
- primary action: #ffffff (filled action)

## Example Component Prompts

1. **Outlined Nav Pill**: 100px border-radius, viền 1px solid #ffffff, fill trong suốt, chữ #ffffff. NeueHaas 19px weight 400, padding 7px 20px. Trạng thái nav inactive.

2. **Active Nav Pill**: 100px border-radius, fill #ffffff, chữ #000000. Cùng padding 7px 20px, cùng NeueHaas 19px. Không cần viền — fill đảo ngược độ tương phản.

3. **Display Wordmark**: Brasparz Variable 360px, line-height 0.70, letter-spacing -0.079em, #ffffff trên canvas #000000. fontFeatureSettings: "ss01" 0, "ss02" 0. Để nó tràn ra ngoài bất kỳ container nào — không max-width.

4. **Red Detonation Block**: Bề mặt #ed1c24 full-bleed, không viền, 0px radius. Bên trong: Brasparz Variable 145px line-height 0.70 letter-spacing -0.020em, chữ #000000. Top padding ~50px, left padding 0 — text bắt đầu từ viewport edge.

5. **Editorial Caption**: Trajan-style serif ~14px, letter-spacing 0.05em, uppercase, #000000 trên bề mặt đỏ. Row gap 30px phía trên display block.

## Typographic Brutalism

Căng thẳng cốt lõi của hệ thống là giữa Brasparz (maximalist, kiến trúc, la hét) và NeueHaas (yên tĩnh, trung tính, chức năng). Chữ ký của thiết kế là sự va chạm: một display 360px line-height nén cạnh một body label 19px được spacing tốt. Không bao giờ làm mượt sự tương phản này — nó là thương hiệu. Brasparz luôn ở âm lượng tối đa hoặc không dùng; không có middle register cho nó.

## Similar Brands

- **Pentagram** — Cùng editorial blocks full-bleed, display type cỡ lớn hướng ra viewport edges, nav tối giản, kiềm chế sắc độ đen/trắng/đỏ
- **Hattie Molloy (hoặc portfolio indie type designer khác)** — Cùng display face custom bị cắt xẻ ở tỷ lệ kiến trúc, line-height nén, không card chrome, type-as-image
- **Bureau Cool** — Cùng canvas tối, custom display typography, khối detonation sắc độ đơn lẻ, zero shadow/depth
- **Wieden+Kennedy editorial** — Cùng ngôn ngữ portfolio editorial brutalism — bề mặt phẳng, scale contrast mạnh, không decorative warmth

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-bone-white: #ffffff;
  --color-ash-gray: #838383;
  --color-alarm-red: #ed1c24;

  /* Typography — Font Families */
  --font-brasparz-variable: 'Brasparz Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neuehaas: 'NeueHaas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-trajan-style-serif-editorial-credits-not-in-extracted-data-but-visible: 'Trajan-style serif (editorial credits, not in extracted data but visible)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Typography — Scale */
  --text-body-sm: 19px;
  --leading-body-sm: 1.32;
  --text-subheading: 40px;
  --leading-subheading: 1.08;
  --text-display: 145px;
  --leading-display: 0.7;
  --tracking-display: -29px;
  --text-display-xl: 360px;
  --leading-display-xl: 0.7;
  --tracking-display-xl: -28.4px;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-7: 7px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-50: 50px;
  --spacing-59: 59px;
  --spacing-127: 127px;

  /* Layout */
  --section-gap: 59px;
  --card-padding: 20px;
  --element-gap: 15px;

  /* Border Radius */
  --radius-full: 100px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-pills: 100px;
  --radius-buttons: 100px;
  --radius-surfaces: 0px;

  /* Surfaces */
  --surface-obsidian-void: #000000;
  --surface-alarm-red: #ed1c24;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-bone-white: #ffffff;
  --color-ash-gray: #838383;
  --color-alarm-red: #ed1c24;

  /* Typography */
  --font-brasparz-variable: 'Brasparz Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neuehaas: 'NeueHaas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-trajan-style-serif-editorial-credits-not-in-extracted-data-but-visible: 'Trajan-style serif (editorial credits, not in extracted data but visible)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Typography — Scale */
  --text-body-sm: 19px;
  --leading-body-sm: 1.32;
  --text-subheading: 40px;
  --leading-subheading: 1.08;
  --text-display: 145px;
  --leading-display: 0.7;
  --tracking-display: -29px;
  --text-display-xl: 360px;
  --leading-display-xl: 0.7;
  --tracking-display-xl: -28.4px;

  /* Spacing */
  --spacing-7: 7px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-50: 50px;
  --spacing-59: 59px;
  --spacing-127: 127px;

  /* Border Radius */
  --radius-full: 100px;
}
```