# Eduardo del Fraile

> # Eduardo del Fraile — Style Reference

## Prompt Content

```
# Eduardo del Fraile — Style Reference
> Tủ kính gallery đen — căn phòng tối nơi một vật thể duy nhất phát sáng bằng chữ trắng

**Theme:** dark

Eduardo del Fraile là một portfolio được xây dựng trên sự tối giản triệt để: một khoảng đen thuần khiết, nơi một custom grotesk duy nhất và chữ trắng tạo nên toàn bộ giao diện. UI gần như biến mất hoàn toàn, để các 3D render lơ lửng trong không gian âm như những vật thể dưới ánh đèn bảo tàng. Mọi quyết định typographic, sự gần như vắng bóng của màu sắc, mọi bề mặt phẳng không bóng đổ đều phục vụ cùng một mục đích — làm cho canvas trở nên vô tận và không trọng lượng, rồi đặt một vật thể vào bên trong. Các component ưu tiên chữ và không có border; hệ thống phân cấp đến từ sự thay đổi weight trong Akzidenz Grotesk, không phải từ fill, elevation hay accent color.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Void | `#000000` | `--color-void` | Nền trang, full-bleed canvas cho mọi nội dung |
| Bone White | `#ffffff` | `--color-bone-white` | Toàn bộ chữ, navigation, hướng dẫn footer, và đường nét UI mảnh |
| Ash Gray | `#888888` | `--color-ash-gray` | Chữ phụ hoặc mờ, label giảm chú ý, gợi ý không hoạt động |

## Tokens — Typography

