# Garden Eight

> # Garden Eight — Style Reference

## Prompt Content

```
# Garden Eight — Style Reference
> Editorial trên nền giấy kem hoành tráng. Một headline serif 215px đơn độc trên nền parchment ấm áp, bao quanh bởi các khối điêu khắc lơ lửng và khoảng trắng thoáng đãng như gió biển — trang web hoạt động như bìa của một art monograph, không phải dashboard.

**Theme:** light

Garden Eight vận hành như một editorial spread trong sách nghệ thuật: nền canvas parchment kem ấm làm bệ đỡ cho serif type hoành tráng, đóng vai trò như gallery wall text chứ không phải product UI. Bảng màu cực kỳ nhị phân — bề mặt trắng xương, chữ đen mực — và mọi màu bổ sung đều bị xem như sự xâm phạm. Layout thở ở quy mô gần như bảo tàng, với gutter margin 180px và khoảng trắng quá khổ, biến type và các đối tượng 3D điêu khắc thành nội dung duy nhất. Không có ngôn ngữ màu chức năng: không có alert red, success green hay info blue. Mọi quyết định đều dựa trên weight, scale và sự im lặng. Hệ thống mang phong cách masthead của tạp chí thời trang cao cấp hơn là giao diện SaaS, và bất kỳ agent nào tái tạo nó nên ưu tiên kịch tính typographic và sự kiềm chế về không khí hơn là các affordance UI thông thường.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Parchment | `#dbd6d0` | `--color-parchment` | Canvas trang, bề mặt card, divider nhạt, border link — tông màu xương desaturated ấm áp thay thế màu gần trắng thông thường, mang đến nhiệt độ editorial cho toàn bộ hệ thống |
| Carbon Ink | `#1e1f1f` | `--color-carbon-ink` | Text chính, display headline, nav rules, border card, icon strokes — gần như đen với một chút ấm nhẹ hài hòa với parchment thay vì tương phản |
| Pitch Black | `#000000` | `--color-pitch-black` | Dành riêng cho các khoảnh khắc display tương phản tối đa và text sâu nhất trên bề mặt sáng nhất — được dùng tiết kiệm để Carbon Ink giữ trọng lượng đọc mặc định |

## Tokens — Typography

### Lausanne — Primary serif — mang nav labels ở 12–15px weight 400, body và link copy ở 14–15px weight 400, và display headline khổng lồ 215px ở weight 200. Display weight-200 là chữ ký: hầu hết các agency dùng 600–700 cho type hoành tráng, Lausanne's hairline 200 cho phép headline thì thầm ở 215px và vẫn là thứ ồn ào nhất trên trang chỉ nhờ scale · `--font-lausanne`
- **Thay thế:** Fraunces (Google Fonts) — có chung đặc tính serif hiện đại với khả năng kiểm soát optical-size; để có bản miễn phí gần nhất, dùng Fraunces opsz 144+ ở kích thước display
- **Weights:** 200, 400
- **Sizes:** 12px, 14px, 15px, 215px
- **Line height:** 1.25–1.60 (body), 1.30 (headlines)
- **Vai trò:** Primary serif — mang nav labels ở 12–15px weight 400, body và link copy ở 14–15px weight 400, và display headline khổng lồ 215px ở weight 200. Display weight-200 là chữ ký: hầu hết các agency dùng 600–700 cho type hoành tráng, Lausanne's hairline 200 cho phép headline thì thầm ở 215px và vẫn là thứ ồn ào nhất trên trang chỉ nhờ scale

### Gunsan — Display serif companion — weight 600 ở 215px với line-height 0.77 cực kỳ chặt tạo ra letterspacing condensed, tương phản cao trên hero compositions. Leading 0.77 là chặt nhất trong hệ thống và là nơi duy nhất font này xuất hiện · `--font-gunsan`
- **Thay thế:** Playfair Display (Google Fonts) — serif hiện đại tương phản cao có thể tái tạo kịch tính line-height 0.77 ở kích thước display
- **Weights:** 600
- **Sizes:** 215px
- **Line height:** 0.77
- **Vai trò:** Display serif companion — weight 600 ở 215px với line-height 0.77 cực kỳ chặt tạo ra letterspacing condensed, tương phản cao trên hero compositions. Leading 0.77 là chặt nhất trong hệ thống và là nơi duy nhất font này xuất hiện

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.5 | — | `--text-body-sm` |
| display | 215px | 0.77 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 27 | 27px | `--spacing-27` |
| 30 | 30px | `--spacing-30` |
| 38 | 38px | `--spacing-38` |
| 45 | 45px | `--spacing-45` |
| 60 | 60px | `--spacing-60` |
| 180 | 180px | `--spacing-180` |
| 210 | 210px | `--spacing-210` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 1440px |
| cards | 30px |
| canvas | 0px |
| buttons | 1440px |

