# Daniël van der Winden

> # Daniël van der Winden — Style Reference

## Prompt Content

```
# Daniël van der Winden — Style Reference
> Ấn phẩm chuyên khảo in trên giấy vellum

**Theme:** light

Đây là một folio cá nhân mang phong cách editorial, được thể hiện như một ấn phẩm chuyên khảo in trên giấy ấm. Một canvas duy nhất màu xám ấm (#e5e7eb) chứa toàn bộ nội dung, với các thành phần nội dung nổi trên đó mà không có card container hay divider dày. Hệ thống chữ chính là thiết kế: một sans nhân văn (Degular) xử lý UI, body và navigation, trong khi một serif mang chất sách vở (Blanco) đảm nhiệm toàn bộ trọng lượng editorial — headline, introduction và section title. Màu sắc gần như hoàn toàn vắng mặt; sự kiện màu sắc duy nhất là phần fill gần như đen của nút hành động duy nhất trên nền sáng. Layout là một thanh nav cố định bên trái và một cột văn bản có chiều rộng đọc thoải mái, với các bức ảnh chồng lên cột văn bản như những mảnh ghép collage. Mọi thứ khác — border, hairline, separator — đều là hairline và nhẹ nhàng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Vellum | `#e5e7eb` | `--color-vellum` | Canvas trang, hairline divider, link underline, card-edge border — trường màu xám ấm chứa toàn bộ nội dung |
| Ink Black | `#111827` | `--color-ink-black` | Văn bản chính, nav link, body copy — màu đọc mặc định |
| Graphite | `#374151` | `--color-graphite` | Văn bản body phụ, list item, supporting copy — sáng hơn ink primary một bậc |
| Charcoal | `#2a2a28` | `--color-charcoal` | Heading và emphasis editorial — màu tối hơi ấm dành cho serif display |
| Stone | `#717272` | `--color-stone` | Văn bản cấp ba, icon fill, meta label |
| Pebble | `#909191` | `--color-pebble` | Văn bản body mờ, chú thích ảnh, chữ nhỏ |
| Ash | `#c4c6c8` | `--color-ash` | Border ít dùng, structural separator nhẹ |
| Slate | `#7b7c7c` | `--color-slate` | Biến thể heading nhẹ, title được giảm nhấn |
| Pressed Ink | `#222222` | `--color-pressed-ink` | Fill nút hành động chính — bề mặt tối duy nhất trên canvas, tạo khoảnh khắc trọng lượng thị giác duy nhất |
| Midnight | `#1a202c` | `--color-midnight` | Bề mặt tối phụ, fill nút thay thế |

## Tokens — Typography

### Degular — Sans cho UI và body — navigation, button, body copy, metadata, link, tag, ngày tháng trong resumé. Đảm nhiệm toàn bộ văn bản chức năng. Các weight tăng dần từ 400 body đến 700 để nhấn mạnh trong heading và ngày tháng. · `--font-degular`
- **Thay thế:** Inter, DM Sans, hoặc General Sans
- **Weights:** 400, 500, 600, 700
- **Cỡ chữ:** 14, 16, 18, 22, 24, 28, 32, 40
- **Line height:** 1.25, 1.50
- **Letter spacing:** 0.025em ở cỡ body; 0.10em cho label và tag viết hoa
- **Vai trò:** Sans cho UI và body — navigation, button, body copy, metadata, link, tag, ngày tháng trong resumé. Đảm nhiệm toàn bộ văn bản chức năng. Các weight tăng dần từ 400 body đến 700 để nhấn mạnh trong heading và ngày tháng.

