# Vucko

> Vucko — Style Reference

## Prompt Content

```
# Vucko — Style Reference
> Type cỡ lớn trên nền gallery trắng — một cuốn sách mẫu chữ (type-specimen book) nơi wordmark chính là căn phòng.

**Theme:** light

Vucko hoạt động như một editorial canvas đơn sắc, nơi type chính là kiến trúc. Bề mặt trắng tinh gặp mực đen tuyền, với một sắc xám nhạt duy nhất dành cho secondary text và ghost-list items trong service lists. Custom typeface Suisse ở kích thước display — lên đến 211px — tạo ra sự hiện diện hoành tráng, gần như kiến trúc, nơi wordmark một mình có thể lấp đầy viewport. Màu sắc (chromatic color) hoàn toàn vắng mặt trong bản thân hệ thống, chỉ xuất hiện bên trong nội dung showcase dự án (gradient rực rỡ, thẻ vàng) — những điểm nhấn xuyên suốt trang vốn tối giản khác. Giao diện cực kỳ mảnh: border 1px mảnh như sợi tóc, không shadow, khoảng cách section rộng rãi 58px, và các nav element hình pill. Mọi màn hình nên đọc như một trang trong sách nghệ thuật cao cấp — kiềm chế, tự tin, và chống trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink | `#000000` | `--color-ink` | Primary text, tất cả border, khối nền tối, và hero wordmark — xương sống cấu trúc của mọi màn hình |
| Paper | `#ffffff` | `--color-paper` | Border dạng hairline, divider, input outline, và cạnh card trên nền sáng. Không dùng làm màu CTA chính |
| Faint Ash | `#eeeeee` | `--color-faint-ash` | Màu nền nhẹ cho secondary cards hoặc khối nội dung giảm nhấn, hầu như không phân biệt được với Paper |
| Steel | `#888a8b` | `--color-steel` | Secondary text mờ và ghost-list items trong service lists — màu chữ duy nhất không phải đen, dùng để tạo phân cấp tông màu (tonal hierarchy) mà không cần thêm sắc độ |
| Charcoal | `#222222` | `--color-charcoal` | Bề mặt tối thay thế cho nav hoặc panel backgrounds — màu tối mềm hơn Ink khi đen tuyền quá mạnh |

## Tokens — Typography

### Suisse Int'l — Typeface duy nhất trong toàn bộ hệ thống. Weight 700 đảm nhận tất cả vai trò display và heading lên đến 211px cho hero wordmark; weight 400 xử lý body và link text. Wordmark 211px weight 700 với tracking -0.057em là chữ ký — nó biến tên thương hiệu thành một tác phẩm sắp đặt quy mô phòng. Weight 500 xuất hiện trong nav và transitional text. Negative tracking mạnh ở kích thước display (-0.057em ở 211px, -0.020em ở 55px) siết chặt hình học Swiss grotesque thành một khối đặc hơn, nguyên khối hơn — type được thiết kế để đọc như kiến trúc, không phải như chữ. · `--font-suisse-intl`
- **Thay thế:** Inter, Neue Haas Grotesk, hoặc General Sans — bất kỳ neo-grotesque nào có x-height và geometric terminals tương tự
- **Weights:** 400, 500, 700
- **Kích thước:** 17, 18, 19, 43, 55, 120, 211
- **Line height:** 0.70, 1.00, 1.05, 1.13, 1.17, 1.21, 1.50
- **Letter spacing:** -0.057em ở 211px, -0.020em ở 55px, -0.010em ở 43px; 0 (bình thường) ở body 17-19px
- **OpenType features:** `"kern" 0`
- **Vai trò:** Typeface duy nhất trong toàn bộ hệ thống. Weight 700 đảm nhận tất cả vai trò display và heading lên đến 211px cho hero wordmark; weight 400 xử lý body và link text. Wordmark 211px weight 700 với tracking -0.057em là chữ ký — nó biến tên thương hiệu thành một tác phẩm sắp đặt quy mô phòng. Weight 500 xuất hiện trong nav và transitional text. Negative tracking mạnh ở kích thước display (-0.057em ở 211px, -0.020em ở 55px) siết chặt hình học Swiss grotesque thành một khối đặc hơn, nguyên khối hơn — type được thiết kế để đọc như kiến trúc, không phải như chữ.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body-sm | 17px | 1.5 | — | `--text-body-sm` |
| subheading | 19px | 1.5 | — | `--text-subheading` |
| heading | 43px | 1.21 | -0.43px | `--text-heading` |
| heading-lg | 55px | 1.13 | -1.1px | `--text-heading-lg` |
| display | 120px | 1.05 | -6.84px | `--text-display` |
| display-xl | 211px | 1 | -12.03px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 24 | 24px | `--spacing-24` |
| 56 | 56px | `--spacing-56` |
| 96 | 96px | `--spacing-96` |
| 144 | 144px | `--spacing-144` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 9.6px |
| small | 4.8px |
| medium | 7.2px |
| buttons | 9999px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 58px
- **Card padding:** 24px
- **Element gap:** 23px

