# Upstash

> # Upstash — Style Reference

## Prompt Content

```
# Upstash — Style Reference
> Terminal màu ngọc lục bảo trong xưởng làm việc ngập nắng — bề mặt trắng sáng với một điểm nhấn xanh đậm duy nhất khiến mọi thao tác đều cảm giác như được bật lên.

**Theme:** light

Upstash là nền tảng dữ liệu ưu tiên developer với thẩm mỹ xưởng làm việc sáng, thoáng: canvas trắng, viền siêu mảnh (hairline borders), và một điểm nhấn xanh ngọc lục bảo duy nhất làm công việc của hàng chục màu sắc. Thương hiệu dùng màu xanh rừng sâu (#022c22) cho toàn bộ văn bản — không phải đen — mang đến cho mọi màn hình một hơi ấm hữu cơ tinh tế trong khi vẫn giữ bản sắc kỹ thuật rõ ràng. Headline cực lớn (lên đến 180px) sử dụng display cut dạng nén của Inter Tight với tracking dày, tạo cảm giác về quy mô kỹ thuật đầy tự tin. Các component được thiết kế nhẹ nhàng có chủ đích: pill-shaped controls chiếm ưu thế, border chỉ 1px và gần như vô hình, shadow giảm xuống mức thì thầm (0 1px 2px ở độ mờ 5%). Kết quả là một bề mặt lùi lại để code, logo và product chrome có thể lên tiếng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Forest Ink | `#022c22` | `--color-forest-ink` | Toàn bộ văn bản, heading và icon strokes — màu xanh đậm bão hòa thấp thay thế màu đen trong toàn bộ giao diện, mang đến cho hệ thống hơi ấm kỹ thuật hữu cơ |
| Emerald Pulse | `linear-gradient(to right, #007a55, #00bc7d, #f59e0b)` | `--color-emerald-pulse` | Điểm nhấn xanh 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 CTA chính; gradient Hero headline chảy từ xanh rừng qua ngọc lục bảo đến hổ phách — làm cho display wordmark trở nên sống động |
| Pine | `#007a55` | `--color-pine` | Màu xanh thương hiệu thứ cấp cho trạng thái button tối hơn, link text và icon outlines khi cần trọng lượng nặng hơn Forest Ink |
| Mint Glow | `#34d399` | `--color-mint-glow` | Màu xanh nhấn sáng cho icon thứ cấp, highlight trang trí và hover state washes |
| Jade Wash | `#10b981` | `--color-jade-wash` | Màu xanh trung bình cho outlined button borders, checkbox accents và form focus rings |
| Spearmint | `#6ee7b7` | `--color-spearmint` | Màu xanh nhạt nhất cho link hover states và decorative washes tinh tế |
| Signal Red | `#dc2626` | `--color-signal-red` | Điểm nhấn đỏ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |
| Lilac Whisper | `#e9d5ff` | `--color-lilac-whisper` | Accent tím nhạt cho icon sản phẩm QStash và category tags cần tách biệt về sắc độ khỏi họ xanh |
| Snow | `#ffffff` | `--color-snow` | Canvas trang, bề mặt card và inverse text trên dark code blocks |
| Paper | `#f5f5f5` | `--color-paper` | Nền section xen kẽ tinh tế và disabled control fills |
| Pale Sage | `#c9dbd6` | `--color-pale-sage` | Bề mặt pha xanh nhạt cho hero background washes và gradient tail stop trên nền trang trí |
| Mint Mist | `#d2f2e7` | `--color-mint-mist` | Nền pha xanh nhạt nhất cho announcement bars, tag pills và hero's left-edge gradient wash |
| Hairline | `#e5e7eb` | `--color-hairline` | Màu border 1px phổ quát cho card, input, divider và table rules — màu được sử dụng nhiều nhất trong hệ thống |
| Graphite | `#71717a` | `--color-graphite` | Secondary text mờ, nav items, placeholder text và subdued icon strokes |
| Carbon | `#3d3d3f` | `--color-carbon` | Màu trung tính tối nhất cho code block backgrounds và high-contrast borders nơi #000 quá gắt |
| Obsidian | `#000000` | `--color-obsidian` | Chỉ dùng cho code block background — bề mặt đen cứng duy nhất trong hệ thống |

## Tokens — Typography

### Inter — Body text, nav links, buttons, labels và small UI chrome — workhorse sans cho mọi thứ dưới cấp heading · `--font-inter`
- **Thay thế:** system-ui, -apple-system, sans-serif
- **Weights:** 400, 500, 600
- **Kích thước:** 12px, 13px, 14px, 16px, 20px, 24px, 48px
- **Line height:** 1.40
- **Vai trò:** Body text, nav links, buttons, labels và small UI chrome — workhorse sans cho mọi thứ dưới cấp heading

