# Dul Zorigoo

> # Dul Zorigoo — Style Reference

## Prompt Content

```
# Dul Zorigoo — Style Reference
> ink-and-pencil gallery wall — portfolio của designer được thể hiện như những bảng triển lãm đơn sắc trên nền trắng, nơi cấu trúc được vẽ ra chứ không phải tô đầy

**Theme:** light

Một bức tường gallery đơn sắc cho portfolio của designer — nền canvas trắng tinh, đường phân cách xám mảnh như nét chì, và mực gần đen cho chữ, với chính tác phẩm (ảnh chụp, UI captures, thử nghiệm) cung cấp mọi giọt màu sắc. Layout theo cấu trúc hai cột: một thanh bio cố định mỏng bên trái, một thanh filter tab ngang phía trên, và một masonry grid thoáng với các tile tác phẩm kích thước khác nhau ở khu vực chính. Hệ thống được thiết kế có chủ đích tối giản — không có màu nhấn, không bóng đổ, không bo tròn mềm mại ngoại trừ bán kính 8px trên một vài control hiếm hoi. Sự kiềm chế chính là thương hiệu: mọi quyết định thị giác đều là sự vắng mặt của một quyết định, để ảnh chụp và screenshot sản phẩm gánh toàn bộ trọng lượng thị giác. Đặc điểm nổi bật nhất là màu viền mảnh #ebebeb xuất hiện 620 lần, cấu trúc mọi panel, card và divider — một grid được vẽ bằng bút chì 1px chứ không phải xây dựng bằng độ cao.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, image wells, bề mặt card bên trong embedded UI captures |
| Pencil Gray | `#ebebeb` | `--color-pencil-gray` | Viền mảnh, divider panel, cạnh card, viền button, đường cấu trúc chủ đạo của toàn bộ hệ thống |
| Graphite | `#a8a8a8` | `--color-graphite` | Chú thích ảnh, heading phụ, nhãn section, metadata thời gian/địa điểm |
| Smoke | `#8e8e8e` | `--color-smoke` | Body helper text, secondary metadata, descriptor có độ nhấn thấp |
| Ink Black | `#252525` | `--color-ink-black` | Primary text, nav labels, sidebar bio copy, text button — gần đen thay vì đen tuyệt đối giữ hệ thống không chạm trần tương phản và rơi vào register editorial mềm hơn |

## Tokens — Typography

### Inter — Tất cả UI text — sidebar bio, nav tabs, chú thích ảnh, nhãn button. Inter là lựa chọn thay thế hệ thống an toàn; bản gốc có thể là một neo-grotesque như Söhne, GT America, hoặc Untitled Sans ở cỡ chữ nhỏ, tracking hơi chặt. · `--font-inter`
- **Thay thế:** Inter, system-ui, -apple-system
- **Weights:** 400, 500
- **Kích cỡ:**
- **Line height:** 1.4-1.5
- **Vai trò:** Tất cả UI text — sidebar bio, nav tabs, chú thích ảnh, nhãn button. Inter là lựa chọn thay thế hệ thống an toàn; bản gốc có thể là một neo-grotesque như Söhne, GT America, hoặc Untitled Sans ở cỡ chữ nhỏ, tracking hơi chặt.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|---------|---------|-------------|----------------|-------|
| caption | 12px | 1.4 | — | `--text-caption` |
| body | 15px | 1.5 | — | `--text-body` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 32 | 32px | `--spacing-32` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 0px |
| links | 8px |
| buttons | 8px |

### Layout

- **Section gap:** 32px
- **Card padding:** 12-16px
- **Element gap:** 8px

## Components

### Fixed Bio Sidebar
**Vai trò:** Identity rail neo mọi trang

Cột trái, rộng ~200px, không viền, nằm trên nền paper-white. Chứa tên (Dul Zorigoo), bio 3 dòng ('Based in London. Exploring novel ways of interacting with technology. Currently designing ElevenLabs / Prev Humanae'), và hai social links (X / Cosmos) dưới dạng text thuần với icon dẫn đầu. Text màu Ink Black #252525, links kế thừa màu, không gạch chân. Không có background fill — sidebar được định nghĩa bởi khoảng trắng, không phải bởi một panel.

### Filter Tab Bar
**Vai trò:** Category navigation ngang phía trên khu vực work well