### Blanco — Serif editorial — hero headline, tiêu đề vai trò trong resumé, section heading, và bất kỳ văn bản nào cần mang cảm giác 'đã xuất bản' thay vì 'điều hướng'. Chỉ một weight 400 duy nhất, để cỡ chữ và chính uy tín của serif đảm nhiệm hệ thống phân cấp. · `--font-blanco`
- **Thay thế:** Source Serif 4, Tiempos Text, hoặc Lyon Display
- **Weights:** 400
- **Cỡ chữ:** 14, 20, 22, 28
- **Line height:** 1.40, 1.50
- **Letter spacing:** normal
- **Vai trò:** Serif editorial — hero headline, tiêu đề vai trò trong resumé, section heading, và bất kỳ văn bản nào cần mang cảm giác 'đã xuất bản' thay vì 'điều hướng'. Chỉ một weight 400 duy nhất, để cỡ chữ và chính uy tín của serif đảm nhiệm hệ thống phân cấp.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.5 | 0.1px | `--text-caption` |
| body | 16px | 1.5 | — | `--text-body` |
| body-lg | 18px | 1.5 | — | `--text-body-lg` |
| subheading | 20px | 1.4 | — | `--text-subheading` |
| heading-sm | 22px | 1.4 | — | `--text-heading-sm` |
| heading | 28px | 1.4 | — | `--text-heading` |
| heading-lg | 32px | 1.25 | 0.025px | `--text-heading-lg` |
| display | 40px | 1.25 | 0.025px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 8px

**Mật độ:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Thành phần | Giá trị |
|---------|-------|
| nav | 3px |
| tags | 3px |
| cards | 3px |
| images | 3px |
| buttons | 3px |

### Layout

- **Page max-width:** 720px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Sidebar Nav
**Vai trò:** Thanh điều hướng cố định bên trái

Cột trái cố định chứa wordmark 'Daniël van der Winden' ở trên cùng và một chồng link văn bản dọc (Journal, Library, Links, Magazine, Newsletter, Work) ở dưới cùng. Link là Degular 500 cỡ 16px màu #111827, không có decoration. Một avatar/mark nhỏ nằm ở góc trên bên phải. Không có background, không có border — nó nổi trên trường vellum.

### Email Me Button
**Vai trò:** Hành động chính và duy nhất trên trang

Nút tối có fill, background #222222, chữ trắng. Degular 14px medium weight, padding 8px 16px, border-radius 3px. Khoảnh khắc trọng lượng thị giác duy nhất trên toàn bộ trang — nó hiệu quả vì mọi thứ khác đều giữ yên lặng.

### Social Link Row
**Vai trò:** Link liên hệ phụ bên cạnh hành động chính

Link văn bản với icon inline nhỏ (LinkedIn, Bluesky). Degular 14px màu #111827, khoảng cách 8px giữa icon và label, được ngăn cách với nút email bằng một đường divider dọc màu #e5e7eb.

### Photo Collage Block
**Vai trò:** Thành phần hero trực quan chồng lên cột văn bản

Hai đến ba bức ảnh đen trắng hoặc giảm bão hòa được sắp xếp trong một collage chồng lên nhau, dịch chuyển sang trái vào khu vực gutter. Không có border, không có shadow — chúng nằm trực tiếp trên nền vellum với border-radius 3px. Ảnh mang phong cách editorial: ảnh workspace, chân dung, và crop chi tiết.

### Resumé Entry
**Vai trò:** Khối kinh nghiệm được neo theo ngày tháng

Layout hai cột: cột trái hẹp với khoảng ngày tháng bằng Degular 14px #717272 (ví dụ '2023–2028'), cột phải rộng với tiêu đề vai trò bằng Blanco 400 cỡ 22px màu #2a2a28, tiếp theo là 2-3 dòng mô tả body bằng Degular 16px #374151. Các mục được ngăn cách bằng hairline 1px #e5e7eb với nhịp dọc thoải mái (24-32px giữa các mục).

### Section Heading
**Vai trò:** Tiêu đề section editorial

Blanco 400 cỡ 28px màu #2a2a28, căn trái, nằm phía trên khối nội dung của nó. Không có gạch chân, không có decoration. Việc chọn serif báo hiệu 'đây là tiêu đề chương, không phải label.'

### External Link with Arrow
**Vai trò:** Chỉ báo link ra ngoài

Văn bản Degular 16px #111827 với một mũi tên superscript nhỏ (↗) ở kích thước 75%, đặt ở cuối label. Không có gạch chân. Được sử dụng cho Magazine và các tham chiếu bên ngoài khác.

### Nav Link
**Vai trò:** Mục điều hướng chỉ có văn bản

Degular 500 cỡ 16px màu #111827. Không có gạch chân, không có background, không có hover state ngoài sự chuyển màu nhẹ. Xếp dọc trong sidebar với khoảng cách 12px giữa các mục.

### Body Text Block
**Vai trò:** Đoạn văn xuôi cho bio và mô tả