## Components

### Top Navigation Bar
**Vai trò:** Navigation tối giản toàn trang

Nền trắng (Paper), không border, không shadow. Bên trái: wordmark 'VUCKO' ở 17px Suisse weight 700, màu Ink. Giữa: text địa điểm/thời gian ('Toronto, Canada 20:34 pm') ở 17px Suisse weight 400, màu Ink. Bên phải: nav links ('Projects, Approach, About, Contact') ở 17px Suisse weight 400, màu Ink, theo sau là một chấm tròn Ink nhỏ 8px với border-radius 9999px. Padding ngang 56px, padding dọc khoảng 19px. Chấm tròn đóng vai trò như một indicator trạng thái nền — không có tính tương tác.

### Hero Display Wordmark
**Vai trò:** Tuyên ngôn thương hiệu chính trên landing page

Wordmark 'VUCKO™' ở 211px Suisse weight 700, màu Ink, letter-spacing -12.03px, line-height 1.0. Nằm trực tiếp trên canvas Paper với padding trái/phải 56px. Ký tự ™ superscript được đặt ở baseline bên phải của chữ O cuối cùng. Wordmark được thiết kế để tràn hoặc lấp đầy chiều rộng viewport — nó là kiến trúc, không phải chữ. Không background, không border.

### Floating Showcase Card
**Vai trò:** Lớp phủ dự án nổi bật trên hero

Một card nhỏ được đặt absolute ở góc trên bên phải của hero, border-radius ~9.6px, với background màu sắc rực rỡ (nội dung dự án — màu vàng trong trường hợp hiện tại). Chứa tiêu đề dự án đậm màu đen ('2023 Wrapped') ở ~43px Suisse weight 700 và một mô tả nhỏ bên dưới ở 17px. Bản thân card là nội dung, không phải component hệ thống, nhưng container tuân theo token card radius 9.6px và internal padding 24px.

### Tagline Section
**Vai trò:** Tuyên bố thương hiệu bên dưới hero

Cột hẹp canh trái trên canvas Paper. Headline ở 19px Suisse weight 400, màu Ink, line-height 1.5, max-width ~480px. Bên dưới headline, một text link có gạch chân 'Learn more about our approach' ở 17px Suisse weight 400, màu Ink, với gạch chân 1px Ink. Ở phía xa bên phải của cùng hàng, một indicator '(Scroll)' ở 17px Suisse weight 400, màu Ink. Margin trên 58px từ hero wordmark.

### Project Showcase Card (Full-bleed)
**Vai trò:** Trình bày tác phẩm khách hàng trong portfolio

Card full-bleed với border-radius 9.6px, lấp đầy chiều rộng container trừ padding ngang 56px. Background là một gradient rực rỡ (nội dung dự án — xanh dương sang tím trong trường hợp hiện tại). Display text canh giữa ở 55px Suisse weight 700, màu Paper (trắng), letter-spacing -1.1px, với các yếu tố trang trí vui tươi. Một pill button (border-radius 9999px, nền trắng, chữ đen ở 17px) được đặt chồng lên gần cuối, được gắn nhãn với tên dự án. Internal padding card khoảng 56px.

