# 큰그림컴퍼니

> 큰그림컴퍼니 — Style Reference

## Prompt Content

```
# 큰그림컴퍼니 — Style Reference
> Tuyên ngôn typographic trên nền bê tông. Một press kit đen-trên-trắng, nơi Helvetica cỡ lớn đảm nhiệm vai trò của nhiếp ảnh, và kết cấu duy nhất là một tờ giấy nhàu duy nhất nằm dưới body type.

**Theme:** light

Bigpicture Company là một hệ thống editorial đơn sắc, xử lý trang web như một press kit in ấn được trải trên giấy thô. Giao diện loại bỏ mọi màu sắc và hoàn toàn dựa vào mực đen, khoảng trắng, đường kẻ mảnh (hairline rules) và một kết cấu giấy nhàu duy nhất để tạo bầu không khí. Typography chính là sản phẩm: display headlines đạt tới 274px với Helvetica Neue 700 và negative tracking mạnh, biến chữ thành khối thị giác chủ đạo trên mọi màn hình. Monospace labels ([01-N INTRODUCTION], CREATIVE/AGENCY) hoạt động như caption kiểu in ấn, trong khi các biểu tượng sparkle bốn cánh là vật trang trí duy nhất giữa các section. Layout rộng rãi, mang phong cách zine — section gap 72px, horizontal padding 144–250px, và các khối ảnh full-bleed với góc bo 288px giúp trang thở như một bức tường gallery thay vì một sản phẩm phần mềm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Press Ink | `#121212` | `--color-press-ink` | Primary text, hairlines, section borders, icon strokes, footer text — sắc thái tối duy nhất mang 95% toàn bộ thông tin foreground |
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, nav pill background, heading-bordered surfaces |
| Newsprint | `#f1f1f1` | `--color-newsprint` | Surface fills nhẹ, soft borders, hairline dividers, tông màu nền cho kết cấu giấy nhàu |
| Foil Gray | `#e1e1e1` | `--color-foil-gray` | Light borders, icon stroke accents, secondary dividers |
| Mute Gray | `#c5c5c5` | `--color-mute-gray` | Tertiary text, disabled state, low-contrast surface lines |

## Tokens — Typography

### Helvetica Neue — Workhorse đa năng — body copy ở 17px/1.29, display headlines ở 75–274px với -0.04em tracking ở kích thước lớn nhất, nav labels ở 15px · `--font-helvetica-neue`
- **Thay thế:** Inter, Neue Haas Grotesk, hoặc system-ui với optical tracking chặt
- **Weights:** 400, 500, 700
- **Kích thước:** 14, 15, 16, 17, 20, 75, 274
- **Line height:** 1.00–1.60
- **Letter spacing:** -0.0400em, -0.0100em
- **Vai trò:** Workhorse đa năng — body copy ở 17px/1.29, display headlines ở 75–274px với -0.04em tracking ở kích thước lớn nhất, nav labels ở 15px

### PPSupplyMono — Meta labels và caption trong ngoặc vuông như [01-N INTRODUCTION] và section tags (ADVERTISEMENTS, CREATIVE/AGENCY, OFFLINE MARKETING) — đây là những điểm nhấn typographic duy nhất phá vỡ sự đơn điệu của Helvetica · `--font-ppsupplymono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono
- **Weights:** 400
- **Kích thước:** 13, 16, 17
- **Line height:** 1.00–2.00
- **Vai trò:** Meta labels và caption trong ngoặc vuông như [01-N INTRODUCTION] và section tags (ADVERTISEMENTS, CREATIVE/AGENCY, OFFLINE MARKETING) — đây là những điểm nhấn typographic duy nhất phá vỡ sự đơn điệu của Helvetica

### PPSupplySans — Secondary nav và footer micro-text khi cần một giọng sans khác · `--font-ppsupplysans`
- **Thay thế:** Inter, Söhne, ABC Diatype
- **Weights:** 400
- **Kích thước:** 17, 22
- **Line height:** 1.00–1.20
- **Vai trò:** Secondary nav và footer micro-text khi cần một giọng sans khác