### Layout

- **Section gap:** 60px
- **Card padding:** 12-30px
- **Element gap:** 4-10px

## Components

### Monumental Display Headline
**Vai trò:** Hero typography

215px Gunsan weight 600, line-height 0.77, màu #1e1f1f trên nền #dbd6d0. Viết hoa toàn bộ, căn giữa hoặc căn trái. Đây là element typographic lớn nhất trên mọi màn hình và nên là text duy nhất cạnh tranh sự chú ý — không có subtitle, không có supporting copy phía trên fold.

### Hairline Display Headline
**Vai trò:** Alternative hero typography

215px Lausanne weight 200, line-height 1.30, màu #1e1f1f. Cùng scale hoành tráng nhưng weight thì thầm — dùng khi bố cục cần cảm giác như gallery wall text thay vì bìa tạp chí. Sự tương phản giữa 200 và 600 ở cùng kích thước định nghĩa hai giọng display của hệ thống.

### Top Bar Navigation
**Vai trò:** Global site navigation

Thanh trong suốt full-width trên nền parchment canvas. Brand wordmark 'GARDEN EIGHT' ở 12px Lausanne weight 400, letter-tracking 10px, góc trên bên trái. Nav items (CASES, ABOUT, ARCHIVES, CONTACT) căn phải, cùng 12px Lausanne weight 400, padding ngang 38–45px giữa các item. Language toggle AI/JA ở ngoài cùng bên phải với cách xử lý giống hệt. Không có background fill, không có border-bottom — nav nổi trên canvas.

### Pill Button
**Vai trò:** Action trigger

1440px border-radius (pill thật sự). Border 1px màu #1e1f1f hoặc #dbd6d0 tùy bề mặt, padding ngang 12px, không fill mặc định. Text 12–14px Lausanne weight 400. Khi hover: fill đảo ngược thành màu border. Hình dạng là thương hiệu — mọi interactive element có border nên là pill, không bao giờ là rectangle.

### Text Link
**Vai trò:** Inline navigation

12–15px Lausanne weight 400, màu kế thừa từ #1e1f1f. Gạch chân là border-bottom 1px cùng màu. Không có chuyển màu khi hover — điểm nhấn được tạo bằng cách thay đổi weight (400 → 200 đảo ngược) thay vì màu sắc, giữ nguyên bảng màu nhị phân.

### Card with 30px Radius
**Vai trò:** Project case, work tile

30px border-radius (radius không phải pill, không phải 0 duy nhất trong hệ thống). Bề mặt kế thừa parchment canvas — card được định nghĩa bởi border 1px #1e1f1f và padding trong 12–30px, không phải background fill hay shadow. Hình ảnh 3D điêu khắc nằm bên trong các card này và chảy sát đến các góc 30px.

### Sculptural 3D Object
**Vai trò:** Atmospheric visual

3D render tông màu kem hữu cơ (cùng họ màu với canvas, không phải màu tương phản) lơ lửng phía sau và xung quanh display type. Luôn full-bleed hoặc chạm cạnh, không bao giờ bị giới hạn trong khung card. Shadow trên các đối tượng này là ngôn ngữ shadow duy nhất trong hệ thống — bản thân UI không đổ shadow nào.

### Language Toggle
**Vai trò:** Locale switcher

Hai text token (AI / JA) ở 12px Lausanne weight 400, gap 10px. Ngôn ngữ đang hoạt động được gạch dưới bằng border-bottom 1px #1e1f1f. Không background, không border, không đổi màu — lựa chọn được truyền đạt bằng underline rule duy nhất.

### Scroll Indicator
**Vai trò:** Below-fold affordance

Icon hình tròn nhỏ ở góc dưới bên phải viewport, nền parchment canvas với border 1px #1e1f1f, đường kính 30px. Gợi ý tiếp tục cuộn dọc mà không cần ngôn ngữ mũi tên.

## Do's and Don'ts

### Do
- Đặt display headlines ở 215px với line-height 0.77 (Gunsan 600) hoặc 1.30 (Lausanne 200) — không bao giờ thu nhỏ để 'vừa'; nếu không vừa, layout sai
- Dùng padding ngang 180px trên page canvas để giữ khoảng trắng gallery-wall
- Biến mọi interactive element có border thành pill 1440px-radius — rectangle không có trong hệ thống
- Để 30px radius là radius góc không phải pill duy nhất trong toàn bộ giao diện (dành riêng cho card và image containers)
- Dùng weight 200 Lausanne cho display khi trang nên mang cảm giác exhibition text; chuyển sang Gunsan 600 khi trang nên mang cảm giác bìa tạp chí
- Giữ bảng màu ở hai tông — Parchment canvas và Carbon Ink — và để weight + scale mang hierarchy thay vì thêm màu thứ ba
- Để các đối tượng 3D điêu khắc đổ shadow mềm lên canvas; phần còn lại của UI không có shadow

