# BaseHub

> BaseHub — Style Reference

## Prompt Content

```
# BaseHub — Style Reference
> midnight canvas, molten filament

**Theme:** dark

BaseHub nói một thứ tiếng gần như đơn sắc: một canvas gần đen, thang xám cho text, và một điểm nhấn cam nóng chảy làm tất cả công việc của cả một hệ màu hoàn chỉnh. Sản phẩm là hero — những ảnh chụp màn hình editor không viền, kích thước lớn, nổi trên nền tối thay vì illustration, và một đường kẻ dọc cam mảnh ở mép trái neo mọi section như một margin note. Typography nén gọn và lặng lẽ: Geist semibold cho headline, regular cho body, với negative tracking chặt ở mọi kích cỡ để chữ có cảm giác được gia công bằng máy hơn là sắp chữ. Các surface phẳng và có viền mảnh thay vì đổ bóng, bán kính card 12px và button 4px giữ hình học sắc nét và quen thuộc với developer tool. Nốt ấm duy nhất là màu cam — dùng cho CTA, section tags, khung sản phẩm phát sáng, và chú thích vẽ tay — và một màu xanh mát (#55c2ff) chỉ dành riêng cho informational badges.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ember Orange | `#ff6c02` | `--color-ember-orange` | Primary CTA, section tags, active nav, khung sản phẩm phát sáng, chú thích vẽ tay, và đường kẻ trang trí duy nhất ở lề trái — giọng ấm duy nhất trong một bảng màu lạnh |
| Ember Glow | `linear-gradient(rgb(255, 108, 2), rgb(255, 155, 81))` | `--color-ember-glow` | Gradient stop đi cùng Ember Orange cho các surface gradient hiếm hoi (ví dụ: thanh accent trên template card) |
| Glacier Blue | `#55c2ff` | `--color-glacier-blue` | Accent xanh dương cho badges, validation surfaces, và status label ngắn. |
| Bone White | `#f3f3f3` | `--color-bone-white` | Neutral form states, badge text, và UI feedback nhẹ nhàng nơi màu sắc nên giữ kín đáo. Không nâng lên làm màu CTA chính |
| Ash Gray | `#dedede` | `--color-ash-gray` | Secondary text và icon stroke nhạt hơn trên surface tối |
| Fog Gray | `#909090` | `--color-fog-gray` | Border tương phản trung bình, control outlines, và structural separators. |
| Slate Gray | `#646464` | `--color-slate-gray` | Muted metadata text, timestamp labels, tertiary icon strokes |
| Iron Border | `#303030` | `--color-iron-border` | Hairline dividers, code block borders, list separators nhẹ |
| Charcoal Edge | `#252525` | `--color-charcoal-edge` | Card borders, frame edges nhẹ, input field borders |
| Graphite | `#1b1b1b` | `--color-graphite` | High-contrast neutral action fill cho primary button trên surface sáng. |
| Obsidian | `#121212` | `--color-obsidian` | Card surface — cao hơn canvas một bậc, dùng cho testimonial cards và elevated blocks |
| Onyx | `#0c0c0c` | `--color-onyx` | Quote/testimonial card surface, link button background, elevated surface phổ biến nhất |
| Void | `#040404` | `--color-void` | Page canvas — nền trang chủ đạo |
| Black | `#000000` | `--color-black` | Surface sâu nhất dùng cho footer và image fill nơi cần đen tuyệt đối |

## Tokens — Typography

### Geist — Primary UI and display typeface. Weight 600 cho headline, 500 cho nav và sub-labels, 400 cho body. Negative tracking chặt (-0.05em ở 60px thắt dần xuống -0.03em ở 16px) tạo cho chữ cảm giác được gia công, hình học — x-height cao và open apertures của Geist giữ cho body text nhỏ dễ đọc trên nền #040404 mà không cần tăng weight. Display sizes dùng lineHeight 1.0–1.14 để nén editorial. · `--font-geist`
- **Substitute:** Inter
- **Weights:** 400, 500, 600
- **Sizes:** 11, 12, 13, 14, 16, 18, 24, 32, 48, 60
- **Line height:** 1.0, 1.1, 1.14, 1.2, 1.23, 1.4, 1.5
- **Letter spacing:** -0.05em ở 60px, -0.04em ở 48px, -0.03em ở 16–32px, normal ở 11–14px
- **Role:** Primary UI and display typeface. Weight 600 cho headline, 500 cho nav và sub-labels, 400 cho body. Negative tracking chặt (-0.05em ở 60px thắt dần xuống -0.03em ở 16px) tạo cho chữ cảm giác được gia công, hình học — x-height cao và open apertures của Geist giữ cho body text nhỏ dễ đọc trên nền #040404 mà không cần tăng weight. Display sizes dùng lineHeight 1.0–1.14 để nén editorial.

