# Pentagram

> Pentagram — Style Reference

## Prompt Content

```
# Pentagram — Style Reference
> Gallery wall of compressed restraint

**Theme:** light

Giao diện của Pentagram hoạt động như một catalog gallery được tuyển chọn: pure achromatic canvas, nơi màu sắc duy nhất xuất hiện chính là tác phẩm. Mọi quyết định cấu trúc đều mang tính typographic — không icon, không badge, không filled buttons, không decorative chrome. Trang web xen kẽ giữa các dải trắng và gần đen với chữ in nén (compressed type) cỡ lớn, sau đó trình bày dự án dưới dạng các khối đặc quá khổ trông như swatch màu trước khi hiển thị nội dung thực tế. Navigation là một hàng text links đơn lẻ. Cards không viền hoặc viền siêu mảnh (hairline-bordered). Hệ thống tạo dựng thẩm quyền thông qua sự kiềm chế: cùng tracking chặt chẽ và weight khiêm tốn cho mọi vai trò, để một display heading 52px có cảm giác cân đối như caption text 13px.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, text trên dark bands |
| Ink | `#1a1a1a` | `--color-ink` | Primary body text, heading text, hairline borders, link color — gần đen chiếm 90% mọi nét vẽ |
| True Black | `#000000` | `--color-true-black` | Solid surface fills cho dark bands, inverted text backgrounds, inverted footer |
| Graphite | `#222222` | `--color-graphite` | Elevated dark surface, input field fills trên dark contexts |
| Carbon | `#333333` | `--color-carbon` | Card border trên light surfaces, subtle structural dividers |
| Ash | `#767676` | `--color-ash` | Muted body text, secondary metadata, less-prominent captions |
| Fog | `#8c8c8c` | `--color-fog` | Light borders, low-emphasis dividers, placeholder text |
| Mist | `#ededed` | `--color-mist` | Tinted light surface giữa pure white và true black bands |
| Haze | `#e3e4e5` | `--color-haze` | Subtle alt-row surface, hover wash, low-contrast card fill |

## Tokens — Typography

### Plain — Tất cả vai trò — display, headings, body, caption, nav, button. Một typeface duy nhất gánh vác toàn bộ trang web. Sự tương phản weight bị giới hạn (400 vs 500) nên hệ thống phân cấp đến từ kích thước và tracking, không phải độ đậm. Display 52px với tracking -0.02em là anti-display: nó thì thầm thay vì hét to. Line-heights dưới 1.1 ở 32–52px tạo ra các khối xếp chồng nén chặt, nơi headings đọc như những tấm đặc. Open features 'kern' và 'case' gợi ý một typeface có các uppercase alternates được spacing cẩn thận — feature 'case' có thể cho phép truy cập vào các dạng chữ hoa mang tính stylistic. · `--font-plain`
- **Substitute:** Söhne, Inter, Neue Haas Grotesk, ABC Diatype
- **Weights:** 400, 500
- **Sizes:** 13, 16, 19, 27, 32, 52
- **Line height:** 1.00 (display), 1.05–1.20 (headings), 1.25–1.32 (body), 1.88 (loose body)
- **Letter spacing:** -0.02em trên ≥27px, -0.01em trên <27px
- **OpenType features:** `"kern", "case"`
- **Role:** Tất cả vai trò — display, headings, body, caption, nav, button. Một typeface duy nhất gánh vác toàn bộ trang web. Sự tương phản weight bị giới hạn (400 vs 500) nên hệ thống phân cấp đến từ kích thước và tracking, không phải độ đậm. Display 52px với tracking -0.02em là anti-display: nó thì thầm thay vì hét to. Line-heights dưới 1.1 ở 32–52px tạo ra các khối xếp chồng nén chặt, nơi headings đọc như những tấm đặc. Open features 'kern' và 'case' gợi ý một typeface có các uppercase alternates được spacing cẩn thận — feature 'case' có thể cho phép truy cập vào các dạng chữ hoa mang tính stylistic.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.25 | -0.13px | `--text-caption` |
| body-sm | 16px | 1.32 | -0.16px | `--text-body-sm` |
| subheading | 19px | 1.2 | -0.19px | `--text-subheading` |
| heading-sm | 27px | 1.19 | -0.54px | `--text-heading-sm` |
| heading | 32px | 1.05 | -0.64px | `--text-heading` |
| display | 52px | 1 | -1.04px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 96 | 96px | `--spacing-96` |