### Rock Salt — Chữ ký viết tay hiếm hoi cho một hoặc hai từ mỗi trang (ví dụ: chú thích 'pleasure' được khoanh tròn) — dùng như một con dấu, không bao giờ dùng cho nội dung · `--font-rock-salt`
- **Thay thế:** Caveat, Permanent Marker, hoặc custom handwritten font
- **Weights:** 400
- **Kích thước:** 17
- **Line height:** 1.47
- **Letter spacing:** -0.0200em
- **Vai trò:** Chữ ký viết tay hiếm hoi cho một hoặc hai từ mỗi trang (ví dụ: chú thích 'pleasure' được khoanh tròn) — dùng như một con dấu, không bao giờ dùng cho nội dung

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 2 | — | `--text-caption` |
| body | 17px | 1.29 | — | `--text-body` |
| subheading | 20px | 1.2 | — | `--text-subheading` |
| heading-sm | 22px | 1.2 | — | `--text-heading-sm` |
| heading | 75px | 1.05 | -1.68px | `--text-heading` |
| display | 274px | 1 | -10.96px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 10 | 10px | `--spacing-10` |
| 17 | 17px | `--spacing-17` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 50 | 50px | `--spacing-50` |
| 72 | 72px | `--spacing-72` |
| 81 | 81px | `--spacing-81` |
| 144 | 144px | `--spacing-144` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 20px |
| cards | 20px |
| images | 288px |
| nav-item | 28px |
| nav-pill | 40px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 72px
- **Card padding:** 40px
- **Element gap:** 50px

## Components

### Navigation Pill
**Vai trò:** Sticky top-center nav container

Floating pill màu trắng với outer radius 40px, inner item radius 28px, border 1px solid #121212, horizontal padding 20px, vertical padding 10px. Chứa HOME (active state với subtle inset fill) + PROJECTS + CONTACT bằng Helvetica Neue 15px/500 #121212, cách nhau bởi các divider mảnh.

### Logo Wordmark
**Vai trò:** Top-left brand identifier

Ba dòng xếp chồng: 'Bigpicture Company / We share / Our pleasure' bằng Helvetica Neue 15px/500 #121212, căn trái, không có mark — chữ chính là logo.

### Display Headline
**Vai trò:** Khối typographic hero-scale

