# Josh Warner

> Josh Warner — Style Reference

## Prompt Content

```
# Josh Warner — Style Reference
> black void gallery wall

**Theme:** dark

Portfolio của Josh Warner hoạt động như một bức tường gallery gần như đen tuyền: giao diện lùi lại để các 3D render, product mockup và ảnh chụp sáng tạo chiếm trọn mọi viewport. Typography siêu mảnh và đồng nhất ở weight 400 trên toàn bộ scale, dùng một dòng sans-serif duy nhất không hề lớn tiếng — hierarchy được xây dựng qua kích thước và letter-spacing rộng (0.04em) thay vì tương phản weight. Toàn bộ palette là achromatic ngoại trừ một chấm trạng thái xanh neon (#08ff00) — tín hiệu sống duy nhất của site giữa khoảng không. Các bề mặt phẳng hoặc gần phẳng; chiều sâu hoàn toàn mượn từ tác phẩm nghệ thuật, không từ drop shadow hay gradient. Components thưa thớt, hình pill, gần như không trọng lượng — ghost buttons, viền mảnh trên #000, avatar tròn, và nav items hình pill. Hệ thống là một khung, không phải chủ thể.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Void | `#0f0f0f` | `--color-void` | Canvas trang và bề mặt chính — lớp nền bên dưới mọi artwork, hơi sáng hơn đen tuyền để tránh hiện tượng banding OLED trong khoảng tối |
| Absolute | `#000000` | `--color-absolute` | Viền mảnh, image container, icon strokes, footer dividers — đen tuyền đóng vai trò mực cấu trúc, định hình các cạnh khi không có bề mặt card hiện hữu |
| Charcoal | `#1a1a1a` | `--color-charcoal` | Bề mặt footer nâng cao và các UI panel sâu hơn — một bước lên từ canvas để phân vùng mà không phá vỡ khoảng tối |
| Faint | `#080808` | `--color-faint` | Shadow base cho hiệu ứng elevation nhẹ — gần như vô hình trên canvas, dùng trong box-shadow composition để tạo độ nâng môi trường mềm mại |
| Bone | `#f0f0f0` | `--color-bone` | Màu text chính, nav item fills, filled button background — trắng ấm thay thế trắng tinh để làm mềm tương phản với khoảng tối và giảm mỏi mắt |
| Ash | `#b8b8b8` | `--color-ash` | Body text phụ, helper labels nhẹ nhàng, metadata mờ — nằm dưới Bone một bậc cho copy không nhấn mạnh mà vẫn dễ đọc trên nền tối |
| Graphite | `#696969` | `--color-graphite` | Text cấp ba và border accent trên heading — dùng tiết kiệm cho chữ nhỏ và inactive labels cần lùi lại |
| Live Wire | `#08ff00` | `--color-live-wire` | Màu xanh cho highlight background, decorative bands, và điểm nhấn mềm phía sau nội dung |

## Tokens — Typography

### Inter Display — Typeface chính cho toàn bộ UI, body, navigation và heading — chỉ dùng weight 400, không biến thể weight, tạo kết cấu thị giác phẳng, đều, nơi kích thước và spacing đảm nhận hierarchy. Thay thế bằng Inter (miễn phí, metrics gần như giống hệt). · `--font-inter-display`
- **Thay thế:** Inter
- **Weights:** 400
- **Kích thước:** 14px, 16px, 20px, 32px, 40px
- **Line height:** 1.00-1.56
- **Letter spacing:** 0.04em
- **Vai trò:** Typeface chính cho toàn bộ UI, body, navigation và heading — chỉ dùng weight 400, không biến thể weight, tạo kết cấu thị giác phẳng, đều, nơi kích thước và spacing đảm nhận hierarchy. Thay thế bằng Inter (miễn phí, metrics gần như giống hệt).

### System sans-serif — Micro-UI labels (12px) — system stack cho text tiện ích nhỏ nhất, nơi chi phí tải font không hợp lý · `--font-system-sans-serif`
- **Thay thế:** -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- **Weights:** 400
- **Kích thước:** 12px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Vai trò:** Micro-UI labels (12px) — system stack cho text tiện ích nhỏ nhất, nơi chi phí tải font không hợp lý

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 12px | 1.2 | 0.48px | `--text-caption` |
| body-sm | 14px | 1.43 | 0.56px | `--text-body-sm` |
| body | 16px | 1.5 | 0.64px | `--text-body` |
| subheading | 20px | 1.4 | 0.8px | `--text-subheading` |
| heading | 32px | 1.25 | 1.28px | `--text-heading` |
| display | 40px | 1.2 | 1.6px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| badges | 100px |
| images | 4px |
| avatars | 100px |
| buttons | 100px |
| navPills | 100px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| md | `rgba(0, 0, 0, 0.5) 0px 1px 10px -2px` | `--shadow-md` |
| md-2 | `rgba(0, 0, 0, 0.16) 0px 0px 10px 0px` | `--shadow-md-2` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 60-64px
- **Card padding:** 14px
- **Element gap:** 10px