### Service Block (Media + Text)
**Vai trò:** Mô tả dịch vụ riêng lẻ trong phần services

Split layout. Bên trái: một khối vuông màu đen (Ink), rộng khoảng 200px, đóng vai trò là placeholder video/hình ảnh. Bên dưới khối, body text ở 17px Suisse weight 400, màu Ink, mô tả dịch vụ, max-width ~200px. Bên phải chứa Service List Display. Khoảng cách 23px giữa media và text.

### Service List Display
**Vai trò:** Heading danh mục dịch vụ tỷ lệ lớn

Ba display headings xếp chồng ở 55px Suisse weight 700, mỗi heading trên một dòng riêng, canh trái. Mục đầu tiên ('IDENTITIES') màu Ink (#000000); các mục tiếp theo ('SYSTEMS', 'GUIDELINES') màu Steel (#888a8b) để tạo sự giảm nhấn thị giác thông qua chuyển đổi tông màu thay vì thay đổi kích thước hoặc weight. Letter-spacing -1.1px, line-height 1.13. Phân cấp tông màu này — không phải phân cấp kích thước — là thứ làm cho danh sách đọc như một menu thay vì một chồng headline.

### Pill Tag / Button
**Vai trò:** Nhãn dự án, indicator nav, và các interactive element hình pill

Border-radius 9999px, nền trắng (Paper), border 1px Ink tùy chọn. Text ở 17px Suisse weight 400, màu Ink. Padding khoảng 10px dọc, 15px ngang. Không shadow, không gradient. Được sử dụng cho thẻ tên dự án và các điểm đánh dấu UI nền. Hình pill là element không phải hình chữ nhật duy nhất trong hệ thống.

### Underline Text Link
**Vai trò:** Kiểu link dựa trên text chính

Text ở 17px Suisse weight 400, màu Ink, với gạch chân 1px Ink. Không background, không border, không padding ngoài line height tự nhiên của text. Đây là link và CTA tương đương của hệ thống — không có filled buttons trong giao diện. Trạng thái hover có thể chuyển gạch chân sang weight mỏng hơn hoặc loại bỏ nó.

### Scroll Indicator
**Vai trò:** Gợi ý điều hướng ở ranh giới hero

Text '(Scroll)' canh phải ở 17px Suisse weight 400, màu Ink. Hoạt động như một lời nhắc điều hướng thụ động ở cuối phần hero. Không gạch chân, không trang trí. Margin trên 58px từ tagline section.

## Do's and Don'ts

### Nên làm
- Sử dụng #000000 (Ink) cho tất cả primary text, border, và khối nền tối — nó là màu cấu trúc duy nhất trong hệ thống
- Đặt hero wordmark ở 211px Suisse weight 700 với letter-spacing -12.03px — type được thiết kế để lấp đầy căn phòng
- Áp dụng padding ngang 56px trên container chính và khoảng cách dọc 58px giữa các section chính
- Sử dụng border-radius 9999px cho tất cả element hình pill: nav dot, tags, và pill buttons
- Sử dụng phân cấp tông màu (Ink so với Steel ở #888a8b) thay vì kích thước hoặc weight để tạo nhấn mạnh secondary text
- Sử dụng border-radius 9.6px cho project cards và content containers
- Áp dụng negative letter-spacing trên tất cả kích thước display: -12.03px ở 211px, -6.84px ở 120px, -1.1px ở 55px, -0.43px ở 43px

### Không nên làm
- Không bao giờ thêm colored CTA buttons — hệ thống này chỉ sử dụng underlined text links và neutral pill elements
- Không bao giờ sử dụng drop shadows, glow effects, hoặc bất kỳ hình thức CSS elevation nào — chiều sâu đến từ khoảng trắng và độ tương phản
- Không bao giờ canh giữa body text — tất cả running text nên canh trái
- Không bao giờ sử dụng border dày hơn 1px
- Không bao giờ đưa màu sắc (chromatic colors) vào UI chrome — màu sắc chỉ thuộc về nội dung showcase dự án
- Không bao giờ sử dụng kích thước display (55px+) cho body copy hoặc secondary content — chỉ dành riêng cho headlines và service titles
- Không bao giờ phá vỡ nhịp điệu khoảng trắng — duy trì tối thiểu 58px giữa các section chính và để type làm công việc của nó

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Paper Canvas | `#ffffff` | Nền trang cơ bản — khoảng trống âm (negative space) xác định toàn bộ hệ thống |
| 1 | Faint Ash Card | `#eeeeee` | Độ nâng tinh tế cho secondary cards hoặc khối nội dung giảm nhấn |
| 2 | Charcoal Panel | `#222222` | Bề mặt tối thay thế cho nav hoặc panel backgrounds khi Ink đen tuyền quá mạnh |
| 3 | Ink Block | `#000000` | Phần tối full-bleed và khối placeholder media — bề mặt có độ tương phản tối đa |

## Elevation

Hệ thống hoàn toàn phẳng — không drop shadows, không glow effects, không z-axis elevation dưới bất kỳ hình thức nào. Chiều sâu và phân cấp đạt được hoàn toàn thông qua khoảng trắng rộng rãi (section gaps 58px, container padding 56px), tương phản tông màu (Ink vs Paper vs Steel), và tỷ lệ tuyệt đối của display type. Cards được phân biệt bằng màu nền tinh tế (#eeeeee) hoặc bằng cách đặt trên canvas trắng mà không có border nào cả. Đây là một lựa chọn editorial có chủ đích: trang nên đọc như một cuốn sách nghệ thuật in ấn, không phải giao diện phần mềm.

## Imagery

Bản thân trang web không chứa bất kỳ nhiếp ảnh, minh họa hoặc hình ảnh trang trí nào trong UI chrome. Tất cả nội dung hình ảnh nằm bên trong project showcase cards, đó là tác phẩm của khách hàng — gradient rực rỡ (xanh dương sang tím), thẻ vàng sáng với display type đậm, và khối video. Đây là các artifact portfolio, không phải hình ảnh hệ thống. Giao diện hoàn toàn là typographic: wordmark Suisse khổng lồ, body text, và border dạng hairline. Không icon, không stock photos, không minh họa. Sự phong phú về mặt thị giác của trang web hoàn toàn được tạo ra bởi tỷ lệ và weight của chính type.

## Layout

Trang xen kẽ giữa các khoảnh khắc display full-bleed và các cột hẹp canh giữa. Hero là một wordmark lấp đầy viewport không có ràng buộc trái/phải ngoài padding 56px. Service sections sử dụng split nghiêm ngặt: khối media nhỏ bên trái (200px), danh sách display khổng lồ bên phải. Project showcase cards là full-bleed trong container, lấp đầy từ mép này sang mép kia. Body text sections hẹp (max ~480px) và canh trái. Navigation là một thanh mỏng duy nhất không có sticky behavior rõ ràng. Nhịp điệu dọc rộng rãi — 58px giữa các section chính tạo cảm giác lật trang trong một cuốn sách khổ lớn. Nội dung canh trái theo mặc định; nội dung canh giữa duy nhất là display type bên trong project cards full-bleed.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #000000
- background: #ffffff
- border: #000000
- muted text: #888a8b
- subtle surface: #eeeeee
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

1. Tạo một hero section: nền trắng (#ffffff), padding ngang 56px. Display wordmark ở 211px Suisse weight 700, màu #000000, letter-spacing -12.03px, line-height 1.0. Một thẻ vàng nhỏ (~radius 9.6px, padding 24px) với tiêu đề dự án đậm màu đen ở 43px được đặt absolute ở khu vực trên bên phải của hero.

2. Tạo một project showcase card: full-bleed trong container padding 56px, border-radius 9.6px. Background là gradient xanh dương sang tím. Display text canh giữa màu trắng ở 55px Suisse weight 700 với letter-spacing -1.1px. Một pill button trắng (border-radius 9999px, padding 10px 15px, chữ đen ở 17px) được đặt chồng lên gần cuối.

3. Tạo một services section: split layout với column gap 23px. Bên trái: một khối vuông màu đen (#000000) 200px với body text bên dưới ở 17px Suisse weight 400, màu #000000. Bên phải: ba display headings xếp chồng ở 55px Suisse weight 700, cái đầu tiên màu #000000, hai cái còn lại màu #888a8b, mỗi cái trên một dòng riêng với letter-spacing -1.1px và line-height 1.13.

4. Tạo một top navigation bar: nền trắng, không border, padding ngang 56px. 'VUCKO' canh trái ở 17px Suisse weight 700. Text địa điểm/thời gian canh giữa ở 17px Suisse weight 400. Nav links canh phải ở 17px Suisse weight 400. Một chấm tròn nhỏ 8px màu đen (#000000) với border-radius 9999px ở phía xa bên phải.

Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatments đã trích xuất thay vì phát minh ra màu CTA dạng filled.

## Similar Brands

- **Manual (manualcreative.com)** — Cùng cách tiếp cận monumental-display-type với headline neo-grotesque khổng lồ và editorial canvas trắng tinh
- **Locomotive (locomotive.ca)** — Cùng sự kiềm chế: bảng màu đơn sắc, type tỷ lệ lớn, khoảng trắng rộng rãi, và không có chrome trang trí
- **Resn (resn.co.nz)** — Ngôn ngữ agency-portfolio tương tự với custom type và khoảng trắng âm (negative space) tự tin giữa các section
- **Active Theory (activetheory.net)** — Cả hai đều đặt project showcases full-bleed làm nội dung hình ảnh trong khi giữ chrome yên tĩnh và mang tính typographic
- **Instrument (instrument.com)** — Cùng cảm quan editorial-agency: custom type lớn, canvas trắng, và tác phẩm dự án là màu sắc duy nhất

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-faint-ash: #eeeeee;
  --color-steel: #888a8b;
  --color-charcoal: #222222;

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

  /* Typography — Scale */
  --text-body-sm: 17px;
  --leading-body-sm: 1.5;
  --text-subheading: 19px;
  --leading-subheading: 1.5;
  --text-heading: 43px;
  --leading-heading: 1.21;
  --tracking-heading: -0.43px;
  --text-heading-lg: 55px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -1.1px;
  --text-display: 120px;
  --leading-display: 1.05;
  --tracking-display: -6.84px;
  --text-display-xl: 211px;
  --leading-display-xl: 1;
  --tracking-display-xl: -12.03px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-24: 24px;
  --spacing-56: 56px;
  --spacing-96: 96px;
  --spacing-144: 144px;
  --spacing-192: 192px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 58px;
  --card-padding: 24px;
  --element-gap: 23px;

  /* Border Radius */
  --radius-md: 4.8px;
  --radius-lg: 7.2px;
  --radius-lg-2: 9.6px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 9.6px;
  --radius-small: 4.8px;
  --radius-medium: 7.2px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-paper-canvas: #ffffff;
  --surface-faint-ash-card: #eeeeee;
  --surface-charcoal-panel: #222222;
  --surface-ink-block: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-faint-ash: #eeeeee;
  --color-steel: #888a8b;
  --color-charcoal: #222222;

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

  /* Typography — Scale */
  --text-body-sm: 17px;
  --leading-body-sm: 1.5;
  --text-subheading: 19px;
  --leading-subheading: 1.5;
  --text-heading: 43px;
  --leading-heading: 1.21;
  --tracking-heading: -0.43px;
  --text-heading-lg: 55px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -1.1px;
  --text-display: 120px;
  --leading-display: 1.05;
  --tracking-display: -6.84px;
  --text-display-xl: 211px;
  --leading-display-xl: 1;
  --tracking-display-xl: -12.03px;

  /* Spacing */
  --spacing-24: 24px;
  --spacing-56: 56px;
  --spacing-96: 96px;
  --spacing-144: 144px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-md: 4.8px;
  --radius-lg: 7.2px;
  --radius-lg-2: 9.6px;
  --radius-full: 9999px;
}
```