# Metalab

> Metalab — Style Reference

## Prompt Content

```
# Metalab — Style Reference
> black editorial spread — một serif headline thở trong khoảng không, được chú thích bởi một grotesque thì thầm

**Theme:** dark

Metalab hoạt động ở chế độ editorial trên nền đen: một design agency để typography và khoảng trắng đảm nhận toàn bộ màn trình diễn. Hai custom typeface cùng chia sẻ sân khấu — một display serif cực nhẹ (PP Eiko) ở kích thước áp đảo, và một grotesque yên tĩnh (Basis Grotesque Pro) cho toàn bộ nội dung chức năng — tạo ra một cuộc đối thoại giữa một serif headline thì thầm và một lớp annotation sans-serif chính xác. Giao diện là achromatic theo niềm tin: không có accent color, không có gradient trang trí, không có brand chromatic mark. Thông tin được cấu trúc hoàn toàn qua scale contrast, micro-typography và metadata labels (ngày tháng, giờ giấc, tọa độ) trôi nổi bên cạnh nội dung như editorial marginalia. Các component thưa thớt và quá khổ — một dark elevated card đơn lẻ, một pill toggle, và rất ít thứ khác. Hệ thống đọc giống masthead của một tạp chí thiết kế hơn là một product UI.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Void | `#000000` | `--color-void` | Page canvas, primary surface, heading text trên vùng sáng — màu đen chủ đạo hấp thụ mọi yếu tố xung quanh |
| Bone | `#ffffff` | `--color-bone` | Inverse text trên bề mặt tối, hairline borders trên vùng tối, contrast punctuation trên nền đen |
| Charcoal | `#252525` | `--color-charcoal` | Màu trung tính hỗ trợ cho secondary UI, divider và muted labels. Không nâng cấp lên màu CTA chính |

## Tokens — Typography

### Basis Grotesque Pro — Toàn bộ nội dung chức năng: body text, metadata annotations, labels, nav, buttons, lists. Weight 350 (light) xử lý editorial captioning ở 12px — các annotation nhỏ như 'EST 2006', 'BC, CA', '12:32 EDT' — trong khi weight 400 xử lý body và interactive text ở 16px. Tracking -0.01em nhẹ thắt chặt grotesque thành một giọng nói chính xác, có chừng mực. Font này làm công việc yên lặng; serif làm công việc nói. · `--font-basis-grotesque-pro`
- **Substitute:** Inter, hoặc Söhne, hoặc bất kỳ neo-grotesque sans-serif nào
- **Weights:** 350, 400
- **Sizes:** 12px, 16px
- **Line height:** 1.00–2.00
- **Letter spacing:** -0.0100em
- **Role:** Toàn bộ nội dung chức năng: body text, metadata annotations, labels, nav, buttons, lists. Weight 350 (light) xử lý editorial captioning ở 12px — các annotation nhỏ như 'EST 2006', 'BC, CA', '12:32 EDT' — trong khi weight 400 xử lý body và interactive text ở 16px. Tracking -0.01em nhẹ thắt chặt grotesque thành một giọng nói chính xác, có chừng mực. Font này làm công việc yên lặng; serif làm công việc nói.

### PP Eiko — Chỉ dành cho display headings — serif ultra-light 88px là yếu tố đặc trưng. Weight 240 (gần hairline) là một lựa chọn chống lại quy ước đầy kịch tính: hầu hết agency dùng serif weight 400-500 để thể hiện uy quyền; whisper-weight của Metalab truyền tải sự tự tin qua sự kiềm chế, không phải âm lượng. Line-height 0.80 chặt và tracking -0.02em để các chữ cái gần như chạm nhau, tạo ra một khối text điêu khắc. · `--font-pp-eiko`
- **Substitute:** Cormorant Garamond, hoặc bất kỳ ultra-light modern serif nào (weight 200-300)
- **Weights:** 240
- **Sizes:** 88px
- **Line height:** 0.80
- **Letter spacing:** -0.02em
- **Role:** Chỉ dành cho display headings — serif ultra-light 88px là yếu tố đặc trưng. Weight 240 (gần hairline) là một lựa chọn chống lại quy ước đầy kịch tính: hầu hết agency dùng serif weight 400-500 để thể hiện uy quyền; whisper-weight của Metalab truyền tải sự tự tin qua sự kiềm chế, không phải âm lượng. Line-height 0.80 chặt và tracking -0.02em để các chữ cái gần như chạm nhau, tạo ra một khối text điêu khắc.

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.2
- **Role:** Arial — đượ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 |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | -0.12px | `--text-caption` |
| body | 16px | 1.2 | — | `--text-body` |
| display | 88px | 0.8 | -1.76px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 50px |
| pills | 1000px |
| buttons | 50px |

