# Specht Studio

> Specht Studio — Style Reference

## Prompt Content

```
# Specht Studio — Style Reference
> Gallery wall của sự tò mò có chừng mực. Chrome của studio là một mặt phẳng trắng với chữ đen; mọi hiệu ứng thị giác đều nằm gọn trong các project tile.

**Theme:** light

Specht Studio là một khung trưng bày (curatorial frame), không phải một showcase thiết kế — website loại bỏ mọi dấu vết của chính nó để portfolio có thể treo trên một bức tường gallery trung tính. Chrome hoàn toàn đơn sắc: một typeface duy nhất, một weight duy nhất, mực đen và xám trên nền gần trắng. Không có brand color, không CTA, không bề mặt marketing — navigation chỉ là text trần và grid các project tile làm tất cả công việc. Hệ thống đạt được bản sắc thông qua những gì nó giữ lại: không shadow, không bo góc, không gradient, không điểm nhấn màu. Bất kỳ trang nào xây dựng trong hệ thống này nên đọc như một catalog bảo tàng, không phải trang sản phẩm — cấu trúc chính là thiết kế, và work chính là nội dung.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Gallery White | `#ffffff` | `--color-gallery-white` | Canvas trang, nền project tile khi artwork không lấp đầy khung hình |
| Fog Gray | `#b0b0b0` | `--color-fog-gray` | Bề mặt phụ, divider tinh tế, text metadata mờ |
| Graphite | `#666666` | `--color-graphite` | Border link, text phụ, caption metadata, nav không hoạt động |
| Gallery Black | `#000000` | `--color-gallery-black` | Text chính, nav đang hoạt động, tất cả border cấu trúc, mực duy nhất giữ hệ thống lại với nhau |

## Tokens — Typography

### Helvetica Neue — Typeface duy nhất cho mọi ngữ cảnh — nav, body, heading, link, footer. Việc cố tình chọn một weight duy nhất ở 400 cho mọi vai trò loại bỏ phân cấp typographic và buộc grid cùng hình ảnh phải làm công việc xếp hạng. Không display cut, không in đậm, không in nghiêng — sự kiềm chế như một quan điểm. · `--font-helvetica-neue`
- **Thay thế:** Inter hoặc Neue Haas Grotesk Text
- **Weights:** 400
- **Kích thước:** 15px, 16px, 25px
- **Line height:** 1.00–1.50
- **Letter spacing:** normal
- **Vai trò:** Typeface duy nhất cho mọi ngữ cảnh — nav, body, heading, link, footer. Việc cố tình chọn một weight duy nhất ở 400 cho mọi vai trò loại bỏ phân cấp typographic và buộc grid cùng hình ảnh phải làm công việc xếp hạng. Không display cut, không in đậm, không in nghiêng — sự kiềm chế như một quan điểm.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 15px | 1.4 | — | `--text-caption` |
| body-sm | 16px | 1.4 | — | `--text-body-sm` |
| body | 25px | 1.3 | — | `--text-body` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 12 | 12px | `--spacing-12` |
| 13 | 13px | `--spacing-13` |
| 24 | 24px | `--spacing-24` |
| 30 | 30px | `--spacing-30` |
| 35 | 35px | `--spacing-35` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tất cả | 0px |
| nav | 0px |
| tiles | 0px |

### Layout

- **Page max-width:** 1400px
- **Section gap:** 67-122px
- **Card padding:** 0px
- **Element gap:** 2-10px

## Components

### Navigation Bar
**Vai trò:** Top navigation toàn site

Danh sách ngang text trần. Link ở 15-16px Helvetica Neue 400 màu Gallery Black, không gạch chân, không background, không active-state fill. Ngăn cách với nội dung bằng border bottom đen 1-2px mảnh như sợi tóc. Khoảng cách giữa các mục nav là 30px margin-right. Từ 'Work' mang gạch chân đen 2px để đánh dấu section hiện tại.

### Project Tile
**Vai trò:** Portfolio thumbnail trong grid

Ảnh hoặc artwork phủ kín cạnh (edge-to-edge) với zero padding và zero border-radius. Tile áp sát trực tiếp vào nhau với gap 2-10px (hệ thống để artwork tự định nghĩa cạnh của nó). Không title, không metadata, không overlay — tile là artifact thuần túy. Grid cells có tỷ lệ khác nhau (1:1, portrait, landscape) tạo nhịp điệu masonry.

### Grid Container
**Vai trò:** Giữ các portfolio tile trong bố cục masonry

Multi-column grid (3-4 cột trên desktop) ở ~1400px max-width, căn trái thay vì căn giữa. Tile được xếp chặt với gutter tối thiểu. Grid là công cụ thị giác chủ đạo — nó hiện diện nhiều hơn bất kỳ dự án riêng lẻ nào.