## Components

### Pill Navigation Button
**Vai trò:** Nav items ở giữa trên cùng (Projects, Art, Info) và ghost nav controls

Button dạng ghost: nền trong suốt, text Bone (#f0f0f0) ở 14-16px Inter Display 400 với 0.04em letter-spacing, border-radius 100px, padding dọc 4px / ngang 14px, không viền. Trạng thái active (Art trong ảnh chụp màn hình) được biểu thị bằng underline nhẹ hoặc nhấn mạnh text thay vì đổi fill.

### Filled CTA Button
**Vai trò:** Primary action — Contact, Hire me

Fill Bone (#f0f0f0), text Void (#0f0f0f) ở 14-16px Inter Display 400, border-radius 100px, padding dọc 6px / ngang 14px. Không viền, không shadow. Button filled duy nhất trong hệ thống — dành riêng cho các action người dùng phải thấy.

### Status Indicator
**Vai trò:** Tín hiệu availability trong footer/hero

Chấm tròn 6-8px màu Live Wire (#08ff00) kèm label text tùy chọn ('Available for hire') màu Bone ở 14px. Chấm xanh là element chromatic duy nhất trong toàn bộ UI — nhịp tim giữa khoảng không.

### Avatar Badge
**Vai trò:** Dấu hiệu nhận diện thương hiệu ở nav góc trên trái

Ảnh thumbnail tròn (radius 100px) chân dung designer, đường kính 32-40px, không viền. Đi kèm wordmark 'Josh Warner' màu Bone ở 14-16px Inter Display 400.

### Coming Soon Pill
**Vai trò:** Badge trạng thái dự án trên case study preview

Ghost pill: nền trong suốt, text Bone 'Coming Soon' ở 12px, radius 100px, padding dọc 4px / ngang 10px. Truyền tải trạng thái thời gian qua ngôn ngữ nav pill thay vì giới thiệu một họ component mới.

### Hero Art Container
**Vai trò:** 3D render hoặc artwork ảnh chụp full-bleed

Không chrome container — artwork trải dài đến mép viewport trên nền Void (#0f0f0f). Hero là một composition lớn duy nhất (chữ ampersand vàng + driftwood trong ảnh chụp) chiếm toàn bộ chiều cao viewport với nav và tagline phủ lên.

### Project Showcase Panel
**Vai trò:** Preview case study riêng lẻ (phone mockup trong ảnh chụp thứ hai)

Device mockup căn giữa hoặc đặt trong viewport, nổi trên phần tiếp nối của hero artwork. Không bề mặt card, không viền — bản thân ảnh thiết bị là đơn vị thị giác. Caption text phủ lên màu Bone ở 16-20px.

### Footer Bar
**Vai trò:** Footer site với bio và CTA

Nền Charcoal (#1a1a1a), cao hơn canvas một bậc. Chứa status indicator bên trái, bio text màu Bone/Ash ở 14-16px, và nút Hire me bên phải. Padding 12px, viền trên mảnh màu Absolute (#000000).

### Tagline Headline
**Vai trò:** Khối copy căn trái ở hero

Câu hai dòng ('Product by day. / Art by night.') ở 32-40px Inter Display 400, Bone (#f0f0f0), 0.04em letter-spacing, đặt ở góc dưới trái hero với lề trái rộng. Không bold, không gradient — trọng lượng của dòng chữ đến từ vị trí của nó trên khoảng tối.

### Subtitle/Body Text
**Vai trò:** Text đoạn hỗ trợ

14-16px Inter Display 400, Ash (#b8b8b8) hoặc Bone (#f0f0f0), 0.04em letter-spacing, line-height 1.5-1.56. Kiềm chế, dễ đọc, không trang trí.

### Image Thumbnail
**Vai trò:** Image container nhỏ và inline media

Border-radius 4px, viền Absolute (#000000) 1px. Radius nhỏ giữ ảnh gọn gàng và sắc nét trên khoảng tối, tương phản với ngôn ngữ pill 100px của các element tương tác.

## Do's and Don'ts

### Nên
- Dùng Bone (#f0f0f0) cho mọi text trên nền tối — không bao giờ dùng trắng tinh, vì sẽ xung đột với palette trắng ấm
- Áp dụng border-radius 100px cho mọi button, badge, nav item và avatar tương tác — hình pill là hình học đặc trưng của hệ thống
- Giữ toàn bộ type ở Inter Display weight 400 — không bao giờ dùng bold hay semibold; xây dựng hierarchy qua kích thước và spacing
- Dùng 0.04em letter-spacing trên mọi text — tracking dương nhất quán này giúp type siêu nhẹ dễ đọc và tạo cảm giác đo lường, có chủ đích
- Chỉ dùng Live Wire (#08ff00) cho chấm trạng thái availability — đây là màu chromatic duy nhất và không được xuất hiện ở nơi khác
- Đặt nền trang là Void (#0f0f0f), không phải đen tuyền — màu gần đen ngăn hiện tượng nhòe OLED và tạo chiều sâu canvas tinh tế
- Dùng border-radius 4px cho image container và 100px cho mọi element tương tác — duy trì tính đối xứng sắc/nhọn

### Không nên
- Không thêm bất kỳ accent color nào ngoài Live Wire xanh — hệ thống cố tình đơn sắc, bất kỳ màu sắc bổ sung nào sẽ phá vỡ gallery void
- Không dùng drop shadow cho card hoặc surface elevation — chiều sâu phải đến từ artwork hoặc sự chuyển tông bề mặt, không từ shadow stacks
- Không bold headline hoặc dùng weight 500+ — toàn bộ hệ thống type thở ở weight 400; thêm weight phá vỡ kết cấu phẳng, đều
- Không dùng góc nhọn (<12px) trên button, nav items hoặc badges — hình học pill là bản sắc thị giác của hệ thống
- Không dùng đen tuyền (#000000) làm fill background cho card hoặc bề mặt — chỉ dùng cho viền mảnh và cạnh; dùng Void (#0f0f0f) cho bề mặt
- Không đặt body text dưới 14px hoặc trên 40px — type scale cố tình nén; sai lệch phá vỡ sự kiềm chế editorial
- Không thêm gradient, glow hoặc color wash vào UI elements — năng lượng thị giác của hệ thống đến từ nội dung 3D/ảnh chụp, không từ trang trí UI

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Void | `#0f0f0f` | Canvas trang — lớp nền bên dưới mọi nội dung |
| 1 | Charcoal | `#1a1a1a` | Bề mặt footer — cao hơn canvas một bậc để phân vùng |
| 2 | Bone | `#f0f0f0` | Filled button background — bề mặt đảo ngược cho điểm nhấn tương tác |

## Elevation

- **Buttons và element tương tác:** `rgba(0, 0, 0, 0.16) 0px 0px 10px 0px`
- **Project images và artwork overlays:** `rgba(0, 0, 0, 0.5) 0px 1px 10px -2px`

## Imagery

Site thiên về hình ảnh: 3D render full-bleed và ảnh chụp cao cấp chiếm toàn bộ viewport. Hero có composition điêu khắc gồm chữ ampersand kim loại vàng đan xen với driftwood hữu cơ, một bông hoa nhỏ và chìa khóa trang trí — ánh sáng studio, độ tương phản cao, trên nền đen tuyền. Các section thứ cấp hiển thị device mockup (iPhone hiển thị app UI) nổi trên phần tiếp nối của cảnh driftwood, tạo một thế giới thị giác thống nhất khi cuộn. Tất cả imagery đều là ảnh chụp hoặc 3D render, không minh họa hoặc phẳng. Xử lý màu trong ảnh chụp là moody và ấm — kim loại vàng, tông gỗ ấm, trên nền đen sâu. Không dùng icon; navigation và trạng thái chỉ là text. Ảnh có góc 4px chặt chẽ, tương phản với chrome UI hình pill.

## Layout

Canvas tối full-bleed không có ràng buộc page max-width — hero artwork trải dài edge-to-edge, text overlays nổi trong không gian âm (dưới trái cho tagline, giữa cho nav). Navigation là một thanh ngang duy nhất với brand avatar+tên ở xa bên trái, ba nav items (Projects, Art, Info) tập trung ở giữa, và nút Contact ở xa bên phải. Dưới hero, trang chảy vào các project showcase panel full-viewport, mỗi panel có device mockup hoặc artwork composition căn giữa hoặc lệch tâm, với text overlay tối thiểu. Footer là một dải ngang duy nhất với status indicator căn trái, bio căn giữa trái, và CTA căn phải. Nhịp điệu dọc được xác định bởi section gap 60-64px, và mật độ tổng thể là compact với khoảng thở rộng rãi xung quanh text overlays. Layout mang phong cách editorial và gallery — các section nội dung được phân cách bởi chính artwork, không phải bởi divider hoặc thay đổi màu nền.

## Agent Prompt Guide

## Quick Color Reference
- background (canvas): #0f0f0f
- text (primary): #f0f0f0
- text (secondary): #b8b8b8
- border (hairline): #000000
- accent (status dot only): #08ff00
- primary action: #f0f0f0 (filled action)

## 3-5 Example Component Prompts

1. **Pill Navigation Button (ghost):** Nền trong suốt, 14px Inter Display weight 400, màu #f0f0f0, letter-spacing 0.04em, border-radius 100px, padding 4px 14px. Không viền, không shadow.

2. **Filled Contact Button:** Nền #f0f0f0, text 14px Inter Display weight 400, màu #0f0f0f, letter-spacing 0.04em, border-radius 100px, padding 6px 14px. Không viền.

3. **Status Indicator Row:** Chấm tròn 8px màu #08ff00, tiếp theo là label text 'Available for hire' ở 14px Inter Display 400, màu #f0f0f0, letter-spacing 0.04em. Inline-flex với gap 8px.

4. **Hero Tagline Block:** Headline hai dòng ở 32-40px Inter Display weight 400, màu #f0f0f0, letter-spacing 0.04em, đặt ở góc dưới trái viewport. Subtitle bên dưới ở 16px, màu #b8b8b8, cùng letter-spacing.

5. **Footer Bar:** Nền #1a1a1a, full-width, padding 12px. Status indicator bên trái, bio text màu #f0f0f0 ở 14px, nút 'Hire me' filled (fill Bone, text Void, radius 100px) bên phải.

## Similar Brands

- **Are.na** — Cùng cách tiếp cận gallery tối achromatic với sans-serif siêu nhẹ và không màu trang trí — nội dung là chủ thể thị giác trên nền gần đen
- **Locomotive (locomotive.ca)** — Hero composition 3D render full-bleed trên nền đen sâu, với minimal nav hình pill và typography scale editorial
- **Werkstatt (bởi Studio Apeloig)** — Ngôn ngữ portfolio-như-gallery-nghệ-thuật: imagery điêu khắc lớn chiếm ưu thế, UI giảm xuống còn text labels và pill controls, palette đơn sắc
- **Rauno Freiberg** — Developer portfolio dark-mode với type chỉ weight-400, letter-spacing rộng, và palette gần đơn sắc, nơi màu sắc chỉ dành cho một tín hiệu chức năng duy nhất

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void: #0f0f0f;
  --color-absolute: #000000;
  --color-charcoal: #1a1a1a;
  --color-faint: #080808;
  --color-bone: #f0f0f0;
  --color-ash: #b8b8b8;
  --color-graphite: #696969;
  --color-live-wire: #08ff00;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.48px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 0.56px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.64px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 0.8px;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --tracking-heading: 1.28px;
  --text-display: 40px;
  --leading-display: 1.2;
  --tracking-display: 1.6px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 60-64px;
  --card-padding: 14px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 40px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-badges: 100px;
  --radius-images: 4px;
  --radius-avatars: 100px;
  --radius-buttons: 100px;
  --radius-navpills: 100px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.5) 0px 1px 10px -2px;
  --shadow-md-2: rgba(0, 0, 0, 0.16) 0px 0px 10px 0px;

  /* Surfaces */
  --surface-void: #0f0f0f;
  --surface-charcoal: #1a1a1a;
  --surface-bone: #f0f0f0;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #0f0f0f;
  --color-absolute: #000000;
  --color-charcoal: #1a1a1a;
  --color-faint: #080808;
  --color-bone: #f0f0f0;
  --color-ash: #b8b8b8;
  --color-graphite: #696969;
  --color-live-wire: #08ff00;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.48px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 0.56px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.64px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 0.8px;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --tracking-heading: 1.28px;
  --text-display: 40px;
  --leading-display: 1.2;
  --tracking-display: 1.6px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 40px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.5) 0px 1px 10px -2px;
  --shadow-md-2: rgba(0, 0, 0, 0.16) 0px 0px 10px 0px;
}
```