### Don't
- Không bao giờ thêm accent colors (xanh lam, đỏ, xanh lục) cho CTA, alert hay status — hệ thống là nhị phân và một hành động chromatic sẽ phá vỡ register editorial
- Không bao giờ dùng corner radius 0–8px cho card, modal hay image container — chỉ 30px hoặc 1440px được phép
- Không bao giờ áp dụng box-shadow cho UI components — shadow chỉ thuộc về các sculptural 3D elements
- Không bao giờ đặt body type trên 15px hoặc dưới 12px — hệ thống type nhảy từ kích thước đọc sang kích thước hoành tráng mà không có gì ở giữa
- Không bao giờ dùng line-height trên 0.85 cho display headlines; khoảng 0.77–0.80 là thứ tạo nên kịch tính stacked, condensed
- Không bao giờ thêm background fill vào nav hay buttons mặc định — chỉ border và text mang trọng lượng thị giác
- Không bao giờ đưa gradient, pattern hay texture overlay lên canvas — tông màu parchment là surface treatment duy nhất

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Parchment Canvas | `#dbd6d0` | Nền trang chủ đạo — màu xương ấm, không bao giờ trắng tinh |
| 2 | Ink Plate | `#1e1f1f` | Phần inset tối, inverse cards và bất kỳ bề mặt nào cần lùi lại phía sau Carbon Ink text |

## Elevation

- **Sculptural 3D Object:** `0 30px 60px rgba(30,31,31,0.08), 0 10px 20px rgba(30,31,31,0.04)`

## Imagery

Hình ảnh chủ yếu là các dạng điêu khắc 3D hữu cơ lớn, cùng họ màu kem ấm với canvas. Các đối tượng này không phải product photography hay illustration — chúng là những hình dạng trừu tượng, biomorphic (dải xoắn, vỏ mềm, hình học tan chảy) được render bằng matte cream với subsurface lighting nhẹ. Chúng lơ lửng phía sau và xung quanh display type, chồng lấn một phần, và xem trang như một sân khấu 3D nông. Không có human photography, lifestyle imagery hay UI screenshots. Các đối tượng hoạt động như bầu không khí và kết cấu, không phải sự giải thích.

## Layout

Canvas full-bleed với gutter ngang 180px; nội dung không bao giờ bị giới hạn trong max-width container. Hero là display headline 215px căn giữa hoặc hơi lệch tâm, không có supporting copy phía trên fold, đặt trên nền các sculptural 3D forms lơ lửng. Nhịp điệu section tối giản — một editorial spread trên mỗi màn hình, với khoảng trống dọc 60px+ rộng rãi giữa các section thay vì các dải xen kẽ. Navigation là một top bar trong suốt duy nhất với brand trái và nav phải, không bao giờ sticky-elevated, không bao giờ đổ shadow. Mật độ tổng thể thưa thớt và giống bảo tàng: mỗi màn hình chứa một khoảnh khắc typographic và một khoảnh khắc điêu khắc, ngăn cách bởi sự im lặng.

## Agent Prompt Guide

## Quick Color Reference
- text: #1e1f1f
- background: #dbd6d0
- border: #1e1f1f (trên nền sáng) hoặc #dbd6d0 (trên nền tối)
- accent: không — hệ thống là nhị phân
- primary action: không có màu CTA riêng biệt

## Example Component Prompts
Không quan sát thấy màu primary action riêng biệt; dùng các neutral button treatments đã trích xuất thay vì phát minh ra màu CTA đã được fill.

2. **Pill Button Row**: Ba pill buttons trong một hàng ngang, mỗi button có 1440px border-radius, border 1px solid #1e1f1f, padding ngang 12px, fill trong suốt. Text bên trong ở 12px Lausanne weight 400, màu #1e1f1f. Gap 10px giữa các pill. Không có background fill ở bất kỳ trạng thái nào ngoại trừ hover (đảo ngược thành fill #1e1f1f với text #dbd6d0).

3. **Project Card**: Container 30px border-radius, border 1px solid #1e1f1f, padding trong 30px, fill trong suốt kế thừa canvas #dbd6d0. Project title ở 14px Lausanne weight 400, màu #1e1f1f. Không shadow, không chuyển màu background so với canvas — chỉ border định nghĩa ranh giới card.