### Inter Tight — Display và heading face — các cut nén với negative tracking mang đến cho headline chất kỹ thuật, dày đặc; kích thước 128px và 180px tạo nên những khoảnh khắc hero 'loud whisper' đặc trưng nơi weight 600-700 kết hợp với kích thước cực lớn nhưng vẫn kiềm chế · `--font-inter-tight`
- **Thay thế:** Inter, system-ui, sans-serif
- **Weights:** 500, 600, 700
- **Kích thước:** 22px, 24px, 30px, 48px, 128px, 180px
- **Line height:** 1.20
- **Letter spacing:** -0.025em
- **Vai trò:** Display và heading face — các cut nén với negative tracking mang đến cho headline chất kỹ thuật, dày đặc; kích thước 128px và 180px tạo nên những khoảnh khắc hero 'loud whisper' đặc trưng nơi weight 600-700 kết hợp với kích thước cực lớn nhưng vẫn kiềm chế

### ui-monospace — Code blocks và inline code — negative tracking nhẹ giúp thắt chặt ký tự monospace cho trải nghiệm đọc sạch hơn, ít giống máy chữ hơn · `--font-ui-monospace`
- **Thay thế:** JetBrains Mono, Fira Code, monospace
- **Weights:** 400
- **Kích thước:** 14px
- **Line height:** 1.50
- **Letter spacing:** -0.073em
- **Vai trò:** Code blocks và inline code — negative tracking nhẹ giúp thắt chặt ký tự monospace cho trải nghiệm đọc sạch hơn, ít giống máy chữ hơn

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | — | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| heading-sm | 20px | 1.4 | -0.5px | `--text-heading-sm` |
| heading | 30px | 1.25 | -0.75px | `--text-heading` |
| heading-lg | 48px | 1.2 | -1.2px | `--text-heading-lg` |
| display | 128px | 1 | -3.2px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 8px

**Mật độ:** comfortable

### Spacing Scale