Hàng tab text ngang: All (active), Photography, Thoughts, Work, Experiments. Tab active là Ink Black #252525, tab inactive là Smoke #8e8e8e hoặc Graphite #a8a8a8. Không pill, không background, không gạch chân — trạng thái được truyền tải chỉ bằng trọng lượng màu. Khoảng cách tab ~8px giữa các item. Thanh được ngăn cách với grid bên dưới bằng một đường kẻ mảnh 1px Pencil Gray #ebebeb.

### Work Tile (Image + Caption)
**Vai trò:** Đơn vị nguyên tử của portfolio grid

Một bức ảnh hoặc UI screenshot ở tỷ lệ khung hình tự nhiên, edge-to-edge, không viền, không bóng, không bo góc. Caption nằm dưới 8-12px: text Graphite #a8a8a8 ở ~12-13px, line-height 1.4. Caption dài 1-2 dòng — một title bằng Ink Black theo sau là một descriptor bằng Graphite, hoặc một dòng muted đơn. Một số tile (các thử nghiệm âm nhạc/audio) rộng hơn, một số là ảnh chân dung cao, tạo nhịp điệu masonry nơi chiều rộng tile thay đổi nhưng gutter giữ nguyên.

### Embedded UI Capture
**Vai trò:** Portfolio pieces mà bản thân chúng là screenshot sản phẩm

Một số tile là screenshot của UI sản phẩm thực tế (ElevenLabs agent publish flow, merge dialog, music prompt box). Chúng mang hệ thống thị giác nội bộ riêng — viền, bo góc, màu sắc — và được trình bày nguyên trạng không khung. Hệ thống portfolio không thêm gì lên trên: không viền, không khung caption, không panel nền. Screenshot CHÍNH LÀ tile.

### Internal UI Card (trong screenshot)
**Vai trò:** Bề mặt bên trong embedded product captures

Khi UI sản phẩm xuất hiện dưới dạng portfolio pieces, card của chúng thường dùng fill trắng #ffffff trên nền hơi off-white #ebebeb hoặc gần trắng, với corner radius 8px-12px và viền 1px màu #ebebeb. Đây chính là hệ thống Pencil Gray / Paper White mà portfolio sử dụng — tác phẩm và khung được xây từ cùng một nguyên liệu.

### Text-Only Link / Social Handle
**Vai trò:** Inline navigation và ghi công

Text Ink Black #252525 thuần, không gạch chân, không hover affordance hiển thị. Social handles (X, Cosmos) được thêm tiền tố là một glyph icon nhỏ. Trọng lượng tối thiểu của các link này củng cố giọng editorial — sidebar đọc như một colophon, không phải nav menu.

### Date / Location Stamp
**Vai trò:** Metadata ngữ cảnh ở chân trang

'LDN 02:20' và 'Crisp blue skies, perfect for a brisk walk.' — xuất hiện ở góc dưới bên trái của sidebar, 12-13px, Graphite #a8a8a8. Hoạt động như một chữ ký dữ liệu sống mềm, được xử lý như một chú thích nhẹ nhàng chứ không phải nội dung chính.

## Do's and Don'ts

### Do
- Dùng #ebebeb cho mọi divider, card border và panel edge — đây là đường cấu trúc của hệ thống, xuất hiện ~620 lần
- Giữ canvas trang ở #ffffff; không bao giờ pha màu nền, để khoảng trắng gánh layout
- Dành #252525 cho body copy và primary labels; để #a8a8a8 gánh captions và metadata, #8e8e8e cho helper text yên tĩnh nhất
- Để ảnh edge-to-edge với zero frame — không viền, không bóng, không card nền bao quanh ảnh hoặc screenshot
- Dùng border-radius 8px trên một vài button và link chips tồn tại, và 0px trên mọi thứ khác
- Truyền tải trạng thái tab và nav qua trọng lượng màu (Ink Black active, Graphite inactive) chứ không qua pills, backgrounds hay gạch chân
- Duy trì masonry grid nơi kích thước tile thay đổi nhưng gutter giữ nguyên ở section gap 32px và caption offset 8-12px