### Border Radius

| Element | Value |
|---------|-------|
| tags | 9999px |
| cards | 8px |
| inputs | 4px |
| buttons | 4px |

### Layout

- **Page max-width:** 1400px
- **Section gap:** 96px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Text Navigation Bar
**Role:** Primary site navigation

Thanh ngang màu đen tuyền (#000000) hoặc trắng (#ffffff). Chỉ có text links, không button hay icon. Font: Plain 400 ở 16px, letter-spacing -0.01em. Links dùng Ink (#1a1a1a) trên nền sáng, Paper White trên nền tối. Một search icon và text 'Archive' nằm ở ngoài cùng bên phải. Không background fill, không border — nằm như text thuần trên canvas. Padding: 8px trên/dưới.

### Full-Bleed Editorial Hero
**Role:** Mở đầu trực quan cho một dự án hoặc homepage

Ảnh chụp hoặc minh họa edge-to-edge chiếm toàn bộ chiều rộng viewport và ~60-70% chiều cao. Không border-radius. Không overlay gradient. Project metadata nằm ở góc dưới bên trái, chữ Plain 400 13px nhỏ, màu trắng trên dải tối bán trong suốt hoặc trực tiếp trên ảnh với text shadow nhẹ. Không CTA button — bản thân ảnh CHÍNH là điểm vào.

### Project Thumbnail Card
**Role:** Trưng bày một dự án trong grid

Card không viền. Thumbnail là một khối màu đặc lớn (tỷ lệ xấp xỉ 1:1, lấp đầy card) — các khối này CHÍNH LÀ hình ảnh dự án, không phải khung trang trí. Bên dưới khối: tên dự án bằng Plain 500 ở 16px, mô tả một dòng bằng Plain 400 ở 13px màu Ash (#767676). Khoảng cách 24px giữa khối và text. Không border, không shadow, không radius trên khối — góc vuông đọc như swatch hoặc tấm màu.

### Project Thumbnail Card with Imagery
**Role:** Trưng bày một dự án sử dụng mark/identity đã thiết kế

Cùng cấu trúc với solid-block card, nhưng thumbnail chứa một identity element đã thiết kế (logotype, wordmark, editorial composition) được đặt trên nền tối hoặc chromatic fill. Sự tương phản giữa giao diện hoàn toàn achromatic và các project plate chromatic này là điểm nhấn thị giác đặc trưng.

### Dark Band Section
**Role:** Phá vỡ nhịp điệu trang, giới thiệu ngữ cảnh mới

Dải full-width với nền True Black (#000000) hoặc Graphite (#222222). Tất cả text màu Paper White. Một display heading (52px) duy nhất làm điểm neo cho dải, tùy chọn kèm body copy 16px màu Ash (#767676). Padding rộng rãi: 48–64px dọc. Không trang trí, không gradient, không hình ảnh — bản thân bóng tối là tuyên bố thị giác.

### Inline Tagline Pill
**Role:** Điểm nhấn text thỉnh thoảng giữa các section

Chuỗi text nhỏ căn giữa ('We design Everything~ for Everyone~') đặt ở Plain 400 16px, Frost (#8c8c8c). Không background, không border, không padding. Xuất hiện như dấu câu typographic độc lập giữa các khối nội dung.

### Heading-Only Introduction
**Role:** Mở đầu section trước grid hoặc danh sách

Large display heading (52px, weight 400, line-height 1.00, -0.02em tracking) màu Ink trên nền trắng hoặc Paper White trên nền đen. Theo sau là một đoạn văn ngắn ở Plain 400 16px, line-height 1.88, max-width ~640px. Không subheading, không eyebrow, không label phía trên — heading là tín hiệu duy nhất về danh tính section.

### Footer (Inverted)
**Role:** Site footer

Dải True Black full-width. Text Plain 400 13px màu Paper White. Thưa thớt — có thể gồm vài text links, copyright và metadata tối thiểu. Không logo, không social icons, không newsletter form. 64px vertical padding.

### Dot Pagination
**Role:** Chỉ báo hero carousel / project slider

Hàng gồm 5–8 vòng tròn nhỏ, đường kính 6px, cách nhau 6px. Dot đang hoạt động màu Paper White, dot không hoạt động màu trắng 40%. Nằm ở góc dưới bên phải của hero. Là element UI phi text duy nhất trên toàn bộ trang web.

### Search Trigger
**Role:** Mở tìm kiếm trang

Icon kính lúp nhỏ (có thể là SVG nét mảnh, ~16px) + text link 'Archive', Plain 400 13px màu Ink. Nằm ở ngoài cùng bên phải của nav. Không field, không button — icon là affordance.

## Do's and Don'ts

### Do
- Chỉ sử dụng chín token achromatic — bất kỳ màu chromatic nào trong giao diện đều phá vỡ hệ thống. Màu sắc thuộc về bên trong project thumbnails, không phải trên chrome.
- Đặt tracking chặt nhất (-0.02em) cho mọi text từ 27px trở lên; dùng -0.01em cho text nhỏ hơn. Tracking là công cụ phân cấp chính.
- Xây dựng cards dưới dạng khối không viền với góc vuông (không radius) khi thumbnail là swatch màu đặc; dành radius 8px cho cards chứa ảnh chụp hoặc bố cục phức hợp.
- Xen kẽ giữa Paper White và True Black bands ở các ngắt dọc 96px — nhịp điệu sáng/tối là khung xương cấu trúc của trang.
- Dùng weight 400 cho mọi thứ theo mặc định; chỉ dùng 500 cho tên dự án trong cards và nav links. Không bao giờ dùng weight 600 trở lên.
- Đặt display headings ở line-height 1.00–1.05 để các dòng xếp chồng thành tấm nén. Body copy mở ra 1.88 để tạo khoảng thở — sự tương phản giữa display chặt và body thoáng là có chủ đích.
- Để project grid 4 cột làm công việc thị giác: các khối màu đặc lớn lấp đầy ô 1:1, với khoảng cách 24px bên dưới cho hai dòng metadata Plain 400/500 ở 16/13px.

### Don't
- Đừng thêm bất kỳ màu nào vào navigation, buttons hoặc backgrounds. Giao diện 100% achromatic — màu chỉ xuất hiện bên trong project thumbnails.
- Đừng dùng border-radius trên 8px cho cards hoặc 4px cho buttons. Góc vuông đọc như editorial plates; bo tròn làm suy yếu cảm giác gallery-catalog.
- Đừng giới thiệu filled buttons, outlined buttons hoặc ghost buttons. Không có component button — mọi affordance là text link, hình ảnh hoặc dot.
- Đừng dùng weight 600+ hoặc italic. Dải weight của typeface dừng ở 500; bất kỳ thứ gì nặng hơn đều phá vỡ ngôn ngữ compressed-restraint.
- Đừng thêm icon vào body content. Icon duy nhất trên toàn bộ trang web là search affordance trong nav.
- Đừng dùng background colors trên text hoặc dividers để nhấn mạnh. Sự nhấn mạnh đến từ kích thước, tracking và cặp tương phản Paper White / Ink — không bao giờ từ color fill hoặc tint.
- Đừng dùng shadows, gradients hoặc glow effects. Độ cao (elevation) được truyền đạt hoàn toàn qua sự xen kẽ dải (trắng → đen → trắng), không phải qua drop shadows.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Paper White | `#ffffff` | Default page canvas và card base |
| 2 | Haze | `#e3e4e5` | Low-contrast alt band, subtle card differentiation |
| 3 | Mist | `#ededed` | Slightly elevated light surface giữa white và dark bands |
| 4 | Graphite | `#222222` | Dark elevated surface (inputs, secondary dark bands) |
| 5 | True Black | `#000000` | Full dark band, inverted sections, footer |

## Imagery

Trang web sử dụng hai chế độ hình ảnh riêng biệt không bao giờ pha trộn. Chế độ một là ảnh editorial full-bleed: ngoại thất kiến trúc, tòa nhà thể chế, nội thất bảo tàng — luôn mang giọng điệu tài liệu, không lifestyle, không staged models, không khung hình lấy con người làm trung tâm. Các shot rộng, được bố cục với đường dọc mạnh mẽ, và ánh sáng tự nhiên. Chế độ hai là solid color blocks: mỗi project card dùng một flat fill đơn sắc (xanh bão hòa, xanh lá đậm, đào ấm, gần đen) làm thumbnail, đọc trước tiên như swatch hoặc tấm sơn trước khi identity work được tiết lộ bên trên. Project thumbnails chứa tác phẩm đã thiết kế — như wordmark — đặt tác phẩm đó căn giữa trên trường chromatic. Không có illustration, không 3D, không abstract graphic art. Icons vắng mặt ngoại trừ một kính lúp nét mảnh duy nhất trong nav.

## Layout

Mô hình trang là full-bleed không có lề bên; content cards nằm bên trong container max-width ~1400px căn giữa trên canvas. Hero luôn là ảnh editorial full-viewport-width không có text overlay cạnh tranh sự chú ý — metadata nằm nhỏ ở góc dưới bên trái. Bên dưới hero, các section xen kẽ giữa white bands và full-width black bands ở khoảng cách dọc 96px, tạo nhịp điệu sáng/tối rõ rệt. Project grid là hàng 4 cột chặt chẽ trên desktop, thu gọn xuống 2 cột trên tablet và một cột trên mobile. Dark bands chứa một heading căn trái cực lớn (52px) với tùy chọn body copy ngắn, không gì khác. White bands chứa card grid 4 cột. Navigation là một thanh text ngang duy nhất ở trên cùng — không sticky behavior, không sidebar, không mega-menu. Footer là một dải đen hẹp với text tối thiểu.

## Agent Prompt Guide

**Quick Color Reference**
- text: #1a1a1a
- background: #ffffff
- dark band: #000000
- border: #1a1a1a
- muted text: #767676
- primary action: #000000 (filled action)

**Example Component Prompts**
1. *Dark band section*: Dải full-width, nền #000000, padding 64px trên/dưới. Heading 'Our Future is the Ultimate Project' ở Plain weight 400 52px, line-height 1.00, letter-spacing -0.02em, color #ffffff. Tùy chọn body paragraph bên dưới ở Plain 400 16px, line-height 1.88, color #767676, max-width 640px.

2. *Project card grid (white band)*: CSS grid 4 cột, gap 24px, trên canvas #ffffff. Mỗi card không border, không radius. Card thumbnail là solid color block (ví dụ #2a6ec7 hoặc #2d3a2a) lấp đầy tỷ lệ khung hình 1:1. Bên dưới block, gap 24px, tên dự án ở Plain 500 16px #1a1a1a, mô tả một dòng ở Plain 400 13px #767676.

3. *Full-bleed hero*: Ảnh edge-to-edge lấp đầy toàn bộ chiều rộng viewport, chiều cao ~70vh, không border-radius. Tên dự án ở Plain 400 13px #ffffff tại góc dưới bên trái với padding 24px từ các cạnh. Hàng dot pagination nhỏ ở góc dưới bên phải, vòng tròn 6px, gap 6px, active dot #ffffff, inactive dots ở độ mờ 40% trắng.

4. *Top navigation bar*: Nền #ffffff, padding 8px trên/dưới. Bên trái: wordmark 'Pentagram' ở Plain 500 16px #1a1a1a. Bên phải: text links 'Work', 'About', 'News', 'Contact', 'Archive' ở Plain 400 16px #1a1a1a, letter-spacing -0.01em, kèm search icon nhỏ giữa Contact và Archive. Không borders, không background fills trên links.

5. *Inline tagline*: Text căn giữa 'We design Everything~ for Everyone~' ở Plain 400 16px #8c8c8c, nằm đơn độc trong dải #ffffff với padding 96px trên/dưới, không element nào khác trên dòng.

## Typography Philosophy

Plain là custom typeface của Pentagram được dùng như hệ thống single-family. Toàn bộ trang web chạy trên hai weights (400, 500) và sáu sizes (13, 16, 19, 27, 32, 52). Hệ thống phân cấp được xây dựng từ các bước nhảy kích thước và tracking, không phải weight. Display text ở 52px dùng line-height 1.00 — các dòng xếp chồng vật lý thành tấm. Body text ở 16px mở ra line-height 1.88, tạo khoảng thở đoạn văn rộng rãi. Sự tương phản giữa display nén và body thoáng là điểm nhấn đặc trưng của hệ thống. Cài đặt feature 'case' gợi ý stylistic uppercase alternates, có thể chỉ dành cho vai trò display.

## Color Discipline

Giao diện 100% achromatic. Tất cả chín token palette đều là neutrals — không brand color, không accent, không semantic state color. Đây là lựa chọn curatorial có chủ đích: tác phẩm của công ty thiết kế là thứ chromatic duy nhất trên trang web. Màu bão hòa (xanh dương, xanh lá, đào) xuất hiện độc quyền bên trong project thumbnail blocks, nơi chúng hoạt động như nội dung, không phải chrome. Bất kỳ trang mới nào xây dựng trong hệ thống này phải kháng cự việc thêm màu vào buttons, borders hoặc backgrounds.

## Similar Brands

- **Werkplaats Typografie** — Cùng sự kiềm chế editorial-portfolio: không UI chrome, không màu, chữ lớn trên nền trắng, tác phẩm được trình bày dưới dạng khối lớn với metadata tối thiểu.
- **Collins (collins.us)** — Cùng ngữ pháp agency-portfolio — giao diện achromatic, ảnh dự án full-bleed, display type nén cỡ lớn, project cards dùng chromatic blocks làm thumbnails.
- **Bureau Borsche** — Hệ thống typography single-family, hairline navigation, project grid xây dựng từ color/identity blocks quá khổ, zero decorative chrome.
- **Mucca** — Cảm giác gallery-catalog với compressed type lớn trên nền trắng, dark band section breaks, và tác phẩm được trình bày dưới dạng solid color plates với chú thích hai dòng.
- **Studio Dumbar** — Bố cục portfolio work-first với achromatic chrome, identity marks lớn làm card thumbnails, hairline navigation kiềm chế.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink: #1a1a1a;
  --color-true-black: #000000;
  --color-graphite: #222222;
  --color-carbon: #333333;
  --color-ash: #767676;
  --color-fog: #8c8c8c;
  --color-mist: #ededed;
  --color-haze: #e3e4e5;

  /* Typography — Font Families */
  --font-plain: 'Plain', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.25;
  --tracking-caption: -0.13px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.32;
  --tracking-body-sm: -0.16px;
  --text-subheading: 19px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.19px;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.19;
  --tracking-heading-sm: -0.54px;
  --text-heading: 32px;
  --leading-heading: 1.05;
  --tracking-heading: -0.64px;
  --text-display: 52px;
  --leading-display: 1;
  --tracking-display: -1.04px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1400px;
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 8px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-haze: #e3e4e5;
  --surface-mist: #ededed;
  --surface-graphite: #222222;
  --surface-true-black: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink: #1a1a1a;
  --color-true-black: #000000;
  --color-graphite: #222222;
  --color-carbon: #333333;
  --color-ash: #767676;
  --color-fog: #8c8c8c;
  --color-mist: #ededed;
  --color-haze: #e3e4e5;

  /* Typography */
  --font-plain: 'Plain', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.25;
  --tracking-caption: -0.13px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.32;
  --tracking-body-sm: -0.16px;
  --text-subheading: 19px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.19px;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.19;
  --tracking-heading-sm: -0.54px;
  --text-heading: 32px;
  --leading-heading: 1.05;
  --tracking-heading: -0.64px;
  --text-display: 52px;
  --leading-display: 1;
  --tracking-display: -1.04px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
}
```