# Quicken

> Quicken — Style Reference

## Prompt Content

```
# Quicken — Style Reference
> electric violet trên nền white marble

**Theme:** mixed

Design system của Quicken xoay quanh một màu electric violet duy nhất — #471cff rực rỡ — đóng vai trò là nguồn năng lượng cho mọi thành phần tương tác trên nền canvas trắng sạch. Cá tính thị giác mang phong cách fintech đầy tự tin: một custom geometric sans (Haffer) tạo giọng điệu với negative tracking dày đặc, càng thắt chặt hơn khi type lớn dần, tạo cảm giác đậm đặc và uy quyền mà không cần weight nặng. Các section màu violet đậm (#0f0733) xen kẽ với các dải trắng để tạo nhịp điệu, trong khi viền card màu lavender nhẹ (#dbd3ff, #bbc5fa) thay thế các divider xám thông thường và củng cố brand identity ở mọi cạnh. Các component thiên về bo tròn và hình pill: card dùng góc 16px, button kéo dài đến bán kính 400px, và shadow gần như vắng mặt — chiều sâu đến từ độ tương phản màu sắc và xử lý viền, không phải từ elevation.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Voltage Violet | `#471cff` | `--color-voltage-violet` | Primary action buttons, nav items đang active, key links, brand emphasis — xung điện màu duy nhất của giao diện; mọi thứ khác đều phải nhường chỗ |
| Deep Iris | `#0f0733` | `--color-deep-iris` | Nền section tối, hero canvas, text tương phản cao trên nền sáng — đối trọng màu nửa đêm neo giữ các dải tối xen kẽ |
| Signal Red | `#eb0130` | `--color-signal-red` | Điểm nhấn khuyến mãi, chỉ báo giảm giá/khẩn cấp, stroke nổi bật — dùng có chừng mực để thu hút sự chú ý mà không cạnh tranh với violet chính |
| Lilac Whisper | `#dbd3ff` | `--color-lilac-whisper` | Viền card và container mềm mại — cạnh violet tương phản thấp tạo thương hiệu cho đường viền mà không thêm trọng lượng thị giác |
| Periwinkle Mist | `#bbc5fa` | `--color-periwinkle-mist` | Tông viền card mát hơn để nhóm và viền container — bước thứ hai trong thang viền violet cho card xếp lớp |
| Coral Burst | `#ff5a43` | `--color-coral-burst` | Fill badge lỗi và cảnh báo, alert pill — tương phản ấm áp với hệ thống violet mát mẻ |
| Aqua Pop | `#7ae7fb` | `--color-aqua-pop` | Nền badge trang trí, fill trust-pill trên hero — cyan mát làm sáng các section tối |
| Ink Black | `#18181f` | `--color-ink-black` | Body text và heading chính, màu viền chủ đạo, stroke icon — màu gần đen mang toàn bộ nội dung có thể đọc |
| Carbon | `#494949` | `--color-carbon` | Secondary text, nav mờ, viền hỗ trợ — bước xám trung gian giữa ink và trắng |
| Pure White | `#ffffff` | `--color-pure-white` | Nền page và card, text trên nền tối, button fill cho ghost variants |
| Frost Blue | `#f0f5fa` | `--color-frost-blue` | Tông nền nhẹ cho các dải xen kẽ, nền header — lớp wash mát hầu như không thấy |
| Linen Gray | `#eaecf7` | `--color-linen-gray` | Divider trong bảng, viền mảnh trong layout nhiều dữ liệu — màu trung tính mát không cạnh tranh với bảng màu violet |

## Tokens — Typography

### Haffer — Hệ thống một font cho mọi thứ từ body đến display. Weight 400 dùng cho body, nav và text trong bảng; weight 600 xử lý heading, button và emphasis. Cấu trúc geometric custom tạo giọng fintech hiện đại — aperture tròn hơn Inter, terminal chặt hơn Geist. · `--font-haffer`
- **Thay thế:** Inter, DM Sans, hoặc General Sans
- **Weights:** 400, 600
- **Kích thước:** 12, 13, 14, 16, 17, 18, 19, 20, 22, 26, 30, 48, 60
- **Line height:** 1.0–2.0 (tight 1.0–1.2 trên display, thoải mái 1.4–1.5 trên body)
- **Letter spacing:** -0.045em ở 60px, -0.033em ở 30px, -0.030em ở 20px trở xuống
- **Vai trò:** Hệ thống một font cho mọi thứ từ body đến display. Weight 400 dùng cho body, nav và text trong bảng; weight 600 xử lý heading, button và emphasis. Cấu trúc geometric custom tạo giọng fintech hiện đại — aperture tròn hơn Inter, terminal chặt hơn Geist.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.03px | `--text-caption` |
| body-sm | 14px | 1.4 | -0.03px | `--text-body-sm` |
| body | 16px | 1.5 | -0.03px | `--text-body` |
| subheading | 20px | 1.31 | -0.03px | `--text-subheading` |
| heading-sm | 26px | 1.2 | -0.033px | `--text-heading-sm` |
| heading | 30px | 1.16 | -0.033px | `--text-heading` |
| heading-lg | 48px | 1 | -0.045px | `--text-heading-lg` |
| display | 60px | 1 | -0.045px | `--text-display` |