### Don't
- Không đưa vào bất kỳ màu sắc nào — không accent, không brand hue, không semantic red/green/blue. Hệ thống có 0% màu sắc theo thiết kế
- Không thêm shadow hoặc elevation. Cấu trúc được vẽ bằng đường kẻ mảnh 1px Pencil Gray, không bao giờ nâng lên bằng blur hoặc drop-shadow
- Không bo tròn ảnh hoặc screenshot tiles. Edge-to-edge raw rectangles là quy tắc
- Không dùng filled hoặc outlined CTA buttons. Hệ thống không có action surface — tương tác là text links, filter tabs và chính các ảnh
- Không đặt body text ở màu #000 thuần. Ink Black #252525 giữ trang ở register editorial thay vì register terminal
- Không dùng Pill Gray hoặc chip backgrounds cho active nav states. Trọng lượng của gray là tín hiệu trạng thái duy nhất được phép
- Không vượt quá ~15px cho bất kỳ UI text nào. Toàn bộ type system hoạt động ở cỡ chữ nhỏ — headlines không tồn tại trên site này

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Paper | `#ffffff` | Canvas trang, màu nền duy nhất trong hệ thống. Mọi thứ nổi trên nó. |
| 1 | Pencil | `#ebebeb` | Hairline border, divider và panel edge color. Không phải fill — là đường kẻ 1px vẽ trên giấy. |

## Elevation

Thiết kế không có hệ thống elevation. Không có box-shadow nào. Cấu trúc được truyền tải hoàn toàn qua viền mảnh 1px màu #ebebeb và qua khoảng trắng — panel được vẽ, không được nâng lên. Đây là độ phẳng có chủ đích: portfolio là một bức tường gallery, không phải một chồng card.

## Imagery

Image-dominant. Photography và full-bleed product screenshots chiếm phần lớn diện tích viewport, được sắp xếp trong masonry kích thước đa dạng mang cảm giác như một bức tường triển lãm hơn là một grid. Bản thân photography mang phong cách editorial: landscape đen trắng, cityscape giờ vàng, vách đá phấn trắng, cảnh công viên tự nhiên — tất cả được chụp với con mắt chiêm nghiệm, phi thương mại. Embedded UI screenshots (ElevenLabs agent flows, music stem downloader) được trình bày dưới dạng raw captures không khung, không viền, không background plate, để hệ thống thị giác của sản phẩm trở thành một phần ngôn ngữ thị giác của portfolio. Site không có illustration, không 3D, không đồ họa trừu tượng — chỉ có ảnh chụp và screenshot, cả hai đều là tác phẩm. Iconography tối thiểu và đơn sắc (glyph X và Cosmos nhỏ trong sidebar), và toàn bộ icon set đọc như các dấu hiệu mảnh gần text chứ không phải một hệ thống.

## Layout

Vỏ hai cột: một sidebar cố định trái ~200px (tên, bio, social links, live date stamp) và một work well phải linh hoạt. Work well mở đầu bằng filter tab bar chạy ngang (All, Photography, Thoughts, Work, Experiments) được ngăn cách với grid bên dưới bằng một đường kẻ mảnh 1px #ebebeb. Bên dưới tab bar, nội dung chính là image grid kiểu masonry nơi kích thước tile thay đổi (pha trộn giữa portrait và landscape crops, một số span full-width) nhưng nhịp điệu gap giữ nguyên ở 8-12px giữa các ảnh và 32px giữa các logical sections. Caption nằm trực tiếp dưới mỗi tile bằng Graphite #a8a8a8, 12-13px. Navigation tối thiểu — không sticky header, không mega-menu, không sidebar nav ngoài bio rail. Trang cuộn như một gallery liên tục duy nhất; các điểm ngắt cấu trúc duy nhất là đường kẻ mảnh dưới tab bar và các khoảng trống thị giác tự nhiên giữa các nhóm tác phẩm. Density rộng rãi: ảnh lớn có đủ không gian thở, và sidebar cố định không bao giờ cạnh tranh với grid để thu hút sự chú ý.

## Agent Prompt Guide

Quick Color Reference:
- text: #252525
- background: #ffffff
- border: #ebebeb
- caption/metadata: #a8a8a8
- secondary text: #8e8e8e
- primary action: không có màu CTA riêng biệt

