# Savee

> # Savee — Style Reference

## Prompt Content

```
# Savee — Style Reference
> Black canvas dành cho visual curators

**Theme:** dark

Savee hoạt động trong bóng tối gần như tuyệt đối: một canvas gần như đen tuyền (#050505) nơi yếu tố màu sắc duy nhất là một electric indigo (#1500ff) duy nhất, điểm xuyết giao diện như ánh đèn neon trong gallery. Typography đảm nhận toàn bộ trọng trách — một custom sans-serif duy nhất được dùng ở mọi cấp độ, từ display headline 96px với line-height 0.96 và tracking -0.04em cho đến caption 13px, tạo nên nhịp điệu editorial đầy tự tin, mang cảm giác như tường bảo tàng hơn là một SaaS dashboard. Các bề mặt gần như không thể phân biệt: page canvas, elevated cards (#151515), và deep overlays (#1e1e1e) tạo thành một hệ thống phân cấp gần như vô hình, để hình ảnh và chữ dẫn dắt trải nghiệm. Điểm nhấn violet duy nhất trên primary CTA là tiếng ồn thị giác duy nhất mà hệ thống cho phép — mọi thứ còn lại là chữ trắng trên nền đen, pill-shaped controls, và khoảng thở section 64px rộng rãi.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Electric Indigo | `#1500ff` | `--color-electric-indigo` | Điểm nhấn violet cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu primary CTA |
| Obsidian | `#050505` | `--color-obsidian` | Page canvas, nền sâu nhất — khoảng không mà mọi nội dung đặt trên đó |
| Charcoal | `#151515` | `--color-charcoal` | Elevated surface, khung xem trước sản phẩm, panel phụ |
| Graphite | `#1e1e1e` | `--color-graphite` | Deep overlay surface, hover state trên dark cards, input fields |
| Paper | `#fdfdfd` | `--color-paper` | Primary text, inverted surface, button text, high-contrast foreground |
| Silver | `#e5e5e5` | `--color-silver` | Hairline borders, divider, đường viền cấu trúc tinh tế |
| Pearl | `#d4d4d4` | `--color-pearl` | Secondary text, subdued headings, placeholder body copy |
| Slate | `#2f2f2f` | `--color-slate` | Footer borders, divider tương phản thấp giữa các vùng tối |
| Ash | `#a3a3a3` | `--color-ash` | Muted helper text, inactive icons, metadata đã giảm nhấn |
| Stone | `#737373` | `--color-stone` | Tertiary text, timestamp, supplementary labels |

## Tokens — Typography

