# Sparkles

> # Sparkles — Style Reference

## Prompt Content

```
# Sparkles — Style Reference
> Tờ broadsheet mực-in-trên-giấy được canh giữ bởi các linh vật bút chì màu

**Theme:** light

Sparkles vận hành trên bảng màu gần như đơn sắc, chỉ bị ngắt quãng bởi một khối màu xanh lá duy nhất ở footer — một sự kiềm chế có chủ đích, mang phong cách editorial, khiến các minh họa nhân vật vẽ tay ngộ nghĩnh phải gánh vác toàn bộ trọng trách màu sắc. Gelica (một display serif dày dặn) đảm nhận mọi headline ở weight 600 với line-height gần như bằng 0, tạo ra những khoảnh khắc editorial chặt chẽ, dứt khoát, tương phản với sans-serif thân chữ và UI text dãn rộng của Articulat CF. Giao diện phẳng, dựa trên đường viền, và sử dụng #18181b làm 'mực' phổ quát — cho heading, nav text, icon, và nút filled duy nhất — nhờ đó mắt người đọc nhìn trang như một tờ broadsheet in ấn. Cards và input nằm trên nền trắng (#ffffff) với đường kẻ tóc #e5e5e5 và góc bo 10px; elevation gần như không tồn tại. Dấu ấn thị giác là sự va chạm giữa typesetting khắc khổ và các nhân vật hoạt hình màu bút chì sáp ẩn mình ở lề trang.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#0a0a0a` | `--color-ink-black` | Primary text, foreground sâu nhất — mực tuyệt đối cho body copy và legal/footer type |
| Zinc Ink | `#18181b` | `--color-zinc-ink` | Headlines, nav text, icons, nền nút filled — mực tương tác phổ quát |
| Slate 700 | `#27272a` | `--color-slate-700` | Body text emphasis, nền input fill cho dark/inverted inputs |
| Slate 600 | `#3f3f46` | `--color-slate-600` | Secondary body text, input borders, subtle button borders |
| Slate 500 | `#52525c` | `--color-slate-500` | Muted helper text, link text, icon details |
| Zinc 500 | `#71717b` | `--color-zinc-500` | Icon strokes (màu icon chủ đạo), secondary UI lines |
| Zinc 300 | `#d4d4d8` | `--color-zinc-300` | Card borders khi cần định nghĩa rõ hơn một chút so với hairline mặc định |
| Zinc 200 | `#e5e5e5` | `--color-zinc-200` | Universal hairline border — màu được dùng nhiều nhất trong hệ thống với hơn 360 ứng dụng border |
| Zinc 100 | `#f4f4f5` | `--color-zinc-100` | Card surfaces, hero background tint, subtle section backgrounds |
| Paper White | `#fafafa` | `--color-paper-white` | Page-tinted background variant, bề mặt gần trắng cho cards cần tách biệt khỏi pure white |
| Pure White | `#ffffff` | `--color-pure-white` | Primary canvas và card surface — trang nằm trên nền trắng |
| Footer Green | `#54b16c` | `--color-footer-green` | Footer band background — màu UI chromatic duy nhất, một màu xanh lá cỏ thân thiện, tạo dấu chấm câu cho trang đơn sắc |

## Tokens — Typography

### Gelica — Display and heading face — một custom chunky serif chỉ dùng cho các khoảnh khắc h1/h2. Line-height chặt (1.0–1.11) khiến các headline xếp chồng trông dày đặc và mang chất editorial. Letter-spacing bình thường. · `--font-gelica`
- **Substitute:** Tiempos Headline, Source Serif Pro, Lora
- **Weights:** 600
- **Sizes:** 36px, 48px, 60px
- **Line height:** 1.00–1.11
- **Role:** Display and heading face — một custom chunky serif chỉ dùng cho các khoảnh khắc h1/h2. Line-height chặt (1.0–1.11) khiến các headline xếp chồng trông dày đặc và mang chất editorial. Letter-spacing bình thường.