Degular 400 cỡ 18px màu #374151, line-height 1.5, max-width giới hạn trong cột đọc (~600-640px). Margin-bottom thoải mái 27px giữa các đoạn. Serif Blanco không bao giờ được dùng cho body — chỉ dùng cho title.

## Do's and Don'ts

### Do
- Chỉ dùng #e5e7eb làm bề mặt duy nhất; không bao giờ thêm card trắng hay background thay thế.
- Ghép Blanco 400 cho tất cả heading và title; dành Degular cho UI, body và metadata.
- Dùng fill tối duy nhất (#222222) cho chính xác một hành động trên mỗi viewport — sự khan hiếm làm nó nổi bật.
- Đặt border-radius là 3px cho ảnh, button và tag; 8px dành cho các bề mặt tương tác lớn hơn.
- Neo mục resumé với label ngày tháng ở cột trái hẹp, title ở cột phải — không bao giờ inline.
- Để ảnh chồng lên cột văn bản; tránh đặt ảnh trong container hộp cứng nhắc.
- Đặt body text ở 18px Degular 400 #374151 với line-height 1.5; đây là nhịp đọc của toàn bộ site.

### Don't
- Không thêm màu sắc — độ rực màu 3% là có chủ đích, không phải hạn chế cần sửa.
- Không thêm shadow, gradient hay hiệu ứng glow; độ cao đạt được chỉ qua fill contrast.
- Không dùng Blanco cho body text hay nav; nó là display face, không phải reading face.
- Không tạo card container có background hay border cho khối nội dung — nội dung nằm trực tiếp trên nền vellum.
- Không dùng border-radius pill 9999px; hệ thống này dùng 3px là lựa chọn nhẹ nhàng, mang chất sách vở.
- Không in đậm body text để nhấn mạnh; thay vào đó dùng cỡ chữ, màu sắc, hoặc chuyển đổi font Blanco/Degular.
- Không căn giữa đoạn body; căn trái ở chiều rộng đọc cố định để giữ cột editorial.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Vellum Field | `#e5e7eb` | Toàn bộ trang nằm trên nền xám ấm này; không có bề mặt card riêng biệt nào tồn tại |
| 1 | Pressed Ink Surface | `#222222` | Nút email và bất kỳ hành động có fill nào — bề mặt duy nhất phá vỡ trường đơn sắc |

## Elevation

Elevation cố tình vắng mặt. Thiết kế dựa vào nội dung chồng lên nhau và hairline rule thay vì shadow hay sự khác biệt trên trục z. Button đạt được trọng lượng qua fill, không phải độ sâu.

## Imagery

Ảnh mang phong cách editorial và tài liệu: ảnh workspace nội thất đen trắng hoặc giảm bão hòa, ảnh chân dung và crop chi tiết. Ảnh được xử lý như những mảnh ghép collage chồng lên cột văn bản, nằm trực tiếp trên nền vellum chỉ với border-radius 3px nhẹ nhàng — không có border, không có shadow, không có chú thích. Ngôn ngữ thị giác là tạp chí in, không phải SaaS product showcase: crop chặt, ánh sáng tự nhiên, chủ thể là con người. Site không sử dụng illustration, đồ họa trừu tượng hay 3D render. Icon chỉ xuất hiện trong social link và là SVG monoline tối giản. Tỷ lệ ảnh so với văn bản tổng thể thấp — văn bản chiếm ưu thế, ảnh được dùng làm điểm nhấn neo chứ không phải bầu không khí trang trí.

## Layout

Layout editorial chiều rộng cố định. Một sidebar trái hẹp (~180px) chứa wordmark ở trên cùng và một chồng nav link dọc ở dưới cùng, cố định theo viewport. Cột nội dung chính nằm giữa-lệch phải, giới hạn ở chiều rộng đọc ~600-720px, với khoảng trắng thoải mái ở hai bên. Hero là một photo collage chồng lên nhau ở bên trái, tràn vào intro text ở bên phải — hai khu vực chia sẻ cùng một dải ngang thay vì xếp chồng. Bên dưới, các section chảy dưới dạng văn xuôi một cột với mục resumé dùng split ngày/title hai cột. Không có card grid nhiều cột, không có dải xen kẽ, không có section tối — toàn bộ trang là một trường vellum liên tục từ trên xuống dưới. Navigation chỉ có sidebar; không có top bar, không có sticky header nào ngoài chính sidebar.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #111827
- background: #e5e7eb
- border: #e5e7eb
- accent: không có (hệ thống đơn sắc)
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

1. Tạo một sidebar nav: cột trái cố định rộng 180px, wordmark 'Daniël van der Winden' bằng Degular 500 16px #111827 ở trên cùng, nav link (Journal, Library, Links, Magazine, Newsletter, Work) bằng Degular 500 16px #111827 xếp dọc ở dưới cùng với khoảng cách 12px. Không có background, không có border.

2. Tạo một resumé entry: hàng hai cột, cột trái rộng 80px với ngày tháng '2023–2028' bằng Degular 14px #717272, cột phải với tiêu đề vai trò 'Co-Founder of TRANSCRIPT Magazine' bằng Blanco 400 22px #2a2a28 tiếp theo là mô tả bằng Degular 400 18px #374151 line-height 1.5. Ngăn cách với mục tiếp theo bằng hairline 1px #e5e7eb và khoảng cách dọc 32px.

3. Tạo một hero block: hai bức ảnh đen trắng chồng lên nhau ở 1/3 bên trái, dịch lên và xuống 40px để tạo hiệu ứng collage. 2/3 bên phải chứa headline Blanco 400 40px #2a2a28 tiếp theo là 3 đoạn body text Degular 400 18px #374151 với margin-bottom 27px. Ảnh có border-radius 3px, không có shadow.

Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý button trung tính đã trích xuất thay vì phát minh ra màu CTA có fill.

5. Tạo một section heading: Blanco 400 28px màu #2a2a28, căn trái, không gạch chân, nằm cách khối nội dung 40px phía trên. Đây là tiêu đề chương editorial, không phải label UI.

## Similar Brands

- **Are.na** — Cùng layout editorial sidebar trái + cột đọc trên nền trung tính ấm với cặp serif/sans
- **Craig Mod** — Folio cá nhân thể hiện như văn xuôi nhẹ nhàng trên một canvas xám ấm duy nhất với chiều rộng đọc thoải mái và chrome tối giản
- **Robin Rendle** — Thẩm mỹ portfolio văn chương tương tự — đơn sắc, typographic, không có card container, hệ thống phân cấp ưu tiên văn bản
- **Pareto Design** — Cùng canvas xám ấm với sans nhân văn lớp Degular cho UI và serif accent cho heading editorial

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-vellum: #e5e7eb;
  --color-ink-black: #111827;
  --color-graphite: #374151;
  --color-charcoal: #2a2a28;
  --color-stone: #717272;
  --color-pebble: #909191;
  --color-ash: #c4c6c8;
  --color-slate: #7b7c7c;
  --color-pressed-ink: #222222;
  --color-midnight: #1a202c;

  /* Typography — Font Families */
  --font-degular: 'Degular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-blanco: 'Blanco', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: 0.1px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.4;
  --text-heading: 28px;
  --leading-heading: 1.4;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.25;
  --tracking-heading-lg: 0.025px;
  --text-display: 40px;
  --leading-display: 1.25;
  --tracking-display: 0.025px;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 720px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-lg: 8px;

  /* Named Radii */
  --radius-nav: 3px;
  --radius-tags: 3px;
  --radius-cards: 3px;
  --radius-images: 3px;
  --radius-buttons: 3px;

  /* Surfaces */
  --surface-vellum-field: #e5e7eb;
  --surface-pressed-ink-surface: #222222;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-vellum: #e5e7eb;
  --color-ink-black: #111827;
  --color-graphite: #374151;
  --color-charcoal: #2a2a28;
  --color-stone: #717272;
  --color-pebble: #909191;
  --color-ash: #c4c6c8;
  --color-slate: #7b7c7c;
  --color-pressed-ink: #222222;
  --color-midnight: #1a202c;

  /* Typography */
  --font-degular: 'Degular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-blanco: 'Blanco', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: 0.1px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.4;
  --text-heading: 28px;
  --leading-heading: 1.4;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.25;
  --tracking-heading-lg: 0.025px;
  --text-display: 40px;
  --leading-display: 1.25;
  --tracking-display: 0.025px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-lg: 8px;
}
```