Example Component Prompts:
1. Xây dựng fixed left sidebar: canvas #ffffff, không viền, rộng ~200px. Dòng trên 'Dul Zorigoo' bằng Inter 15px weight 500, #252525. Bên dưới là bio 3 dòng bằng Inter 13px weight 400, #252525, line-height 1.5. Ở dưới cùng, hai social links ở 12px #252525, mỗi link có tiền tố là một monochrome glyph icon nhỏ, cách nhau 12px vertical space. Không background fill, không panel chrome.
2. Xây dựng top filter tab bar: background trắng #ffffff, nằm sát canvas trang, ngăn cách với grid bên dưới bằng border dưới 1px #ebebeb. Năm tab text-only — 'All' (active, #252525), 'Photography', 'Thoughts', 'Work', 'Experiments' (inactive, #a8a8a8) — bằng Inter 13px weight 500, gap 8px giữa các tab, không pills, không backgrounds, không gạch chân. Trạng thái active được truyền tải chỉ bằng trọng lượng màu.
3. Xây dựng masonry work tile: một ảnh ở tỷ lệ khung hình tự nhiên, edge-to-edge với zero border, zero radius, zero shadow. 8-12px dưới ảnh, một caption bằng Inter 12px weight 400, #a8a8a8, line-height 1.4. Caption là một dòng muted đơn. Tile nằm trực tiếp trên canvas trang #ffffff — không card wrapper, không background plate.
4. Xây dựng divider: một đường kẻ ngang 1px màu #ebebeb trải dài toàn bộ chiều rộng cột nội dung. Dùng giữa tab bar và grid, và giữa các nhóm gallery chính. Không bao giờ dùng box-shadow hoặc colored fills để phân cách sections.
5. Xây dựng embedded UI screenshot tile: một raw product screenshot (ví dụ: chat hoặc settings panel) được đặt như một work tile không khung, caption hay border. Hệ thống trắng-và-viền-mảnh của chính screenshot trở thành nội dung thị giác. Caption bên dưới bằng #a8a8a8 mô tả dự án.

## Monochrome Discipline

Quy tắc quan trọng nhất của hệ thống này: không có màu sắc tồn tại. Mọi màu trong bảng màu đều là achromatic. Đây không phải là ràng buộc phải làm việc xung quanh — nó CHÍNH LÀ thương hiệu. Ảnh chụp và product screenshots cung cấp các khoảnh khắc màu sắc; chrome xung quanh chúng ở trong graphite. Nếu bạn thấy mình với tay lấy màu xanh, xanh lá hoặc đỏ, phản ứng đúng là dừng lại. Trạng thái 'highlighted' đạt được bằng cách đi từ #a8a8a8 đến #252525, không phải bằng cách đưa vào một hue.

## Similar Brands

- **Are.na** — Cùng masonry grid dạng kênh với image tiles kích thước đa dạng, caption muted và zero chrome xung quanh nội dung
- **Rauno Freiberg's portfolio (raunofreiberg.com)** — Cùng kỷ luật editorial — bảng màu đơn sắc, chỉ viền mảnh, work tiles edge-to-edge không khung
- **Readymag project showcases** — Cùng cách trình bày tác phẩm như tường triển lãm, nơi sự kiềm chế của portfolio khuếch đại nội dung màu sắc của chính tác phẩm
- **Linear's changelog/blog** — Cùng cấu trúc viền mảnh #ebebeb với 0% UI màu sắc và text Ink Black — dù Linear thêm một accent duy nhất, site này giữ vững ở mức zero
- **Manual design studio (manual.com)** — Cùng cảm giác design-as-gallery: tác phẩm được trình bày dưới dạng raw tiles trong masonry, với portfolio chrome giảm xuống còn một bio rail mỏng và metadata yên tĩnh

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-pencil-gray: #ebebeb;
  --color-graphite: #a8a8a8;
  --color-smoke: #8e8e8e;
  --color-ink-black: #252525;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 15px;
  --leading-body: 1.5;

  /* Typography — Weights */
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-32: 32px;

  /* Layout */
  --section-gap: 32px;
  --card-padding: 12-16px;
  --element-gap: 8px;

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

  /* Named Radii */
  --radius-cards: 0px;
  --radius-links: 8px;
  --radius-buttons: 8px;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-pencil: #ebebeb;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-pencil-gray: #ebebeb;
  --color-graphite: #a8a8a8;
  --color-smoke: #8e8e8e;
  --color-ink-black: #252525;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 15px;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-32: 32px;

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