### Geist Mono — Micro-copy gần code: version tags, branch labels, file paths, inline commit IDs. Chỉ dùng ở 13px / 400 với cùng tracking -0.03em như body Geist — sự nhất quán này làm cho mono có cảm giác bản địa thay vì một phần tử ngoại lai. · `--font-geist-mono`
- **Substitute:** JetBrains Mono
- **Weights:** 400
- **Sizes:** 13
- **Line height:** 1.5
- **Letter spacing:** -0.03em
- **Role:** Micro-copy gần code: version tags, branch labels, file paths, inline commit IDs. Chỉ dùng ở 13px / 400 với cùng tracking -0.03em như body Geist — sự nhất quán này làm cho mono có cảm giác bản địa thay vì một phần tử ngoại lai.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.4 | — | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| heading-sm | 18px | 1.4 | -0.54px | `--text-heading-sm` |
| heading | 24px | 1.23 | -0.72px | `--text-heading` |
| heading-lg | 32px | 1.2 | -0.96px | `--text-heading-lg` |
| display | 48px | 1.14 | -1.92px | `--text-display` |
| display-xl | 60px | 1.1 | -3px | `--text-display-xl` |

## 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` |
| 56 | 56px | `--spacing-56` |
| 80 | 80px | `--spacing-80` |
| 112 | 112px | `--spacing-112` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 12px |
| pills | 9999px |
| badges | 9999px |
| inputs | 8px |
| buttons | 4px |
| imageCards | 21px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| md | `rgba(0, 0, 0, 0.01) -10px 13px 10px 0px, rgba(0, 0, 0, 0....` | `--shadow-md` |

### Layout

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

## Components

### Primary CTA Button
**Vai trò:** Hành động chuyển đổi chính (Get Started, Sign Up, Open in new tab)

