# Discover

> **Khám phá — Tham khảo phong cách**

## Prompt Content

```
# Discover — Style Reference
> Type museum trên nền marble trắng — wordmark gần như đen, một thì thầm của san hô, và mọi thứ khác đều lùi về phía sau.

**Theme:** light

Fonts Ninja là một gallery gần như đơn sắc dành cho letterforms, nơi điểm nhấn màu duy nhất là một tông san hô ấm áp dùng để đánh dấu các hành động. Canvas gần như trắng và luôn giữ yên lặng; type là nhân vật chính, được trình bày ở tỉ lệ cực lớn và kết hợp với khoảng trống rộng rãi. Cards là các panel trắng bo góc mềm nổi trên nền đổ bóng nhẹ, và mọi element tương tác đều phải "kiếm" được màu sắc của nó — hầu hết UI là mực trên giấy, và màu san hô chỉ xuất hiện khi có thứ gì đó muốn được click. Mật độ dày nhưng bố cục vẫn thoáng vì margin lớn và nhịp điệu được đo bằng các bước tăng 10px và 24px thay vì các chồng 4-8px chặt chẽ.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink | `#121212` | `--color-ink` | Văn bản chính, border card, icon strokes, divider mảnh. Màu gần đen pha ấm được chọn thay vì #000 để làm mềm độ tương phản trên nền trắng mà không mất đi tính uy quyền |
| Canvas | `#ffffff` | `--color-canvas` | Border mảnh, divider, đường viền input, và cạnh card trên nền sáng. Không dùng làm màu CTA chính |
| Fog | `#dbdada` | `--color-fog` | Tông đổ bóng xung quanh, nền mờ nhạt, tạo độ nổi bề mặt tinh tế. Mang theo đổ bóng alpha 0.16 giúp nâng card lên khỏi canvas |
| Slate | `#8e8e93` | `--color-slate` | Body text phụ, metadata đã giảm độ nổi bật, border nav không active, copy trợ giúp |
| Obsidian | `#000000` | `--color-obsidian` | Border và separator tối cho bề mặt nâng cao và UI inverted. Không dùng làm màu CTA chính |
| Signal Coral | `#ee585a` | `--color-signal-coral` | Nền CTA dạng filled (action buttons, filter pills), inline text links, notification dot, hiệu ứng glow khi hover/focus. Điểm nhấn màu duy nhất — một tông đỏ ấm trên nền trắng mờ tạo cảm giác cấp bách mà không gây hấn |

## Tokens — Typography

### Aeonik — Font duy nhất trên toàn bộ UI. Weight 700 dùng cho wordmark hoành tráng và display heading cỡ lớn, weight 500 cho label và nav có độ nhấn vừa phải, weight 400 cho body và metadata. Tracking -0.011em đồng nhất ở mọi kích cỡ giúp thắt chặt các hình khối hình học và tạo cho wordmark vẻ dày đặc, gọn gàng. · `--font-aeonik`
- **Thay thế:** Inter, Satoshi, hoặc General Sans
- **Weights:** 400, 500, 700
- **Kích cỡ:** 12, 14, 16, 24, 32, 44px
- **Line height:** 1.00–1.50
- **Letter spacing:** -0.011em (đồng nhất ở mọi kích cỡ, xấp xỉ -0.13px ở 12px đến -0.48px ở 44px)
- **Vai trò:** Font duy nhất trên toàn bộ UI. Weight 700 dùng cho wordmark hoành tráng và display heading cỡ lớn, weight 500 cho label và nav có độ nhấn vừa phải, weight 400 cho body và metadata. Tracking -0.011em đồng nhất ở mọi kích cỡ giúp thắt chặt các hình khối hình học và tạo cho wordmark vẻ dày đặc, gọn gàng.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.13px | `--text-caption` |
| body-sm | 14px | 1.5 | -0.15px | `--text-body-sm` |
| body | 16px | 1.5 | -0.18px | `--text-body` |
| subheading | 24px | 1.2 | -0.26px | `--text-subheading` |
| heading-sm | 32px | 1.14 | -0.35px | `--text-heading-sm` |
| heading | 44px | 1.15 | -0.48px | `--text-heading` |
| display | 120px | 1 | -1.32px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 66 | 66px | `--spacing-66` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 32px |
| links | 16px |
| pills | 9999px |
| buttons | 32px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| xl | `rgba(72, 72, 74, 0.16) 0px 2px 32px 0px` | `--shadow-xl` |