### Savee Font — Kiểu chữ duy nhất — một custom geometric sans được dùng ở mọi tỷ lệ. Weight 400 đảm nhận editorial body và nav; weight 500 xuất hiện trên button và emphasized labels. Display 96px với line-height 0.96 và tracking -0.04em là chữ ký của hệ thống: nó nén lại thành một khối đặc, tự tin thay vì kéo dài theo chiều dọc, khiến headline mang cảm giác điêu khắc. · `--font-savee-font`
- **Thay thế:** Inter, DM Sans, hoặc Satoshi (geometric sans-serif có tỷ lệ x-height tương tự và default tracking chặt)
- **Weights:** 400, 500
- **Kích cỡ:** 13, 14, 16, 18, 21, 24, 30, 36, 60, 96
- **Line height:** 0.96, 1.00, 1.11, 1.13, 1.23, 1.25, 1.29, 1.33, 1.38, 1.50
- **Letter spacing:** -0.04em ở 96px, -0.02em ở 60px, -0.01em ở 36-30px, normal ở 24-18px, +0.01em ở 16px, +0.015em ở 14-13px
- **Vai trò:** Kiểu chữ duy nhất — một custom geometric sans được dùng ở mọi tỷ lệ. Weight 400 đảm nhận editorial body và nav; weight 500 xuất hiện trên button và emphasized labels. Display 96px với line-height 0.96 và tracking -0.04em là chữ ký của hệ thống: nó nén lại thành một khối đặc, tự tin thay vì kéo dài theo chiều dọc, khiến headline mang cảm giác điêu khắc.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|---------|---------|-------------|----------------|-------|
| caption | 13px | 1.5 | 0.195px | `--text-caption` |
| body | 16px | 1.5 | 0.16px | `--text-body` |
| body-lg | 18px | 1.38 | — | `--text-body-lg` |
| subheading | 21px | 1.33 | — | `--text-subheading` |
| heading-sm | 24px | 1.29 | -0.24px | `--text-heading-sm` |
| heading | 30px | 1.25 | -0.3px | `--text-heading` |
| heading-lg | 36px | 1.13 | -0.36px | `--text-heading-lg` |
| display | 60px | 1 | -1.2px | `--text-display` |
| display-lg | 96px | 0.96 | -3.84px | `--text-display-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 14px |
| pills | 9999px |
| inputs | 9999px |
| buttons | 9999px |

### Layout

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

## Components

### Primary Pill Button
**Vai trò:** Hành động được tô màu duy nhất trong hệ thống

Nền Electric Indigo (#1500ff), chữ Paper (#fdfdfd) ở 14-16px weight 500, bo tròn hoàn toàn 9999px radius, padding 12px 24px. Đây là nơi duy nhất mà brand color tồn tại — mọi interactive element khác đều nhường chỗ cho nó. Xuất hiện tối đa một lần trên mỗi viewport để giữ nguyên tác động.

### Ghost Pill Button
**Vai trò:** Secondary action không cạnh tranh với primary

Nền trong suốt, viền 1px Paper (#fdfdfd) ở ~30% opacity hoặc full opacity, chữ Paper ở 14px weight 500, 9999px radius, padding 10px 20px. Dùng cho 'Sign up' và 'Join over 1M users' — biến thể outline để primary indigo button giữ quyền kiểm soát hệ thống phân cấp.

### Navigation Bar
**Vai trò:** Thanh navigation cấp cao nhất tối giản

Nền trong suốt nổi trên Obsidian canvas. Logo bên trái màu Paper trắng, nav links dạng text (Features, Marketplace, What's new, Reviews) căn giữa màu Pearl (#d4d4d4) ở 14px, auth actions (Log in, Sign up) bên phải. Không background fill, không shadow, không border — nav tồn tại thuần túy dưới dạng chữ trên khoảng không.

### Display Headline
**Vai trò:** Typography cấp hero định nghĩa trang

96px Savee Font weight 500, Paper (#fdfdfd), line-height 0.96, letter-spacing -0.04em. Độ chặt cực cao và tỷ lệ khổng lồ khiến nó đọc như một khối điêu khắc duy nhất. Căn giữa theo chiều ngang với khoảng thở trên/dưới rộng rãi (64-80px). Hero được căn giữa single-column — không split layout, không hình ảnh bên cạnh.

### Editorial Body Block
**Vai trò:** Văn bản thuyết phục dạng dài ở tỷ lệ bất thường

36px Savee Font weight 400, Paper (#fdfdfd), line-height 1.13, letter-spacing -0.01em. Đây là body copy ở tỷ lệ headline — 36px là rất lớn cho văn xuôi, tạo trải nghiệm đọc kiểu tạp chí. Căn trái, max-width ~800px, nằm dưới hero với khoảng cách 48-64px.

### Partner Logo Strip
**Vai trò:** Dải bằng chứng xã hội

Một hàng ngang duy nhất các brand logo dạng grayscale (Apple, Google, Nike, Adobe, Pentagram, Airbnb, MWS) màu Ash (#a3a3a3) hoặc Pearl (#d4d4d4), phân bố đều trên toàn bộ chiều rộng nội dung. Đi trước bởi một caption nhỏ màu Stone (#737373) ở 13px. Không logo có màu, không hiệu ứng hover — dải này là sự uy tín lặng lẽ.

### Product Preview Frame
**Vai trò:** Khung chứa ảnh chụp màn hình hoặc video sản phẩm lớn bên dưới hero

Bề mặt nền Charcoal (#151515) lấp đầy hầu hết chiều rộng viewport, border-radius 14px, không border, không shadow. Sự nâng nhẹ từ canvas (#050505) lên surface (#151515) là tín hiệu độ cao duy nhất — không drop shadow nào được sử dụng ở bất kỳ đâu trong hệ thống.

### Text Link
**Vai trò:** Inline navigation trong body copy

Kế thừa màu body (Paper hoặc Pearl) với underline chỉ khi hover. Không có chromatic links — ngay cả text tương tác cũng nằm trong bảng màu trung tính, dành riêng Electric Indigo cho primary CTA.

### Subhead Caption
**Vai trò:** Phụ đề mô tả bên dưới headline

16-18px Savee Font weight 400, Pearl (#d4d4d4), căn giữa, line-height 1.50. Nằm cách display headline 16-24px. Màu đã giảm nhấn tạo bước chuyển thị giác rõ ràng từ headline xuống mà không cần dùng kích cỡ hoặc weight khác.

### Full-Width Section Spacer
**Vai trò:** Nhịp điệu dọc giữa các section của trang

64-80px canvas Obsidian thuần túy không có yếu tố thị giác nào. Các section thở vào khoảng không — không divider, không chuyển màu nền, không gradient transition. Bản thân bóng tối là dấu phân cách.

### Footer Divider
**Vai trò:** Đường viền cấu trúc tương phản thấp

Đường ngang 1px màu Slate (#2f2f2f) hoặc Silver (#e5e5e5) ở ~10% opacity, trải dài chiều rộng nội dung. Border cấu trúc duy nhất trong toàn bộ hệ thống — dùng để phân cách footer khỏi thân trang.

## Do's and Don'ts

### Nên
- Chỉ dùng #1500ff Electric Indigo cho primary CTA duy nhất trên bất kỳ màn hình nào — không bao giờ dùng cho secondary actions, links, icons, hoặc decorative elements
- Đặt display headline ở 96px với line-height 0.96 và letter-spacing -0.04em để chữ nén lại thành khối điêu khắc tự tin thay vì kéo dài
- Áp dụng border-radius 9999px cho mọi button, tag, và pill — hình pill là hình dạng control duy nhất của hệ thống
- Dùng radius 14px cho card và product preview surfaces, và không dùng gì khác — giữ vốn từ vựng hình dạng ở chính xác hai radius
- Để Obsidian canvas (#050505) là dấu phân cách giữa các section — thêm 64-80px không gian trống thay vì đường kẻ, chuyển màu, hoặc gradient transitions
- Đặt body prose ở 36px khi nó cần mang trọng lượng editorial; giảm xuống 18px cho mô tả chức năng. Không bao giờ dùng 14-16px cho page copy chính
- Giữ tất cả text trong bảng màu trung tính (#fdfdfd, #d4d4d4, #a3a3a3) — màu sắc duy nhất là CTA indigo

### Không nên
- Không bao giờ dùng #1500ff cho bất cứ thứ gì khác ngoài primary CTA fill — không cho links, không cho icons, không cho hover states, không cho badges
- Không bao giờ thêm drop shadows hoặc elevation glows vào cards — hệ thống dùng surface color shifts (#050505 → #151515 → #1e1e1e) cho hệ thống phân cấp, không phải shadow
- Không bao giờ đặt body text dưới 16px cho nội dung chính — caption và metadata có thể xuống 13-14px, nhưng main copy vẫn lớn
- Không bao giờ giới thiệu thêm accent colors, ngay cả trong illustration hoặc partner logos — partner strip giữ grayscale để bảo toàn sự thống trị của indigo
- Không bao giờ dùng border-radius values giữa 0px và 9999px cho button — hệ thống là nhị phân: pill bo tròn hoàn toàn hoặc card corner 14px, không có gì ở giữa
- Không bao giờ áp dụng gradient cho background, button, hoặc text — hệ thống là flat monochrome với một ngoại lệ màu đặc duy nhất
- Không bao giờ dùng line-height trên 1.50 cho bất kỳ kích cỡ text nào — line-height chặt (0.96-1.38) là chữ ký editorial của hệ thống

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Canvas | `#050505` | Full-page background, bề mặt khoảng không |
| 1 | Elevated Panel | `#151515` | Product preview frames, image containers, card surfaces |
| 2 | Deep Overlay | `#1e1e1` | Input fields, nested interactive elements, hover states |