### Akzidenz-Grotesk — Typeface duy nhất cho navigation, body, footer và brand mark. Cặp weight 400/700 là toàn bộ hệ thống phân cấp — không màu sắc, không nhảy kích thước, không italic để phân biệt vai trò. Ở 14–15px, grotesk mang phong cách editorial tiện dụng; ở 20–21px, nó trở thành signage. Normal tracking giữ lại cảm giác hình học, cơ khí. · `--font-akzidenz-grotesk`
- **Thay thế:** Inter, Helvetica Neue, Neue Haas Grotesk
- **Weights:** 400, 700
- **Kích thước:** 14px, 15px, 20px, 21px
- **Line height:** 1.30
- **Letter spacing:** 0
- **Vai trò:** Typeface duy nhất cho navigation, body, footer và brand mark. Cặp weight 400/700 là toàn bộ hệ thống phân cấp — không màu sắc, không nhảy kích thước, không italic để phân biệt vai trò. Ở 14–15px, grotesk mang phong cách editorial tiện dụng; ở 20–21px, nó trở thành signage. Normal tracking giữ lại cảm giác hình học, cơ khí.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.3 | — | `--text-caption` |
| body-sm | 15px | 1.3 | — | `--text-body-sm` |
| body | 20px | 1.3 | — | `--text-body` |
| body-lg | 21px | 1.3 | — | `--text-body-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 10 | 10px | `--spacing-10` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |

### Border Radius

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

### Layout

- **Card padding:** 0px
- **Element gap:** 20px

## Components

### Brand Mark (Wordmark)
**Vai trò:** Định danh site ở góc trên bên trái

Chữ thuần 'Eduardo del Fraile' bằng Akzidenz-Grotesk 14–15px, weight 400, color #ffffff, không trang trí. Nằm sát mép trái viewport với 0px padding từ canvas.

### Text Navigation Link
**Vai trò:** Mục navigation chính ở góc trên bên phải

Akzidenz-Grotesk 14–15px, weight 400, color #ffffff, không gạch chân, không background, không border. Khoảng cách ~20px giữa các link. Trạng thái active chỉ được thể hiện bằng sự chuyển màu default-vs-hover; không fill hay pill.

### Social Icon Link
**Vai trò:** Mục Instagram ở góc trên bên phải

Glyph Instagram dạng line-stroke đơn trong #ffffff với cùng chiều cao như text links (14–15px). Không background, không border-radius, không container — icon được căn chỉnh để thẳng hàng với text baseline.

### Footer Instruction Text
**Vai trò:** Label hướng dẫn scroll ở góc dưới bên trái

Akzidenz-Grotesk 14px weight 400 #ffffff, hai cụm từ ngắn cách nhau ~20px gap ('Scroll with the mouse' / 'Scroll with L and R keyboard arrows'). Không icon, không button — chỉ là chữ hướng dẫn thuần.

### Full-Bleed Showcase Frame
**Vai trò:** Container cho nội dung 3D trong body trang

Không có container. 3D render được đặt trực tiếp lên canvas #000000, căn giữa cả hai trục, scale để chiếm viewport. Không padding, không border, không shadow, không background plate — artwork kết thúc tại chính silhouette của nó.

### Language Toggle
**Vai trò:** Bộ chuyển đổi ngôn ngữ trong nav (ESP)

Xử lý giống như text nav link — Akzidenz-Grotesk 14–15px weight 400 #ffffff. Hoạt động như một label thuần, không phải control có style.

## Do's and Don'ts

### Do
- Đặt background trang là #000000 trên mọi màn hình — không có biến thể sáng và không có màu bề mặt phụ.
- Chỉ sử dụng Akzidenz-Grotesk ở 14, 15, 20 hoặc 21px với weight 400 hoặc 700; line-height 1.3; tracking 0. Không bao giờ giới thiệu typeface thứ hai.
- Xây dựng navigation dưới dạng text links thô trong #ffffff với 0px border-radius và 20px gap giữa các mục — không pill, không fill, không gạch chân.
- Để nội dung 3D hoặc ảnh nằm trực tiếp trên canvas đen mà không có frame, card hay shadow xung quanh.
- Sử dụng weight 700 (bold) làm cách duy nhất để nhấn mạnh — không bao giờ dùng màu sắc, italics, hoặc nhảy kích thước lớn hơn 6px để tạo phân cấp.
- Chỉ sử dụng #888888 cho chữ phụ thực sự giảm chú ý; không bao giờ dùng cho trạng thái tương tác hoặc nav đang hoạt động.
- Giữ tất cả UI micro-copy ngắn và mang tính hướng dẫn (một đến ba từ) để khoảng đen luôn trống.

### Don't
- Không thêm accent colors, brand fills, hoặc điểm nhấn màu dưới bất kỳ hình thức nào — bảng màu chỉ gồm đen, trắng và ash gray.
- Không áp dụng border-radius cho bất cứ thứ gì — buttons, cards, tags và images đều giữ ở 0px.
- Không thêm drop shadows, inner glows, hoặc card layer nâng cao; canvas phải luôn phẳng.
- Không sử dụng italic, condensed hoặc extended weights của Akzidenz; family chỉ giới hạn ở 400 và 700.
- Không bọc nội dung 3D trong bordered card, gradient backdrop hoặc vignette — nó phải lơ lửng trên nền đen thuần.
- Không sử dụng #ffffff làm filled button background; hệ thống không có filled buttons — actions chỉ là text hoặc icons.
- Không vượt quá 21px cho bất kỳ UI text nào — editorial scale của grotesk là một phần của dấu ấn.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Void | `#000000` | Bề mặt một cấp — không có card hay panel layer phía trên canvas; nội dung nằm trực tiếp trên nền đen |

## Elevation

Không elevation. Không drop shadows, không inner glows, không stacked panels. Tín hiệu chiều sâu duy nhất là chính nội dung 3D trên khoảng đen phẳng. Bề mặt không bao giờ nhấc lên khỏi trang — chúng là trang.

## Imagery

3D render chân thực là hình ảnh duy nhất trên site: một con lai gorilla-chai bằng sứ, một quả cam mờ với ống hút giấy sọc, và một quả ớt xanh bóng. Mỗi render là full-bleed, căn giữa trên canvas đen, và được chiếu sáng như ảnh sản phẩm dưới một key light duy nhất. Không bối cảnh lifestyle, không background plate, không overlay text — vật thể được cắt theo silhouette và lơ lửng trong khoảng đen. Imagery chiếm khoảng 80% viewport hiển thị mỗi scene, với UI text đẩy ra các góc. Không có icons, illustrations, hoặc đồ họa trang trí nào ngoài glyph Instagram duy nhất trong nav.

## Layout

