# Heavyweight

> # Heavyweight — Style Reference

**Heavyweight** — Style Reference

## Prompt Content

```
# Heavyweight — Style Reference
> Kho lưu trữ mẫu giấy. Một bức tường các letterform được chụp ảnh trên nền giấy có họa tiết, treo trên tường gallery màu trắng ngà mát với khung viền siêu mảnh.

**Theme:** light

Heavyweight xử lý các typeface của mình như những vật thể bảo tàng: mỗi card trưng bày một mẫu chụp ảnh của chữ cỡ lớn đặt trong không gian vật lý, tràn đầy card từ mép này sang mép kia. Phần chrome xung quanh tan biến thành một thanh navigation mỏng, các đường viền siêu mảnh, và một sans tùy chỉnh duy nhất (Nuckle) ở cỡ chỉ 14–16px — để các mẫu chữ đảm nhận mọi quyết định thị giác. Bảng màu gần như đơn sắc: canvas trắng ngà mát (#f3f5fa), bề mặt card trắng, mực gần đen (#222222), với một màu xanh bạc hà tươi sáng duy nhất (#39d17f) dành riêng cho các tag phát hành mới. Một border-radius 11px khác thường nằm giữa phong cách editorial và soft-modern, và grid 3 cột thở với khoảng cách 12px thoải mái trong khi mật độ specimen dày đặc giữ cho trang luôn đầy đặn về mặt thị giác.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Canvas Mist | `#f3f5fa` | `--color-canvas-mist` | Nền trang, bề mặt cơ sở chứa mọi thứ. Trắng ngà mát với một chút xanh nhẹ — khác biệt so với trắng tinh khiết để các card trắng trông như được nâng lên mà không cần đổ bóng |
| Card White | `#ffffff` | `--color-card-white` | Bề mặt card, vùng chứa specimen, nền navigation. Tạo bước nâng từ canvas → card thông qua tương phản bề mặt đơn thuần |
| Press Black | `#222222` | `--color-press-black` | Văn bản chính, đường viền cấu trúc, khung card, đường viền nút. Gần đen (không phải #000 thuần) để trông như mực in thay vì khoảng trống trên nền canvas mát |
| Hairline Char | `#2d2d2d` | `--color-hairline-char` | Đường viền phụ, dải phân cách nav, đường kẻ cấu trúc tinh tế. Tối hơn Press Black một bậc để tạo phân cấp giữa khung chính và phụ |
| Mute Slate | `#888888` | `--color-mute-slate` | Văn bản phụ — số lượng style, nhãn mô tả, copy hỗ trợ. Tạo lớp thông tin cấp ba bên dưới tên font chính |
| New Mint | `#39d17f` | `--color-new-mint` | Điểm nhấn viền xanh cho tag, dải phân cách, và cạnh UI được focus. Không nâng nó lên thành màu CTA chính |

## Tokens — Typography

### Nuckle — Toàn bộ UI chrome — navigation, nhãn card, danh sách weight, tiêu đề section, số lượng style. Sans tùy chỉnh duy nhất đảm nhận mọi thành phần văn bản bên ngoài các typeface được giới thiệu. Sự hạn chế cực đoan về kích thước (chỉ hai cỡ) là có chủ đích: càng ít quyết định mà UI typeface đưa ra, thì càng nhiều không gian thị giác cho các typeface sản phẩm chiếm giữ. Weight 500 cho nhãn và nhấn mạnh, weight 400 cho thông tin phụ. · `--font-nuckle`
- **Thay thế:** Inter, hoặc geometric humanist sans tương tự ở các weight phù hợp
- **Weights:** 400, 500
- **Kích thước:** 14px, 16px
- **Line height:** 1.00, 1.14, 1.25
- **Letter spacing:** 0.0130em ở 14px, 0.0140em ở 16px — tracking hơi dương, 'quyết định' typographic duy nhất mà UI đưa ra ngoài kích thước và weight. Trái ngược với trực giác cho một UI gần như đơn sắc; tracking mở rộng các letterform đủ để tạo cảm giác editorial thay vì nén chặt.
- **Vai trò:** Toàn bộ UI chrome — navigation, nhãn card, danh sách weight, tiêu đề section, số lượng style. Sans tùy chỉnh duy nhất đảm nhận mọi thành phần văn bản bên ngoài các typeface được giới thiệu. Sự hạn chế cực đoan về kích thước (chỉ hai cỡ) là có chủ đích: càng ít quyết định mà UI typeface đưa ra, thì càng nhiều không gian thị giác cho các typeface sản phẩm chiếm giữ. Weight 500 cho nhãn và nhấn mạnh, weight 400 cho thông tin phụ.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.14 | 0.18px | `--text-caption` |
| body | 16px | 1.25 | 0.22px | `--text-body` |

## Tokens — Spacing & Shapes

**Density:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 18 | 18px | `--spacing-18` |
| 30 | 30px | `--spacing-30` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tất cả | 11px |
| tags | 11px |
| cards | 11px |
| buttons | 11px |

### Layout

- **Section gap:** 64px
- **Card padding:** 12px
- **Element gap:** 12px

## Components

### Font Specimen Card
**Vai trò:** Đơn vị nội dung chính — hiển thị một typeface với specimen chụp ảnh full-bleed

Bề mặt trắng (#ffffff) trên nền canvas #f3f5fa. Viền 1px #222222, border-radius 11px. Ảnh specimen lớn tràn đầy phần trên của card từ mép này sang mép kia, được cắt theo radius 11px. Bên dưới ảnh: padding 12px tất cả các cạnh. Tên font bằng Nuckle 16px/1.25 weight 500 #222222, tiếp theo là số lượng style 16px weight 400 #888888 (định dạng: 'Name (N styles)'). Danh sách weight bên dưới ở 14px/1.14, với các weight có sẵn ở weight 500 và không có sẵn ở weight 400 #888888.

### Top Navigation Bar
**Vai trò:** Header toàn trang với logo, link section, và tài khoản/giỏ hàng

Toàn chiều rộng, nền trắng (#ffffff), viền dưới 1px #2d2d2d, padding dọc 8px. Bên trái: 14px Nuckle weight 500 #222222 'Heavyweight' + weight 400 #888888 'Digital Type Foundry'. Giữa: 14px Nuckle weight 400 #222222 các link 'Fonts | In Use | Projects | Stuff | Information' cách nhau bởi margin phải 2px. Bên phải: 14px Nuckle weight 400 #222222 'Account | Cart 0'.

### New Release Tag
**Vai trò:** Đánh dấu các typeface mới phát hành trong grid specimen

Văn bản 14px Nuckle weight 500 #39d17f hiển thị 'New', tùy chọn có một chấm 4px #39d17f phía trước. Không nền, không viền, không padding. Đặt inline bên cạnh tên font trong header của specimen card. #39d17f là màu sắc duy nhất trong hệ thống — sự khan hiếm của nó khiến các bản phát hành mới được nhận diện ngay lập tức mà không cần hình dạng pill hay nền fill.

### Ghost Button
**Vai trò:** Các control tương tác cho bộ lọc weight và lựa chọn

Nền #f3f5fa, viền 1px #222222, border-radius 11px. Văn bản 14px Nuckle weight 400 #222222. Padding dọc 7px, padding ngang 10–18px. Khi hover/active: đảo ngược thành nền #222222 với văn bản #ffffff. Không đổ bóng, không phức tạp chuyển tiếp — sự đảo ngược diễn ra tức thì.

### Section Header Label
**Vai trò:** Nhãn văn bản nhỏ giới thiệu một section grid (ví dụ: 'Fonts')

14px Nuckle weight 500 #222222, căn trái. Padding trên/dưới 5px, padding trái 8px. Nằm phía trên grid card với trọng lượng thị giác tinh tế, không cạnh tranh với các specimen bên dưới.

### Weight Label List
**Vai trò:** Liệt kê tất cả các weight/width có sẵn cho một typeface bên dưới ảnh specimen

14px Nuckle, weight 400 #222222 cho weight có sẵn, weight 500 cho weight đang được chọn hoặc nhấn mạnh. Luồng ngang với wrap tự nhiên. Margin-bottom 4px giữa các dòng. Tên weight là từ vựng riêng của sản phẩm (Condensed, SemiBold, v.v.) được hiển thị bằng chính thiết kế của typeface đó.

### Hairline Divider
**Vai trò:** Phân cách các section nội dung và đóng khung element

1px solid #2d2d2d (tinh tế) hoặc #222222 (cấu trúc). Được dùng làm viền card, viền dưới nav, và dải phân cách section. Không đổ bóng, không khoảng cách — bản thân đường kẻ là yếu tố phân cách. Hệ thống dựa vào các đường viền siêu mảnh này cho mọi cấu trúc thị giác.

### Style Count Indicator
**Vai trò:** Hiển thị số lượng style trong một họ typeface

14px Nuckle weight 400 #888888, inline với tên font. Định dạng: '(N styles)' trong ngoặc đơn. Màu xám tắt tạo lớp thông tin phụ không cạnh tranh với tên font chính.

### Logo Mark
**Vai trò:** Nhận diện thương hiệu ở góc trên bên trái của navigation

Icon hình học nhỏ (trông giống một dấu tròn/trừu tượng) theo sau là wordmark 'Heavyweight' bằng 14px Nuckle weight 500 #222222. Dấu hiệu là một hình dạng hình học đơn giản — không có minh họa phức tạp, không màu sắc, không tô điểm.

## Do's and Don'ts

### Nên làm
- Sử dụng #f3f5fa làm canvas trang và #ffffff cho bề mặt card — sự tương phản tinh tế giữa hai màu là nền tảng của hệ thống phân cấp không gian
- Sử dụng Nuckle 16px/1.25 weight 500 cho tiêu đề card và 14px/1.14 weight 400 cho thông tin phụ
- Sử dụng border-radius 11px trên tất cả card, nút và tag — radius này là dấu ấn của hệ thống và phân biệt nó với các quy ước SaaS 4px hoặc 8px tiêu chuẩn
- Sử dụng #39d17f độc quyền cho tag 'New' — không bao giờ dùng cho hành động, link, hoặc điểm nhấn trang trí
- Sử dụng viền 1px #222222 hoặc #2d2d2d để phân cách — không bao giờ chỉ dùng đổ bóng hoặc thay đổi màu nền
- Để ảnh specimen tràn đầy card từ mép này sang mép kia — type là sản phẩm, không phải chrome
- Sử dụng khoảng cách 12px giữa các element và card padding 12px — mật độ thoải mái mà không có quá nhiều khoảng trống

### Không nên làm
- Không thêm màu sắc bổ sung — bảng màu gần như đơn sắc là bản sắc của hệ thống và bất kỳ điểm nhấn thứ hai nào sẽ làm loãng tín hiệu của tag 'New'
- Không sử dụng đổ bóng hoặc hiệu ứng nâng cao — sự phân cách đạt được thông qua viền siêu mảnh và tương phản bề mặt
- Không sử dụng giá trị border-radius khác 11px — 4px hoặc 8px tiêu chuẩn sẽ phá vỡ cảm giác editorial
- Không hiển thị tag 'New' với bất kỳ màu nào khác ngoài #39d17f, và không cho nó nền fill hoặc hình dạng pill
- Không sử dụng nhiều hơn hai kích thước type trong UI (14px và 16px) — sự hạn chế để các typeface được giới thiệu chiếm ưu thế trong trường thị giác
- Không thêm gradient trang trí, họa tiết, hoặc ảnh nền vào chrome — canvas luôn là #f3f5fa phẳng
- Không sử dụng nút màu sắc đã fill — hệ thống không có màu CTA riêng biệt; tất cả hành động đều là ghost/outlined với fill #f3f5fa và viền #222222

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Canvas | `#f3f5fa` | Nền trang — bức tường gallery |
| 2 | Card Surface | `#ffffff` | Card specimen, thanh navigation — các vật thể được gắn |
| 3 | Ink | `#222222` | Bề mặt đảo ngược cho specimen tối hoặc xử lý dark-mode tiềm năng |

## Elevation

Hệ thống tránh hoàn toàn đổ bóng. Phân cấp không gian được tạo ra thông qua tương phản bề mặt (canvas trắng ngà mát → card trắng) và viền 1px (#222222 hoặc #2d2d2d). Card nằm sát bề mặt — giống như cách nhãn bảo tàng đặt bên cạnh vật thể thay vì nổi lên trên chúng. Khi cần chiều sâu, hệ thống đảo ngược: bề mặt #222222 với văn bản #f3f5fa thay thế cho mẫu đổ bóng + nâng lên điển hình. Cách tiếp cận editorial-print này giữ cho chrome vô hình và để các specimen type chiếm ưu thế.

## Imagery

Mỗi card có một specimen chụp ảnh full-bleed của type đặt trong không gian vật lý — in trên giấy, dập nổi trên bìa cứng, sơn trên tường. Các specimen là ảnh được art-direct, không phải render kỹ thuật số: họa tiết giấy có thể nhìn thấy, chấm in, và letterform ba chiều bắt ánh sáng. Specimen 'Atlantic' hiển thị type dập nổi trên bìa cứng màu nâu; specimen 'Animo' hiển thị type trắng trên bề mặt in tối; specimen 'Cigars' là một crop cận cảnh chặt chẽ của một chữ serif đơn lẻ màu xám. Đây là sản phẩm — UI xung quanh tan biến để chúng chiếm ưu thế. Không minh họa, không ảnh trang trí. Icon duy nhất là các dấu hình học đơn giản trong navigation. Ngôn ngữ thị giác là editorial-print: các artifact được chụp ảnh trên tường gallery, không phải đồ họa gốc màn hình.

## Layout

Grid card 3 cột toàn chiều rộng trên nền canvas #f3f5fa. Mỗi card có chiều rộng gần bằng nhau với khoảng cách 12px giữa các card. Card được sắp xếp theo thứ tự alphabet theo tên typeface. Một thanh navigation trên mỏng (nền trắng, viền dưới 1px #2d2d2d) trải dài toàn bộ chiều rộng viewport. Không sidebar, không mega-menu, không navigation phụ. Section đầu tiên hiển thị phần đầu của grid font; các section tiếp theo tiếp tục grid với nhiều typeface hơn. Nhịp điệu section được thiết lập bởi chính grid card thay vì các dải hoặc dải phân cách xen kẽ. Trang thở với khoảng cách element 12px thoải mái và padding section 64px, nhưng mật độ specimen dày đặc giữ cho trang luôn đầy đặn về mặt thị giác ở mọi vị trí cuộn.

## Agent Prompt Guide

Tham chiếu màu nhanh:
- ink: #222222
- canvas: #f3f5fa
- surface: #ffffff
- border: #2d2d2d
- mute: #888888
- new tag: #39d17f
- primary action: không có màu CTA riêng biệt

Ví dụ Component Prompts:

1. Tạo một font specimen card: bề mặt trắng (#ffffff), viền 1px #222222, border-radius 11px. Ảnh specimen lớn tràn đầy phần trên của card từ mép này sang mép kia. Bên dưới ảnh, padding 12px. Tên font bằng Nuckle 16px/1.25 weight 500 #222222, tiếp theo là '(N styles)' ở 16px weight 400 #888888. Danh sách weight bên dưới ở 14px/1.14 — weight có sẵn ở weight 500, không có sẵn ở weight 400 #888888.

2. Xây dựng thanh navigation trên: toàn chiều rộng, nền trắng (#ffffff), viền dưới 1px #2d2d2d, padding dọc 8px. Bên trái: 14px Nuckle weight 500 #222222 'Heavyweight' + weight 400 #888888 'Digital Type Foundry'. Giữa: 14px Nuckle weight 400 #222222 các link cách nhau bằng dấu pipe. Bên phải: 14px Nuckle weight 400 #222222 'Account | Cart 0'.

3. Thiết kế một new-release tag: văn bản 14px Nuckle weight 500 #39d17f hiển thị 'New', có một chấm 4px #39d17f phía trước. Không nền, không viền, không padding. Đặt inline bên cạnh tên font trong header của specimen card.

4. Tạo một ghost button: nền #f3f5fa, viền 1px #222222, border-radius 11px. Văn bản 14px Nuckle weight 400 #222222. Padding dọc 7px, padding ngang 18px. Khi hover: đảo ngược thành nền #222222 với văn bản #ffffff.

5. Tạo một section grid card 3 cột: nền canvas #f3f5fa, khoảng cách 12px giữa các card. Mỗi card là một font specimen như mô tả ở trên. Padding dọc 64px phía trên và phía dưới grid.

## Similar Brands

- **Klim Type Foundry** — Cùng cách tiếp cận grid specimen-card với chrome đơn sắc và type được xử lý như artifact chụp ảnh
- **Pangram Pangram** — UI tối giản với specimen type làm sản phẩm thị giác và cấu trúc grid dạng card tương tự
- **Commercial Type** — Trình bày specimen editorial với ảnh type cỡ lớn và UI chrome hạn chế
- **Ohno Type** — Canvas trắng ngà mát, viền siêu mảnh, layout type-forward không có chrome trang trí
- **Dinamo** — Grid specimen với type chụp ảnh, navigation tối giản, bảng màu đơn sắc với điểm nhấn có chọn lọc

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-mist: #f3f5fa;
  --color-card-white: #ffffff;
  --color-press-black: #222222;
  --color-hairline-char: #2d2d2d;
  --color-mute-slate: #888888;
  --color-new-mint: #39d17f;

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

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.14;
  --tracking-caption: 0.18px;
  --text-body: 16px;
  --leading-body: 1.25;
  --tracking-body: 0.22px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-18: 18px;
  --spacing-30: 30px;

  /* Layout */
  --section-gap: 64px;
  --card-padding: 12px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-lg: 11px;

  /* Named Radii */
  --radius-all: 11px;
  --radius-tags: 11px;
  --radius-cards: 11px;
  --radius-buttons: 11px;

  /* Surfaces */
  --surface-canvas: #f3f5fa;
  --surface-card-surface: #ffffff;
  --surface-ink: #222222;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-mist: #f3f5fa;
  --color-card-white: #ffffff;
  --color-press-black: #222222;
  --color-hairline-char: #2d2d2d;
  --color-mute-slate: #888888;
  --color-new-mint: #39d17f;

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

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.14;
  --tracking-caption: 0.18px;
  --text-body: 16px;
  --leading-body: 1.25;
  --tracking-body: 0.22px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-18: 18px;
  --spacing-30: 30px;

  /* Border Radius */
  --radius-lg: 11px;
}
```