# Clase bcn

> Clase bcn — Style Reference

## Prompt Content

```
# Clase bcn — Style Reference
> editorial gallery on white wall

**Theme:** light

Clase bcn là một editorial gallery trên tường trắng: một branding agency có portfolio đọc như catalogue bảo tàng. Giao diện gần như vô hình — text, đường kẻ mảnh (hairline dividers), và ảnh dự án full-bleed làm tất cả công việc. Một sans-serif duy nhất (Suisse Int'l) ở một weight (400) mang mọi element, từ navigation labels đến oversized project titles. Whitespace rộng rãi và có cấu trúc: project cards trải dài toàn bộ viewport với title và subtitle đặt chồng trực tiếp lên ảnh. Tương tác duy nhất là text links với mũi tên chỉ dẫn; không có buttons, không có fills, không có shadows, không có decorative UI chrome. Màu sắc xuất hiện dưới dạng content — các case study dự án riêng lẻ mang bảng màu riêng làm background fills — trong khi chrome giữ nguyên achromatic và yên tĩnh.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surface base, text trên dark cards |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, hairline borders, nav labels — điểm neo cấu trúc của mọi element |
| Carbon | `#0a0a0a` | `--color-carbon` | Secondary text và các bề mặt tối nơi pure black đọc quá gắt |
| Concrete | `#939393` | `--color-concrete` | Navigation labels mờ, secondary link text, inactive nav state |
| Ash | `#aaaaaa` | `--color-ash` | Tertiary link borders và annotation text phụ |
| Plaster | `#e8e8e8` | `--color-plaster` | Phân chia bề mặt tinh tế, card backgrounds xen kẽ |
| Sumi | `#0a0000` | `--color-sumi` | Project card background gần đen — đọc như neutral sâu nhất |
| Slate Night | `#262a36` | `--color-slate-night` | Project card background — hơi lạnh tối, content-driven không phải UI |
| Terracotta Blush | `#efccbe` | `--color-terracotta-blush` | Project card background — content fill ấm áp, không phải UI accent |
| Verdant | `#43d491` | `--color-verdant` | Project card background — content fill sống động, không phải UI accent |

## Tokens — Typography

### SuisseIntl-Regular — SuisseIntl-Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-suisseintl-regular`
- **Weights:** 400
- **Sizes:** 24px, 28px, 45px
- **Line height:** 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44
- **Vai trò:** SuisseIntl-Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Suisse Int'l — Một typeface duy nhất ở một weight duy nhất mang toàn bộ giao diện — navigation, body, và display. Việc từ chối dùng bold hoặc italic weight buộc hierarchy phải dựa vào size, line-height, và whitespace. Các line-height biến thiên (1.11 cho display stacks dày đặc, 1.79–2.44 cho body) cho thấy một weight này được kéo dãn qua các mật độ rất khác nhau. · `--font-suisse-intl`
- **Thay thế:** Inter, Söhne, Neue Haas Grotesk, Helvetica Now
- **Weights:** 400
- **Sizes:** 
- **Line height:** 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44
- **Vai trò:** Một typeface duy nhất ở một weight duy nhất mang toàn bộ giao diện — navigation, body, và display. Việc từ chối dùng bold hoặc italic weight buộc hierarchy phải dựa vào size, line-height, và whitespace. Các line-height biến thiên (1.11 cho display stacks dày đặc, 1.79–2.44 cho body) cho thấy một weight này được kéo dãn qua các mật độ rất khác nhau.

### Type Scale

| Vai trò | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 24px | 1.17 | — | `--text-caption` |
| subheading | 28px | 1.21 | — | `--text-subheading` |
| heading | 45px | 1.11 | — | `--text-heading` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 20 | 20px | `--spacing-20` |
| 25 | 25px | `--spacing-25` |
| 100 | 100px | `--spacing-100` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 0px |
| images | 0px |
| buttons | 0px |

### Layout

- **Section gap:** 100px
- **Card padding:** 20px
- **Element gap:** 20px

## Components

### Top Navigation Bar
**Vai trò:** Minimal text-only site header

Nền trong suốt đặt trực tiếp trên page canvas. Không logo mark, không fill, không border-bottom. Bên trái: năm text labels (Cl, Projects, Studio, Contact, Tips) cách nhau ~20px gaps, 24px Suisse Int'l, #000000 active và #939393 inactive. Bên phải: language selector ('English') cùng treatment. Không sticky behavior, không shadow, không padding ngoài khoảng thở dọc.

### Statement Headline
**Vai trò:** Opening page declaration

Một khối body-length text duy nhất đặt ở type size lớn nhất (45px), line-height 1.11, màu #000000, căn trái. Không label riêng, không eyebrow, không CTA bên dưới — câu statement CHÍNH LÀ hero. Chiếm khoảng một phần tư phía trên trang với margin rộng bên dưới trước project card đầu tiên.