Fill Ember Orange (#ff6c02), text Bone White (#f3f3f3), Geist 500 ở 14px, radius 4px, padding 14px 16px. Không shadow. Button filled duy nhất trong hệ thống — nó nên có cảm giác như bật một công tắc trong căn phòng tối.

### Secondary Outlined Button
**Vai trò:** Hành động đi kèm với primary CTA (Schedule a Demo, Learn more)

Nền trong suốt, border Fog Gray (#909090) 1px, text Fog Gray, Geist 500 ở 14px, radius 4px, padding 14px 16px. Nhẹ nhàng hơn primary về mặt thị giác để mắt đổ bộ vào màu cam trước.

### Nav Login Button
**Vai trò:** Hành động ít nhấn mạnh trong top navigation

Fill Graphite (#1b1b1b), text Bone White, Geist 500 ở 14px, radius 4px, padding 6px 12px. Nằm cạnh nút Sign Up màu cam chính và giữ vai trò phụ thuộc.

### Section Tag Pill
**Vai trò:** Label nhỏ mở đầu một feature section (Editor, Branching, Playground)

Fill trong suốt, border Ember Orange 1px, text Ember Orange, Geist 500 ở 12px, radius 9999px, padding 6px 12px. Đọc như một category marker hơn là một button.

### New Badge
**Vai trò:** Chú thích gắn vào nav link chỉ nội dung mới

Fill trong suốt, border Fog Gray 1px, text Fog Gray, Geist 500 ở 11px, radius 4px, padding 2px 6px. Nằm inline với link mà nó sửa đổi.

### Info Badge
**Vai trò:** Chỉ báo trạng thái hoặc môi trường (playground warnings, branch labels)

Fill trong suốt, border Glacier Blue (#55c2ff) 1px, text Glacier Blue, Geist 500 ở 12px, radius 9999px, padding 4px 10px. Nơi duy nhất màu xanh xuất hiện — dành riêng cho ngữ cảnh thông tin.

### Testimonial Card
**Vai trò:** Block quote từ khách hàng, kèm thông tin tác giả

Fill Onyx (#0c0c0c), không border, radius 12px, padding 24px. Icon dấu ngoặc kép màu Bone White ở trên, text quote màu Bone White ở 14px, tên tác giả màu Fog Gray với avatar bên phải. Surface phẳng — không shadow.

### Template Card
**Vai trò:** Template preview có thể chọn trong template gallery

Fill Obsidian (#121212), border Charcoal Edge (#252525) 1px, radius 12px, padding trong 0px (ảnh phủ kín card). Thanh accent 2px ở trên cùng với màu thương hiệu (tím, cam, hoặc vàng từ chính template đó). Title Bone White 16px semibold bên dưới ảnh, description Fog Gray 14px regular.

### Product Screenshot Frame
**Vai trò:** Element hero bên dưới headline — bản xem trước trực tiếp của editor

Fill Void (#040404), border Ember Orange 2px, outer radius 16px. Nội dung screenshot là ảnh chụp sản phẩm thật, không phải mockup. Ánh sáng viền cam là thứ làm nó có cảm giác như một cục than hồng trên canvas tối.

### Feature Block Heading
**Vai trò:** Tiêu đề section lớn cho mỗi feature explainer

Text Bone White, Geist 600 ở 48px, lineHeight 1.14, letter-spacing -0.04em. Theo sau bởi description Fog Gray 14–16px regular. Luôn được đặt trước bởi một Section Tag Pill.

### Logo Strip
**Vai trò:** Hàng logo khách hàng để tạo bằng chứng xã hội

Logo hiển thị bằng Fog Gray (#909090) ở chiều cao đồng nhất (~20px), cách đều nhau với gap 32px, căn trái trong page max width. Label 'Trusted by' Fog Gray 12px nằm phía trên.

### Hand-drawn Annotation
**Vai trò:** Chú thích vui tươi chỉ vào một tính năng trong product screenshot

Ember Orange (#ff6c02), stroke mảnh, kiểu viết tay thân thiện, luôn đi kèm với mũi tên chỉ vào element UI liên quan. Dùng có chừng mực — tối đa một cái mỗi hero section — để thêm cá tính mà không làm rối bố cục editorial.

### Decorative Left Margin Rule
**Vai trò:** Đường dọc hướng dẫn neo bố cục trang

Stroke Ember Orange 1px, chiều cao full viewport, đặt ở ~5% từ mép trái. Một chấm tròn Ember Orange nhỏ (4px) đánh dấu điểm bắt đầu section dọc theo đường kẻ. Đây là element thị giác liên tục duy nhất lặp lại trên tất cả các section.

### Floating Chat Widget
**Vai trò:** Điểm vào hỗ trợ thường trực ở góc dưới bên phải

Hình tròn fill Ember Orange (#ff6c02), đường kính 48px, icon chat Bone White ở giữa. Fixed position, bottom 24px, right 24px. Drop shadow nhẹ để tách khỏi canvas.

## Do's and Don'ts

### Nên
- Dùng Ember Orange (#ff6c02) cho chính xác một element trên mỗi viewport: primary CTA, section tag, hoặc product frame border — không bao giờ dùng nhiều cùng lúc
- Đặt heading ở Geist 600 với letter-spacing -0.04em ở 48px và -0.05em ở 60px; tracking chặt là thứ làm cho chữ có cảm giác được gia công
- Dùng radius 12px cho cards và 4px cho buttons; 9999px chỉ dành cho tags, badges, và pills
- Định nghĩa surface bằng border mảnh 1px #252525 hoặc #303030 thay vì shadow; trang nên đọc như hình học phẳng của code editor
- Neo mọi section bằng một Section Tag Pill màu Ember Orange trước headline — đây là motif lặp lại của hệ thống
- Để product screenshots phủ kín container edge-to-edge; viền cam là khung duy nhất chúng cần
- Giữ body text ở 14–16px Fog Gray (#909090) và dành Bone White (#f3f3f3) cho headline và primary actions

### Không nên
- Không bao giờ thêm màu ấm thứ hai; cam là giọng ấm duy nhất và thêm đỏ, vàng, hoặc một màu gần cam khác sẽ làm loãng hệ thống một accent
- Không dùng drop shadows trên cards, buttons, hoặc navigation; thiết kế từ chối elevation như một tín hiệu thị giác
- Không đặt body text bằng Bone White (#f3f3f3) — dùng Fog Gray (#909090) cho đoạn văn để tạo bầu không khí product-canvas mờ
- Tránh gradient trên surface lớn; gradient duy nhất là cặp cam→đào trên thanh accent của template card
- Không dùng border radius lớn hơn 12px trên cards hoặc 4px trên buttons; radius lớn đọc như consumer app thân thiện, và đây không phải
- Không bao giờ căn giữa body copy; BaseHub là editorial và căn trái xuyên suốt, bao gồm description và quote
- Không dùng Glacier Blue (#55c2ff) cho bất cứ thứ gì ngoài informational badges và status chips

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|---------|-------|
| 0 | Void | `#040404` | Page canvas — nền chủ đạo mà mọi section nổi trên đó |
| 1 | Black | `#000000` | Layer sâu nhất, dùng có chừng mực cho footer và image fills |
| 2 | Onyx | `#0c0c0c` | Testimonial và quote card surface, cao hơn canvas một bậc |
| 3 | Obsidian | `#121212` | Elevated product blocks và secondary card surface |
| 4 | Graphite | `#1b1b1b` | Button fills và elevated surface cao nhất |

## Elevation

- **Floating Chat Widget:** `0 4px 12px rgba(0, 0, 0, 0.4)`

## Imagery

Product screenshots là toàn bộ ngôn ngữ thị giác. Hero là ảnh chụp editor không viền được đóng khung bằng stroke cam 2px, không phải stock photo hay illustration. Các section phụ dùng logo khách hàng (grayscale, một hàng) và template preview cards mà bản thân chúng cũng là product screenshots. Imagery trang trí duy nhất là chú thích cam vẽ tay ('PLAY WITH IT' với mũi tên cong) đặt chồng lên ảnh chụp sản phẩm — đây là cách thương hiệu thêm cá tính. Không có lifestyle photography, không 3D renders, không abstract gradients. Không gian thị giác bị chi phối bởi text và product UI, không phải bởi imagery.

## Layout

Container căn giữa max-width 1200px, canvas tối full-viewport phía sau. Hero là chồng text căn trái (version tag pill → 60px headline → 14px subhead → hàng button) chiếm khoảng nửa trái, với product screenshot chiếm nửa phải trên desktop. Đường kẻ lề trái trang trí ở ~5% từ mép là element duy nhất phá vỡ container. Các feature section bên dưới là một cột: section tag pill → 48px headline → 14px description → visual hỗ trợ, tất cả căn trái với gap dọc 80px. Template gallery là grid 3 cột với card có chiều rộng bằng nhau. Nhịp điệu section nhất quán — không có band xen kẽ, không chuyển đổi tối/sáng — toàn bộ trang là một surface tối liên tục.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #f3f3f3 (primary), #909090 (body), #646464 (muted)
- background: #040404 (canvas), #0c0c0c (card), #121212 (elevated)
- border: #252525 (cards), #303030 (dividers), #1b1b1b (button fill)
- accent: #ff6c02 (Ember Orange — giọng ấm duy nhất)
- primary action: #ff6c02 (filled action)

**3 Ví dụ Component Prompts**

1. Tạo một Primary Action Button: nền #ff6c02, text #303030, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính.

2. *Feature block*: canvas #040404. Section tag pill màu #ff6c02 (giống như trên). Headline — Geist 600 ở 48px, #f3f3f3, letter-spacing -1.92px, line-height 1.14. Description — Geist 400 ở 16px, #909090, max-width 640px. Testimonial card bên dưới — fill #0c0c0c, không border, radius 12px, padding 24px, text quote #f3f3f3 14px, tác giả #909090 12px.

3. *Template gallery*: grid 3 cột, gap 24px. Mỗi card — fill #121212, border #252525 1px, radius 12px, padding 0px. Thanh accent trên cùng — cao 2px, màu theo template (tím, cam, hoặc vàng). Template screenshot phủ kín thân card. Title bên dưới ảnh — Geist 600 ở 16px, #f3f3f3. Description — Geist 400 ở 14px, #909090.

## Similar Brands

- **Linear** — Cùng bầu không khí dark-mode editor-tool với một accent sống động duy nhất, tracking Geist chặt, hairline borders thay vì shadow, và product screenshots làm hero
- **Vercel** — Canvas gần đen, thang xám cho text, một màu accent ấm làm tất cả công việc hành động, và cùng hệ thống elevation surface phẳng dựa trên border
- **Resend** — Thẩm mỹ developer-tool với bảng màu đơn sắc, radii nhỏ gọn 4px/12px, letter-spacing chặt trên chữ kiểu Geist, và accent lề trái trang trí
- **Notion** — Cách tiếp cận editor-screenshot-làm-hero, card radius 12px, và bố cục product-forward với trang trí tối thiểu

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ember-orange: #ff6c02;
  --color-ember-glow: #ff9b51;
  --gradient-ember-glow: linear-gradient(rgb(255, 108, 2), rgb(255, 155, 81));
  --color-glacier-blue: #55c2ff;
  --color-bone-white: #f3f3f3;
  --color-ash-gray: #dedede;
  --color-fog-gray: #909090;
  --color-slate-gray: #646464;
  --color-iron-border: #303030;
  --color-charcoal-edge: #252525;
  --color-graphite: #1b1b1b;
  --color-obsidian: #121212;
  --color-onyx: #0c0c0c;
  --color-void: #040404;
  --color-black: #000000;

  /* Typography — Font Families */
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.4;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.54px;
  --text-heading: 24px;
  --leading-heading: 1.23;
  --tracking-heading: -0.72px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.96px;
  --text-display: 48px;
  --leading-display: 1.14;
  --tracking-display: -1.92px;
  --text-display-xl: 60px;
  --leading-display-xl: 1.1;
  --tracking-display-xl: -3px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --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-56: 56px;
  --spacing-80: 80px;
  --spacing-112: 112px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 21px;
  --radius-full: 96px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-badges: 9999px;
  --radius-inputs: 8px;
  --radius-buttons: 4px;
  --radius-imagecards: 21px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.01) -10px 13px 10px 0px, rgba(0, 0, 0, 0.02) -4px 6px 7px 0px, rgba(0, 0, 0, 0.02) -1px 1px 4px 0px;

  /* Surfaces */
  --surface-void: #040404;
  --surface-black: #000000;
  --surface-onyx: #0c0c0c;
  --surface-obsidian: #121212;
  --surface-graphite: #1b1b1b;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ember-orange: #ff6c02;
  --color-ember-glow: #ff9b51;
  --color-glacier-blue: #55c2ff;
  --color-bone-white: #f3f3f3;
  --color-ash-gray: #dedede;
  --color-fog-gray: #909090;
  --color-slate-gray: #646464;
  --color-iron-border: #303030;
  --color-charcoal-edge: #252525;
  --color-graphite: #1b1b1b;
  --color-obsidian: #121212;
  --color-onyx: #0c0c0c;
  --color-void: #040404;
  --color-black: #000000;

  /* Typography */
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.4;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.54px;
  --text-heading: 24px;
  --leading-heading: 1.23;
  --tracking-heading: -0.72px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.96px;
  --text-display: 48px;
  --leading-display: 1.14;
  --tracking-display: -1.92px;
  --text-display-xl: 60px;
  --leading-display-xl: 1.1;
  --tracking-display-xl: -3px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 21px;
  --radius-full: 96px;
  --radius-full-2: 9999px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.01) -10px 13px 10px 0px, rgba(0, 0, 0, 0.02) -4px 6px 7px 0px, rgba(0, 0, 0, 0.02) -1px 1px 4px 0px;
}
```