# KeepGrading

> KeepGrading — Style Reference

## Prompt Content

```
# KeepGrading — Style Reference
> Polaroids rải rác trong phòng tối

**Theme:** dark

KeepGrading là một portfolio editorial mang phong cách phòng tối: một canvas gần như đơn sắc hoàn toàn, nơi các bức ảnh trôi nổi như những khung hình rải rác trong khoảng không sâu thẳm. UI được thiết kế lặng lẽ có chủ đích để hình ảnh lên tiếng — chỉ có display type Cabinet Grotesk, đường viền trắng mảnh 1px, và một pill-shaped ghost control duy nhất làm thành phần giao diện. Không có điểm nhấn màu sắc, không gradient, không đổ bóng; toàn bộ hệ thống phân cấp thị giác được dẫn dắt bởi độ tương phản, tỷ lệ và khoảng trắng giữa các bức ảnh. Mật độ thoải mái nhưng nhịp dọc lỏng lẻo, với khoảng thở 48px giữa các dải và các khung hình được giữ cố định bởi một đường viền trắng 1px duy nhất. Các component là tối giản — một nav toggle hình tròn, logo wordmark, các thẻ ảnh nổi với góc bo mềm 160px, và pill buttons với bán kính 9999px — để nhiếp ảnh chiếm ưu thế trong trải nghiệm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Studio White | `#f8f8f8` | `--color-studio-white` | Văn bản chính, viền ghost-button, đường viền khung ảnh, nét nav icon — giọng nói ánh sáng duy nhất trong căn phòng tối |
| Void Black | `#080808` | `--color-void-black` | Canvas trang, nền phía sau mọi thứ, phần điền khung ảnh giữa các bức ảnh |
| Pure Black | `#000000` | `--color-pure-black` | Phần điền SVG icon, lớp bề mặt sâu nhất cho đồ họa inline và các dấu trang trí |
| Bone White | `#f0f0f0` | `--color-bone-white` | Văn bản phụ mềm mại và các nét viền mảnh hỗ trợ khi màu trắng tinh khiết cảm thấy quá lâm sàng |
| Pewter Border | `#2a2a2a` | `--color-pewter-border` | Đường phân cách tương phản thấp và cạnh khung không hoạt động, lùi vào khoảng không |

## Tokens — Typography

### Cabinet Grotesk — Display thương hiệu và logo wordmark — headline 96px weight 400 là phản quy ước; không đậm, không thủ thuật display, chỉ một weight duy nhất được đẩy lên kích thước hoành tráng, tạo cảm giác tự tin qua sự kiềm chế. Cũng được dùng ở 24px cho subheading ngắn và 16px cho nav labels. Typeface tùy chỉnh này mang toàn bộ nhận diện thương hiệu. · `--font-cabinet-grotesk`
- **Thay thế:** General Sans, Migra, Söhne
- **Weights:** 400
- **Kích thước:** 16px, 20px, 24px, 96px
- **Line height:** 1.0–1.5
- **Vai trò:** Display thương hiệu và logo wordmark — headline 96px weight 400 là phản quy ước; không đậm, không thủ thuật display, chỉ một weight duy nhất được đẩy lên kích thước hoành tráng, tạo cảm giác tự tin qua sự kiềm chế. Cũng được dùng ở 24px cho subheading ngắn và 16px cho nav labels. Typeface tùy chỉnh này mang toàn bộ nhận diện thương hiệu.

### Inter — Body text và supporting copy ở 16px và 20px, cả hai đều ở weight 400 — không có biến thể bold nào được dùng, hệ thống giữ một weight duy nhất ngay cả để nhấn mạnh, để kích thước và màu sắc làm công việc phân cấp · `--font-inter`
- **Thay thế:** system-ui, -apple-system, Helvetica Neue
- **Weights:** 400
- **Kích thước:** 16px, 20px
- **Line height:** 1.4–1.5
- **Vai trò:** Body text và supporting copy ở 16px và 20px, cả hai đều ở weight 400 — không có biến thể bold nào được dùng, hệ thống giữ một weight duy nhất ngay cả để nhấn mạnh, để kích thước và màu sắc làm công việc phân cấp

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.4 | — | `--text-body` |
| subheading | 20px | 1.5 | — | `--text-subheading` |
| heading-lg | 24px | 1.33 | — | `--text-heading-lg` |
| display | 96px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 8px

