# Not Real

> Not Real — Style Reference

## Prompt Content

```
# Not Real — Style Reference
> Một spread gallery biên tập trên nền vellum xám — giống catalog cao cấp, nơi chỉ có tác phẩm nghệ thuật mới được phép "hét" bằng màu sắc.

**Theme:** light

NotReal hoạt động như một gallery kiểu chữ: một tấm canvas gần như trống rỗng, màu trắng ngà, nơi các product render cỡ lớn và campaign stills đảm nhiệm phần kể chuyện bằng hình ảnh, trong khi hai bộ typeface tùy chỉnh gánh vác phần ngôn từ. Hệ thống được thiết kế thiếu màu sắc một cách có chủ đích — ba sắc thái xám chiếm 99% giao diện — để mỗi pixel bão hòa đều là tác phẩm của khách hàng, không phải UI chrome. Layout mang phong cách editorial, không giống app: một lưới hai cột bất đối xứng, nơi hero images được đặt ở các độ lệch dọc khác nhau để tạo luồng đọc hình chữ Z, với vertical running text và micro-metadata tạo nhịp điệu của một catalog in ấn. Sự kết hợp giữa ogg (một serif high-contrast chịu ảnh hưởng của didone) cho display và telegraf (sans hình học) cho mọi thứ khác là điểm nhấn đặc trưng — một sự đối lập thì thầm-và-nói, nơi serif công bố tác phẩm và sans ghi chép lại nó.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink Charcoal | `#292a2c` | `--color-ink-charcoal` | Văn bản chính, border strokes chủ đạo (635 lần xuất hiện dưới dạng borderColor), nav accents |
| Vellum | `#f2f2f2` | `--color-vellum` | Canvas trang, bề mặt card — màu trắng ngà pha chút ấm, tạo cảm giác giấy thật thay vì digital white |
| Full Black | `#000000` | `--color-full-black` | Link border underlines, footer text, icon strokes, image overlay text — được dùng như một neo màu sắc chỉ khi cần độ tương phản tối đa trên nền Vellum |

## Tokens — Typography

### ogg — Display và project headlines. Đây là một serif high-contrast phong cách didone, dùng ở cỡ 55px với tracking âm mạnh -0.036em — nó hoạt động như một gallery label, công bố từng case study với trọng lượng kiểu chữ mà sans-serif không bao giờ cố gắng đạt tới. Ở các cỡ nhỏ hơn (24-26px), cùng một family này xử lý editorial pull-quotes và wordmark, nơi tracking âm được nới lỏng bớt (-0.02em). Lựa chọn đặc trưng: chỉ một weight duy nhất (400) làm tất cả công việc serif, dựa vào độ tương phản trong chính các nét chữ thay vì biến thể weight để tạo hierarchy. · `--font-ogg`
- **Thay thế:** Playfair Display, DM Serif Display, hoặc Cormorant Garamond
- **Weights:** 400
- **Cỡ chữ:** 24px, 26px, 55px
- **Line height:** 1.06, 1.10, 1.50
- **Letter spacing:** -0.0360em, -0.0200em
- **Vai trò:** Display và project headlines. Đây là một serif high-contrast phong cách didone, dùng ở cỡ 55px với tracking âm mạnh -0.036em — nó hoạt động như một gallery label, công bố từng case study với trọng lượng kiểu chữ mà sans-serif không bao giờ cố gắng đạt tới. Ở các cỡ nhỏ hơn (24-26px), cùng một family này xử lý editorial pull-quotes và wordmark, nơi tracking âm được nới lỏng bớt (-0.02em). Lựa chọn đặc trưng: chỉ một weight duy nhất (400) làm tất cả công việc serif, dựa vào độ tương phản trong chính các nét chữ thay vì biến thể weight để tạo hierarchy.