### Full-Bleed Project Card
**Vai trò:** Portfolio case study entry

Mỗi project trải dài toàn bộ viewport width với zero border-radius. Background fill (theo project: #43d491, #0a0000, #efccbe, #262a36, hoặc ảnh) phủ kín card. Overlay text nằm ở góc trên bên trái với 20px padding từ mọi cạnh: project name ở 28px line-height 1.21 #000000, subtitle ở 24px line-height 1.17 #000000, sau đó link 'See the case →'. Không hover state, không shadow, không border — cạnh card được xác định thuần túy bởi nơi card tiếp theo bắt đầu.

### Photographic Project Card
**Vai trò:** Image-led portfolio entry

Cùng structural treatment với colored Project Card nhưng background là ảnh full-bleed. Text overlay dùng cùng 20px padding, 28px title, 24px subtitle, và text link. Typography giữ #000000 trên ảnh sáng; text trắng hoặc gần đen trên ảnh tối. Không gradient overlays hay scrims — readability được kỳ vọng từ việc chọn ảnh.

### Text Link with Arrow
**Vai trò:** Interactive element duy nhất trong hệ thống

Plain text label theo sau bởi glyph mũi tên phải (→). 24px Suisse Int'l weight 400, màu #000000. Không underline, không button fill, không border, không padding. Khoảng cách giữa label và arrow sát nhau. Đây là pattern tương tác phổ quát — nó thay thế mọi conventional button trên toàn site.

### Footer
**Vai trò:** Minimal page closer

Cùng 20px horizontal padding như project cards. Chứa text links và copyright ở 24px #000000. Không social icons, không newsletter form, không decorative elements. Footer có nhiệm vụ yên tĩnh và vô hình cho đến khi bạn scroll đến đó.

## Do's and Don'ts

### Do
- Dùng Suisse Int'l (hoặc neo-grotesque substitute như Inter) ở weight 400 cho mọi element — không bold, không italic, không second family
- Để project imagery và project color fills mang toàn bộ sự đa dạng thị giác; giữ mọi UI chrome ở #000000 và #ffffff
- Dùng 20px padding nhất quán cho mọi text-block insets (navigation, card text, footer)
- Phân cách projects bằng 100px vertical breathing room — để mỗi card tồn tại trong sự tĩnh lặng thị giác riêng
- Đánh dấu mọi tương tác là plain text link với mũi tên →, không bao giờ là filled hoặc outlined button
- Scale hierarchy qua font size và line-height — 24px cho body, 28px cho subtitles, 45px cho display
- Giữ border-radius ở 0 trên mọi element — góc sắc, trang là một grid

### Don't
- Đừng thêm buttons, pills, chips, hoặc bất kỳ filled interactive component nào — hệ thống này không có buttons
- Đừng thêm shadows, gradients, hoặc border effects vào cards hay images — surface depth đến từ color contrast
- Đừng dùng bold hoặc semibold weights — weight 400 là giọng nói duy nhất; hierarchy chỉ dựa trên size
- Đừng dùng #43d491, #efccbe, hoặc #262a36 làm UI accents — chúng chỉ thuộc về project card backgrounds
- Đừng thêm logo mark, wordmark treatment, hoặc branded icon — chữ 'Cl' trong nav là toàn bộ identity mark
- Đừng giới hạn layout trong max-width container — project cards phải là full-bleed
- Đừng thêm hover animations, transitions, hoặc micro-interactions — site đọc như tĩnh, giống catalogue in

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Page background mặc định và card base cho light projects |
| 1 | Plaster | `#e8e8e8` | Off-white tinh tế cho content sections cần tonal contrast |
| 2 | Carbon | `#0a0a0a` | Project card fill sâu nhất — white text nằm trên |

## Elevation

Hệ thống không có shadows. Depth được truyền tải hoàn toàn qua color contrast giữa các surface fill liền kề (white canvas → photographic card → colored card → dark card) và qua vertical whitespace rộng giữa các section. Border đen 1px là structural device mạnh nhất được dùng, và thậm chí nó cũng hiếm.

## Imagery

Photography là full-bleed và mang tính kiến trúc — gallery interiors, product shots trên nền trung tính, campaign artwork. Images có raw edges không rounded corners, không shadows, không masks. Treatment mang tính tài liệu, không cách điệu: subjects (không gian bảo tàng, đồ nội thất, phòng hòa nhạc) được trình bày ở aspect ratio tự nhiên, chỉ bị crop bởi viewport. Không có người, không lifestyle scenes, không stock-style compositions. Illustration vắng mặt; graphic element duy nhất là bản phác thảo ghế Kave Home, là hand-drawn line work trên nền trắng — nhất quán với ngôn ngữ editorial-print. Icons vắng mặt; navigation là text-only.

## Layout

Full-bleed layout không max-width constraint. Trang là một vertical stack các full-viewport-width project cards được phân cách bởi whitespace, có navigation text-only tối giản và một oversized statement headline duy nhất ở phía trước. Top nav là một horizontal row đơn: năm links căn trái, một language label căn phải. Statement headline nằm ở đầu content area, căn trái, chiếm khoảng 15% chiều cao trang. Bên dưới, project cards xếp chồng dọc — mỗi card lấp đầy viewport width, chứa title/subtitle/link ở góc trên bên trái với 20px inset, và chảy trực tiếp vào card tiếp theo không gap hay divider. Không có sidebar, không multi-column grids, không card-of-cards arrangements. Nhịp điệu là: statement → project → project → project → footer, với mỗi project có trọng lượng thị giác ngang nhau.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000
- background: #ffffff
- border: #000000
- muted text: #939393
- project card surface: theo project (không có UI accent cố định)
- 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 filled.

2. **Full-Bleed Project Card (Photographic)** — 100vw width, viewport-tall, không border-radius. Background là ảnh full-bleed. Top-left inset 20px chứa: project name ở 28px line-height 1.21 #000000, subtitle ở 24px line-height 1.17 #000000, sau đó link 'See the case →' ở 24px #000000. Không overlay, không scrim, không border.

3. **Full-Bleed Project Card (Color Fill)** — 100vw width, ~60vh tall, không border-radius. Background fill là một solid color duy nhất (ví dụ #43d491, #efccbe, #262a36, hoặc #0a0000). Cùng 20px top-left text inset như photographic cards. Text color điều chỉnh: #000000 trên light fills, #ffffff trên dark fills.

4. **Text Link with Arrow** — 24px Suisse Int'l weight 400, #000000, theo sau bởi glyph mũi tên → cùng size. Không underline, không button background, không border, không padding. Arrow có ~4px space giữa nó và label text. Đây là interaction component duy nhất của hệ thống.

5. **Top Navigation** — Hàng trong suốt trên #ffffff, không border-bottom, không background fill. Nhóm trái: 'Cl · Projects · Studio · Contact · Tips' ở 24px #000000 cách nhau ~20px gaps, với 'Cl' là active/brand label. Nhóm phải: 'English' ở 24px #939393. Không logo, không icons, không sticky behavior.

## Similar Brands

- **Pentagram** — Cùng ngôn ngữ editorial-portfolio — ảnh dự án full-bleed, navigation text-only tối giản, không buttons hay decorative UI chrome
- **Manual (manualcreative.com)** — Sans-serif một weight ở display sizes lớn, project cards là full-viewport images với text overlay, zero interaction chrome
- **Hasselblad Foundation** — Sự kiềm chế của catalogue bảo tàng — whitespace rộng, một typeface, photography là content chính, text links với mũi tên là affordance duy nhất
- **Studio Dumbar** — Kỷ luật portfolio của Dutch-design agency: UI đơn sắc, project case studies là full-bleed images, nav tối giản, không decorative elements

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-carbon: #0a0a0a;
  --color-concrete: #939393;
  --color-ash: #aaaaaa;
  --color-plaster: #e8e8e8;
  --color-sumi: #0a0000;
  --color-slate-night: #262a36;
  --color-terracotta-blush: #efccbe;
  --color-verdant: #43d491;

  /* Typography — Font Families */
  --font-suisseintl-regular: 'SuisseIntl-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 24px;
  --leading-caption: 1.17;
  --text-subheading: 28px;
  --leading-subheading: 1.21;
  --text-heading: 45px;
  --leading-heading: 1.11;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-20: 20px;
  --spacing-25: 25px;
  --spacing-100: 100px;

  /* Layout */
  --section-gap: 100px;
  --card-padding: 20px;
  --element-gap: 20px;

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

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-plaster: #e8e8e8;
  --surface-carbon: #0a0a0a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-carbon: #0a0a0a;
  --color-concrete: #939393;
  --color-ash: #aaaaaa;
  --color-plaster: #e8e8e8;
  --color-sumi: #0a0000;
  --color-slate-night: #262a36;
  --color-terracotta-blush: #efccbe;
  --color-verdant: #43d491;

  /* Typography */
  --font-suisseintl-regular: 'SuisseIntl-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 24px;
  --leading-caption: 1.17;
  --text-subheading: 28px;
  --leading-subheading: 1.21;
  --text-heading: 45px;
  --leading-heading: 1.11;

  /* Spacing */
  --spacing-20: 20px;
  --spacing-25: 25px;
  --spacing-100: 100px;
}
```