**Mật độ:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 12 | 12px | `--spacing-12` |
| 15 | 15px | `--spacing-15` |
| 24 | 24px | `--spacing-24` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 9999px |
| cards | 160px |
| buttons | 9999px |

### Layout

- **Section gap:** 48px
- **Card padding:** 24px
- **Element gap:** 15px

## Components

### Ghost Pill Button
**Vai trò:** Primary navigation/action control

Pill có viền với border 1px solid #f8f8f8, border-radius 9999px, fill trong suốt để lộ canvas tối phía sau. Label bằng Inter 16px weight 400, #f8f8f8. Internal padding 12px 24px. Icon mũi tên dẫn ở cuối với nét vẽ #f8f8f8 1px. Không có fill state, không có hover glow — button truyền đạt tính tương tác hoàn toàn qua đường viền của nó.

### Circular Nav Toggle
**Vai trò:** Menu trigger ở góc trên bên phải

Hình tròn đường kính 160px với border 1px solid #f8f8f8, fill trong suốt. Glyph dấu trừ hoặc hamburger ở giữa, màu #f8f8f8, nét vẽ 1px. Nằm sát cạnh canvas, không có nền hoặc bóng.

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

‘KEEPGRADING’ được đặt bằng Cabinet Grotesk 96px / 1.0 line-height, weight 400, #f8f8f8. Kerning ngang chặt; wordmark có thể bị cắt hoặc mở rộng ra ngoài cạnh viewport để tạo sự căng thẳng editorial. Không có tagline, không có biểu tượng — chỉ riêng typeface đã mang thương hiệu.

### Floating Image Frame
**Vai trò:** Thẻ ảnh rải rác trên canvas

Ảnh được bọc trong border 1px solid #f8f8f8, border-radius 160px (góc rất mềm, không hẳn là hình tròn). Không fill, không bóng, không padding — ảnh nằm trực tiếp bên trong cạnh viền. Nhiều khung hình được đặt ở các offset và kích thước khác nhau trên viewport; sự sắp xếp rải rác là pattern layout, không phải grid.

### Canvas Layer
**Vai trò:** Bề mặt nền cho toàn bộ trang

Fill #080808 đặc, phủ kín toàn bộ viewport. Không texture, không gradient, không noise. Tất cả các element khác — văn bản, khung hình, controls — nổi trên bề mặt này với khoảng thở dọc 48px giữa các dải.

### Section Spacer
**Vai trò:** Nhịp dọc giữa các dải nội dung

Khoảng trống dọc 48px trên canvas #080808 giữa các cụm nội dung. Không có đường phân cách nhìn thấy được; sự phân tách đạt được hoàn toàn qua whitespace, duy trì bầu không khí phòng tối.

### Nav Label
**Vai trò:** Văn bản điều hướng phụ

Cabinet Grotesk 16px weight 400, #f8f8f8, đi kèm với circular nav toggle. Xử lý chữ hoa toàn bộ với letter-spacing rộng rãi để tạo nhịp editorial.

## Do's and Don'ts

### Do
- Sử dụng #f8f8f8 cho tất cả văn bản, viền và nét icon trên canvas #080808 — không bao giờ đưa điểm nhấn màu sắc để nhấn mạnh.
- Đặt display headlines bằng Cabinet Grotesk 96px weight 400, line-height 1.0; weight duy nhất ở kích thước hoành tráng là chữ ký.
- Sử dụng border-radius 9999px cho tất cả buttons, tags và nav toggle để duy trì vốn từ vựng hình dạng pill/circle.
- Sử dụng border-radius 160px cho khung ảnh để giữ góc mềm nhưng khác biệt so với controls dạng pill hoàn toàn.
- Duy trì khoảng cách dọc tối thiểu 48px giữa các dải nội dung; để whitespace phân tách các section thay vì divider hay bóng.
- Giữ tất cả UI chrome ở weight 400 trên cả Cabinet Grotesk và Inter; hệ thống phân cấp đến từ kích thước, không phải weight.
- Đặt các khung ảnh như các element nổi rải rác với offset và kích thước khác nhau thay vì căn chỉnh chúng vào một grid nghiêm ngặt.