### Layout

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

## Components

### Dark Elevated Panel
**Role:** Hero hoặc feature surface — yếu tố depth duy nhất trong hệ thống

Một hình chữ nhật bo tròn cao chứa #252525 trên canvas #000000. Border-radius 50px tạo silhouette mềm mại, giống tablet. Không border, không shadow — depth đến hoàn toàn từ sự chênh lệch giá trị giữa #000000 và #252525. Kích thước mang cảm giác điện ảnh: rộng khoảng 380px, cao 500px+, căn giữa hoặc lệch trong layout.

### Pill Toggle
**Role:** Interactive state indicator hoặc count badge

Pill nhỏ với border-radius 50px hoặc 1000px, padding 3px trên/dưới và 16px trái/phải. Bone (#ffffff) text trên nền trong suốt hoặc charcoal. Basis Grotesque Pro 12px weight 350. Ví dụ: bộ đếm '0 → 1', tag 'EST 2006'.

### Metadata Annotation
**Role:** Editorial marginalia — ngày tháng, địa điểm, timestamp

Basis Grotesque Pro 12px weight 350 màu #ffffff, đặt với khoảng cách rộng so với nội dung được chú thích. Luôn viết hoa hoặc title-case. Ví dụ: 'EST 2006', 'BC, CA', '12:32 EDT'. Hoạt động như chữ ký typographic của thương hiệu — hệ thống các label nhỏ trôi nổi là thứ làm cho trang có cảm giác được tuyển chọn.

### Display Headline
**Role:** Primary heading — thiết lập tông editorial

PP Eiko 88px weight 240, line-height 0.80, letter-spacing -0.02em. Trắng (#ffffff) trên nền đen. Thường một hoặc hai từ mỗi dòng ở scale này, tạo nhịp điệu staccato. Không có ràng buộc chiều rộng tối đa — text thở trên toàn bộ viewport column.

### Ghost Button
**Role:** Subtle interactive element trên bề mặt tối

Nền trong suốt hoặc #252525 với text #ffffff. Border-radius 50px. Padding 16px ngang, inset dọc nhỏ. Basis Grotesque Pro 16px weight 400. Không border, không shadow. Button hòa vào canvas tối cho đến khi hover.

### Nav Link
**Role:** Top-level navigation — tối giản, chỉ text

Basis Grotesque Pro 16px weight 400, #ffffff, không gạch chân. Các item cách nhau bằng khoảng trống ngang rộng. Nav là một hàng yên tĩnh, không phải một bar — nó không cạnh tranh với editorial typography.

### Body Copy
**Role:** Descriptive và supporting text

Basis Grotesque Pro 16px weight 400, line-height 1.76-2.00 (rộng rãi, editorial). #ffffff trên nền đen. Giá trị line-height cao là có chủ đích — chúng tạo ra các cột text thoáng đãng phù hợp với sự rộng rãi của layout.

### List Item
**Role:** Structured content listing

Basis Grotesque Pro 16px màu #ffffff, cách nhau bằng row gap 8px. Xử lý bullet tối thiểu hoặc không có bullet — khoảng cách một mình tạo ra nhịp điệu danh sách.

## Do's and Don'ts

### Do
- Chỉ dùng PP Eiko ở 88px weight 240 cho những khoảnh khắc display lớn nhất — không bao giờ ở kích thước body nơi hairline weight trở nên khó đọc
- Đặt tất cả display headlines ở line-height 0.80 và letter-spacing -0.02em để đạt được hình dạng chữ điêu khắc, gần như chạm nhau
- Dùng Basis Grotesque Pro weight 350 ở 12px cho tất cả metadata annotations (ngày tháng, địa điểm, timestamp) — đây là chữ ký editorial của hệ thống
- Xây dựng depth qua một lớp bề mặt #252525 duy nhất trên canvas #000000 — không thêm các gam xám hoặc shadow khác
- Áp dụng border-radius 50px cho tất cả buttons và elevated panels để có silhouette mềm mại, giống tablet — đặc trưng của hệ thống
- Neo tất cả các trang tối trên canvas #000000 với typography #ffffff — không bao giờ đảo ngược sang nền trắng trong thiết kế dark-theme
- Dùng line-height 1.76-2.00 cho body copy để phù hợp với sự rộng rãi editorial của display type

### Don't
- Không thêm bất kỳ chromatic color nào — không xanh dương, đỏ, xanh lá, hoặc brand accents. Hệ thống là achromatic theo niềm tin
- Không dùng PP Eiko ở kích thước dưới 40px — weight 240 trở nên quá mảnh để hiển thị đáng tin cậy ở kích thước nhỏ
- Không thêm drop shadows vào bất kỳ element nào — depth trong hệ thống này đến từ surface value contrast (#000000 → #252525), không phải hiệu ứng elevation
- Không dùng weight 600+ cho bất kỳ text nào — toàn bộ hệ thống hoạt động trong khoảng 240-400; weight nặng hơn phá vỡ tông thì thầm yên tĩnh
- Không thêm gradient, glow, hoặc bất kỳ hiệu ứng màu nào — flat achromatic palette là brand identity
- Không dùng system serif defaults (Times, Georgia) làm substitute cho PP Eiko nếu không khớp ultra-light weight — một serif regular-weight sẽ đọc là bảo thủ, không phải editorial
- Không đổ buttons với #ffffff trên canvas tối — nó sẽ tạo ra hình dạng sáng duy nhất trên trang và thống trị hierarchy. Dùng #252525 hoặc trong suốt

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Void | `#000000` | Base page canvas — toàn bộ site sống trên nền đen |
| 1 | Charcoal | `#252525` | Elevated panel, bậc depth duy nhất phía trên canvas |
| 2 | Bone | `#ffffff` | Inverse surface cho vùng tương phản cao và typographic inversion |

## Elevation

Depth đạt được qua một bước giá trị duy nhất: panel #252525 nằm trên canvas #000000 không shadow, không border, không blur. Hệ thống cố tình tránh box-shadows hoàn toàn — tương phản 1.4:1 giữa #000000 và #252525 đủ để phân biệt elevation, và thêm shadow sẽ đưa vào sự ấm áp và mềm mại mâu thuẫn với thẩm mỹ editorial phẳng. Có chính xác một bậc depth phía trên canvas, và nó luôn là cùng một màu.

## Imagery

Imagery là tối thiểu và được xử lý với cùng sự kiềm chế như hệ thống type. Một panel tối, gradient nhẹ xuất hiện trong hero — bề mặt của nó gần như vô hình, gợi ý một product hoặc device rendering hơn là một bức ảnh. Không lifestyle photography, không illustration, không decorative graphics. Trọng lượng thị giác của trang đến hoàn toàn từ typography và khoảng trắng. Nếu hình ảnh xuất hiện trên inner pages, chúng sẽ có độ tương phản cao, được cắt sát, và nằm trên cùng canvas #000000 không khung hoặc border.

## Layout

Trang là full-bleed không có ràng buộc container — text và các element chảy edge-to-edge trên viewport rộng (1440px+ target). Mẫu hero là một split ba cột bất đối xứng: display headline căn trái, một dark elevated panel ở giữa, và một headline phụ ('Make') căn phải với metadata annotations trôi nổi ở lề. Nhịp điệu section dùng vertical gaps rộng (96px+) không có divider nhìn thấy — sự phân cách là không gian, không phải cấu trúc. Navigation là một hàng text tối giản ở trên cùng, không phải bar với background fill. Mật độ tổng thể thấp: lượng lớn khoảng đen, ít element trên mỗi màn hình, và mỗi element có không gian để thở. Grid lỏng lẻo — columns được ngụ ý bằng alignment, không phải bằng đường kẻ nhìn thấy.

## Agent Prompt Guide

**Quick Color Reference**
- text: #ffffff
- background: #000000
- border: #ffffff
- accent: không có accent color (achromatic system)
- primary action: không có màu CTA riêng biệt
- surface elevation: #252525

**Example Component Prompts**

1. Tạo một hero section: nền #000000, full-bleed. Headline PP Eiko 88px weight 240 căn trái màu #ffffff, line-height 0.80, letter-spacing -0.02em nội dung 'We Make Interfaces'. Cột giữa: một panel bo tròn #252525, border-radius 50px, rộng khoảng 380px, cao 500px. Lề phải: annotation Basis Grotesque Pro 12px weight 350 trôi nổi màu #ffffff ('EST 2006', '12:32 EDT').

2. Tạo một navigation bar: hàng text tối giản trên nền #000000. Basis Grotesque Pro 16px weight 400 màu #ffffff, các item căn trái với gap 24px, không background fill, không border.

3. Tạo một ghost button: nền trong suốt trên canvas #000000, text #ffffff ở Basis Grotesque Pro 16px weight 400, border-radius 50px, padding 16px ngang / 8px dọc. Không border, không shadow.

4. Tạo một metadata label: Basis Grotesque Pro 12px weight 350 màu #ffffff, đặt như một annotation nhỏ trôi nổi ở lề của layout nội dung. Không background, không border — chỉ sự hiện diện typographic.

5. Tạo một dark elevated card: fill #252525 trên canvas #000000, border-radius 50px, padding 24px. Không shadow, không border. Body text bên trong màu #ffffff ở Basis Grotesque Pro 16px weight 400, line-height 1.76.

## Similar Brands

- **Ueno** — Cùng cách tiếp cận editorial-agency: canvas đen, type quá khổ, UI chrome tối giản, metadata-style annotations
- **Locomotive** — Dark-mode agency portfolio với cặp serif/sans-serif type và khoảng trắng rộng rãi
- **Resn** — Thẩm mỹ agency thử nghiệm với achromatic palette và triết lý typography-as-hero
- **Ramotion** — Dark-canvas design studio site với màu sắc kiềm chế và layout dẫn dắt bởi type
- **Manual** — Phong cách trình bày agency editorial: nền đen, serif nhẹ cỡ lớn, micro-typography cho metadata

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void: #000000;
  --color-bone: #ffffff;
  --color-charcoal: #252525;

  /* Typography — Font Families */
  --font-basis-grotesque-pro: 'Basis Grotesque Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-eiko: 'PP Eiko', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: -0.12px;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-display: 88px;
  --leading-display: 0.8;
  --tracking-display: -1.76px;

  /* Typography — Weights */
  --font-weight-w240: 240;
  --font-weight-w350: 350;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;

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

  /* Border Radius */
  --radius-full: 50px;
  --radius-full-2: 1000px;

  /* Named Radii */
  --radius-cards: 50px;
  --radius-pills: 1000px;
  --radius-buttons: 50px;

  /* Surfaces */
  --surface-void: #000000;
  --surface-charcoal: #252525;
  --surface-bone: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #000000;
  --color-bone: #ffffff;
  --color-charcoal: #252525;

  /* Typography */
  --font-basis-grotesque-pro: 'Basis Grotesque Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-eiko: 'PP Eiko', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: -0.12px;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-display: 88px;
  --leading-display: 0.8;
  --tracking-display: -1.76px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;

  /* Border Radius */
  --radius-full: 50px;
  --radius-full-2: 1000px;
}
```