### Text Link
**Vai trò:** Link inline và standalone trong body copy

15-16px Helvetica Neue 400 màu Graphite (#666666), gạch chân với border Graphite 1px. Không phát hiện hover color shift — link là tĩnh. Gạch chân 1px là affordance tương tác duy nhất trong toàn bộ hệ thống.

### Section Header
**Vai trò:** Text heading tùy chọn cho các section như 'Artwork', 'Young Innovators'

25px Helvetica Neue 400 màu Gallery Black, line-height 1.2, 13-24px margin-bottom. Đặt trực tiếp lên hoặc gần project tile — không banner background, không colored chip, không box. Text nằm trên mặt phẳng trắng mà không có bất kỳ xử lý thị giác nào phân biệt nó với body type ngoài kích thước.

### Brand Lockup
**Vai trò:** Nhận diện studio ở góc trên bên trái

'Specht Studio' ở 15-16px Helvetica Neue 400 màu Gallery Black, với subtitle in nghiêng 'structure, intuition, experiment' ngay bên dưới cùng kích thước màu Graphite. Không logo mark, không symbol — chỉ wordmark. Subtitle màu xám tạo ra độ tương phản typographic màu duy nhất trong lockup.

### Footer
**Vai trò:** Site footer với secondary links và metadata

Text trần ở 15px Helvetica Neue 400, 11-24px padding. Xử lý đen-trên-trắng giống như phần còn lại của hệ thống. Không social icon, không newsletter form, không decorative element.

## Do's and Don'ts

### Do
- Chỉ dùng Helvetica Neue weight 400 — không bold, không light, không italic ngoài brand subtitle. Sự đồng nhất typographic là hệ thống.
- Đặt body text ở 15-16px và heading tối đa 25px. Bất cứ thứ gì lớn hơn 25px sẽ phá vỡ tỷ lệ gallery-wall nơi hình ảnh chiếm ưu thế.
- Xây dựng với canvas trắng làm bề mặt mặc định. Gallery Black (#000000) là mực cấu trúc duy nhất; Graphite (#666666) xử lý text phụ và border link.
- Để project tile áp sát trực tiếp vào nhau với gap 2-10px. Grid masonry chặt chẽ là công cụ tổ chức chính — gutter rộng sẽ làm tan mật độ thị giác.
- Xử lý mọi trang như một catalog. Text nên chú thích và đánh chỉ mục work; nó không bao giờ được cạnh tranh với hình ảnh để thu hút sự chú ý.
- Giữ tất cả border mảnh (1-2px) màu Gallery Black. Border thay thế shadow, fill và bo góc làm ngôn ngữ cấu trúc.
- Khi một trang cần nhãn section, dùng type đen 25px trực tiếp trên mặt phẳng trắng — không bao giờ dùng colored chip, pill hoặc badge.

### Don't
- Không đưa brand color vào. Bất kỳ điểm nhấn màu nào sẽ chuyển hệ thống từ 'gallery wall' sang 'product page' và phá hủy tính trung lập curatorial.
- Không thêm bo góc cho tile, button hoặc container. Hệ thống là trực giao — radii sắc 0px ở mọi nơi.
- Không dùng shadow, blur hoặc elevation. Chiều sâu phải đến từ nội dung hình ảnh và mật độ grid, không phải từ CSS box-shadow.
- Không dùng nhiều typeface hoặc weight. Một weight hoặc family thứ hai ngay lập tức đưa ra phân cấp mà hệ thống cố tình triệt tiêu.
- Không thêm CTA button. Không có primary action trong hệ thống này — nếu một trang cần link, dùng text link gạch chân Graphite.
- Không căn giữa nội dung trên trang. Grid căn trái, hơi lệch tâm, tạo cảm giác ấn phẩm biên tập.
- Không dùng gradient, fill hoặc background pha màu. Mọi bề mặt là trắng tinh hoặc đen tuyền, không bao giờ là sắc thái ở giữa.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Gallery White | `#ffffff` | Canvas trang chính — bức tường trắng |
| 2 | Fog Gray | `#b0b0b0` | Bề mặt lõm cho metadata và các element yên tĩnh hơn |

## Elevation

Không shadow. Thiết kế làm phẳng mọi element lên một mặt phẳng trắng duy nhất; chiều sâu được gợi ý bởi grid project tile và sự đóng gói dày đặc của hình ảnh, không phải bởi elevation. Bất kỳ nỗ lực thêm drop shadow nào sẽ đưa từ vựng product-UI phá vỡ phép ẩn dụ gallery-wall.

## Imagery

Hình ảnh chính là design system. Project tile trải dài qua photography, editorial print, poster art, 3D render, motion still và hand-drawn illustration — sự đa dạng thị giác tối đa được chứa trong một khung đơn sắc nghiêm ngặt. Mỗi tile là một thế giới thị giác khép kín; grid đối xử với tất cả chúng như nhau, không tile nào được ưu tiên về mặt thị giác bởi kích thước, vị trí hoặc xử lý. Tile không có caption, không overlay, không cạnh bo tròn — chúng là raw crop. Cảm giác tổng thể là một mood board hoặc tường bảo tàng được tuyển chọn: hỗn loạn về nội dung, chặt chẽ về khung hình.

## Layout

Site là một grid masonry dày đặc duy nhất gồm các project tile, full-width với envelope nội dung ~1400px, căn trái thay vì căn giữa. Navigation là thanh text tối giản ở trên cùng — logo trên cùng bên trái, nav links inline — ngăn cách với grid bằng một border mảnh duy nhất. Hero CHÍNH LÀ grid; không có hero section riêng, không text giới thiệu, không banner image. Cuộn trang sẽ tiết lộ thêm tile trong luồng liên tục không có section break hoặc band xen kẽ. Grid đóng gói 3-4 cột trên desktop và giảm trên viewport nhỏ hơn. Project metadata và section title xuất hiện một cách tiết kiệm, đặt chồng lên grid thay vì trong các zone chuyên dụng.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000
- background: #ffffff
- border: #000000
- accent: #666666
- primary action: không có màu CTA riêng biệt

**3-5 Example Component Prompts**
1. Xây dựng portfolio grid: background trắng #ffffff, bố cục masonry 3 cột ở 1400px max-width, tile là ảnh edge-to-edge với 0px border-radius và 8px gap giữa các cell. Không shadow, không border trên tile.
2. Xây dựng top nav bar: background trắng, border bottom 1px solid #000000, 24px padding. Bên trái: 'Specht Studio' ở 16px Helvetica Neue weight 400 #000000 với 'structure, intuition, experiment' ở #666666 ngay bên dưới. Bên phải: nav links 'Work', 'Art / Research', 'Archive', 'About', 'Shop' ở 15px weight 400 #000000, 30px margin-right giữa các mục, mục active có gạch chân 2px solid #000000.
3. Xây dựng text link: 15px Helvetica Neue weight 400, color #666666, gạch chân 1px solid #666666. Không thay đổi hover state.
4. Xây dựng section header: 'Artwork' ở 25px Helvetica Neue weight 400 #000000, line-height 1.2, 24px margin-bottom. Đặt trực tiếp trên canvas trắng không background hoặc border.
5. Xây dựng project tile: một ảnh duy nhất lấp đầy toàn bộ diện tích tile, 0px padding, 0px border-radius, không overlay text, không border, không shadow. Tile là raw content.

## Similar Brands

- **Pentagram** — Cách tiếp cận portfolio-as-website không có chrome trang trí — project tile đa dạng được trình bày trong grid dày đặc với xử lý type tối thiểu, để work mang trọng lượng thị giác.
- **Bruce Mau Design** — Site studio hoạt động như catalog curatorial — chữ đen trên trắng, grid đóng gói chặt, không brand-color noise, work tự nói lên điều đó.
- **Wieden+ Kennedy** — Cảm giác editorial-portfolio với sự kiềm chế typographic nghiêm ngặt và grid các campaign artifact đa dạng về thị giác được trình bày trong khung trung tính.
- **M/M (Paris)** — Site studio thiết kế tự xem mình như một art object — chrome đơn sắc, độ chính xác typographic và project tile mang tính biểu cảm riêng lẻ trong một container cứng nhắc.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-gallery-white: #ffffff;
  --color-fog-gray: #b0b0b0;
  --color-graphite: #666666;
  --color-gallery-black: #000000;

  /* Typography — Font Families */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 15px;
  --leading-caption: 1.4;
  --text-body-sm: 16px;
  --leading-body-sm: 1.4;
  --text-body: 25px;
  --leading-body: 1.3;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-35: 35px;

  /* Layout */
  --page-max-width: 1400px;
  --section-gap: 67-122px;
  --card-padding: 0px;
  --element-gap: 2-10px;

  /* Named Radii */
  --radius-all: 0px;
  --radius-nav: 0px;
  --radius-tiles: 0px;

  /* Surfaces */
  --surface-gallery-white: #ffffff;
  --surface-fog-gray: #b0b0b0;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-gallery-white: #ffffff;
  --color-fog-gray: #b0b0b0;
  --color-graphite: #666666;
  --color-gallery-black: #000000;

  /* Typography */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 15px;
  --leading-caption: 1.4;
  --text-body-sm: 16px;
  --leading-body-sm: 1.4;
  --text-body: 25px;
  --leading-body: 1.3;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-35: 35px;
}
```