# Caserne

> Caserne — Style Reference

## Prompt Content

```
# Caserne — Style Reference
> black gallery wall with white type whispers

**Theme:** dark

Caserne hoạt động như một portfolio đẳng cấp gallery: một canvas gần như đen tuyền, nơi ảnh editorial cỡ lớn đảm nhận vai trò chính, còn giao diện tự lùi về những đường viền mảnh như sợi tóc và kiểu chữ siêu mỏng. Ngôn ngữ thị giác mang sự kiềm chế của gallery — màu đen thật chiếm ưu thế, chữ đặt ở 13–14px trong custom ABC Oracle, và chuyển động duy nhất là scroll trang để lộ ra những ảnh dự án đồ sộ. Mọi UI element đều phải xứng đáng với vị trí của nó: không có navigation chrome, không button fill, không gradient trang trí — chỉ có text, image và một đường 1px. Dấu « » guillemet đặt trước nhãn dự án là một signature editorial kiểu Pháp-Canada, gợi về nguồn gốc Montreal của studio và neo thương hiệu vào một cảm quan curatorial, gần như typographic.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Obsidian | `#000000` | `--color-obsidian` | Canvas trang, nền section full-bleed, hero containers |
| Paper | `#ffffff` | `--color-paper` | Text chính, nhãn dự án, link navigation, icon strokes trên nền tối |
| Frost | `#f2f2f2` | `--color-frost` | Viền mảnh (hairline borders), đường viền ảnh, grid dividers, nav separators — toàn bộ đường nét cấu trúc của giao diện |
| Smoke | `#858484` | `--color-smoke` | Text phụ tắt tiếng, mô tả dự án, chú thích metadata |
| Graphite | `#333333` | `--color-graphite` | Icon strokes tắt tiếng, separators và chi tiết đồ họa phụ. Không dùng làm màu CTA chính |

## Tokens — Typography

### ABC Oracle — Kiểu chữ duy nhất trên toàn bộ site. Weight 100 (ultra-thin) mang trọng lượng editorial trong ngữ cảnh display; weight 400 xử lý navigation và body labels ở 13–14px. Custom Dinamo typeface mang lại cho Caserne một thẩm quyền typographic, curatorial mà một system sans không thể sao chép — các thin cuts và optical adjustments báo hiệu một studio coi trọng chữ. · `--font-abc-oracle`
- **Thay thế:** Söhne, ABC Diatype, Inter (có weight 100)
- **Weights:** 100, 400, 700
- **Sizes:** 13px, 14px (body/nav) với display sizes được suy ra từ hierarchy thị giác
- **Line height:** 1.29–1.43
- **Letter spacing:** normal ở body sizes; tight tracking ở display sizes
- **OpenType features:** `"ss01" on (nếu có — Oracle's stylistic alternates củng cố cá tính editorial)`
- **Role:** Kiểu chữ duy nhất trên toàn bộ site. Weight 100 (ultra-thin) mang trọng lượng editorial trong ngữ cảnh display; weight 400 xử lý navigation và body labels ở 13–14px. Custom Dinamo typeface mang lại cho Caserne một thẩm quyền typographic, curatorial mà một system sans không thể sao chép — các thin cuts và optical adjustments báo hiệu một studio coi trọng chữ.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.29 | — | `--text-caption` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 45 | 45px | `--spacing-45` |
| 90 | 90px | `--spacing-90` |
| 120 | 120px | `--spacing-120` |
| 225 | 225px | `--spacing-225` |
| 240 | 240px | `--spacing-240` |

### Border Radius

| Element | Value |
|---------|-------|
| tags | 0px |
| cards | 0px |
| images | 0px |
| buttons | 0px |

### Layout

- **Section gap:** 90px
- **Card padding:** 0px
- **Element gap:** 5px

## Components

### Minimal Text Nav
**Role:** Navigation chính của site

Một hàng ngang duy nhất gồm các link text trắng (Caserne, Work, Culture, Notes, Studio, Contact, FORUM) trong ABC Oracle weight 400 ở 13–14px, nổi trên nền đen. Không background, không border, không logo lockup — wordmark CHÍNH LÀ thương hiệu. Từ 'FORUM' được viết hoa và căn phải, cách biệt bởi khoảng trống rộng. Padding 5px ngang cho mỗi link item.

### Full-Bleed Hero Image
**Role:** Mở đầu showcase dự án

Ảnh chụp trải dài toàn bộ chiều rộng viewport, không border, không bo góc, không overlay. Nằm trực tiếp trên canvas #000000. Aspect ratio theo viewport — thường là landscape, lấp đầy ~80–100% chiều cao màn hình đầu tiên. Không caption, không text overlay trên ảnh.

### Project Card
**Role:** Mục portfolio work