### Articulat CF — Body, UI, and small-label face. Điểm đặc trưng: letter-spacing 0.28em trên font family này tạo nên cảm giác thoáng đãng, kiến trúc đặc trưng của hệ thống — gần như chắc chắn được áp dụng cho các label nhỏ/uppercase và meta text, nơi tracking rộng đọc như typesetting có chủ đích thay vì khoảng trống ngẫu nhiên. Line-height rộng rãi (lên đến 1.78) giúp body copy thoáng khí. · `--font-articulat-cf`
- **Substitute:** Inter, Geist, Söhne, General Sans
- **Weights:** 400, 500, 600
- **Sizes:** 12px, 14px, 16px, 18px, 20px
- **Line height:** 1.33–1.78
- **Letter spacing:** 0.28em trên small/label contexts; bình thường trên body text
- **OpenType features:** `"ss01" on if available`
- **Role:** Body, UI, and small-label face. Điểm đặc trưng: letter-spacing 0.28em trên font family này tạo nên cảm giác thoáng đãng, kiến trúc đặc trưng của hệ thống — gần như chắc chắn được áp dụng cho các label nhỏ/uppercase và meta text, nơi tracking rộng đọc như typesetting có chủ đích thay vì khoảng trống ngẫu nhiên. Line-height rộng rãi (lên đến 1.78) giúp body copy thoáng khí.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | 3.36px | `--text-caption` |
| body-sm | 14px | 1.56 | 3.92px | `--text-body-sm` |
| body | 16px | 1.6 | 4.48px | `--text-body` |
| subheading | 18px | 1.5 | 5.04px | `--text-subheading` |
| heading-sm | 20px | 1.4 | 5.6px | `--text-heading-sm` |
| heading | 36px | 1.11 | — | `--text-heading` |
| heading-lg | 48px | 1.11 | — | `--text-heading-lg` |
| display | 60px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 112 | 112px | `--spacing-112` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 10px |
| pills | 10px |
| inputs | 10px |
| buttons | 10px |
| feature-cards | 14px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64-80px
- **Card padding:** 24-40px
- **Element gap:** 16-24px

## Components

### Filled Ink Button
**Role:** Primary action — nút filled duy nhất của hệ thống

Background #18181b, text #ffffff, font Articulat CF 16px/500, border-radius 10px, padding dọc 10px / ngang 20px. Mang khoảnh khắc CTA thực sự duy nhất của hệ thống ('Book a call'). Không có drop shadow ngoài tùy chọn 0 1px 2px rgba(0,0,0,0.05) lift.

### Ghost/Outlined Button
**Role:** Secondary action

Background trong suốt, border 1px #3f3f46 hoặc #e5e5e5, text #18181b, cùng radius 10px và padding như filled variant.

### Top Navigation Bar
**Role:** Primary site navigation

Nền trắng, nằm trên hairline dưới cùng #e5e5e5. Logo (Sparkles wordmark) bên trái, nav links căn giữa (Problem, Solution, Pricing, FAQ, Careers) bằng Articulat CF 14px/500, Filled Ink Button bên phải. Padding dọc ~32px.

### Backed-by Badge
**Role:** Social-proof pill