Helvetica Neue 700 ở 274px, line-height 1.0, letter-spacing -0.04em (#121212). Viết hoa toàn bộ, các dòng nhiều từ lấp đầy chiều rộng viewport — dùng cho các câu như 'PEOPLE BRAND' và 'PLEASURE'. Không gradient, không shadow, không trang trí — chỉ riêng kích thước đã là sự kiện thị giác.

### Section Heading
**Vai trò:** Editorial headline giữa trang

Helvetica Neue 700 ở 75px, line-height 1.05, letter-spacing -0.01em (#121212). Viết hoa toàn bộ, thường được theo sau bởi sparkle divider.

### Monospace Meta Tag
**Vai trò:** Label kiểu caption

PPSupplyMono 16px/400, uppercase, letter-spacing normal, #121212. Được đặt trong ngoặc vuông như [01-N INTRODUCTION]. Dùng để đánh số section và gắn thẻ danh mục (ADVERTISEMENTS / CREATIVE/AGENCY / OFFLINE MARKETING) — hoạt động như một running header trong zine in ấn.

### Body Manifesto Block
**Vai trò:** Đoạn editorial căn giữa

Helvetica Neue 400 ở 17px, line-height 1.6, max-width ~720px, căn giữa. #121212 trên nền trắng. Dùng cho mô tả công ty ở đầu trang — cảm giác kiềm chế, căn đều (justified), không drop cap, không nhấn mạnh.

### Sparkle Divider
**Vai trò:** Section separator

Biểu tượng ngôi sao/sparkle bốn cánh màu #121212, ~20px, lặp lại theo chiều ngang với khoảng cách 72px để tạo một dải thị giác giữa các section lớn. Vật trang trí duy nhất xuất hiện định kỳ trên trang.

### Rounded Image Block
**Vai trò:** Ảnh hero full-bleed

Ảnh kiến trúc/quảng cáo ngoài trời với border-radius 288px, full viewport width, không caption. Độ bo tròn cực lớn làm mềm đi hình ảnh công nghiệp vốn sắc cạnh.

### Address Block
**Vai trò:** Caption liên hệ / địa điểm

Helvetica Neue 400 ở 17px/1.2, #121212, ba dòng xếp chồng (floor/address/country) đặt chồng lên ảnh — được typeset trực tiếp lên ảnh hero, không có background plate.

### Handwritten Annotation
**Vai trò:** Dấu ấn editorial

Rock Salt 17px #121212 khoanh tròn một từ (ví dụ: 'pleasure') — dấu bút đỏ của biên tập viên in ấn được chuyển thành chữ viết tay. Chỉ dùng tối đa một lần mỗi trang.

### Footer Strip
**Vai trò:** Meta cuối trang

Top border 1px solid #121212, vertical padding 30–40px, grid ba cột: logo wordmark bên trái, '© Seoul, Korea' bên phải, monospace tag ở giữa. Text #121212 trên nền trắng.

### Nav Indicator Globe
**Vai trò:** Điểm nhấn iconographic inline

Biểu tượng quả địa cầu vẽ nét nhỏ màu #121212 stroke, dùng trong văn bản mô tả công ty và trong dòng manifesto 'WHEN SOMEONE ELSE IS NEED THAT JOY COMES BACK TO' — quả địa cầu thay thế từ 'need' như một phép ẩn dụ thị giác.

## Do's and Don'ts

### Do
- Đặt display headlines ở 75–274px bằng Helvetica Neue 700 với -0.04em tracking — kích thước chữ là khối thị giác chính, không phải hình ảnh
- Chỉ dùng #121212 làm foreground color duy nhất; không bao giờ đưa điểm nhấn màu sắc vào
- Áp dụng border-radius 288px cho tất cả ảnh full-bleed để làm mềm ảnh kiến trúc/nhiếp ảnh ngoài trời
- Bọc meta labels trong ngoặc vuông bằng PPSupplyMono 16px: [TÊN SECTION]
- Dùng radius 40px cho navigation pill và 28px cho từng nav item bên trong
- Duy trì 72px giữa các section lớn và 50px giữa các khối nội dung trong một section
- Đặt biểu tượng sparkle bốn cánh thành một hàng ngang 4–5 cái làm section divider tiêu chuẩn

### Don't
- Không thêm bất kỳ màu nào ngoài năm màu trung tính (#121212, #ffffff, #f1f1f1, #e1e1e1, #c5c5c5) — zero chroma là thương hiệu
- Không dùng box-shadows; chiều sâu chỉ đến từ hairline borders và kết cấu giấy
- Không phá vỡ quy tắc viết hoa toàn bộ trên display headlines; chữ hoa/thường chỉ dành cho Rock Salt annotation
- Không dùng pill radii 9999px trên button hoặc tag — radius tiêu chuẩn lớn nhất là 40px trên nav
- Không nén line-height dưới 1.0 trên display type, và không vượt quá 1.6 trên body
- Không đặt body copy trong cột rộng hơn ~720px — editorial measure phải giữ được tính dễ đọc
- Không thêm hover-lift hoặc transition effects vào cards; thẩm mỹ là print tĩnh, không phải UI tương tác

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền toàn trang, nền cho mọi nội dung |
| 1 | Paper | `#f1f1f1` | Fills nhẹ phía sau body type và lớp kết cấu giấy nhàu |
| 2 | Elevated Pill | `#ffffff` | Floating navigation container, các khối card độc lập |

## Elevation

Không có shadow. Hệ thống dùng hairline borders 1px màu #121212 và khoảng trắng rộng rãi để tạo cấu trúc. Chiều sâu đến từ lớp phủ kết cấu giấy nhàu và kích thước chữ cực lớn, không phải từ cast shadows hay z-axis elevation.

## Imagery

Nhiếp ảnh chiếm ưu thế ở hero — các shot kiến trúc và quảng cáo ngoài trời lớn (billboard, building wraps, quảng cáo đặt ở vỉa hè) được trình bày full-bleed với bo góc 288px. Kết cấu giấy nhàu phủ lên các section phía dưới trang như một lớp xử lý bề mặt xúc giác, mang lại cho giao diện cảm giác của một zine in ấn. Một biểu tượng quả địa cầu vẽ nét nhỏ xuất hiện như yếu tố minh họa duy nhất. Không 3D, không abstract gradients, không product mockups — hình ảnh mang tính tài liệu, công nghiệp, bắt nguồn từ portfolio quảng cáo ngoài trời của agency.

## Layout

Max-width ~1440px căn giữa với horizontal padding 40–144px tùy mật độ section. Hero là ảnh full-bleed với type chồng lên. Bên dưới ảnh, nội dung xen kẽ giữa các khối text căn giữa và display typography edge-to-edge. 60% phía dưới trang là một manifesto cuộn dài, nơi display type cỡ lớn lấp đầy chiều rộng viewport từng dòng một, cách nhau bởi các hàng sparkle divider. Navigation là một pill nổi căn giữa ở đầu viewport, không phải thanh full-width. Footer là một dải đơn với hairline border.

## Agent Prompt Guide

**Quick Color Reference**
- text: #121212
- background: #ffffff
- surface/soft: #f1f1f1
- border: #e1e1e1
- muted: #c5c5c5
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

1. *Navigation Pill*: Container nổi căn giữa, outer radius 40px, item radius 28px, border 1px solid #121212, background trắng #ffffff, horizontal padding 20px, vertical padding 10px. Ba mục text bằng Helvetica Neue 15px/500 #121212: HOME (active, với subtle inset fill), PROJECTS, CONTACT.

2. *Display Headline*: Khối full-width, text 'PEOPLE BRAND' bằng Helvetica Neue 700 ở 274px, line-height 1.0, letter-spacing -10.96px, color #121212, trên nền #ffffff. Hai dòng, mỗi dòng lấp đầy chiều rộng viewport.

3. *Monospace Meta Tag*: Một dòng '[01-N INTRODUCTION]' bằng PPSupplyMono 16px/400, uppercase, letter-spacing normal, color #121212, căn giữa phía trên một section.

4. *Full-Bleed Image Block*: Ảnh (kiến trúc/quảng cáo ngoài trời) ở 100% viewport width, border-radius 288px ở mọi góc, không caption, không border. Đặt caption địa chỉ ba dòng bằng Helvetica Neue 17px/1.2 #121212 chồng lên ảnh, khu vực trên cùng bên phải, không có background plate.

5. *Sparkle Divider Row*: Năm biểu tượng sparkle bốn cánh màu #121212, mỗi cái 20px, sắp xếp theo chiều ngang với khoảng cách 72px, căn giữa trang. Đóng vai trò là section break giữa các khối nội dung lớn.

## Texture & Surface Treatment

Kết cấu giấy nhàu là một lớp noise duy nhất với độ mờ thấp, được áp dụng phía sau 60% phía dưới trang (khoảng từ section PLEASANCE trở xuống). Nó nên đọc như một hạt xúc giác tinh tế, không phải một pattern — mục tiêu là làm cho bề mặt kỹ thuật số có cảm giác như một artifact in ấn vật lý. Không tile nó, không animate nó, không áp dụng nó vào cards hoặc components. Kết cấu là một xử lý ở cấp độ trang, không phải cấp độ component.

## Typographic Voice

Ba giọng nói cùng tồn tại: Helvetica Neue (workhorse, dùng cho 95% nội dung bao gồm tất cả display headlines), PPSupplyMono (caption in ấn, dùng cho meta labels trong ngoặc vuông), và Rock Salt (bút của biên tập viên, dùng một lần mỗi trang để khoanh tròn một từ duy nhất). Mono font mang siêu dữ liệu editorial; handwritten font mang chú thích của con người. Không bao giờ thay thế bằng serif cho bất kỳ font nào trong số này — hệ thống hoàn toàn là neo-grotesque + monospace + handwritten, không cho phép các font kiểu Garamond hoặc Times.

## Similar Brands

- **Studio Daidai** — Cùng cách kết hợp monochrome neo-grotesque + monospace label với oversized display headlines và editorial spacing rộng rãi
- **Bureau Cool** — Cùng cảm giác print-zine với white canvas, hairline rules, all-caps display type ở 100–250px, và zero chromatic color
- **Apartamento Magazine** — Cùng sự kiềm chế editorial, typography chú thích viết tay, và xử lý bề mặt giấy trắng với grain tinh tế
- **AnOther Magazine digital** — Cùng cấu trúc Helvetica display cỡ lớn + monospace caption và bầu không khí press-kit trên white canvas
- **Werkplaats Typografie archive** — Cùng cách tiếp cận tuyên ngôn typographic brutalist: một họ typeface ở kích thước cực lớn, monospace metadata, không có hình ảnh trang trí

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-press-ink: #121212;
  --color-paper-white: #ffffff;
  --color-newsprint: #f1f1f1;
  --color-foil-gray: #e1e1e1;
  --color-mute-gray: #c5c5c5;

  /* Typography — Font Families */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ppsupplymono: 'PPSupplyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-ppsupplysans: 'PPSupplySans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-rock-salt: 'Rock Salt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 2;
  --text-body: 17px;
  --leading-body: 1.29;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --text-heading: 75px;
  --leading-heading: 1.05;
  --tracking-heading: -1.68px;
  --text-display: 274px;
  --leading-display: 1;
  --tracking-display: -10.96px;

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

  /* Spacing */
  --spacing-10: 10px;
  --spacing-17: 17px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-50: 50px;
  --spacing-72: 72px;
  --spacing-81: 81px;
  --spacing-144: 144px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 72px;
  --card-padding: 40px;
  --element-gap: 50px;

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-3xl-2: 40px;
  --radius-full: 288px;

  /* Named Radii */
  --radius-tags: 20px;
  --radius-cards: 20px;
  --radius-images: 288px;
  --radius-nav-item: 28px;
  --radius-nav-pill: 40px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-paper: #f1f1f1;
  --surface-elevated-pill: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-press-ink: #121212;
  --color-paper-white: #ffffff;
  --color-newsprint: #f1f1f1;
  --color-foil-gray: #e1e1e1;
  --color-mute-gray: #c5c5c5;

  /* Typography */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ppsupplymono: 'PPSupplyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-ppsupplysans: 'PPSupplySans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-rock-salt: 'Rock Salt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 2;
  --text-body: 17px;
  --leading-body: 1.29;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --text-heading: 75px;
  --leading-heading: 1.05;
  --tracking-heading: -1.68px;
  --text-display: 274px;
  --leading-display: 1;
  --tracking-display: -10.96px;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-17: 17px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-50: 50px;
  --spacing-72: 72px;
  --spacing-81: 81px;
  --spacing-144: 144px;

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-3xl-2: 40px;
  --radius-full: 288px;
}
```