## Elevation

Hệ thống cố tình tránh hoàn toàn drop shadows. Hệ thống phân cấp được thể hiện qua các bước màu bề mặt (#050505 canvas → #151515 elevated panel → #1e1e1 deep overlay) và qua type scale. Sự vắng mặt của shadow là một lựa chọn chữ ký — nó giữ cho giao diện mang cảm giác như một bức tường gallery phẳng thay vì một sản phẩm phần mềm nhiều lớp.

## Imagery

Imagery ưu tiên sản phẩm và do người dùng tuyển chọn. Hero hiển thị một product preview frame lớn màu Charcoal (#151515) gợi ý giao diện app dark-mode. Partner logos được render ở dạng flat grayscale — không màu, không chiều sâu, không background. Mật độ thị giác tổng thể là text-dominant: headline 96px và body copy 36px chiếm nhiều không gian thị giác hơn bất kỳ imagery nào. Khi nội dung người dùng xuất hiện (bookmarks, mood boards), nó được trình bày dưới dạng raw crops trên Obsidian canvas mà không có decorative frames hoặc treatments.

## Layout

Trang được căn giữa single-column với max content width khoảng 1200px. Hero mở đầu bằng một display headline căn giữa, subtext, và một CTA duy nhất — không split layout, không hình ảnh bên cạnh. Bên dưới hero, một product preview frame lớn (Charcoal rectangle) chiếm toàn bộ chiều rộng nội dung. Một partner logo strip theo sau dưới dạng một hàng ngang duy nhất. Sau đó là editorial body text cỡ lớn căn trái ở 36px. Navigation là một thanh text-only nổi không có background fill. Các section được phân cách bởi 64-80px canvas Obsidian thuần túy — không divider, không dải màu. Nhịp điệu là: type căn giữa khổng lồ → product frame tối lớn → logo strip lặng lẽ → văn xuôi quá khổ → khoảng không.

## Agent Prompt Guide

**Quick Color Reference**
- text: #fdfdfd
- background: #050505
- border: #e5e5e5
Không quan sát thấy màu primary action riêng biệt; sử dụng neutral button treatments đã trích xuất thay vì phát minh ra màu CTA đã tô.
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

2. Tạo một editorial body section: background #050505. Văn xuôi căn trái ở 36px Savee Font weight 400, #fdfdfd, line-height 1.13, letter-spacing -0.36px. Max-width 800px. Không drop shadows, không card backgrounds — text đặt trực tiếp trên khoảng không.

3. Tạo một product preview frame: background #151515, border-radius 14px, full content width (max 1200px), không border, không shadow. Gợi ý ảnh chụp màn hình giao diện app tối.

5. Tạo một partner logo strip: một hàng ngang duy nhất gồm 8 logo grayscale màu #a3a3a3, cách đều nhau trên toàn bộ chiều rộng nội dung. Đi trước bởi một caption ở 13px #737373 có nội dung 'Used by leading design studios and teams'. Không logo có màu, không hiệu ứng hover.

## Radius Philosophy

Hệ thống sử dụng chính xác hai giá trị radius: 9999px cho tất cả interactive elements (buttons, tags, pills, inputs) tạo hình pill mềm mại, và 14px cho tất cả passive surfaces (cards, product frames, preview containers). Không 4px, không 8px, không 16px. Pill controls và các card bo tròn nhẹ cùng nhau định nghĩa ngôn ngữ xúc giác của hệ thống — button cảm giác như viên thuốc vật lý bạn ấn, surface cảm giác như khung hơi bo tròn. Vốn từ vựng radius nhị phân này quan trọng như bảng màu đối với bản sắc của hệ thống.

## Similar Brands

- **Are.na** — Cùng canvas gần như đen, editorial typography quá khổ, bảng màu đơn sắc hoặc tối giản, hero text-dominant không có decorative imagery
- **Linear** — Cùng dark-mode product UI với một accent color sống động (Linear dùng #5e6ad2 indigo, Savee dùng #1500ff), pill-shaped controls, line-height chặt, và surface color stepping thay vì shadow
- **Pitch** — Cùng sử dụng tự tin display type tỷ lệ lớn (90px+) với tracking chặt trên nền tối, màu sắc tối giản, và khoảng thở dọc rộng rãi giữa các section
- **VSCO** — Cùng thẩm mỹ dark gallery cho creative tools, pill-shaped CTAs, và chiến lược dành riêng màu sắc cho hành động quan trọng nhất duy nhất
- **Things 3 (Cultured Code)** — Cùng background gần như đen, pure white type, single blue accent cho primary action, pill controls, và triết lý rằng sự kiềm chế trong màu sắc tạo nên sự tự tin trong sản phẩm

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-electric-indigo: #1500ff;
  --color-obsidian: #050505;
  --color-charcoal: #151515;
  --color-graphite: #1e1e1e;
  --color-paper: #fdfdfd;
  --color-silver: #e5e5e5;
  --color-pearl: #d4d4d4;
  --color-slate: #2f2f2f;
  --color-ash: #a3a3a3;
  --color-stone: #737373;

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

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.5;
  --tracking-caption: 0.195px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.38;
  --text-subheading: 21px;
  --leading-subheading: 1.33;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.29;
  --tracking-heading-sm: -0.24px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.3px;
  --text-heading-lg: 36px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -0.36px;
  --text-display: 60px;
  --leading-display: 1;
  --tracking-display: -1.2px;
  --text-display-lg: 96px;
  --leading-display-lg: 0.96;
  --tracking-display-lg: -3.84px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

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

  /* Border Radius */
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 14px;
  --radius-pills: 9999px;
  --radius-inputs: 9999px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-canvas: #050505;
  --surface-elevated-panel: #151515;
  --surface-deep-overlay: #1e1e1;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-electric-indigo: #1500ff;
  --color-obsidian: #050505;
  --color-charcoal: #151515;
  --color-graphite: #1e1e1e;
  --color-paper: #fdfdfd;
  --color-silver: #e5e5e5;
  --color-pearl: #d4d4d4;
  --color-slate: #2f2f2f;
  --color-ash: #a3a3a3;
  --color-stone: #737373;

  /* Typography */
  --font-savee-font: 'Savee Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.5;
  --tracking-caption: 0.195px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.38;
  --text-subheading: 21px;
  --leading-subheading: 1.33;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.29;
  --tracking-heading-sm: -0.24px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.3px;
  --text-heading-lg: 36px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -0.36px;
  --text-display: 60px;
  --leading-display: 1;
  --tracking-display: -1.2px;
  --text-display-lg: 96px;
  --leading-display-lg: 0.96;
  --tracking-display-lg: -3.84px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-xl: 14px;
  --radius-full: 9999px;
}
```