# BUTT STUDIO

> # BUTT STUDIO — Style Reference

## Prompt Content

```
# BUTT STUDIO — Style Reference
> gallery wall với một serif wordmark khổng lồ

**Theme:** light

BUTT Studio là một portfolio mang phong cách editorial, nơi chữ được xem như kiến trúc: một wordmark Caslon khổng lồ trải dài từ mép này sang mép kia ở đầu trang, bị cắt ngang bởi một hình minh họa hữu cơ đan xuyên qua các ký tự. Bên dưới hero, hệ thống thu gọn thành một ledger ba cột mang phong cách clinical với thông tin liên hệ, khách hàng và tính năng bằng sans-serif nhẹ nhàng, sau đó mở ra thành grid dự án hai cột rộng rãi. Màu sắc gần như vắng bóng hoàn toàn — mực đen mờ trên nền giấy xám ấm, với một badge chàm đậm duy nhất làm điểm nhấn màu sắc duy nhất. Cảm giác như một tạp chí in bỗng nhiên sống động: serif display đầy tự tin, sans body tiện dụng, không gradient, không chrome bo tròn, không bóng đổ trang trí.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền, button outlines, structural strokes — màu duy nhất mang thông tin |
| Paper | `#ffffff` | `--color-paper` | Bề mặt card, thumbnail covers, văn bản đảo màu trên nền tối |
| Carbon | `#131313` | `--color-carbon` | Nền tile dự án tối, bề mặt gần đen cho video panels |
| Bone Gray | `#e0e0e0` | `--color-bone-gray` | Canvas trang, neutral button fills — nền xám ấm mà toàn bộ bố cục nằm trên đó |
| Studio Indigo | `#31338e` | `--color-studio-indigo` | Điểm nhấn màu duy nhất — STUDIO pill badge, và bất kỳ điểm nhấn thương hiệu đậm nào. Màu bão hòa duy nhất trong hệ thống |

## Tokens — Typography

### helvetica — Mọi thành phần utility, body, danh sách, button và link trên site. Chỉ dùng một weight — không bold, không medium. Quyết định dùng Helvetica weight 400 ở 20px cho body (không phải 16px) là có chủ đích: văn bản phải có cảm giác như ấn phẩm in, không phải UI. Letter-spacing chặt hơn ở kích thước lớn (-0.03em) giúp 40px không bị thoáng. · `--font-helvetica`
- **Thay thế:** Helvetica Neue, Inter, hoặc Arial làm system fallback
- **Weights:** 400
- **Sizes:** 20px body, 40px subhead
- **Line height:** 1.20
- **Letter spacing:** -0.03em ở 20px, -0.02em ở 40px
- **Role:** Mọi thành phần utility, body, danh sách, button và link trên site. Chỉ dùng một weight — không bold, không medium. Quyết định dùng Helvetica weight 400 ở 20px cho body (không phải 16px) là có chủ đích: văn bản phải có cảm giác như ấn phẩm in, không phải UI. Letter-spacing chặt hơn ở kích thước lớn (-0.03em) giúp 40px không bị thoáng.

### Caslon — Hero wordmark và mọi serif accent. Một weight duy nhất của custom display serif — được chọn vì các nét tương phản cao và ball terminals tạo cảm giác như chữ in editorial, không phải web type. Font này CHÍNH LÀ thương hiệu; mọi thứ khác chỉ là scaffolding. · `--font-caslon`
- **Thay thế:** Playfair Display, Cormorant Garamond, hoặc bất kỳ didone/transitional serif tương phản cao nào
- **Weights:** 400
- **Sizes:** 42px display, phóng to để lấp đầy viewport ở cấp wordmark
- **Line height:** 1.00
- **Letter spacing:** -0.02em ở kích thước display, thu hẹp gần như bằng 0 ở body
- **Role:** Hero wordmark và mọi serif accent. Một weight duy nhất của custom display serif — được chọn vì các nét tương phản cao và ball terminals tạo cảm giác như chữ in editorial, không phải web type. Font này CHÍNH LÀ thương hiệu; mọi thứ khác chỉ là scaffolding.