### telegraf — Body copy, navigation, metadata tags, project category labels, và secondary headings. Một geometric sans đảm nhiệm toàn bộ công việc ghi chép thầm lặng. Ở cỡ 55px, nó cũng có thể đóng vai trò display type, tạo ra khoảnh khắc hiếm hoi khi cả hai font gặp nhau ở cùng một kích thước — thông thường serif công bố tên dự án trong khi sans mô tả nó bên dưới. Tracking dương xuyên suốt (0.002em đến 0.040em), mở rộng khi kích thước giảm — một mối quan hệ nghịch đảo có chủ đích giúp metadata dạng small caps dễ đọc và tạo khoảng thở cho wordmark. · `--font-telegraf`
- **Thay thế:** Inter, Söhne, hoặc Suisse Int'l
- **Weights:** 400
- **Cỡ chữ:** 15px, 18px, 20px, 24px, 25px, 55px
- **Line height:** 0.75, 1.00, 1.08, 1.10, 1.25, 1.33, 1.67, 2.00
- **Letter spacing:** 0.0020em, 0.0210em, 0.0250em, 0.0330em, 0.0400em
- **Vai trò:** Body copy, navigation, metadata tags, project category labels, và secondary headings. Một geometric sans đảm nhiệm toàn bộ công việc ghi chép thầm lặng. Ở cỡ 55px, nó cũng có thể đóng vai trò display type, tạo ra khoảnh khắc hiếm hoi khi cả hai font gặp nhau ở cùng một kích thước — thông thường serif công bố tên dự án trong khi sans mô tả nó bên dưới. Tracking dương xuyên suốt (0.002em đến 0.040em), mở rộng khi kích thước giảm — một mối quan hệ nghịch đảo có chủ đích giúp metadata dạng small caps dễ đọc và tạo khoảng thở cho wordmark.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 15px | 1.67 | 0.6px | `--text-caption` |
| body-sm | 18px | 1.5 | 0.38px | `--text-body-sm` |
| body | 20px | 1.33 | 0.5px | `--text-body` |
| subheading | 24px | 1.25 | 0.6px | `--text-subheading` |
| heading | 26px | 1.1 | -0.52px | `--text-heading` |
| heading-lg | 55px | 1.08 | 0.11px | `--text-heading-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 11 | 11px | `--spacing-11` |
| 18 | 18px | `--spacing-18` |
| 44 | 44px | `--spacing-44` |

### Border Radius

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

### Layout

- **Page max-width:** 1440px
- **Section gap:** 120px
- **Card padding:** 0px
- **Element gap:** 18px

## Components

### Wordmark / Site Logo
**Vai trò:** Nhận diện thương hiệu cố định ở góc trên bên trái mỗi trang

Hiển thị 'NotReal®' bằng ogg ở cỡ khoảng 55px với ký hiệu registered trademark superscript. Các nét serif với tracking âm mạnh tạo ấn tượng của một nhà mốt xa xỉ. Link về trang chủ. Không có background, không có border — thuần túy là một dấu ấn kiểu chữ trên nền Vellum canvas.

### Top Navigation Bar
**Vai trò:** Điều hướng chính của trang, nằm sát mép trên mỗi trang

Bốn link (Work, About, Jobs, Contact) bằng telegraf 18px, weight 400, màu Ink Charcoal, được giãn cách với phân bố ngang rộng (các mục nav đẩy về phía bên phải của thanh). Không có background fill, không có border, không có active state indicator ngoài hiệu ứng hover/focus trên link text. Nav là một lớp phủ trong suốt trên nền Vellum canvas với padding trên/dưới rộng rãi.

### Project Tile (Large Featured)
**Vai trò:** Campaign artwork full-bleed cho các case study hàng đầu trong work grid

Hình ảnh lớn hình chữ nhật (tỷ lệ xấp xỉ 16:9 đến 4:3) được render ở độ phân giải gốc với zero border-radius. Không border, không shadow, không padding. Hình ảnh nằm trực tiếp trên nền Vellum canvas. Bên dưới: project title bằng ogg 26px (hoặc 55px cho tile lớn nhất), subtitle bằng ogg italic ở cùng dòng, category tags bằng telegraf 15px được phân cách bằng ' / '. Title và subtitle được phân cách bằng em-dash (—).

### Project Tile (Compact)
**Vai trò:** Các case study phụ nhỏ hơn trong lưới bất đối xứng

Cùng ngôn ngữ bố cục như tile lớn nhưng được thu nhỏ — hình ảnh ở tỷ lệ xấp xỉ 2:3 hoặc vuông, không radius, không border, được đặt với độ lệch dọc có chủ đích so với các tile lân cận để tạo z-pattern editorial. Typography bên dưới thu nhỏ xuống telegraf 18-20px cho title và 15px cho tags.

### Inline Text Link
**Vai trò:** Text links trong body copy và navigation

telegraf cỡ body, màu Ink Charcoal, với border dưới 1px Full Black đóng vai trò gạch chân. Border là trọng lượng thị giác — không phải sự thay đổi màu text. Không có background hover state; border dày lên hoặc chuyển thành đôi khi hover.

### Vertical Running Text
**Vai trò:** Dải metadata xoay, ghim vào cạnh phải của viewport

Text telegraf 15px xoay 90° (đọc từ dưới lên trên), Full Black, được đặt absolute dọc theo lề phải. Chứa project ID hoặc campaign reference (ví dụ: 'BA 1112PM – MAD 0&12AM ✳'). Hoạt động như một running header của tạp chí in, không phải UI control.

### Category Metadata Tag
**Vai trò:** Nhãn text nhỏ chỉ lĩnh vực dự án (cgi, art direction, campaign, v.v.)

telegraf 15px, weight 400, Ink Charcoal, được phân cách bằng dấu phân cách ' / ' khi có nhiều tag. Không background, không border, không viết hoa — nằm trực tiếp trên Vellum như metadata thực tế thầm lặng.

### Project Title with Em-Dash Separator
**Vai trò:** Cách xử lý heading đặc trưng cho mọi case study

Heading hai phần: primary title bằng ogg (26-55px), em-dash separator (—), secondary descriptor bằng ogg italic ở cùng kích thước. Cả hai phần đều chia sẻ cùng một giọng nói kiểu chữ — dash là dấu câu cấu trúc duy nhất. Được dùng cho mọi dự án trên toàn bộ grid.

### Agency Statement Block
**Vai trò:** Đoạn văn bản giới thiệu mô tả gần đầu trang Work

Layout hai cột: bên trái là một đoạn văn mô tả ngắn bằng telegraf 20-24px, Ink Charcoal, với cụm từ 'design-driven' được render bằng ogg serif để đánh dấu nó là định danh của agency. Không có background panel — text trôi nổi trên Vellum với khoảng trống rộng rãi xung quanh.

### Asymmetric Image Grid Cell
**Vai trò:** Hình ảnh được định vị riêng lẻ trong layout editorial

Mỗi cell chứa một hình ảnh duy nhất ở tỷ lệ khung hình gốc, được định vị với độ lệch trái/phải đã tính toán trong lưới hai cột. Hình ảnh cố tình chồng lấn ranh giới cột để phá vỡ sự cứng nhắc của lưới. Không có chú thích bên trong cell — tile bên dưới mang text.

## Do's and Don'ts

### Do
- Chỉ dùng ba màu: #292a2c cho text, #f2f2f2 cho canvas, #000000 cho link và bề mặt tối có độ tương phản tối đa
- Áp dụng ogg cho tất cả display text và project titles ở cỡ 55px với letter-spacing -1.98px; dùng telegraf ở cỡ 18-20px cho body với tracking 0.38-0.5px
- Render tất cả hình ảnh dưới dạng hình chữ nhật góc sắc với 0px border-radius và không drop shadow
- Phân cách project titles khỏi subtitles bằng em-dash (—) trong ogg, với subtitle ở dạng italic ogg
- Dùng dấu phân cách ' / ' giữa các category metadata tags trong telegraf 15px
- Đặt vertical running text strip ở vị trí absolute dọc theo cạnh phải viewport trên các trang trình bày project work
- Để canvas thở: 120px giữa các section chính, không có card containers, không có elevated panels

### Don't
- Không đưa bất kỳ màu sắc chromatic nào vào UI — màu bão hòa chỉ thuộc về tác phẩm của khách hàng
- Không áp dụng border-radius cho bất kỳ element nào, bao gồm buttons, cards, tags, hoặc images
- Không thêm box-shadow, drop-shadow, hoặc bất kỳ CSS elevation nào — design có chủ đích là phẳng
- Không sử dụng centered layouts hoặc max-width wrappers bị ràng buộc — để content chảy ra đến các cạnh viewport
- Không sử dụng bold (600+) hoặc semibold weights — cả hai font chỉ hoạt động ở 400
- Không tạo một filled CTA button riêng biệt — links là text với border đen 1px, không có gì nổi bật hơn
- Không xen kẽ màu background giữa các section — toàn bộ trang chia sẻ một Vellum canvas duy nhất

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Vellum Canvas | `#f2f2f2` | Bản thân trang — một màu trắng ngà ấm, đọc như giấy in hơn là digital background. Mọi thứ trôi nổi trên bề mặt này, không có card containers hoặc elevated panels. |
| 2 | Ink Surface | `#000000` | Các đảo ngược tối hiếm hoi cho các section campaign full-bleed hoặc video containers nơi tác phẩm yêu cầu một nền đen xung quanh. |

