# Poly

> Poly — Style Reference

## Prompt Content

```
# Poly — Style Reference
> Ember trên nền sứ — một chấm gradient ấm lơ lửng trên trang editorial trắng tinh, bao quanh bởi headline serif nhẹ nhàng và ảnh full-bleed.

**Theme:** light

Poly là phần mềm editorial: nền canvas off-white ấm (#f4f4f4), mực gần đen cho text và UI, và một gradient duy nhất từ cam ember sang đỏ dành riêng cho brand mark. Nhiếp ảnh đảm nhận phần lớn công việc tạo bầu không khí — ảnh full-bleed về bàn làm việc với chất liệu tự nhiên và ánh sáng định hướng ấm thay thế cho illustration và trang trí. Display type là humanist serif (Haffer ở weight 450, với tính năng liga và ss04) được kéo chặt ở -0.02em, kết hợp với Inter cho UI. Hệ thống mang cảm giác kiềm chế như cách một trang tạp chí kiềm chế: một khoảnh khắc màu sắc duy nhất, đường viền mảnh thay vì đổ bóng, bán kính 8px ở mọi nơi, và lưới cột để ảnh có không gian thở.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Ember Gradient | `linear-gradient(134.77deg, #f4824d 25.1%, #f42919 74.9%)` | `--color-ember-gradient` | Brand mark, logo Poly, điểm nhấn màu duy nhất — cam ấm chuyển sang đỏ tín hiệu, chỉ dùng trên identity, không bao giờ dùng trên body UI |
| Porcelain | `#f4f4f4` | `--color-porcelain` | Canvas trang, bề mặt card, text inverted trên nền ảnh tối |
| Onyx | `#000000` | `--color-onyx` | Viền tối và separator cho bề mặt nâng cao và UI inverted. Không dùng làm màu CTA chính |
| Graphite | `#292930` | `--color-graphite` | Text phụ, viền mảnh, icon fill, độ ấm nhẹ giúp gần đen không bị lạnh lẽo |
| Ash | `#cccccc` | `--color-ash` | Tông đổ bóng dùng trong hiệu ứng link mềm, divider nhạt |

## Tokens — Typography

### Haffer Variable — Serif display chính cho headline ở 30–53px. Weight 450 là phá cách — hầu hết product site đẩy display lên 600–700, nhưng Haffer ở 450 giữ headline ấm áp và editorial thay vì mang tính áp đặt. Bật liga và ss04 để mở khóa chữ g thay thế và các letterform cách điệu tạo nên cá tính cho wordmark. · `--font-haffer-variable`
- **Thay thế:** Source Serif 4, Newsreader, hoặc DM Serif Display
- **Weights:** 450
- **Kích thước:** 24px, 30px, 45px, 53px
- **Line height:** 1.10
- **Letter spacing:** -0.02em
- **OpenType features:** `"liga" on, "ss04" on`
- **Vai trò:** Serif display chính cho headline ở 30–53px. Weight 450 là phá cách — hầu hết product site đẩy display lên 600–700, nhưng Haffer ở 450 giữ headline ấm áp và editorial thay vì mang tính áp đặt. Bật liga và ss04 để mở khóa chữ g thay thế và các letterform cách điệu tạo nên cá tính cho wordmark.

### Bogue — Serif đồng hành ở regular weight, dùng cho badge label và các khoảnh khắc serif phụ nơi Haffer 450 có vẻ quá nặng. Tracking chặt hơn ở -0.03em để phân biệt với Haffer. · `--font-bogue`
- **Thay thế:** Source Serif 4, Cormorant Garamond
- **Weights:** 400
- **Kích thước:** 24px, 30px, 45px, 53px
- **Line height:** 1.10
- **Letter spacing:** -0.03em
- **Vai trò:** Serif đồng hành ở regular weight, dùng cho badge label và các khoảnh khắc serif phụ nơi Haffer 450 có vẻ quá nặng. Tracking chặt hơn ở -0.03em để phân biệt với Haffer.

### Haffer — Static fallback cho serif text nhỏ — badge 15px, khoảnh khắc sub-serial 24px · `--font-haffer`
- **Thay thế:** Source Serif 4
- **Weights:** 400
- **Kích thước:** 15px, 24px
- **Line height:** 1.20
- **Letter spacing:** -0.02em
- **OpenType features:** `"liga" on, "ss04" on`
- **Vai trò:** Static fallback cho serif text nhỏ — badge 15px, khoảnh khắc sub-serial 24px

### Inter — Toàn bộ UI, body, nav, button label, helper text. Inter ở 400 xử lý body, 600 đảm nhận subheading và button text. Tracking -0.02em khớp với họ serif, giữ hệ thống type đồng nhất về mặt thị giác. · `--font-inter`
- **Weights:** 400, 600
- **Kích thước:** 12px, 15px, 24px, 30px, 45px
- **Line height:** 1.10, 1.20, 1.50
- **Letter spacing:** -0.02em
- **Vai trò:** Toàn bộ UI, body, nav, button label, helper text. Inter ở 400 xử lý body, 600 đảm nhận subheading và button text. Tracking -0.02em khớp với họ serif, giữ hệ thống type đồng nhất về mặt thị giác.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|-----------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.24px | `--text-caption` |
| body-sm | 15px | 1.5 | -0.3px | `--text-body-sm` |
| subheading | 24px | 1.2 | -0.48px | `--text-subheading` |
| heading-sm | 30px | 1.1 | -0.6px | `--text-heading-sm` |
| heading-lg | 45px | 1.1 | -0.9px | `--text-heading-lg` |
| display | 53px | 1.1 | -1.06px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|--------|-------|
| 6 | 6px | `--spacing-6` |
| 9 | 9px | `--spacing-9` |
| 12 | 12px | `--spacing-12` |
| 18 | 18px | `--spacing-18` |
| 24 | 24px | `--spacing-24` |
| 30 | 30px | `--spacing-30` |
| 33 | 33px | `--spacing-33` |
| 48 | 48px | `--spacing-48` |
| 69 | 69px | `--spacing-69` |

### Border Radius

| Element | Giá trị |
|---------|--------|
| tất cả | 8px |

### Shadows

| Tên | Giá trị | Token |
|-----|--------|-------|
| sm | `rgba(0, 0, 0, 0.2) 2px 2px 5px 0px, rgba(0, 0, 0, 0.15) -...` | `--shadow-sm` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 48-69px
- **Card padding:** 24px
- **Element gap:** 12px

## Components

### Gradient Brand Mark
**Vai trò:** Wordmark logo Poly và icon cube

Cube bán kính 8px được tô bằng Ember Gradient (134.77deg, #f4824d → #f42919). Gradient chỉ dành riêng cho brand identity — không bao giờ xuất hiện trên UI controls, illustration, hay background. Kết hợp với wordmark màu Onyx hoặc Porcelain tùy theo bề mặt.

### Primary Dark Filled Button
**Vai trò:** Hành động chuyển đổi chính (Join waitlist, Watch Video)

Nền Onyx (#000000), text Porcelain (#f4f4f4) ở Inter 600 cỡ 15px, border radius 8px, padding 12px 24px. Không viền. Dùng trên cả bề mặt sáng và tối vì fill là giá trị nặng nhất trong palette.

### Ghost Outlined Button
**Vai trò:** Hành động phụ trên nền ảnh tối (Download Poly)

Nền trong suốt, viền Porcelain (#f4f4f4) 1.5px, text Porcelain ở Inter 600 cỡ 15px, radius 8px, padding 12px 24px. Nằm trên ảnh full-bleed — đường viền đọc như ánh sáng bắt vào cạnh.

### Top Navigation Bar
**Vai trò:** Header cố định trên tất cả trang

Nền trong suốt hoặc Porcelain, padding dọc 24px, brand mark căn trái, utility actions căn phải. Trên hero ảnh, nav trong suốt để logo gradient và Login/Join waitlist màu Porcelain nổi trên ảnh.

### Hero Photo Section
**Vai trò:** Tuyên ngôn thương hiệu ở màn hình đầu tiên

Ảnh editorial full-bleed (cảnh bàn làm việc ấm, ánh sáng tự nhiên) với lớp phủ tối để đẩy tương phản. Headline stack căn giữa: Haffer 450 ở 45–53px, tracking -0.02em, text Porcelain. Subtext Inter 400 ở 15–24px bên dưới. Hàng CTA hai button (ghost + filled) căn giữa bên dưới.

### Section Headline
**Vai trò:** Heading trong trang ở 30–45px

Haffer Variable 450 màu Onyx (#000000) trên bề mặt Porcelain, tracking -0.02em. Dùng để giới thiệu từng content section. Không có underline hay eyebrow trang trí — weight serif tự đảm nhiệm.

### Feature Card
**Vai trò:** Khối tính năng sản phẩm hoặc use-case

Bề mặt Porcelain, viền mảnh Graphite (#292930) 1px, radius 8px, padding 24px. Không đổ bóng. Headline ở Haffer 450 cỡ 24–30px, body ở Inter 400 cỡ 15px, icon nhỏ màu Graphite tùy chọn.

### Photo Content Band
**Vai trò:** Ngắt editorial giữa trang

Ảnh full-bleed xen kẽ với content section màu Porcelain. Tạo nhịp điệu magazine-spread — ảnh tối, khối text sáng, ảnh tối, khối text sáng.

### Text Link
**Vai trò:** Inline navigation và footer links

Inter 400 màu Graphite (#292930), không gạch chân mặc định. Shadow mềm hiếm gặp (outer rgba(0,0,0,0.2) 2px 2px 5px + inset highlights) chỉ áp dụng cho standalone link button, tạo hiệu ứng emboss nhẹ.

### Badge / Tag
**Vai trò:** Label trạng thái, marker danh mục

Bogue hoặc Haffer 400 ở 12–15px text Graphite trên Porcelain, radius 8px, padding 6–12px. Không fill nền — typography tự mang label.

### Body Text Block
**Vai trò:** Mô tả dài và paragraph copy

Inter 400 ở 15px, line-height 1.5, Graphite (#292930) trên Porcelain. Max-width giới hạn ~680px để dễ đọc. Tracking -0.02em khớp với display scale.

### Footer
**Vai trò:** Link toàn site và legal

Nền Onyx hoặc Porcelain, border-top mảnh Graphite, Inter 400 ở 12–15px. Cột link tối giản, brand mark lặp lại ở Ember Gradient.

## Do's and Don'ts

### Nên làm
- Chỉ dùng Ember Gradient (#f4824d → #f42919) trên brand mark và logo — không bao giờ dùng trên body UI, illustration, hay button fill
- Đặt mọi border-radius thành 8px, bao gồm card, button, tag, và image container
- Dùng Haffer Variable ở weight 450 cho mọi display headline ở 30–53px, với font-feature-settings: 'liga' on, 'ss04' on
- Phân cách vùng bằng viền mảnh Graphite (#292930), không dùng drop shadow
- Áp dụng letter-spacing -0.02em trên toàn bộ hệ thống type để đồng nhất họ serif và sans
- Giữ section gap trong khoảng 48–69px để duy trì nhịp thở editorial
- Dùng ảnh ấm full-bleed (ánh sáng tự nhiên, chất liệu tự nhiên) cho hero và section break

### Không nên làm
- Không đưa màu sắc nào ngoài Ember Gradient — palette chỉ đơn sắc theo thiết kế
- Không dùng drop shadow cho card hoặc bề mặt nâng — viền đảm nhận việc phân cách
- Không đặt display type bằng Inter; display thuộc về Haffer ở 450, không bao giờ dưới 30px
- Không dùng border-radius khác 8px — không pill, không góc nhọn, không biến thể 12px hay 16px
- Không áp dụng Ember Gradient cho button, background, hay hover state — chỉ dành cho brand identity
- Không làm sáng text Onyx dưới #292930 cho body copy — độ tương phản phải trên 9:1 trên Porcelain
- Không phá vỡ sự xen kẽ ảnh/Porcelain — mọi content section phải nằm trên Porcelain, không bao giờ trên nền pha màu

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Porcelain Canvas | `#f4f4f4` | Nền trang trên tất cả content section |
| 1 | Ink Panel | `#000000` | Lớp phủ ảnh, dải tính năng tối, button fill |

## Elevation

Hệ thống cố tình tránh elevation. Sự phân cách đến từ viền mảnh Graphite (#292930) và từ các dải ảnh full-bleed, không phải từ drop shadow. Stack shadow duy nhất được phát hiện (outer mềm + inner highlight/hiệu ứng neumorphic) chỉ xuất hiện trên interactive link element — nó đọc như emboss xúc giác, không phải card lift.

## Imagery

Chỉ ảnh editorial — không illustration, không đồ họa trừu tượng, không screenshot sản phẩm trên bề mặt marketing. Cảnh bàn làm việc ấm: cốc gốm, cây cảnh, vân gỗ, nhạc cụ đồng, sổ da, giấy note, tai nghe studio. High-key với ánh sáng tự nhiên định hướng, hơi giảm bão hòa, và độ ấm của film grain. Full-bleed không bo góc hay mask — ảnh chạy từ mép này sang mép kia. Lớp phủ tối (khoảng 40–50% Onyx) nằm sau text để đảm bảo độ tương phản Porcelain-type. Hình ảnh làm công việc tạo bầu không khí mà màu sắc và trang trí sẽ làm trong một product site thông thường.

## Layout

Hero full-bleed với text stack căn giữa; container max-width 1200px cho tất cả content section; nhịp dọc 48–69px giữa các section. Navigation là một thanh trên cùng trong suốt hoặc Porcelain — không sidebar, không mega-menu. Content section xen kẽ giữa dải ảnh full-bleed và lưới card Porcelain, tạo nhịp điệu magazine-spread. Feature block là một cột hoặc hai cột (text-trái/ảnh-phải) không có hình chồng chéo hay lưới bất đối xứng. Lưới yên tĩnh và trực giao; tất cả năng lượng đến từ typography và nhiếp ảnh.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #292930 (Graphite) hoặc #000000 (Onyx)
- background: #f4f4f4 (Porcelain)
- border: #292930 (Graphite), 1px
- accent: Ember Gradient (#f4824d → #f42919) — chỉ logo
- primary action: không có màu CTA riêng biệt

**3–5 Ví dụ Component Prompts**
1. *Hero section*: Ảnh bàn làm việc ấm full-bleed với lớp phủ Onyx 45%. Headline Haffer Variable 450 căn giữa ở 53px màu Porcelain, letter-spacing -1.06px, line-height 1.1. Subtext Inter 400 ở 15px màu Porcelain bên dưới. Hai button cạnh nhau, gap 12px: ghost outlined (viền Porcelain 1.5px, radius 8px, Inter 600 15px) và filled dark (nền Onyx, text Porcelain, radius 8px, Inter 600 15px, padding 12px 24px). Top nav nổi trên ảnh: brand mark gradient bên trái, Login (Inter 400 Graphite) + button Join waitlist filled Onyx bên phải.

2. *Feature card*: Bề mặt Porcelain (#f4f4f4), viền Graphite 1px, radius 8px, padding 24px. Headline ở Haffer Variable 450 cỡ 30px Onyx, tracking -0.6px. Body ở Inter 400 cỡ 15px Graphite, line-height 1.5, max-width 680px.

3. *Section band*: Ảnh full-bleed từ mép này sang mép kia, không border-radius. Padding section 24px tùy chọn bên trong cho khối text max-width 1200px màu Porcelain trên lớp phủ tối.

4. *Footer*: Nền Porcelain, border-top Graphite 1px, ba cột link Inter 400 ở 15px Graphite, brand mark ở Ember Gradient bên trái.

5. *Badge/Tag*: Không fill, Bogue hoặc Haffer 400 ở 12px text Graphite, radius 8px, padding 6px 12px, viền mảnh Graphite 1px tùy chọn.

## Gradient System

Một gradient duy nhất định nghĩa thương hiệu: linear-gradient(134.77deg, #f4824d 25.1%, #f42919 74.9%) — cam ấm chuyển sang đỏ tín hiệu bão hòa. Nó bị khóa identity: nó tô màu cube Poly và accent wordmark, và không bao giờ xuất hiện trên UI controls, hover state, illustration, hay background wash. Góc chéo (134.77deg) dốc hơn 135deg tiêu chuẩn — giữ nguyên giá trị này để bảo toàn identity của mark.

## Similar Brands

- **Arc Browser** — Cùng ảnh editorial full-bleed trên hero, một accent ấm duy nhất trên UI đơn sắc, cá tính type nghiêng về serif
- **Notion** — Hero căn giữa với palette đơn sắc kiềm chế và một accent nhẹ nhàng, Inter là họ UI làm việc chính
- **Pitch** — Serif display editorial kết hợp với sans body sạch sẽ, thẩm mỹ ấm tối giản, card viền mảnh
- **Frame.io** — Landing page công cụ sáng tạo với ảnh lifestyle ấm, hero lớp phủ tối, chrome tối giản
- **Linear** — Gần như không có màu sắc ngoài một khoảnh khắc brand duy nhất, Inter cho UI, viền mảnh thay vì shadow nặng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ember-gradient: #f42919;
  --gradient-ember-gradient: linear-gradient(134.77deg, #f4824d 25.1%, #f42919 74.9%);
  --color-porcelain: #f4f4f4;
  --color-onyx: #000000;
  --color-graphite: #292930;
  --color-ash: #cccccc;

  /* Typography — Font Families */
  --font-haffer-variable: 'Haffer Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bogue: 'Bogue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haffer: 'Haffer', 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-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.24px;
  --text-body-sm: 15px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.3px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.48px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.6px;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.9px;
  --text-display: 53px;
  --leading-display: 1.1;
  --tracking-display: -1.06px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-w450: 450;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-9: 9px;
  --spacing-12: 12px;
  --spacing-18: 18px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-33: 33px;
  --spacing-48: 48px;
  --spacing-69: 69px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 48-69px;
  --card-padding: 24px;
  --element-gap: 12px;

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

  /* Named Radii */
  --radius-all: 8px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.2) 2px 2px 5px 0px, rgba(0, 0, 0, 0.15) -2px -2px 4px 0px inset, rgba(255, 255, 255, 0.15) 2px 2px 4px 0px inset;

  /* Surfaces */
  --surface-porcelain-canvas: #f4f4f4;
  --surface-ink-panel: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ember-gradient: #f42919;
  --color-porcelain: #f4f4f4;
  --color-onyx: #000000;
  --color-graphite: #292930;
  --color-ash: #cccccc;

  /* Typography */
  --font-haffer-variable: 'Haffer Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bogue: 'Bogue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haffer: 'Haffer', 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-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.24px;
  --text-body-sm: 15px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.3px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.48px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.6px;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.9px;
  --text-display: 53px;
  --leading-display: 1.1;
  --tracking-display: -1.06px;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-9: 9px;
  --spacing-12: 12px;
  --spacing-18: 18px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-33: 33px;
  --spacing-48: 48px;
  --spacing-69: 69px;

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

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.2) 2px 2px 5px 0px, rgba(0, 0, 0, 0.15) -2px -2px 4px 0px inset, rgba(255, 255, 255, 0.15) 2px 2px 4px 0px inset;
}
```