Full-bleed canvas đen, không max-width container, không centered column. Navigation được chia: brand wordmark sát mép trái ở cạnh trên, nav links + social icon sát mép phải, cả hai được căn dọc theo một hàng text ~15px duy nhất. Body chính là một chuỗi scroll ngang các 3D render — mỗi render lấp đầy viewport và người dùng tiến lên bằng mouse-wheel hoặc phím mũi tên L/R (theo gợi ý footer). Không có grid, không sidebar, không card stack. Các section không được phân cách bằng divider hoặc color bands; sự chuyển tiếp giữa các tác phẩm là một cut cứng từ vật thể render này sang vật thể tiếp theo trên cùng một nền đen. Footer là một hàng mảnh chữ hướng dẫn sát mép trái ở cạnh dưới. Toàn bộ trang đọc như một hành lang gallery tối nơi khách tham quan đi ngang qua các vật thể được chiếu sáng.

## Agent Prompt Guide

Quick Color Reference
- text: #ffffff
- background: #000000
- border: none (không có hệ thống border; chỉ dùng #ffffff cho 1px hairlines nếu thực sự cần)
- accent: none
- primary action: không có màu CTA riêng biệt

Example Component Prompts
1. Top navigation: Đặt wordmark 'Eduardo del Fraile' sát mép trái ở cạnh trên, và các link 'Work', 'About', 'Contact', 'ESP' theo sau là Instagram line-icon 14px sát mép phải. Tất cả chữ là Akzidenz-Grotesk 15px weight 400, color #ffffff, với 20px gap giữa các link. Không background, không border, không gạch chân.
2. Full-bleed showcase: Render một 3D object (ví dụ: chai gốm mờ) căn giữa trên canvas #000000 thuần. Object chiếm ~70% chiều cao viewport, được chiếu sáng bằng một key light duy nhất từ trên xuống. Không frame, không card, không border, không shadow xung quanh object. Canvas là edge-to-edge không có margin.
3. Footer: Góc dưới bên trái, hai hướng dẫn ngắn bằng Akzidenz-Grotesk 14px weight 400 #ffffff, cách nhau 20px gap: 'Scroll with the mouse' và 'Scroll with L and R keyboard arrows'. Không icons, không buttons, không background.
4. De-emphasized helper text: Một label như 'ESP' hoặc chú thích phụ trong #888888 Akzidenz-Grotesk 14px weight 400 — chỉ khi text không tương tác và phải lùi lại phía sau chữ trắng chính.
5. Active section title: Sử dụng Akzidenz-Grotesk 20px weight 700 #ffffff cho một section heading. Đây là cách nhấn mạnh typographic duy nhất được phép — không thay đổi màu sắc, thêm background, hoặc thêm divider line.

## Similar Brands

- **Aristide Benoist** — Cùng cách xử lý portfolio black-void với 3D render lơ lửng không frame trên canvas #000000 thuần, text-only navigation ở các góc.
- **Charlie Davis** — Portfolio tối tối giản sử dụng một grotesk face duy nhất, không accent color, và không UI chrome ngoài text links căn góc.
- **Active Theory** — Full-bleed dark creative studio site để nội dung 3D nhập vai chiếm ưu thế trong khi giao diện lùi lại thành chữ trắng đơn giản.
- **Rafaël Rozendaal** — Artist site một màu canvas với zero decorative UI — tác phẩm là toàn bộ hệ thống thị giác và chrome gần như vô hình.
- **Studio AKAA** — Dark portfolio mang phong cách editorial dựa trên sự tương phản weight trong một sans-serif duy nhất và bảng màu đơn sắc nghiêm ngặt để hình ảnh dẫn dắt.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void: #000000;
  --color-bone-white: #ffffff;
  --color-ash-gray: #888888;

  /* Typography — Font Families */
  --font-akzidenz-grotesk: 'Akzidenz-Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body-sm: 15px;
  --leading-body-sm: 1.3;
  --text-body: 20px;
  --leading-body: 1.3;
  --text-body-lg: 21px;
  --leading-body-lg: 1.3;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-24: 24px;

  /* Layout */
  --card-padding: 0px;
  --element-gap: 20px;

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

  /* Surfaces */
  --surface-void: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #000000;
  --color-bone-white: #ffffff;
  --color-ash-gray: #888888;

  /* Typography */
  --font-akzidenz-grotesk: 'Akzidenz-Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body-sm: 15px;
  --leading-body-sm: 1.3;
  --text-body: 20px;
  --leading-body: 1.3;
  --text-body-lg: 21px;
  --leading-body-lg: 1.3;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-24: 24px;
}
```