## Elevation

Design system có zero elevation. Không shadow, không border-radius, không stacked z-axis. Mọi element đều nằm trên cùng một mặt phẳng phẳng trên Vellum canvas — độ sâu duy nhất đến từ sự chồng lấn tự nhiên của các hình ảnh lớn được định vị, tạo ra cảm giác phân lớp mà không cần bất kỳ CSS shadow nào. Đây là một lựa chọn anti-SaaS có chủ đích: trang hoạt động như một catalog gallery in ấn, nơi sự phẳng tín hiệu cho thấy thẩm quyền biên tập.

## Imagery

Imagery là toàn bộ hệ thống màu sắc. Trang lưu trữ các CGI renders độ phân giải cao lớn và product photography (tinh thể, vật thể kim loại, mô phỏng chất lỏng, sản phẩm tiêu dùng có thương hiệu) mang các màu tím, hồng, xanh lá và vàng bão hòa — những màu không bao giờ xuất hiện ở nơi khác trong UI. Hình ảnh luôn là hình chữ nhật góc sắc (không radius, không mask, không duotone treatment), được trình bày ở độ phân giải gốc mà không có cropping overlays. Quy tắc thị giác: artwork càng sống động, UI xung quanh càng đơn sắc và im lặng. Không có illustrations, không có icon system ngoài các glyph đơn giản, không có abstract graphics — các case study renders CHÍNH LÀ visual identity.