| Tên | Giá trị | 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` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 112 | 112px | `--spacing-112` |
| 216 | 216px | `--spacing-216` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tabs | 12px |
| cards | 16px |
| pills | 9999px |
| buttons | 9999px |
| codeBlocks | 12px |
| smallChips | 6px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 32px
- **Element gap:** 8px

## Components

### Primary Pill Button
**Vai trò:** Main call-to-action

Button bo tròn hoàn toàn (9999px radius), nền Emerald Pulse (#00bc7d), chữ trắng, Inter 14px weight 500, padding 10px 20px, tùy chọn trailing arrow icon. Action được tô màu duy nhất trong hệ thống.

### Ghost Outline Button
**Vai trò:** Secondary navigation action

Bo tròn hoàn toàn (9999px), nền trong suốt, border 1px Jade Wash (#10b981) hoặc Emerald Pulse, chữ Emerald Pulse, 14px Inter weight 500. Dùng cho 'Login' trong nav.

### Navigation Bar
**Vai trò:** Điều hướng cấp cao nhất

Nền trắng (#ffffff), border dưới 1px Hairline (#e5e7eb), chiều cao 64px, container max-width 1200px. Logo bên trái (pill-shaped emerald mark + wordmark), nav links căn giữa màu Graphite (#71717a), Login button căn phải. Không shadow, không sticky offset trên landing.

### Product Tab Card
**Vai trò:** Bộ chọn danh mục cho bộ sản phẩm

Nền trắng, border 1px Hairline, radius 16px, padding 20px 24px. Chứa icon tile màu (16px) và tên sản phẩm màu Forest Ink. Trạng thái active hiển thị nền tối hơn và chữ Pine.

### Code Example Block
**Vai trò:** Hiển thị code với syntax highlighting

Nền Obsidian (#000000), sidebar trái Carbon (#3d3d3f), radius 12px, text ui-monospace 14px với letter-spacing -0.073em. Sidebar hiển thị các category ví dụ (Caching, Session Management) dưới dạng tabs căn trái với active item được highlight. Tab bar trên cùng hiển thị language toggles (TypeScript/Python).

### Feature Check List
**Vai trò:** Liệt kê tính năng dạng bullet point

Vertical stack, row gap 8px. Mỗi item: icon check 16px Jade Wash (#10b981), text Forest Ink 14px. Không card background — nằm trực tiếp trên canvas hoặc Paper surface.

### Customer Logo Pill
**Vai trò:** Hiển thị logo để xác thực xã hội

Nền trắng, border 1px Hairline, radius 9999px, padding 12px 20px. Chứa brand logo (max-height 20px) căn giữa. Sắp xếp thành 2-3 hàng với gap 12px.

### Testimonial Card
**Vai trò:** Trưng bày lời khách hàng

Nền trắng, border 1px Hairline, radius 16px, padding 48px. Layout căn giữa: company logo (32px) ở trên, quote text Forest Ink 16px bên dưới, attribution và pagination dots ở dưới cùng. Dots là hình tròn 6px, active dot là Emerald Pulse.

### Announcement Bar
**Vai trò:** Thông báo chính sách đầu trang

Nền đen, chữ trắng 13px, căn giữa, chiều cao 40px. Close button (×) bên phải màu trắng.

### Logo Wordmark
**Vai trò:** Dấu hiệu nhận diện thương hiệu

Icon pin/spiral tròn Emerald Pulse (24px) + wordmark 'upstash' Forest Ink Inter 600. Icon là spiral/mũi tên cách điệu gợi chuyển động và luồng dữ liệu.

### Documentation Link Button
**Vai trò:** Secondary action kèm icon

Kiểu ghost, nền trắng, border 1px Hairline, radius 12px (không pill), padding 10px 16px. Text Forest Ink 14px, icon tài liệu nhỏ bên trái, icon external link bên phải.

### Hero Display Heading
**Vai trò:** Headline chính của trang

Inter Tight weight 600, 128px hoặc 180px, line-height 1.00, letter-spacing -0.025em. Fill là Sunset Gradient (#007a55 → #00bc7d → #f59e0b). Text căn giữa, xuống dòng 2 dòng. Đây là chữ ký thị giác của thương hiệu.

## Do's and Don'ts

### Nên làm
- Dùng #022c22 Forest Ink cho TẤT CẢ body và heading text — không bao giờ mặc định dùng đen hoặc #333
- Áp dụng pill radius 9999px cho mọi button, nav link và logo chip — pills là hình dạng định nghĩa hệ thống
- Đặt display headings ở 128px+ với Inter Tight weight 600 và Sunset Gradient fill
- Phân tách các bề mặt bằng hairline borders 1px #e5e7eb, không dùng shadow hoặc background tints
- Dùng #00bc7d Emerald Pulse làm màu button được tô duy nhất — không màu xanh nào khác được làm button background
- Cách nhau section 64-96px theo chiều dọc để display type lớn có không gian thở
- Dùng ui-monospace 14px với letter-spacing -0.073em cho tất cả code blocks

### Không nên làm
- Không dùng #000000 cho text — luôn dùng Forest Ink #022c22 để duy trì hơi ấm xanh hữu cơ
- Không thêm drop shadows vào card, modal hoặc navigation — hệ thống cố tình phẳng
- Không dùng góc vuông hoặc bo tròn vừa phải (8px) cho buttons — pills là bắt buộc cho actions
- Không áp dụng Sunset Gradient cho bất cứ thứ gì nhỏ hơn 48px — gradient chỉ hoạt động ở display scale
- Không giới thiệu thêm accent colors — hệ thống là monochrome xanh với một màu đỏ dành riêng cho Redis
- Không dùng Inter cho display headings — Inter Tight là bắt buộc cho chất nén, tracking dày
- Không dùng background color tints để phân tách section — chỉ xen kẽ giữa trắng và #f5f5f5

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang chính |
| 1 | Paper | `#f5f5f5` | Dải section xen kẽ và biến thể nền tinh tế |
| 2 | Card | `#ffffff` | Bề mặt card nâng cao nằm trên canvas, được phân tách bằng hairline borders |
| 3 | Code Surface | `#000000` | Code example blocks tối — bề mặt đen duy nhất |

## Elevation