4. **Top Bar Navigation**: Overlay trong suốt trên canvas #dbd6d0. Wordmark 'GARDEN EIGHT' góc trên bên trái ở 12px Lausanne weight 400, letter-spacing 0.1em. Nav items (CASES, ABOUT, ARCHIVES, CONTACT) góc trên bên phải ở 12px Lausanne weight 400 với gap ngang 38px. Toggle 'AI | JA' ở ngoài cùng bên phải với gap 10px, ngôn ngữ đang hoạt động được đánh dấu bằng border-bottom 1px #1e1f1f underline.

5. **Dark Inset Section**: Dải full-bleed với background #1e1f1f, padding dọc 60px. Display text ở 215px Lausanne weight 200, line-height 1.30, màu #dbd6d0. Whisper type weight-200 trên bề mặt tối là giọng hero thứ cấp của hệ thống — mềm mại hơn, chiêm nghiệm hơn so với xử lý bìa Gunsan 600.

## Binary Palette Philosophy

Hệ thống cố tình từ chối một lớp accent chromatic. Mọi tín hiệu UI thông thường thường được mã hóa bằng màu sắc (hover, focus, active, error, success) đều được mã hóa lại bằng weight, scale, border hoặc shape. Đây là lựa chọn thiết kế về register: studio không muốn mang cảm giác như một sản phẩm SaaS, và một CTA màu xanh lam sẽ ngay lập tức phá vỡ posture editorial. Khi nghi ngờ, hãy thêm nhiều khoảng trắng #dbd6d0 hơn là thêm màu thứ ba.

## Type Scale Jumps

Hệ thống type có khoảng cách lớn giữa kích thước đọc (12–15px) và kích thước display (215px). Không có tier 'large heading' trung gian — trang hoặc thì thầm ở body weight hoặc hét lên ở 215px. Sự nhị phân trong scale này phản ánh sự nhị phân trong màu sắc và là cốt lõi của giọng editorial của hệ thống. Các kích thước trung gian (24px, 32px, 48px) nên tránh; tạo hierarchy thông qua weight shifts và cấu trúc hai-scale hiện có.

## Similar Brands

- **Pentagram** — Cùng kỷ luật bảng màu nhị phân — chữ đen trên nền trắng ấm với serif display hoành tráng và khoảng trắng quy mô bảo tàng, không có accent chromatic trong hệ thống
- **Locomotive (MTL)** — Thẩm mỹ agency editorial với các sculptural 3D forms lơ lửng phía sau oversized serif headlines, xem trang như một typographic plate thay vì UI
- **Resn** — Các site agency thử nghiệm xem display type là nội dung duy nhất và dùng 3D/atmosphere làm texture hỗ trợ thay vì hình ảnh giải thích
- **Bureau Cool** — Các site agency ưu tiên portfolio với hairline serif display weights ở scale cực đoan, neutral canvas ấm áp và không có ngôn ngữ màu UI thông thường

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-parchment: #dbd6d0;
  --color-carbon-ink: #1e1f1f;
  --color-pitch-black: #000000;

  /* Typography — Font Families */
  --font-lausanne: 'Lausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gunsan: 'Gunsan', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-display: 215px;
  --leading-display: 0.77;

  /* Typography — Weights */
  --font-weight-extralight: 200;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-27: 27px;
  --spacing-30: 30px;
  --spacing-38: 38px;
  --spacing-45: 45px;
  --spacing-60: 60px;
  --spacing-180: 180px;
  --spacing-210: 210px;

  /* Layout */
  --section-gap: 60px;
  --card-padding: 12-30px;
  --element-gap: 4-10px;

  /* Border Radius */
  --radius-3xl: 30px;
  --radius-full: 1440px;

  /* Named Radii */
  --radius-tags: 1440px;
  --radius-cards: 30px;
  --radius-canvas: 0px;
  --radius-buttons: 1440px;

  /* Surfaces */
  --surface-parchment-canvas: #dbd6d0;
  --surface-ink-plate: #1e1f1f;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-parchment: #dbd6d0;
  --color-carbon-ink: #1e1f1f;
  --color-pitch-black: #000000;

  /* Typography */
  --font-lausanne: 'Lausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gunsan: 'Gunsan', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-display: 215px;
  --leading-display: 0.77;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-27: 27px;
  --spacing-30: 30px;
  --spacing-38: 38px;
  --spacing-45: 45px;
  --spacing-60: 60px;
  --spacing-180: 180px;
  --spacing-210: 210px;

  /* Border Radius */
  --radius-3xl: 30px;
  --radius-full: 1440px;
}
```