Ảnh hình chữ nhật lớn (full container width trong grid) không border-radius, không shadow, không card background. Bên dưới ảnh: một nhãn trắng nhỏ có tiền tố « (guillemet) và tên dự án, cùng một dòng mô tả Smoke (#858484) ở 13–14px weight 400. Bản thân card là vô hình — chỉ tồn tại ảnh và nhãn text nhỏ.

### Project Label
**Role:** Caption bên dưới project cards

Khối text hai dòng: Dòng 1 bằng Paper (#ffffff) ở 14px weight 400 với tiền tố «; Dòng 2 bằng Smoke (#858484) ở 13px weight 400. Khoảng cách tối thiểu (5px) giữa các dòng. Căn trái, sát mép trái của ảnh phía trên.

### Section Anchor Label
**Role:** Section navigation

Text nhỏ như « Work đóng vai trò header section. Màu trắng, 13–14px, căn trái ở đầu một khối nội dung. Hoạt động vừa là label vừa là anchor link.

### Image Outline Border
**Role:** Viền ảnh tinh tế

Border 1px solid #f2f2f2 trên ảnh, tạo khung mảnh trên nền đen. Đây là border trang trí duy nhất trong hệ thống — nó thay thế nhu cầu về card background bằng cách cho mọi ảnh một cạnh xác định.

## Do's and Don'ts

### Do
- Dùng #000000 làm canvas phổ quát — mọi section, card và container đều nằm trên nền đen thật
- Đặt type ở 13–14px trong ABC Oracle weight 400 cho tất cả UI labels và navigation; để ảnh gánh trọng lượng thị giác, không phải type
- Đặt tiền tố « (guillemet) cho project labels và section headers — đó là signature editorial kiểu Pháp-Canada, không phải dấu câu tùy chọn
- Dùng border 1px #f2f2f2 trên ảnh thay vì card background hoặc shadow để xác định containment
- Dùng #858484 (Smoke) cho tất cả text phụ/mô tả; dành #ffffff (Paper) cho primary labels và navigation
- Duy trì khoảng cách dọc 90px giữa các section nội dung chính để mỗi ảnh dự án có không gian thở như một artifact độc lập
- Để ảnh full-bleed — không bao giờ giam ảnh portfolio vào card hoặc container bo tròn

### Don't
- Không bao giờ đưa màu nhấn chromatic vào — bảng màu cố tình là đơn sắc; màu xanh avril là nội dung, không phải chrome
- Không bao giờ dùng box-shadows hoặc elevation — sự phẳng trên nền đen là toàn bộ ngôn ngữ thị giác
- Không bao giờ thêm border-radius cho ảnh, card hoặc button — cạnh sắc 0px duy trì thẩm mỹ gallery-print
- Không bao giờ dùng type dưới 13px hoặc trên 18px cho UI text — giao diện được thiết kế thì thầm
- Không bao giờ thêm logo mark, brand symbol hoặc element trang trí vào navigation — wordmark 'Caserne' là identity
- Không bao giờ dùng filled buttons hoặc colorful CTAs — không có hành động chuyển đổi trên portfolio site, thêm vào sẽ phá vỡ giọng curatorial
- Không bao giờ áp dụng gradient, glows hoặc blur effects cho background — canvas đồng nhất màu đen

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Obsidian Canvas | `#000000` | Background trang chủ đạo — mọi section, card và hero đều nằm trên nền đen thật |
| 2 | Frosted Surface | `#f2f2f2` | Lớp outline mảnh — border 1px phân định ảnh, card và grid cells trên nền đen |

## Imagery

Nhiếp ảnh chiếm ưu thế trong ngôn ngữ thị giác — ảnh dự án full-bleed trải dài toàn bộ chiều rộng viewport. Ảnh mang tính kiến trúc và tập trung vào thương hiệu: biển hiệu cửa hàng (avril), logo tổ chức (Apple), cúp giải thưởng (ADCC). Không lifestyle, không người, không minh họa trừu tượng. Xử lý mang phong cách tài liệu và editorial: lấy nét sắc, ánh sáng tự nhiên, không duotone hoặc color grading. Ảnh nằm không khung trên nền đen, chỉ có viền mảnh. Zero illustration, zero 3D, zero icon system — custom ABC Oracle typography và dấu guillemet mang toàn bộ cá tính typographic. Hình ảnh chiếm khoảng 70% diện tích thị giác; text được giảm cố ý xuống còn nhãn siêu mỏng.

## Layout

Canvas tối full-bleed không có ràng buộc max-width. Hero là một ảnh đơn full-viewport-width chuyển tiếp liền mạch vào grid dự án 2 cột bên dưới. Project cards được sắp xếp trong layout 2 cột với gutter rộng, mỗi cell chứa một ảnh lớn và một khối caption text nhỏ bên dưới. Navigation là một hàng mảnh duy nhất gồm các link text ở trên cùng, nổi trên nền đen không có background bar. Nhịp điệu section được xác định bởi khoảng cách dọc 90px giữa các khối nội dung, tạo nhịp bảo tàng-catalogue nơi mỗi dự án có khoảng lặng thị giác xung quanh. Không sidebar, không footer chrome — trang là một scroll dọc qua các artifact được tuyển chọn.

## Agent Prompt Guide

**Quick Color Reference**
- text: #ffffff (Paper)
- background: #000000 (Obsidian)
- border: #f2f2f2 (Frost)
- muted text: #858484 (Smoke)
- icon: #ffffff (Paper)
- primary action: không có màu CTA riêng biệt

**3-5 Example Component Prompts**

1. Tạo một hero section full-bleed: canvas #000000. Một ảnh landscape đơn trải dài 100% viewport width với 0px border-radius, outline 1px #f2f2f2. Không text overlay trên ảnh. Bên dưới hero, 90px khoảng trống đen trước section tiếp theo.

2. Tạo một project card 2 cột: Ảnh full-width với 0px radius và border 1px #f2f2f2. Bên dưới ảnh, khối label căn trái: Dòng 1 = « Project Name trong #ffffff ABC Oracle 14px weight 400; Dòng 2 = mô tả một dòng trong #858484 ABC Oracle 13px weight 400. Khoảng cách 5px giữa các dòng. Không card background, không shadow.

3. Tạo một navigation bar text tối giản: Một hàng ngang duy nhất trên background #000000. Các mục: Caserne (trái), Work, Culture, Notes, Studio, Contact (giữa/phải), FORUM (phải xa, viết hoa toàn bộ). Tất cả text trong #ffffff ABC Oracle 13px weight 400, padding ngang 5px mỗi item, padding dọc 2px. Không background bar, không logo, không border-bottom.

4. Tạo một section anchor label: Căn trái ở đầu một khối nội dung. Text « Work trong #ffffff ABC Oracle 13px weight 400, trực tiếp trên canvas #000000. Không gạch chân, không background, không border.

5. Tạo một vertical project gallery stack: Các hàng full-width trên canvas #000000, mỗi hàng chứa một ảnh (0px radius, border 1px #f2f2f2) tiếp theo là một khối label. Khoảng cách dọc 90px giữa các hàng. Không card containers, không grid lines, không dividers giữa các section — bản thân khoảng trống đen là separator.

## Elevation Philosophy

Caserne tránh hoàn toàn mọi shadow-based elevation. Hệ thống hoạt động trên một mặt phẳng nơi chiều sâu được tạo ra thông qua nội dung ảnh (ảnh chụp chiếu vào không gian trên nền đen) thay vì UI elevation. Không có gợi ý z-axis: không drop shadows, không inner shadows, không glow effects. Containment được xác định độc quyền bởi border mảnh 1px #f2f2f2 và độ tương phản của ảnh màu đầy đủ trên canvas #000000 đồng nhất. Cách tiếp cận zero-elevation này củng cố phép ẩn dụ gallery-wall — tác phẩm nghệ thuật treo trên tường đen phẳng, cách biệt bởi không gian vật lý, không phải bởi chrome thị giác.

## Similar Brands

- **Pentagram** — Cùng mô hình gallery-portfolio với ảnh dự án full-bleed, navigation tối giản và kiềm chế đơn sắc
- **Instrument** — Canvas tối với ảnh editorial cỡ lớn và type siêu mỏng — giọng portfolio curatorial, phi thương mại
- **Locomotive** — Agency thiết kế Montreal với cảm quan editorial kiểu Pháp-Canada và trình bày ảnh đẳng cấp gallery
- **Bureau Cool** — Cùng cách tiếp cận kiềm chế, nơi giao diện biến mất và work dự án lấp đầy viewport
- **Wieden+Kennedy** — Section tối full-bleed với ảnh quy mô lớn chiếm ưu thế trên UI text tối giản

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-paper: #ffffff;
  --color-frost: #f2f2f2;
  --color-smoke: #858484;
  --color-graphite: #333333;

  /* Typography — Font Families */
  --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.29;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-5: 5px;
  --spacing-45: 45px;
  --spacing-90: 90px;
  --spacing-120: 120px;
  --spacing-225: 225px;
  --spacing-240: 240px;

  /* Layout */
  --section-gap: 90px;
  --card-padding: 0px;
  --element-gap: 5px;

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

  /* Surfaces */
  --surface-obsidian-canvas: #000000;
  --surface-frosted-surface: #f2f2f2;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-paper: #ffffff;
  --color-frost: #f2f2f2;
  --color-smoke: #858484;
  --color-graphite: #333333;

  /* Typography */
  --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.29;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-45: 45px;
  --spacing-90: 90px;
  --spacing-120: 120px;
  --spacing-225: 225px;
  --spacing-240: 240px;
}
```