- **Buttons, links, small interactive elements:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`

## Imagery

Ngôn ngữ thị giác không ảnh chụp, dẫn dắt bằng icon. Hình ảnh duy nhất là product chrome: icon SVG màu cho sản phẩm (Redis hash đỏ, Vector cam, QStash tím, Workflow tím nhạt, Box xanh) và logo công ty khách hàng. Đồ họa trừu tượng bao gồm wireframe globe/mesh tinh tế trong phần 'Fast Anywhere'. Không stock photography, không khuôn mặt người, không illustration trang trí. Trọng lượng thị giác đến hoàn toàn từ typography, gradient và ảnh chụp màn hình UI sản phẩm.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #022c22 (Forest Ink)
- background: #ffffff (Snow canvas)
- border: #e5e7eb (Hairline)
- accent: #00bc7d (Emerald Pulse)
- muted text: #71717a (Graphite)
- primary action: không có màu CTA riêng biệt

**3-5 Ví dụ Component Prompts**

Không quan sát thấy màu primary action riêng biệt; dùng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA được tô.

2. *Tạo product tab strip:* Hàng ngang 5 tabs, mỗi tab nền trắng với border 1px #e5e7eb, radius 16px, padding 12px 20px. Nội dung tab: icon màu 16px + tên sản phẩm màu #022c22 Inter 14px weight 500. Tab đầu tiên có nền #f5f5f5 và text #007a55 cho trạng thái active. Gap 8px giữa các tab.

3. *Tạo code example block:* Radius 12px, nền #000000, sidebar trái Carbon #3d3d3f (rộng 80px). Sidebar hiển thị category items dưới dạng hàng padding 12px 16px, text Inter 13px #e5e7eb, active item với nền #1f1f1f. Khu vực chính: ui-monospace 14px với letter-spacing -1px, code được syntax-highlight với #00bc7d (keywords), #e9d5ff (strings), #ffffff (default).

4. *Tạo customer logo grid:* 3 cột, 2 hàng, gap 12px. Mỗi ô: nền trắng, border 1px #e5e7eb, radius 9999px, padding 16px 32px, logo căn giữa (grayscale hoặc màu gốc, max-height 20px).

5. *Tạo testimonial card:* Nền trắng, border 1px #e5e7eb, radius 16px, padding 48px, căn giữa. Company logo ở trên (chiều cao 32px, #022c22). Quote text: #022c22 Inter 16px weight 400, max-width 640px, căn giữa. Pagination dots bên dưới: hình tròn 6px, gap 8px, active dot #00bc7d, inactive dots #e5e7eb.

## Similar Brands

- **Vercel** — Cùng thẩm mỹ white-canvas sạch với pill-shaped buttons và bảng màu đơn sắc được điểm xuyết bằng một brand accent duy nhất
- **Linear** — Cách tiếp cận display headings giống hệt — sans-serif nén cỡ lớn với tight tracking, shadow tối thiểu, hairline borders là separator duy nhất
- **Supabase** — Cùng ngôn ngữ thị giác developer-tools với một màu xanh thương hiệu duy nhất, dark code blocks và navigation dẫn dắt bằng product-icon
- **Railway** — Cùng thẩm mỹ workshop-bright với pill controls, spacing rộng rãi và quy ước một chromatic accent trên nền canvas trắng
- **PlanetScale** — Cả hai đều dùng màu thương hiệu đậm bão hòa thấp cho text thay vì đen, tạo cùng hơi ấm kỹ thuật hữu cơ với một accent sống động duy nhất

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-forest-ink: #022c22;
  --color-emerald-pulse: #00bc7d;
  --gradient-emerald-pulse: linear-gradient(to right, #007a55, #00bc7d, #f59e0b);
  --color-pine: #007a55;
  --color-mint-glow: #34d399;
  --color-jade-wash: #10b981;
  --color-spearmint: #6ee7b7;
  --color-signal-red: #dc2626;
  --color-lilac-whisper: #e9d5ff;
  --color-snow: #ffffff;
  --color-paper: #f5f5f5;
  --color-pale-sage: #c9dbd6;
  --color-mint-mist: #d2f2e7;
  --color-hairline: #e5e7eb;
  --color-graphite: #71717a;
  --color-carbon: #3d3d3f;
  --color-obsidian: #000000;

  /* Typography — Font Families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.5px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.75px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -1.2px;
  --text-display: 128px;
  --leading-display: 1;
  --tracking-display: -3.2px;

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

  /* 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-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-216: 216px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 35.2px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tabs: 12px;
  --radius-cards: 16px;
  --radius-pills: 9999px;
  --radius-buttons: 9999px;
  --radius-codeblocks: 12px;
  --radius-smallchips: 6px;

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

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-paper: #f5f5f5;
  --surface-card: #ffffff;
  --surface-code-surface: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-forest-ink: #022c22;
  --color-emerald-pulse: #00bc7d;
  --color-pine: #007a55;
  --color-mint-glow: #34d399;
  --color-jade-wash: #10b981;
  --color-spearmint: #6ee7b7;
  --color-signal-red: #dc2626;
  --color-lilac-whisper: #e9d5ff;
  --color-snow: #ffffff;
  --color-paper: #f5f5f5;
  --color-pale-sage: #c9dbd6;
  --color-mint-mist: #d2f2e7;
  --color-hairline: #e5e7eb;
  --color-graphite: #71717a;
  --color-carbon: #3d3d3f;
  --color-obsidian: #000000;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.5px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.75px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -1.2px;
  --text-display: 128px;
  --leading-display: 1;
  --tracking-display: -3.2px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 35.2px;
  --radius-full: 9999px;

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