## 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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 400px |
| tags | 100px |
| cards | 16px |
| badges | 20px |
| buttons | 400px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| xl | `rgba(0, 0, 0, 0.15) 10px 20px 30px 0px` | `--shadow-xl` |

### Layout

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

## Components

### Primary Action Button
**Vai trò:** Main CTA cho các thời điểm chuyển đổi

Hình pill (bán kính 400px), nền #471cff, text trắng 16px Haffer weight 600, padding 12px 24px, không viền. Hover làm đậm thêm fill violet. Là interactive element đặc trưng của hệ thống.

### Ghost Action Button
**Vai trò:** Secondary CTA đặt cạnh primary

Hình pill (bán kính 400px), nền trong suốt, viền 1.5px màu #471cff, text màu #471cff 16px Haffer weight 600, padding 12px 24px. Sao chép hình dạng của primary nhưng lùi về mặt thị giác — viền violet trên nền card trắng.

### Hero Headline
**Vai trò:** Value proposition đầu trang

Text trắng 60px Haffer weight 600, line-height 1.0, letter-spacing -0.045em. Nằm trên nền Deep Iris (#0f0733). Bên dưới là body text 18px màu #dbd3ff hoặc trắng với độ mờ 80% cho subtitle.

### Trust Badge Pill
**Vai trò:** Social proof hoặc nhãn danh mục phía trên hero headline

Pill bo tròn (bán kính 100–400px), nền #7ae7fb hoặc #f0f5fa, text màu #18181f 13px Haffer weight 600, padding 8px 16px. Biến thể cyan trên hero tạo ra sự gián đoạn màu mát duy nhất trên các section tối.

### Pricing Tier Card
**Vai trò:** So sánh gói sản phẩm trên section pricing

Nền trắng, góc bo 16px, viền 1.5px màu #bbc5fa hoặc #dbd3ff, padding 24px. Chứa icon tier (hình vuông violet 32px), tên gói 20px weight 600, mô tả 14px, giá gốc gạch ngang + giá tháng in đậm + badge khuyến mãi đỏ. Drop shadow rgba(0,0,0,0.15) 10px 20px 30px tạo chiều sâu trên nền trắng.

### Promotional Badge
**Vai trò:** Làm nổi bật điểm giảm giá hoặc đánh dấu khẩn cấp

Pill bo tròn (bán kính 20px), nền #eb0130 hoặc #ff5a43, text trắng 12px Haffer weight 600, padding 4px 8px. Micro-badge đỏ trên trắng gắn vào giá gạch ngang.

### Feature Showcase Card
**Vai trò:** Làm nổi bật tính năng trên section tối kèm hình minh họa

Nền Deep Iris (#0f0733), góc bo 16px, padding 0 (ảnh tràn ra mép). Phần trên là product visualization full-bleed; phần dưới là nền trắng với heading 26px weight 600, body 16px, và link text màu violet.

### Feature Comparison Table
**Vai trò:** Ma trận tính năng giữa các gói

Nền trắng, row divider màu #eaecf7 (1px), column header có icon tile violet (nền #471cff, bán kính 16px, hình vuông 40px) phía trên tên gói 16px weight 600. Checkmark cho tính năng có sẵn được hiển thị trong vòng tròn xanh lá hoặc violet nhỏ.

### Top Navigation Bar
**Vai trò:** Navigation site cố định

Nền trắng, nav items và CTA có bán kính pill 400px, link 16px Haffer weight 400, item active weight 600 màu #471cff. Logo Quicken màu #471cff ở góc trên bên trái. Sign-in link căn phải. Sticky khi cuộn.

### Phone Mockup Frame
**Vai trò:** Product visualization trên hero

Khung kiểu iPhone với viền đen mảnh, xoay 3D nhẹ (-10° đến -15°), nổi bên cạnh headline. Nội dung màn hình là nền trắng với type Haffer và data visualization. Nằm trên nền hero Deep Iris.

### Centered Section Header
**Vai trò:** Giới thiệu section chuyển tiếp

Heading căn giữa 48px Haffer weight 600, #18181f, letter-spacing -0.045em, kèm violet pill button tùy chọn (#471cff, text trắng, bán kính 400px) ngay bên dưới. Nền section trắng.

### Inline Feature Icon
**Vai trò:** Chỉ báo danh mục trên pricing và feature cards

Hình vuông 32×32px với bán kính 8px, nền #471cff, line-icon trắng căn giữa. Đánh dấu từng tier hoặc danh mục tính năng mà không thêm nhiễu nhãn.

## Do's and Don'ts

### Nên làm
- Chỉ dùng Voltage Violet (#471cff) cho một hành động quan trọng nhất trên mỗi màn hình — không bao giờ chia sẻ sự chú ý qua nhiều violet CTA
- Đặt viền card thành Lilac Whisper (#dbd3ff) hoặc Periwinkle Mist (#bbc5fa) thay vì xám trung tính để củng cố brand identity ở mọi cạnh
- Đặt tất cả button thành border-radius 400px — hình pill là bắt buộc trong hệ thống này và báo hiệu hành động
- Thắt chặt letter-spacing dần dần: -0.030em ở 16px, -0.033em ở 26–30px, -0.045em ở 48px+
- Xen kẽ giữa section trắng và Deep Iris (#0f0733) để tạo nhịp điệu — không bao giờ để hai section tối cạnh nhau mà không có khoảng trắng ngắt
- Neo các section tối bằng text trắng full opacity; dùng Lilac Whisper (#dbd3ff) cho secondary text trên nền tối thay vì trắng mờ
- Chỉ dùng Signal Red (#eb0130) cho badge giảm giá và khẩn cấp — không bao giờ dùng để thay thế màu hành động chính

### Không nên làm
- Đừng thêm màu mới — hệ thống là nhị phân: accent violet trên nền trắng, hoặc trắng trên Deep Iris
- Đừng dùng drop shadow trên component nào khác ngoài pricing card stack — chiều sâu nên đến từ màu sắc và viền
- Đừng dùng bán kính góc sắc 0px hoặc tối thiểu 4px trên card — 16px là bán kính card tối thiểu và button phải giữ hình pill
- Đừng đặt body text dưới 14px hoặc trên 18px — hệ thống tránh cả micro-copy và body type lớn
- Đừng dùng #18181f và #000000 thay thế cho nhau — #000000 dành riêng cho navigation chrome; body text dùng #18181f
- Đừng thêm gradient — hệ thống flat theo thiết kế; chiều sâu đến từ độ tương phản section violet-Deep-Iris
- Đừng dùng weight 400 cho heading hoặc weight 600 cho body — việc gán weight nhị phân là một phần của chữ ký typographic

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 1 | Page Canvas | `#ffffff` | Nền page sáng mặc định và bề mặt card |
| 2 | Frost Band | `#f0f5fa` | Tông nền nhẹ cho section xen kẽ, dải header |
| 3 | Deep Iris | `#0f0733` | Section hero tối và bề mặt feature card |

## Elevation

- **Pricing Card:** `rgba(0, 0, 0, 0.15) 10px 20px 30px 0px`

## Imagery

Ảnh chụp màn hình sản phẩm chiếm vị trí trung tâm, được hiển thị dưới dạng iPhone mockup nổi ở góc xoay nhẹ trên nền hero Deep Iris — thiết bị là hero, không phải ảnh chụp lối sống. Hình ảnh phụ là flat data visualization (biểu đồ, đường dự báo dòng tiền, phân tích ngân sách) hiển thị bằng violet, cyan và trắng trực tiếp trên bề mặt card tối. Minh họa không có — hệ thống dựa vào UI sản phẩm thực, trust badges và headline số lớn. Nhiếp ảnh không được sử dụng; ngôn ngữ thị giác là product-and-data thuần túy.

## Layout

Container căn giữa max-width 1200px với side padding rộng rãi. Hero là full-bleed Deep Iris (#0f0733) với bố cục text-trái/product-phải bất đối xứng theo tỷ lệ 60/40. Bên dưới hero, nội dung xen kẽ: hàng pricing card trắng (grid 3 cột), section so sánh căn giữa trắng, sau đó grid feature card tối 2×2. Section gap là 80px với card padding nhất quán 24px. Navigation là thanh top bar trắng sticky với nav link căn giữa và sign-in căn phải. Hệ thống grid ưu tiên bố trí 2 cột và 3 cột; layout không bao giờ vượt quá 3 cột card.

## Agent Prompt Guide

**Quick Color Reference**
- text: #18181f
- background: #ffffff
- border: #dbd3ff hoặc #bbc5fa
- accent: Voltage Violet #471cff
- primary action: #471cff (filled action)
- dark surface: #0f0733

**Ví dụ Component Prompts**

1. Tạo một Primary Action Button: nền #471cff, text #ffffff, bán kính 9999px, padding pill gọn. Dùng filled treatment này cho main CTA.

2. Tạo một pricing tier card: nền trắng, góc bo 16px, viền 1.5px màu #bbc5fa, padding 24px. Một violet icon tile (32×32px, #471cff, bán kính 8px) nằm trên cùng bên trái. Tên gói 20px Haffer weight 600 #18181f bên dưới. Mô tả 14px #494949. Dòng giá hiển thị $3.99/tháng 22px weight 600, giá gạch ngang $7.00 14px #494949, và Signal Red badge (#eb0130, text trắng, bán kính 20px, padding 4px 8px) ghi '50% off'. Danh sách tính năng bên dưới với checkmark violet nhỏ. Hàng footer: filled Voltage Violet button + ghost violet button, cả hai bán kính 400px.

3. Tạo một feature showcase card: nền Deep Iris (#0f0733), bán kính 16px, product visualization full-bleed ở 60% phía trên (chart hoặc UI mock màu violet/cyan/trắng). 40% phía dưới là nền trắng với padding 24px, heading 26px Haffer weight 600 #18181f, body 16px #494949, và link text violet (#471cff, không gạch chân mặc định, gạch chân khi hover).

4. Tạo một comparison table: nền trắng, row divider 1px màu #eaecf7, ba cột. Mỗi column header có violet icon tile 40×40px (#471cff, bán kính 8px) phía trên tên gói 16px weight 600. Hàng tính năng 16px weight 400 #18181f bên trái, với checkmark vòng tròn violet (8px filled #471cff) trong các ô thích hợp.

5. Tạo một centered section header: nền trắng, heading 48px Haffer weight 600 #18181f căn giữa với letter-spacing -0.045em, và Voltage Violet pill button (#471cff, text trắng, bán kính 400px, padding 12px 24px) căn giữa cách 16px bên dưới.

## Similar Brands

- **Plaid** — Cùng fintech authority qua custom sans-serif type dày đặc, section tối violet/indigo xen kẽ trắng, và pill-shaped CTA
- **Mercury** — Hero section dark-mode với display type trắng, một accent color duy nhất (vàng của Mercury so với violet của Quicken), và grid card sạch không viền
- **Notion** — Hệ thống accent một màu brand trên nền trắng với geometric sans type, pill buttons, và elevation tối giản không viền
- **Linear** — Typographic tracking dày đặc tăng cường ở kích thước lớn, bề mặt flat, và ngôn ngữ hành động một accent color
- **Brex** — Hero tối với display headline lớn, product mockup nổi ở góc, và pricing tier card trắng với pill CTA

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-voltage-violet: #471cff;
  --color-deep-iris: #0f0733;
  --color-signal-red: #eb0130;
  --color-lilac-whisper: #dbd3ff;
  --color-periwinkle-mist: #bbc5fa;
  --color-coral-burst: #ff5a43;
  --color-aqua-pop: #7ae7fb;
  --color-ink-black: #18181f;
  --color-carbon: #494949;
  --color-pure-white: #ffffff;
  --color-frost-blue: #f0f5fa;
  --color-linen-gray: #eaecf7;

  /* Typography — Font Families */
  --font-haffer: 'Haffer', 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.03px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: -0.03px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.03px;
  --text-subheading: 20px;
  --leading-subheading: 1.31;
  --tracking-subheading: -0.03px;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.033px;
  --text-heading: 30px;
  --leading-heading: 1.16;
  --tracking-heading: -0.033px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.045px;
  --text-display: 60px;
  --leading-display: 1;
  --tracking-display: -0.045px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-100: 100px;

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

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 100px;
  --radius-full-2: 400px;

  /* Named Radii */
  --radius-nav: 400px;
  --radius-tags: 100px;
  --radius-cards: 16px;
  --radius-badges: 20px;
  --radius-buttons: 400px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.15) 10px 20px 30px 0px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-frost-band: #f0f5fa;
  --surface-deep-iris: #0f0733;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-voltage-violet: #471cff;
  --color-deep-iris: #0f0733;
  --color-signal-red: #eb0130;
  --color-lilac-whisper: #dbd3ff;
  --color-periwinkle-mist: #bbc5fa;
  --color-coral-burst: #ff5a43;
  --color-aqua-pop: #7ae7fb;
  --color-ink-black: #18181f;
  --color-carbon: #494949;
  --color-pure-white: #ffffff;
  --color-frost-blue: #f0f5fa;
  --color-linen-gray: #eaecf7;

  /* Typography */
  --font-haffer: 'Haffer', 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.03px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: -0.03px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.03px;
  --text-subheading: 20px;
  --leading-subheading: 1.31;
  --tracking-subheading: -0.03px;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.033px;
  --text-heading: 30px;
  --leading-heading: 1.16;
  --tracking-heading: -0.033px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.045px;
  --text-display: 60px;
  --leading-display: 1;
  --tracking-display: -0.045px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-100: 100px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 100px;
  --radius-full-2: 400px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.15) 10px 20px 30px 0px;
}
```