### Sometimes Times — Sometimes Times — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-sometimes-times`
- **Weights:** 400
- **Sizes:** 20px
- **Line height:** 1.2
- **Letter spacing:** -0.02
- **Role:** Sometimes Times — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 20px | 1.2 | -0.6px | `--text-body` |
| heading | 42px | 1 | -0.84px | `--text-heading` |
| display | 200px | 1 | -4px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 70 | 70px | `--spacing-70` |
| 180 | 180px | `--spacing-180` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 0px (sắc cạnh, như giấy in) |
| badges | 50px-68px (pill bo tròn, gần như stadium) |
| buttons | 50px (hình pill) |

### Layout

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

## Components

### Wordmark Hero
**Role:** Khối nhận diện của site

Caslon display full-bleed được đặt quá khổ (khoảng 200-280px) để một từ duy nhất lấp đầy chiều rộng viewport. Letter-spacing chặt (-0.02em đến -0.04em) để các nét gần như chạm nhau. Một hình minh họa tương tác có thể đan ngang qua các ký tự, phá vỡ baseline — đây là signature move.

### STUDIO Pill Badge
**Role:** Con dấu thương hiệu chồng lên wordmark

Capsule border-radius 50-68px. Fill #31338 (Studio Indigo). Text Helvetica 20px, trắng, weight 400, letter-spacing -0.02em. Nằm ở góc dưới bên trái của ký tự đầu tiên, chồng một phần lên nó. UI element có màu sắc duy nhất trên site.

### Three-Column Info Ledger
**Role:** Navigation chính và metadata block bên dưới hero

Ba cột bằng nhau chỉ được phân cách bằng whitespace, không có divider. Cột trái: tên liên hệ + email + social handle bằng Helvetica 20px đen. Cột giữa: danh sách 'Selected Clients' (adidas, Boiler Room, Chloé, Google, Instagram, Nike, Warner Records, Sony Music). Cột phải: danh sách 'Features' với tên ấn phẩm và năm. Tất cả văn bản đen, không link nào được style khác biệt, tất cả weight 400.

### Project Tile (Light)
**Role:** Mục dự án tiêu chuẩn với video thumbnail

Grid item hai cột. Thumbnail là video player tỷ lệ 16:9 (được tint màu, thường là gradient hồng/magenta hoặc xanh lam đằng sau các đối tượng 3D dạng kính). Bên dưới: tên dự án bằng Caslon 42px, đen, tiếp theo là mô tả bằng Helvetica 20px. Tùy chọn button 'Download' hình pill 50px trong #e0e0e0 với chữ đen.

### Project Tile (Dark)
**Role:** Mục dự án đảo màu để tạo nhịp điệu thị giác

Cùng kích thước với light tile nhưng nửa bên phải là panel carbon-đen #131313 với các indicator tiến trình trắng tối giản (bốn gạch ngang trắng ngắn) ở phía dưới — mô phỏng scrubber của video player. Dùng để xen kẽ với light tiles.

### Download Button
**Role:** Hành động pill trung tính

Pill border-radius 50px. Fill #e0e0e0 (Bone Gray). Padding 5px trên/dưới, 20px trái/phải. Text Helvetica 20px đen, weight 400, letter-spacing -0.02em. Không border, không shadow. Nằm inline với tiêu đề dự án.

### Video Thumbnail
**Role:** Bản xem trước có thể click cho media dự án

Hình chữ nhật full-bleed tỷ lệ 16:9, không border, không radius. Icon play hình tam giác trắng ở giữa (không có nền). Đằng sau icon: 3D render hoặc animation frame đầy màu sắc — đây là những nơi duy nhất màu bão hòa xuất hiện, và chúng là content, không phải UI.

### Page Divider
**Role:** Ngắt quãng thị giác giữa các mục dự án

Đường kẻ ngang 1px solid #000000 trải dài toàn bộ chiều rộng nội dung, với 180px không gian dọc ở mỗi bên. Hoạt động như section break trong catalog in.

## Do's and Don'ts