### Layout

- **Page max-width:** 1320px
- **Section gap:** 48px
- **Card padding:** 24px
- **Element gap:** 10px

## Components

### Font Preview Card
**Vai trò:** Grid tile hiển thị một mẫu typeface

Bề mặt trắng (#ffffff) trên Canvas, border-radius 32px, đổ bóng xung quanh rgba(72,72,74,0.16) 0px 2px 32px 0px. Mẫu chữ căn giữa ở ~120px Aeonik weight 700 màu Ink (#121212) chiếm ưu thế trên card. Bên dưới: tên font ở 16px weight 500 màu Ink, foundry và số lượng style/giá ở 12-14px Slate (#8e8e93). Padding trong 24px, vùng mẫu chữ chiếm ~60% chiều cao card.

### Primary CTA Button (Filled)
**Vai trò:** Kích hoạt hành động — filter, submit, navigate

Nền Signal Coral (#ee585a), chữ trắng (#ffffff), Aeonik 500 ở 14-16px, border-radius 32px, padding dọc 16px × ngang 24px. Không border. Nằm ở độ bão hòa tối đa trên canvas đơn sắc — màu san hô là giọng nói màu sắc duy nhất trong không gian.

### Ghost Text Link
**Vai trò:** Inline navigation và các tùy chọn phụ

Chữ Signal Coral (#ee585a) ở Aeonik 500 16px kèm glyph mũi tên ngoài (↗). Không gạch chân, không background, không border. Inline trong body copy hoặc dùng làm link độc lập. Border-radius 16px trên bất kỳ container nào.

### Floating Filter Pill
**Vai trò:** Sticky filter trigger cho grid typeface

Pill dạng filled màu Signal Coral (#ee585a), chữ trắng hiển thị 'Filter typefaces' kèm icon dropdown caret, border-radius 9999px (full pill), padding dọc 10-12px × ngang 20px. Nổi trên nội dung grid ở vị trí fixed.

### Top Navigation Bar
**Vai trò:** Navigation chính của site

Nền trong suốt/Canvas, padding ngang 56px. Bên trái: icon ninja mark nhỏ. Cụm bên phải: 'Fonts' (active, weight 500 Ink), 'Bookmarks' (weight 400 Slate), icon search, icon profile, hamburger — tất cả đều là icon outlined 24px màu Ink với khoảng cách giữa các item 24-32px.

### Hero Wordmark
**Vai trò:** Tuyên ngôn thương hiệu và định danh trang

'FONTS NINJA' full-bleed đặt ở Aeonik 700 ~120px, Ink (#121212), tracking -1.32px, line-height 1.0. Trải ngang gần như edge-to-edge. Một notification dot Signal Coral 12px nằm ở góc trên bên phải của chữ 'A' cuối cùng — một điểm nhấn màu duy nhất báo hiệu 'mới' mà không cần badge hay banner.

### Notification Dot
**Vai trò:** Chỉ báo trạng thái trên wordmark và có thể trên nav elements

Hình tròn đường kính 12px, Signal Coral (#ee585a), không border, không shadow. Được đặt như một lớp phủ superscript.

### Metadata Label
**Vai trò:** Văn bản hỗ trợ — tên foundry, số lượng style, giá

Aeonik 400 ở 12-14px, Slate (#8e8e93). Bố cục hai cột trong card: descriptor căn trái, giá/số lượng style căn phải. Khoảng cách 10px giữa label và value.

### Body Paragraph
**Vai trò:** Hero subtext và copy mô tả

Aeonik 400 ở 16-24px, Ink (#121212), line-height 1.5, max-width giới hạn ở ~50-60ch. Inline links áp dụng styling Ghost Text Link.

## Do's and Don'ts

### Do
- Chỉ sử dụng Signal Coral (#ee585a) cho filled CTAs, inline text links, notification dots, và floating filter pill — không bao giờ dùng làm background wash, không dùng trên vùng bề mặt lớn
- Đặt tất cả type ở Aeonik (hoặc Inter/Satoshi thay thế) với letter-spacing -0.011em bất kể kích cỡ — tracking chặt đồng nhất là một phần của giọng nói thương hiệu
- Áp dụng border-radius 32px cho tất cả cards, buttons, và containers — bán kính lớn này là đặc trưng và định nghĩa cảm giác mềm mại, hiện đại
- Sử dụng Ink (#121212) cho tất cả văn bản và border thay vì #000000 thuần — độ ấm giúp bảng màu gần đơn sắc không bị khô cứng
- Giới hạn shadows ở token duy nhất rgba(72,72,74,0.16) 0px 2px 32px 0px, chỉ áp dụng cho cards và floating elements
- Duy trì element gap 10px và card padding 24px làm nhịp điệu cơ bản — nhảy lên 48px cho section separation
- Để wordmark hoặc display heading gánh trọng lượng thị giác; giữ UI hỗ trợ yên lặng và đơn sắc

### Don't
- Đừng thêm các accent colors bổ sung — độ sặc sỡ 1% là có chủ đích; Signal Coral là nốt màu duy nhất được phép
- Đừng dùng góc nhọn (0-4px radius) trên bất kỳ container nào — radius 32px định nghĩa hệ thống
- Đừng áp dụng drop shadows cho text, nav, hoặc inline elements — shadows chỉ dành cho cards và floating pills
- Đừng dùng #000000 thuần cho body text — luôn dùng #121212 để duy trì tỷ lệ tương phản mềm (18.7:1)
- Đừng đặt display type ở letter-spacing lỏng hoặc bình thường — tracking chặt -0.011em là bất di bất dịch
- Đừng tô các vùng background lớn bằng Signal Coral — nó mất tác động ở tỉ lệ lớn và nên vẫn là một accent chức năng nhỏ
- Đừng thêm gradients, textures, hoặc decorative imagery — hệ thống cố tình phẳng và thuần typographic

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang cơ bản, full-bleed |
| 1 | Card | `#ffffff` | Font preview tiles, content panels — cùng hex với canvas nhưng được phân tách bằng shadow |
| 2 | Shadow Tint | `#dbdada` | Màu xám xung quanh được mang trong card shadows ở alpha 0.16 |
| 3 | Action Surface | `#ee585a` | Filled CTAs, floating filter button, notification dot |

## Elevation

- **Font Preview Card:** `rgba(72, 72, 74, 0.16) 0px 2px 32px 0px`

## Imagery

Không có photography, không illustration, không abstract graphics. Nội dung hình ảnh duy nhất ngoài UI chrome là các mẫu typographic — glyph 'Aa' cỡ lớn được render trực tiếp trong giao diện như chính sản phẩm. Icons là outlined glyphs tối giản (search, profile, hamburger, ninja mark) được vẽ bằng Ink ở 24px với stroke weight mỏng đồng nhất, phong cách monoline. Wordmark đóng vai trò như hero image. Mật độ hình ảnh cực kỳ thấp — text và specimens chiếm ưu thế, phần còn lại là whitespace.

## Layout

Bố cục full-bleed với wordmark trải gần như edge-to-edge trong hero, tạo tác động typographic tối đa ngay lập tức. Bên dưới hero, một responsive grid 3 cột gồm các font preview cards với gutter rộng 24-32px. Content max-width khoảng 1320px căn giữa trên canvas. Nhịp điệu section: hero là một dải rộng duy nhất, tiếp theo là một grid section chặt chẽ hơn. Navigation là một top bar tối giản với cụm utility căn phải. Không sidebar, không mega-menu, không sticky elements ngoài floating filter pill. Trang đọc từ trên xuống dưới như sau: wordmark hoành tráng → đoạn mô tả ngắn → grid specimen dày đặc. Bất đối xứng chỉ ở tỉ lệ gần full-bleed của hero; grid bên dưới đối xứng và cách đều nhau.

## Agent Prompt Guide

**Quick Color Reference**
- text: #121212 (Ink)
- background: #ffffff (Canvas)
- border: #121212 (Ink) ở 1px
- accent: #ee585a (Signal Coral)
- primary action: #ee585a (filled action)
- muted: #8e8e93 (Slate)

**3-5 Example Component Prompts**

1. *Hero wordmark section*: Canvas trắng full-bleed. Đặt 'FONTS NINJA' ở Aeonik weight 700 120px, màu #121212, letter-spacing -1.32px, line-height 1.0, trải gần như edge-to-edge. Đặt một hình tròn đường kính 12px màu #ee585a ở góc trên bên phải của chữ cái cuối cùng làm notification dot. Bên dưới với gap 48px, thêm một body paragraph: Aeonik 400 ở 24px, #121212, line-height 1.5, max-width 60ch. Đặt inline cụm từ 'Browse our library' dưới dạng #ee585a Aeonik 500 kèm glyph mũi tên ngoài (↗).

2. *Font preview card*: Bề mặt trắng (#ffffff), border-radius 32px, shadow rgba(72,72,74,0.16) 0px 2px 32px 0px. Mẫu chữ 'Aa' căn giữa ở 120px Aeonik weight 700 màu #121212 chiếm 60% phía trên của card. Phần dưới với internal padding 24px: tên font ở Aeonik 500 16px #121212 bên trái, số lượng style ở Aeonik 400 14px #8e8e93 bên phải. Hàng thứ hai: tên foundry ở Aeonik 400 12px #8e8e93.

3. Tạo một Primary Action Button: background #ee585a, text #000000, radius 9999px, compact pill padding. Sử dụng treatment filled này cho CTA chính.

4. *Top navigation bar*: Nền trắng trong suốt, padding ngang 56px. Bên trái: icon ninja mark outlined 24px màu #121212. Cụm bên phải với gap 32px: 'Fonts' (Aeonik 500 16px #121212), 'Bookmarks' (Aeonik 400 16px #8e8e93), icon search, icon profile, icon hamburger — tất cả đều outlined 24px màu #121212.

5. *Typography grid section*: CSS grid 3 cột với gap 24px, cards như mô tả ở trên. Section padding 48px trên/dưới. Mỗi card border-radius 32px với token shadow duy nhất.

## Similar Brands

- **Pangram Pangram** — Cùng cách xử lý gallery gần đơn sắc cho type specimens, preview 'Aa' cỡ lớn, và border-radius lớn trên specimen cards
- **Klim Type Foundry** — Trình bày type foundry theo phong cách editorial với canvas trắng, typography một weight, và type specimens làm hình ảnh chính
- **Are.na** — Giao diện tối giản gần đơn sắc với chrome yên tĩnh và một accent color duy nhất dành cho interactive elements
- **Linear** — UI dày đặc gọn gàng với border-radius rộng, text gần đen trên nền trắng, và một bảng màu accent hạn chế, tinh tế
- **Velvetyne Type Foundry** — Bố cục ưu tiên type-specimen với specimen cards trên nền trắng, chrome tối giản, và không có decorative imagery

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #121212;
  --color-canvas: #ffffff;
  --color-fog: #dbdada;
  --color-slate: #8e8e93;
  --color-obsidian: #000000;
  --color-signal-coral: #ee585a;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.13px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.15px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.18px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.26px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.14;
  --tracking-heading-sm: -0.35px;
  --text-heading: 44px;
  --leading-heading: 1.15;
  --tracking-heading: -0.48px;
  --text-display: 120px;
  --leading-display: 1;
  --tracking-display: -1.32px;

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

  /* Spacing */
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-66: 66px;

  /* Layout */
  --page-max-width: 1320px;
  --section-gap: 48px;
  --card-padding: 24px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 69px;

  /* Named Radii */
  --radius-cards: 32px;
  --radius-links: 16px;
  --radius-pills: 9999px;
  --radius-buttons: 32px;

  /* Shadows */
  --shadow-xl: rgba(72, 72, 74, 0.16) 0px 2px 32px 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card: #ffffff;
  --surface-shadow-tint: #dbdada;
  --surface-action-surface: #ee585a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #121212;
  --color-canvas: #ffffff;
  --color-fog: #dbdada;
  --color-slate: #8e8e93;
  --color-obsidian: #000000;
  --color-signal-coral: #ee585a;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.13px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.15px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.18px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.26px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.14;
  --tracking-heading-sm: -0.35px;
  --text-heading: 44px;
  --leading-heading: 1.15;
  --tracking-heading: -0.48px;
  --text-display: 120px;
  --leading-display: 1;
  --tracking-display: -1.32px;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-66: 66px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 69px;

  /* Shadows */
  --shadow-xl: rgba(72, 72, 74, 0.16) 0px 2px 32px 0px;
}
```