### Don't
- Không đưa bất kỳ màu thương hiệu, điểm nhấn hay gradient nào — khoảng không đơn sắc chính là thương hiệu.
- Không thêm drop shadows, glows, hay bất kỳ hiệu ứng độ cao nào — chiều sâu đến từ layering và độ tương phản đơn thuần.
- Không sử dụng weight bold (600+) hoặc semibold để nhấn mạnh; thay vào đó, chuyển đổi kích thước hoặc màu sắc.
- Không sử dụng góc nhọn (bán kính 0–8px) trên bất kỳ element nhìn thấy nào — tất cả bề mặt phải được bo tròn dạng pill hoặc cong mềm mại.
- Không áp dụng background fill cho buttons; kiểu ghost outlined là cách xử lý button duy nhất.
- Không giới hạn trang ở một cột max-width; canvas đen full-bleed là thiết yếu cho cảm giác phòng tối.
- Không thêm icons, badges, hay đồ họa trang trí vào UI chrome — type, borders và ảnh là những element thị giác duy nhất.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Void Canvas | `#080808` | Nền trang full-bleed; lớp cơ sở mà mọi thứ nổi trên đó |
| 1 | Deep Surface | `#061c32` | Panel xanh đậm hiếm khi xuất hiện cho nội dung cần hơi nhô lên khỏi khoảng không (được phát hiện trong các cặp tương phản) |
| 2 | Mid Surface | `#1d2d44` | Bề mặt card hoặc modal được nâng lên cho các khối nội dung phân lớp |

## Elevation

Không có bóng. Không có glows. Không có hiệu ứng drop-shadow trên bất kỳ element nào. Chiều sâu và sự phân tách đạt được độc quyền thông qua border 1px #f8f8f8, whitespace dọc (khoảng cách 48px) và thứ tự z của các khung ảnh rải rác. Ẩn dụ phòng tối đòi hỏi không có gì đổ bóng — khoảng không là phẳng và vô hạn.

## Imagery

Nhiếp ảnh là nội dung thị giác chính. Các bức ảnh màu lớn, đầy đủ về con người, phương tiện và cảnh sinh hoạt được trình bày dưới dạng các khung nổi rải rác trên canvas đen ở nhiều tỷ lệ và vị trí khác nhau. Cách xử lý mang phong cách tài liệu/chân thực hơn là thương mại dàn dựng — khoảnh khắc xã hội bên hồ bơi, một chiếc sedan xanh trên đường ven biển, cảnh sinh hoạt nội thất. Các khung được cắt sát với border trắng 1px và corner radius 160px; không có chú thích hoặc text overlay trên chính ảnh. Layout đọc như một spread photo-editorial hơn là một product gallery — ảnh được đặt off-grid, một phần chồng lên cạnh viewport, và ở các kích thước khác nhau để tạo nhịp thị giác trên toàn trang.

## Layout

Canvas tối full-bleed không có ràng buộc max-width; nội dung mở rộng đến các cạnh viewport. Hero chính là trang — không có headline hoặc CTA block tập trung. Thay vào đó, một wordmark logo lớn nằm ở góc trên bên trái (có thể bị cắt ra ngoài viewport), một circular nav toggle ở góc trên bên phải, và phần còn lại của viewport được lấp đầy bởi các khung ảnh rải rác ở nhiều vị trí và kích thước khác nhau. Một ghost pill button duy nhất (‘Show me more’) xuất hiện ở phần dưới, căn giữa. Điều hướng là tối thiểu — một thanh trên cùng chỉ với logo và hamburger, không có menu ngang. Nội dung chảy như một scroll dọc qua nhiều cụm ảnh rải rác hơn, được phân tách bởi khoảng cách 48px. Không có cấu trúc section truyền thống; trang đọc như một bề mặt phòng tối liên tục với các bức ảnh được ghim vào đó ở các offset editorial.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #f8f8f8
- background: #080808
- border: #f8f8f8 (1px)
- muted border: #2a2a2a
- accent: không có (hệ thống đơn sắc)
- primary action: không có màu CTA riêng biệt