### Do
- Đặt hero wordmark quá khổ bằng Caslon weight 400, tracking chặt (-0.02em), để một từ lấp đầy toàn bộ chiều rộng viewport
- Dùng #e0e0e0 làm canvas trang — không bao giờ dùng trắng tinh ở cấp trang; chỉ dành #ffffff cho bề mặt card
- Dùng Studio Indigo #31338 chính xác một lần trên mỗi surface làm điểm nhấn màu duy nhất
- Đặt body text ở 20px Helvetica weight 400 với letter-spacing -0.03em — lớn hơn và chặt hơn web convention
- Cho button và STUDIO badge radius pill 50px — đây là các element bo tròn duy nhất trong hệ thống
- Phân cách các project tiles bằng hairline đen 1px và 180px không gian dọc để tạo cảm giác như catalog in
- Để các hình minh họa tương tác đâm xuyên hoặc đan qua các ký tự serif trong hero

### Don't
- Không thêm bất kỳ màu nào khác ngoài bốn màu trung tính và Studio Indigo — không gradient, không tint, không hover-state color shifts
- Không dùng shadow, glow, hoặc elevation — thiết kế phẳng như in ấn, không có chiều sâu giả tạo
- Không thêm border-radius vào cards, tiles, hoặc thumbnails — chúng phải sắc cạnh như giấy cắt
- Không đặt body text dưới 20px hoặc thêm bold/medium weights cho Helvetica — weight 400 là weight duy nhất tồn tại
- Không dùng Caslon cho bất cứ thứ gì dưới hero — chỉ dành cho wordmark và tiêu đề dự án để giữ sức nặng của nó
- Không thêm underline, màu sắc, hoặc icon cho link trong danh sách khách hàng/tính năng — chúng được đọc như plain text có chủ đích
- Không căn giữa body text hoặc list items — các cột ledger được căn trái như trang liên hệ

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Bone Gray Canvas | `#e0e0e0` | Nền trang — nền giấy trắng ấm mà toàn bộ site nằm trên đó |
| 2 | Paper Card | `#ffffff` | Bề mặt card trắng cho chi tiết dự án, inline blocks |
| 3 | Carbon Plate | `#131313` | Video panels tối và feature blocks cho các phần tương phản |
| 4 | Studio Indigo Plate | `#31338` | Badge chàm và bất kỳ accent wash nào |

## Elevation

- **Page Divider:** `1px solid #000000 — đường cấu trúc duy nhất trong hệ thống`

## Imagery

Hình ảnh tập trung ở hero — một hình minh họa tương tác full-width (dây leo cà chua và chùm quả) đan xuyên qua các ký tự serif, phá vỡ wordmark. Bên dưới fold, project thumbnails là video stills tỷ lệ 16:9: các 3D render và motion frames bão hòa, high-key với tông hồng, magenta, xanh lam và đỏ ấm. Đây là content (bản thân tác phẩm), không phải UI decoration. Không stock photography, không lifestyle imagery, không icon dùng làm minh họa.

## Layout

Hero full-bleed, không có max-width — wordmark co giãn để lấp đầy viewport. Bên dưới hero, nội dung nằm trong một cột rộng không bị ràng buộc với khoảng trống trái/phải rộng rãi. Một ledger ba cột trải dài trang (contact / clients / features) không có divider giữa các cột. Các mục dự án được sắp xếp trong grid hai cột, xen kẽ light tiles (card trắng + video thumbnail) với dark tiles (carbon-black video panel) để tạo nhịp điệu. Khoảng cách dọc rộng rãi: 180px giữa các phần chính, 70px giữa các project cards. Navigation gần như vắng bóng — trang là một scroll duy nhất, wordmark CHÍNH LÀ navigation.

## Agent Prompt Guide

## Quick Color Reference
- background: #e0e0e0
- text: #000000
- card surface: #ffffff
- border: #000000
- accent: #31338e (Studio Indigo)
- primary action: không có màu CTA riêng biệt

## 3-5 Example Component Prompts

1. **Xây dựng three-column info ledger**: Nền trang Bone Gray #e0e0e0, ba cột bằng nhau chỉ phân cách bằng whitespace. Cột trái: tên liên hệ bằng Helvetica 20px weight 400 đen, sau đó email bên dưới. Cột giữa: heading 'Selected Clients' bằng Helvetica 20px đen, sau đó danh sách tên khách hàng mỗi dòng một tên. Cột phải: heading 'Features' bằng Helvetica 20px đen, sau đó danh sách ấn phẩm kèm năm. Không divider, không bullet, không link nào được style khác biệt.