Pill nhỏ gọn với nền sáng (#fafafa hoặc #f4f4f5), border 1px #e5e5e5, radius 10px. Body copy bằng Articulat CF 12-14px với tracking 0.28em đặc trưng trên label 'Y Combinator'. YC logo được render inline dưới dạng một dấu đỏ nhỏ.

### Hero Headline
**Role:** Khoảnh khắc editorial cấp trang

Gelica 600 ở 48-60px, line-height 1.0-1.11, màu #0a0a0a. Căn giữa. Nằm trên canvas trắng. Đây là nơi trọng lượng của serif và leading chặt tạo ra cảm giác 'broadsheet'.

### Hero Subhead
**Role:** Dòng định tính bên dưới headline

Articulat CF 16-18px/400 màu #52525c, thường được đặt trong ngoặc đơn, tạo điểm đối trọng nhẹ nhàng, mang tính đàm thoại với serif nặng ký bên trên.

### Decorative Mascot Illustration
**Role:** Cá tính và sự ấm áp của thương hiệu

Các nhân vật hình học vẽ tay (hình vuông, tam giác có mặt) nằm hai bên hero và các section. Bảng màu bút chì sáp tươi sáng: đỏ san hô, xanh da trời, xanh lá cỏ, vàng bơ — nhưng đây là illustration assets, KHÔNG phải design-system colors. Chúng tạo ra đối trọng cảm xúc cho giao diện đơn sắc khắc khổ.

### Section Heading
**Role:** Tiêu đề phụ (ví dụ 'The problem')

Gelica 600 ở 36-48px, căn giữa, màu #0a0a0a. Theo sau bởi một subhead Articulat CF duy nhất màu #52525c. Thiết lập nhịp điệu 'serif title + sans subtitle' nhất quán xuyên suốt các section.

### Content Card
**Role:** Khối thông tin được nhóm

Nền trắng (#ffffff) hoặc #fafafa, border 1px #e5e5e5 (hoặc #d4d4d8), radius 10-14px, padding 24-40px. Không có drop shadow. Phẳng, có viền, gần giống như tờ báo.

### Text Input
**Role:** Form field

Nền trắng hoặc #27272a, border 1px #3f3f46 hoặc #e5e5e5, radius 10px, text Articulat CF 16px. Focus state làm tối border về #18181b.

### Icon
**Role:** UI iconography

Stroke style 1.5-2px outlined, màu stroke #71717b (màu icon chủ đạo) hoặc #18181b để nhấn mạnh. Xử lý đơn sắc một màu — không bao giờ đa sắc. Render sắc nét, không vui nhộn, để không cạnh tranh với các mascot illustrations.

### Footer Band
**Role:** Page footer

Band full-width với màu UI chromatic duy nhất trong hệ thống: background #54b16c. Text sáng hoặc trắng trên nền xanh lá. Một dấu chấm câu đậm, ấm áp ở cuối một trang vốn không màu sắc.

## Do's and Don'ts

### Do
- Sử dụng #18181b (Zinc Ink) làm 'mực' phổ quát — headlines, nav text, icons, và nút filled duy nhất đều nên lấy từ giá trị đơn lẻ này để đảm bảo sự gắn kết thị giác.
- Áp dụng letter-spacing 0.28em của Articulat CF trên các label nhỏ, badge copy, và uppercase meta text — tracking rộng này là nhịp điệu đặc trưng của hệ thống.
- Sử dụng hairline #e5e5e5 và radius 10px trên mọi container; cards và input nên có cảm giác có viền và phẳng, không nổi lên.
- Dành Gelica 600 cho các khoảnh khắc heading thực sự ở 36px trở lên với line-height ≤1.11 — leading chặt là thứ mang lại trọng lượng editorial cho type.
- Chỉ sử dụng #54b16c trong footer band và không bao giờ ở nơi khác; khối chromatic đơn lẻ khuếch đại câu chuyện đơn sắc.
- Để các mascot illustrations gánh vác toàn bộ màu thương hiệu trong các ngữ cảnh marketing; bản thân giao diện nên gần như không màu.
- Xây dựng nhịp điệu trang là serif headline + sans-serif subhead + flat outlined cards — nhịp ba phần này lặp lại ở mọi section.

### Don't
- Đừng đưa thêm màu thương hiệu hoặc accent ngoài #54b16c — tỷ lệ màu sắc 1% là một tính năng, không phải sơ suất.
- Đừng sử dụng drop shadow ngoài instance rgba(0,0,0,0.05) 0 1px 2px duy nhất trên nút; elevation nên đến từ borders, không phải shadows.
- Đừng dùng Gelica dưới 36px — cá tính của serif biến mất ở kích thước nhỏ và xung đột với Articulat CF.
- Đừng đặt Articulat CF body text với letter-spacing 0.28em — tracking đó chỉ dành cho small labels và meta copy.
- Đừng dùng #71717b hoặc #52525c cho body headlines; dành chúng cho icons, helper text, và muted metadata.
- Đừng bo góc trên 14px hoặc dưới 10px trên các functional elements — phạm vi 10-14px là toàn bộ vốn từ vựng radius của hệ thống.
- Đừng sử dụng gradient fills, glow effects, hoặc color-tinted shadows; thẩm mỹ có chủ đích là phẳng và giống in ấn.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Page Canvas | `#ffffff` | Primary page background — pure white |
| 1 | Soft Section | `#fafafa` | Màu trắng ngà nhẹ cho các section cần một chút tách biệt |
| 2 | Card / Hero Tint | `#f4f4f5` | Xám nhạt cho card surfaces và hero's tinted backdrop |
| 3 | Ink Surface | `#18181b` | Bề mặt tối cho nút filled và bất kỳ khoảnh khắc UI inverted nào |
| 4 | Footer Green | `#54b16c` | Bề mặt chromatic duy nhất — footer band đóng trang bằng sự ấm áp |

## Elevation

- **Filled Ink Button:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`

## Imagery

Dẫn dắt bằng minh họa. Trang được neo bởi các nhân vật linh vật vẽ tay, phong cách bút chì sáp — hình dạng hình học (hình vuông, hình tam giác có màu) được gắn mắt và biểu cảm hoạt hình đơn giản. Chúng nằm hai bên hero và được đặt như bầu không khí trang trí hơn là nội dung giải thích. Bảng màu minh họa sống động (đỏ san hô, xanh da trời, xanh lá cỏ, vàng bơ) và cố tình xung đột với UI đơn sắc, tạo ra sự căng thẳng đặc trưng của hệ thống: typography khắc khổ ở một bên, sự ấm áp vẽ tay vui nhộn ở bên kia. Product screenshots và photography không xuất hiện trên các màn hình chính.

## Layout

Bố cục editorial căn giữa, max-width ~1200px. Hero là một chồng text căn giữa (badge → serif headline → sans subhead → filled button) được bao quanh hai bên bởi các mascot illustrations lớn tràn ra mép trang. Các section tuân theo nhịp dọc nhất quán: section heading serif căn giữa, sans subhead căn giữa, sau đó là một hàng cards có viền hoặc sắp xếp hai cột text+visual. Section gaps rộng rãi (64-80px) với một band tint #f4f4f5 hoặc #fafafa mềm mại tô màu cho các section xen kẽ. Navigation là một top bar đơn giản với các link căn giữa, wordmark bên trái, và một filled CTA duy nhất bên phải. Trang chủ yếu là text-dominant, với các minh họa đầy màu sắc hoạt động như những vật chặn sách trang trí hơn là hình ảnh thông tin.

## Agent Prompt Guide

**Quick Color Reference**
- text: #0a0a0a (primary), #52525c (secondary), #71717b (muted/icon)
- background: #ffffff (canvas), #fafafa (soft), #f4f4f5 (card tint), #54b16c (footer only)
- border: #e5e5e5 (hairline), #d4d4d8 (card definition), #3f3f46 (input)
- accent: #54b16c (footer band only — không phải interactive accent)
- filled button / primary action: #18181b (filled action)

**Example Component Prompts**

1. *Centered editorial hero*: canvas trắng (#ffffff). Serif headline Gelica 600 ở 56px, line-height 1.0, màu #0a0a0a. Subhead Articulat CF 18px/400 màu #52525c, căn giữa. Filled button bên dưới: background #18181b, text #ffffff, Articulat CF 16px/500, radius 10px, padding 10px 20px. Tùy chọn hand-drawn mascot illustration màu đỏ san hô, xanh da trời, và vàng bơ nằm hai bên chồng text.

2. *Outlined content card*: background trắng (#ffffff), border 1px #e5e5e5, radius 14px, padding 32px. Heading bằng Gelica 600 ở 24px màu #0a0a0a. Body bằng Articulat CF 16px/400 màu #52525c. Không drop shadow.

3. *Top navigation bar*: background trắng, border dưới 1px #e5e5e5, padding dọc 32px. Wordmark bên trái bằng Gelica 600 20px #0a0a0a. Nav links căn giữa bằng Articulat CF 14px/500 #18181b với gap 32px. Filled button bên phải: background #18181b, text #ffffff, radius 10px.

4. *Backed-by badge pill*: background #fafafa, border 1px #e5e5e5, radius 10px, padding 8px 16px. Label bằng Articulat CF 12px/500 màu #52525c. Partner name bằng Articulat CF 12px/600 màu #0a0a0a với letter-spacing 0.28em đặc trưng.

5. *Footer band*: full-width background #54b16c, text trắng (#ffffff) bằng Articulat CF 16px/400. Căn giữa, padding dọc 80px. Khoảnh khắc UI chromatic duy nhất trên trang.

## Similar Brands

- **Mercury** — Cùng cảm giác editorial broadsheet — serif display headlines (Gelica ↔ Tiempos) trên body đơn sắc, một accent color, flat outlined components
- **Linear** — Bề mặt product monochrome từ tối đến sáng với custom sans-serif chặt chẽ và gần như không có decorative chrome, dù Linear thiên về tối hơn
- **Arc Browser** — Các nhân vật minh họa vẽ tay mang lại sự ấm áp cho giao diện đơn sắc sạch sẽ, tối giản — cùng sự căng thẳng austerity-meets-playful
- **Notion** — Spacing rộng rãi, hairline borders, nhịp heading serif-on-sans, và hand-drawn illustration làm đối trọng cá tính
- **Y Combinator** — Bố cục đơn sắc kiềm chế, gần như brutalist với các điểm nhấn minh họa phong cách linh vật tươi sáng và trang trí UI tối thiểu

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #0a0a0a;
  --color-zinc-ink: #18181b;
  --color-slate-700: #27272a;
  --color-slate-600: #3f3f46;
  --color-slate-500: #52525c;
  --color-zinc-500: #71717b;
  --color-zinc-300: #d4d4d8;
  --color-zinc-200: #e5e5e5;
  --color-zinc-100: #f4f4f5;
  --color-paper-white: #fafafa;
  --color-pure-white: #ffffff;
  --color-footer-green: #54b16c;

  /* Typography — Font Families */
  --font-gelica: 'Gelica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-articulat-cf: 'Articulat CF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 3.36px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.56;
  --tracking-body-sm: 3.92px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 4.48px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: 5.04px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: 5.6px;
  --text-heading: 36px;
  --leading-heading: 1.11;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.11;
  --text-display: 60px;
  --leading-display: 1;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-112: 112px;
  --spacing-128: 128px;

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

  /* Border Radius */
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Named Radii */
  --radius-cards: 10px;
  --radius-pills: 10px;
  --radius-inputs: 10px;
  --radius-buttons: 10px;
  --radius-feature-cards: 14px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-soft-section: #fafafa;
  --surface-card-hero-tint: #f4f4f5;
  --surface-ink-surface: #18181b;
  --surface-footer-green: #54b16c;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #0a0a0a;
  --color-zinc-ink: #18181b;
  --color-slate-700: #27272a;
  --color-slate-600: #3f3f46;
  --color-slate-500: #52525c;
  --color-zinc-500: #71717b;
  --color-zinc-300: #d4d4d8;
  --color-zinc-200: #e5e5e5;
  --color-zinc-100: #f4f4f5;
  --color-paper-white: #fafafa;
  --color-pure-white: #ffffff;
  --color-footer-green: #54b16c;

  /* Typography */
  --font-gelica: 'Gelica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-articulat-cf: 'Articulat CF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 3.36px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.56;
  --tracking-body-sm: 3.92px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 4.48px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: 5.04px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: 5.6px;
  --text-heading: 36px;
  --leading-heading: 1.11;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.11;
  --text-display: 60px;
  --leading-display: 1;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-112: 112px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
```