Ví dụ Component Prompts:
1. Tạo một hero section: canvas #080808 full-bleed. Wordmark ‘KEEPGRADING’ ở góc trên bên trái, Cabinet Grotesk 96px weight 400, #f8f8f8, line-height 1.0, được phép cắt ở cạnh viewport. Nút nav hình tròn ở góc trên bên phải: đường kính 160px, border 1px solid #f8f8f8, fill trong suốt, glyph hamburger căn giữa với nét vẽ #f8f8f8 1px.
2. Tạo một floating image card: ảnh với border 1px solid #f8f8f8, border-radius 160px, không fill, không bóng, không padding — ảnh lấp đầy khung hình từ cạnh này sang cạnh kia. Đặt ở offset không theo grid trên canvas.
3. Tạo một ghost pill button: background trong suốt, border 1px solid #f8f8f8, border-radius 9999px, padding 12px 24px. Label bằng Inter 16px weight 400 #f8f8f8, theo sau là icon mũi tên phải với nét vẽ #f8f8f8 1px.
4. Tạo một scattered photo grid: 3–5 khung ảnh ở các kích thước khác nhau (rộng 300px–600px), được đặt với offset editorial (không căn chỉnh theo grid), cách nhau ít nhất 48px khoảng cách dọc, mỗi khung có corner radius 160px và border 1px #f8f8f8, trên canvas #080808.
5. Tạo một section spacer: dải #080808 trống cao 48px giữa các cụm nội dung, không có đường phân cách nhìn thấy được, không có bóng.

## Similar Brands

- **Vincent Moschetti portfolio sites** — Cùng canvas tối full-bleed với các khung ảnh rải rác và xử lý type đơn sắc tối giản
- **Studio Bruch** — Layout editorial ưu tiên ảnh với các khung nổi trên khoảng không đen và display typography một weight
- **Forma editorial** — Custom display type tỷ lệ lớn trên canvas gần đen với nhiếp ảnh là nội dung màu sắc duy nhất
- **Pentagram case studies** — Branding wordmark chiếm ưu thế ở góc trên bên trái với circular nav toggle và chrome tối giản xung quanh tác phẩm được trưng bày
- **Locomotive Mtl** — Bề mặt tối full-bleed với hình ảnh editorial rải rác và ghost pill controls

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-studio-white: #f8f8f8;
  --color-void-black: #080808;
  --color-pure-black: #000000;
  --color-bone-white: #f0f0f0;
  --color-pewter-border: #2a2a2a;

  /* Typography — Font Families */
  --font-cabinet-grotesk: 'Cabinet Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.4;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.33;
  --text-display: 96px;
  --leading-display: 1;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-24: 24px;
  --spacing-48: 48px;

  /* Layout */
  --section-gap: 48px;
  --card-padding: 24px;
  --element-gap: 15px;

  /* Border Radius */
  --radius-full: 160px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-nav: 9999px;
  --radius-cards: 160px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-void-canvas: #080808;
  --surface-deep-surface: #061c32;
  --surface-mid-surface: #1d2d44;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-studio-white: #f8f8f8;
  --color-void-black: #080808;
  --color-pure-black: #000000;
  --color-bone-white: #f0f0f0;
  --color-pewter-border: #2a2a2a;

  /* Typography */
  --font-cabinet-grotesk: 'Cabinet Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.4;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.33;
  --text-display: 96px;
  --leading-display: 1;

  /* Spacing */
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-24: 24px;
  --spacing-48: 48px;

  /* Border Radius */
  --radius-full: 160px;
  --radius-full-2: 9999px;
}
```