2. **Xây dựng full-bleed wordmark hero**: Nền đen #000000 tùy chọn, nhưng wordmark Caslon (hoặc Playfair Display fallback) weight 400 ở khoảng 200px, letter-spacing -0.04em, lấp đầy toàn bộ chiều rộng viewport. Màu #000000. Đặt một pill badge Studio Indigo #31338e (border-radius 50px, padding 5px 20px, text Helvetica 20px trắng) chồng lên góc dưới bên trái của ký tự đầu tiên.

3. **Xây dựng light project tile**: Grid cell hai cột. Nửa trên: video thumbnail tỷ lệ 16:9 không border, không radius, icon play hình tam giác trắng ở giữa, đằng sau là fill kiểu 3D render bão hòa (gradient hồng/magenta). Nửa dưới: gap dọc 20px, sau đó tên dự án bằng Caslon 42px weight 400 đen, letter-spacing -0.02em, line-height 1.0. Bên dưới: gap 10px, sau đó mô tả bằng Helvetica 20px đen. Button Download hình pill 50px (fill #e0e0e0, text Helvetica 20px đen) nằm inline bên phải tiêu đề.

4. **Xây dựng dark project tile**: Cùng kích thước với light tile, nhưng nửa bên phải là panel solid #131313. Ở dưới cùng giữa của panel tối, render bốn gạch ngang trắng ngắn (mỗi gạch ~20px rộng, 2px cao, cách nhau 8px) làm video player scrubber indicator. Không UI nào khác trên panel tối.

5. **Xây dựng page divider**: Đường kẻ ngang 1px solid #000000 trải dài toàn bộ chiều rộng nội dung, với 180px không gian dọc phía trên và phía dưới. Không style nào khác — nó hoạt động như section break in.

## Similar Brands

- **Locomotive Mtl** — Cùng hero chữ full-bleed với một serif wordmark quá khổ chiếm ưu thế viewport, tiếp theo là grid dự án hai cột hạn chế
- **Studio Brasch** — Ngôn ngữ portfolio editorial với display type khổng lồ, không UI chrome, và grid case-study hai cột đơn sắc
- **Pentagram partner sites** — Cách xử lý portfolio như tạp chí in: serif display, sans body, hairline dividers, không decorative elevation
- **Resn** — Wordmark nhận diện quá khổ đậm nét trên một màu nhấn duy nhất, với grid dự án đơn sắc phẳng bên dưới

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper: #ffffff;
  --color-carbon: #131313;
  --color-bone-gray: #e0e0e0;
  --color-studio-indigo: #31338e;

  /* Typography — Font Families */
  --font-helvetica: 'helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-caslon: 'Caslon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sometimes-times: 'Sometimes Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 20px;
  --leading-body: 1.2;
  --tracking-body: -0.6px;
  --text-heading: 42px;
  --leading-heading: 1;
  --tracking-heading: -0.84px;
  --text-display: 200px;
  --leading-display: 1;
  --tracking-display: -4px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-70: 70px;
  --spacing-180: 180px;

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

  /* Border Radius */
  --radius-lg: 10px;
  --radius-full: 50px;
  --radius-full-2: 68px;

  /* Named Radii */
  --radius-cards: 0px (sắc cạnh, như giấy in);
  --radius-badges: 50px-68px (pill bo tròn, gần như stadium);
  --radius-buttons: 50px (hình pill);

  /* Surfaces */
  --surface-bone-gray-canvas: #e0e0e0;
  --surface-paper-card: #ffffff;
  --surface-carbon-plate: #131313;
  --surface-studio-indigo-plate: #31338;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper: #ffffff;
  --color-carbon: #131313;
  --color-bone-gray: #e0e0e0;
  --color-studio-indigo: #31338e;

  /* Typography */
  --font-helvetica: 'helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-caslon: 'Caslon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sometimes-times: 'Sometimes Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 20px;
  --leading-body: 1.2;
  --tracking-body: -0.6px;
  --text-heading: 42px;
  --leading-heading: 1;
  --tracking-heading: -0.84px;
  --text-display: 200px;
  --leading-display: 1;
  --tracking-display: -4px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-70: 70px;
  --spacing-180: 180px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-full: 50px;
  --radius-full-2: 68px;
}
```