## Layout

Lưới editorial bất đối xứng hai cột với full-bleed outer margins và không có ràng buộc centered. Cột bên trái giữ wordmark và các project tile lớn; cột bên phải giữ các project tile bổ sung, agency statement, và vertical running text ghim vào cạnh phải. Các hình ảnh trong lưới được dịch chuyển dọc có chủ đích — một tile bên trái có thể bắt đầu ở 200px từ trên cùng trong khi tile hàng xóm cột phải bắt đầu ở 80px — tạo ra một z-pattern so le thay vì một bảng cứng nhắc. Nav bar nằm ở trên cùng, không có sticky behavior và không có background fill. Content chảy từ trên xuống dưới dạng một scroll liên tục duy nhất, không có section dividers, không có alternating background bands, và không có max-width wrapper bị ràng buộc — trang thở ra ngoài đến các cạnh viewport. Nhịp điệu tổng thể chậm và giống gallery: một case study trên mỗi viewport-height, hình ảnh lớn, sau đó title block, sau đó khoảng trống thở.

## Agent Prompt Guide

**Quick Color Reference**
- text: #292a2c
- background: #f2f2f2
- border: #292a2c
- accent: #000000
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

1. *Project tile heading block:* Trên nền Vellum (#f2f2f2) canvas. Project title bằng ogg 26px, weight 400, màu #292a2c, letter-spacing -0.52px. Em-dash separator. Subtitle bằng ogg italic 26px, cùng màu và tracking. Bên dưới: category tags bằng telegraf 15px, #292a2c, phân cách bằng ' / '. Không background, không border, không padding.

2. *Featured work image:* Hình ảnh full-width ở tỷ lệ khung hình gốc trên nền #f2f2f2 canvas. 0px border-radius. Không border, không shadow. Không có overlay text trên hình ảnh — tất cả text đều nằm bên dưới trong heading block.

3. *Navigation bar:* telegraf 18px, weight 400, #292a2c. Bốn link được giãn cách với phân bố ngang rộng, căn phải. Không background fill, không border, không sticky behavior. Top padding 24px, bottom padding 24px.

4. *Inline link:* telegraf ở cỡ body, màu #292a2c, với border dưới 1px solid #000000 làm gạch chân. Không background hover state — border dày lên khi tương tác.

5. *Agency statement paragraph:* telegraf 20px, weight 400, #292a2c, line-height 1.33. Cụm từ tự định danh 'design-driven' được đặt bằng ogg serif ở cùng kích thước. Không background panel, không border, không container.

## Similar Brands

- **Buck (buck.co)** — Cùng cách tiếp cận editorial agency-portfolio với UI đơn sắc để motion 3D đầy màu sắc chiếm ưu thế, và khoảng trắng rộng rãi làm hệ thống cấu trúc
- **Manual (manual.tv)** — Layout gallery-grid giống hệt với asymmetric image positioning, zero border-radius, và cặp serif/sans tùy chỉnh trên nền canvas trắng ngà ấm
- **Gunner (gunner.co)** — Chia sẻ thẩm mỹ flat no-elevation, no-radius với một canvas trắng ngà duy nhất và product imagery lớn được định vị là nguồn màu sắc duy nhất
- **Locomotive (locomotive.ca)** — Cùng cảm giác print-catalog: hero imagery lớn, minimal type hierarchy, editorial asymmetric grid, và sự kiềm chế cực độ trong UI chrome

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-charcoal: #292a2c;
  --color-vellum: #f2f2f2;
  --color-full-black: #000000;

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

  /* Typography — Scale */
  --text-caption: 15px;
  --leading-caption: 1.67;
  --tracking-caption: 0.6px;
  --text-body-sm: 18px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.38px;
  --text-body: 20px;
  --leading-body: 1.33;
  --tracking-body: 0.5px;
  --text-subheading: 24px;
  --leading-subheading: 1.25;
  --tracking-subheading: 0.6px;
  --text-heading: 26px;
  --leading-heading: 1.1;
  --tracking-heading: -0.52px;
  --text-heading-lg: 55px;
  --leading-heading-lg: 1.08;
  --tracking-heading-lg: 0.11px;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-11: 11px;
  --spacing-18: 18px;
  --spacing-44: 44px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 120px;
  --card-padding: 0px;
  --element-gap: 18px;

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

  /* Surfaces */
  --surface-vellum-canvas: #f2f2f2;
  --surface-ink-surface: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-charcoal: #292a2c;
  --color-vellum: #f2f2f2;
  --color-full-black: #000000;

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

  /* Typography — Scale */
  --text-caption: 15px;
  --leading-caption: 1.67;
  --tracking-caption: 0.6px;
  --text-body-sm: 18px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.38px;
  --text-body: 20px;
  --leading-body: 1.33;
  --tracking-body: 0.5px;
  --text-subheading: 24px;
  --leading-subheading: 1.25;
  --tracking-subheading: 0.6px;
  --text-heading: 26px;
  --leading-heading: 1.1;
  --tracking-heading: -0.52px;
  --text-heading-lg: 55px;
  --leading-heading-lg: 1.08;
  --tracking-heading-lg: 0.11px;

  /* Spacing */
  --spacing-11: 11px;
  --spacing-18: 18px;
  --spacing-44: 44px;
}
```