# Clerk

> Clerk — Style Reference

## Prompt Content

```
# Clerk — Style Reference
> Developer dashboard ẩn sau lớp kính tím mờ — các bề mặt mang cảm giác như bản xem trước live IDE: thẻ sản phẩm tối nổi trên lớp vỏ tài liệu sáng, với một xung tím điện duy nhất đánh dấu đường đi phía trước.

**Theme:** pha trộn

Clerk sử dụng canvas hai tính cách: lớp vỏ marketing gần trắng (#f7f7f8) với đường viền siêu mảnh và khoảng trắng rộng rãi, trong khi các bề mặt demo sản phẩm rơi vào thẻ tối gần đen (#212126) để trưng bày UI components trong ngữ cảnh thực tế. Màu thương hiệu duy nhất — tím trung tính (#6c47ff) — xuất hiện với độ chính xác phẫu thuật: chỉ trên primary CTA và thỉnh thoảng làm điểm nhấn heading, khiến mỗi lần xuất hiện đều có chủ đích. Typography mặc định là Geist, một custom face tối ưu cho số với negative tracking chặt (-0.035em), tạo cho headline mật độ kỹ thuật dày đặc, báo hiệu tư duy developer-first mà không cần weight nặng. Hệ thống gradient xếp lớp tím với các quầng vàng (#fff963) và cyan (#5de3ff) ở độ mờ thấp, tạo hiệu ứng lấp lánh không khí phía sau hero content thay vì nhiễu trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Void Black | `#131316` | `--color-void-black` | Primary text, heading và body copy tương phản cao trên bề mặt sáng |
| Fog White | `#f7f7f8` | `--color-fog-white` | Page canvas và nền section sáng |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, nền modal, form input trên section sáng |
| Graphite | `#5e5f6e` | `--color-graphite` | Secondary body text, muted labels, icon fills trên bề mặt sáng |
| Ash | `#747686` | `--color-ash` | Tertiary text, nav punctuation, disabled state text |
| Hairline | `#d9d9de` | `--color-hairline` | Border, divider, input outline, table rules |
| Mist | `#eeeef0` | `--color-mist` | Section divider nhẹ, link icon backgrounds, hover wash backgrounds |
| Stone | `#9394a1` | `--color-stone` | Placeholder text, code comments, muted helper copy |
| Obsidian Card | `#212126` | `--color-obsidian-card` | Nền thẻ demo sản phẩm tối trong mixed-mode sections |
| Dark Surface | `#2f3037` | `--color-dark-surface` | Nền panel tối nâng cao, nền code block |
| Slate Mid | `#696a78` | `--color-slate-mid` | Icon fills trung tính và body copy bên trong dark card contexts |
| Electric Violet | `radial-gradient(189.26% 126.1% at 49.27% 0%, rgba(108, 71, 255, 0) 10%, rgba(255, 249, 99, 0.15) 34%, rgba(98, 72, 246, 0.24) 67.53%, rgba(98, 72, 246, 0) 95.38%)` | `--color-electric-violet` | Primary CTA button fill, active heading accents — màu hành động chromatic duy nhất; tím trung tần đọc như developer-brand mà không mượn xanh từ infrastructure tools; Gradient nền hero không khí pha trộn tím và vàng; Brand gradient cho decorative text highlights và horizontal accent rules |
| Violet Soft | `#615cf6` | `--color-violet-soft` | Nền danh sách và tag trang trí, tint bề mặt thương hiệu nhẹ |
| Cyan Spark | `#5de3ff` | `--color-cyan-spark` | Heading accent text bên trong dark sections, code string highlights, decorative icon glow |

## Tokens — Typography

### soehneMono — soehneMono — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-soehnemono`
- **Weights:** 400, 500, 600
- **Sizes:** 10px, 11px, 12px
- **Line height:** 1.33, 1.4, 1.45, 1.64, 1.82, 2
- **Letter spacing:** 0.1
- **Vai trò:** soehneMono — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Geist — Typeface chính cho mọi marketing copy, UI labels, heading và CTA. Bảng số tùy chỉnh (biến thể geistNumbers) giữ khoảng cách chữ số nhất quán bên trong product demos. Negative tracking ở -0.035em ở kích thước lớn và -0.015em ở kích thước trung bình nén display headlines thành một khối kỹ thuật dày đặc — sự tương phản có chủ đích với marketing type mềm mại hơn. · `--font-geist`
- **Thay thế:** Inter, DM Sans
- **Weights:** 400, 450, 500, 600, 700
- **Sizes:** 10px, 11px, 12px, 13px, 15px, 16px, 18px, 20px, 32px, 64px
- **Line height:** 1.0–1.85 tùy kích thước; chặt hơn (1.0–1.25) ở display sizes, lỏng hơn (1.4–1.6) ở body sizes
- **Letter spacing:** -0.035em ở display/headline sizes, -0.015em ở subheading sizes
- **OpenType features:** `"tnum" cho biến thể numeric`
- **Vai trò:** Typeface chính cho mọi marketing copy, UI labels, heading và CTA. Bảng số tùy chỉnh (biến thể geistNumbers) giữ khoảng cách chữ số nhất quán bên trong product demos. Negative tracking ở -0.035em ở kích thước lớn và -0.015em ở kích thước trung bình nén display headlines thành một khối kỹ thuật dày đặc — sự tương phản có chủ đích với marketing type mềm mại hơn.

### ui-sans-serif — System fallback font được dùng trong browser-rendered components, OS UI widgets và Clerk-embedded auth modal. Sự hiện diện của nó báo hiệu cảm giác native-UI chân thực trong interactive demos. · `--font-ui-sans-serif`
- **Thay thế:** system-ui, -apple-system
- **Weights:** 400, 500, 700
- **Sizes:** 10px, 11px, 12px, 13px, 16px, 17px
- **Line height:** 1.27–1.82
- **Letter spacing:** -0.01em đến +0.01em
- **Vai trò:** System fallback font được dùng trong browser-rendered components, OS UI widgets và Clerk-embedded auth modal. Sự hiện diện của nó báo hiệu cảm giác native-UI chân thực trong interactive demos.

### Inter — UI micro-labels, product card annotations và icon captions bên trong embedded component previews. · `--font-inter`
- **Thay thế:** Inter (giống, có sẵn miễn phí qua Google Fonts)
- **Weights:** 400, 500, 600, 700
- **Sizes:** 8px, 10px, 11px, 12px, 16px, 18px, 22px
- **Line height:** 1.22–1.82
- **Letter spacing:** normal
- **Vai trò:** UI micro-labels, product card annotations và icon captions bên trong embedded component previews.

### Söhne Mono — Code snippets, JSX component labels (<SignUp />, <UserButton />) và terminal output. Positive tracking +0.10em ở mono sizes giúp angle-bracket syntax thoáng thay vì chạm nhau — một lựa chọn readability có chủ đích ở 10-12px. · `--font-shne-mono`
- **Thay thế:** JetBrains Mono, Fira Code
- **Weights:** 400, 500, 600
- **Sizes:** 10px, 11px, 12px
- **Line height:** 1.33–2.00
- **Letter spacing:** +0.10em
- **Vai trò:** Code snippets, JSX component labels (<SignUp />, <UserButton />) và terminal output. Positive tracking +0.10em ở mono sizes giúp angle-bracket syntax thoáng thay vì chạm nhau — một lựa chọn readability có chủ đích ở 10-12px.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 10px | 1.4 | — | `--text-caption` |
| heading-sm | 18px | 1.4 | -0.27px | `--text-heading-sm` |
| heading | 20px | 1.25 | -0.3px | `--text-heading` |
| heading-lg | 32px | 1.13 | -1.12px | `--text-heading-lg` |
| display | 64px | 1 | -2.24px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** thoải mái

### 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` |
| 64 | 64px | `--spacing-64` |
| 76 | 76px | `--spacing-76` |
| 80 | 80px | `--spacing-80` |
| 128 | 128px | `--spacing-128` |
| 172 | 172px | `--spacing-172` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 16px |
| badges | 9999px |
| inputs | 6px |
| modals | 16px |
| buttons | 6px |
| cardSmall | 8px |
| codeBlocks | 12px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.0...` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle-2` |
| subtle-3 | `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |
| subtle-4 | `rgba(100, 229, 255, 0.08) 0px 0px 0px 1px inset` | `--shadow-subtle-4` |
| subtle-5 | `rgba(255, 255, 255, 0.024) 0px 1px 0px 0px inset, rgba(25...` | `--shadow-subtle-5` |
| subtle-6 | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle-6` |
| subtle-7 | `rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0...` | `--shadow-subtle-7` |
| subtle-8 | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` | `--shadow-subtle-8` |
| subtle-9 | `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) ...` | `--shadow-subtle-9` |
| subtle-10 | `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px, rgba(255, 255, 255, ...` | `--shadow-subtle-10` |
| subtle-11 | `rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset` | `--shadow-subtle-11` |
| subtle-12 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle-12` |
| subtle-13 | `rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06)...` | `--shadow-subtle-13` |
| subtle-14 | `rgba(0, 0, 0, 0.11) 0px 0px 0px 1px, rgba(0, 0, 0, 0.07) ...` | `--shadow-subtle-14` |
| lg | `rgba(0, 0, 0, 0.16) 0px 10px 19px 4px, rgba(255, 255, 255...` | `--shadow-lg` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Element gap:** 8px

## Components

### Primary Violet Button
**Vai trò:** Main CTA — 'Start building for free', 'Start building'

Background #6c47ff, chữ trắng (#ffffff), border-radius 6px, padding dọc 0px với padding ngang 12px. Box-shadow dùng violet glow. Geist font weight 500, kích thước 15-16px. Chuyển đổi background-color và box-shadow ở 0.15s ease.

### White Outlined Button
**Vai trò:** Secondary action, navigation-adjacent controls

Background #ffffff, text #131316, border 1px solid #d9d9de, radius 6px, padding dọc 0px / ngang 10px. Subtle shadow: rgb(217,217,222) 0px 0px 0px 0.5px. Geist weight 500.

### Ghost Navigation Button
**Vai trò:** Top-level nav items và inline text-links có icon

Background trong suốt, text #131316, không border, radius 0px. Right padding 8px. Khi hover, border-color chuyển thành #d9d9de. Dùng cho Products, Docs, Changelog, Company nav items.

### Pill Tag / Badge
**Vai trò:** Category labels, section eyebrow labels (ví dụ 'Clerk Components', 'User Authentication')

border-radius 9999px, background trong suốt hoặc #eeeef0, text #6c47ff ở 11-12px Geist weight 500. Padding dọc 4px / ngang 10px. Chữ tím trên nền gần trắng báo hiệu section taxonomy mà không cần dùng filled badge.

### Light Marketing Card
**Vai trò:** Feature cards và pricing sections trên bề mặt trắng/fog

Background #ffffff, radius 16px, shadow stack: rgba(0,0,0,0.05) 0px 1px 1px, rgba(34,42,53,0.04) 0px 4px 6px, rgba(47,48,55,0.05) 0px 24px 68px. Padding 16px 20px. Border hairline 1px #d9d9de ở weight 0.5px.

### Dark Obsidian Card
**Vai trò:** Product demo feature cards trong dark sections (auth UIs, session management)

Background #212126, radius 16px, inset white shimmer: rgba(255,255,255,0.024) 0px 1px 0px inset + rgba(255,255,255,0.024) 0px 0px 0px 1px inset. Không có padding rõ ràng (content-driven). Text #ffffff và #9394a1 cho body. Tạo viền giống kính mà không cần border thực tế.

### Auth Component Card
**Vai trò:** Bản xem trước Clerk sign-in / sign-up modal nhúng

Background #ffffff, radius 8px (inner form elements), outer wrapper dùng radius 16px. Deep shadow: rgba(47,48,55,0.2) 0px 15px 35px -5px. Inner inputs: background #f7f7f8, radius 6px, border 1px #d9d9de. Primary action bên trong dùng nền Electric Violet (#6c47ff) full-width button.

### Code Component Label
**Vai trò:** JSX component name pills trong documentation sidebar

Söhne Mono weight 500, 10-12px, letter-spacing +0.10em, text #131316 hoặc #6c47ff, background trong suốt. Định dạng '<ComponentName />' với angle brackets màu tím accent.

### Form Input (Light)
**Vai trò:** Email, password fields trong auth card demos

Background #f7f7f8, radius 6px, border 1px solid #d9d9de, padding 8px 12px. Placeholder text #9394a1 (Stone). Focus ring dùng violet: rgba(108,71,255,0.2) box-shadow ring. Label text #131316 Geist weight 500 12px.

### OAuth Social Button
**Vai trò:** 'Continue with Google', 'Continue with GitHub' bên trong auth modal

Background #ffffff, border 1px solid #d9d9de, radius 6px, full-width, padding 10px 12px, text #131316 Geist weight 500 14px, icon OAuth provider căn trái. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px.

### Accordion Feature Row
**Vai trò:** Danh sách feature có thể thu gọn trong component explorer sidebar (User Authentication, B2B Authentication, Billing)

Background trong suốt, text #747686 khi thu gọn, #131316 khi mở rộng, radius 9999px trên expand indicator dot. Separator dashed 1px #eeeef0. Expanded state hiển thị code labels của sub-item thụt vào 16px.

### Announcement Banner
**Vai trò:** Dải tin tức đầu trang ('Clerk raises $50m Series C')

Full-width, background #131316, text #ffffff Geist weight 500 13px, căn giữa. Inline link 'Learn more →' màu #d9d9de. Padding dọc 8px 0px.

## Do's and Don'ts

### Nên làm
- Chỉ dùng #6c47ff cho filled primary CTA và heading accent text — không bao giờ dùng cho decorative backgrounds lớn hơn phần tử cỡ tag.
- Áp dụng Geist ở letter-spacing -0.035em cho mọi headline từ 32px trở lên; giảm xuống -0.015em cho subheading 18-24px.
- Dùng radius 16px cho card lớn và modal, 6px cho button và input, và 9999px chỉ dành cho pill badges và tags.
- Trên dark product sections (canvas #212126), dùng inset white shimmer shadow (rgba(255,255,255,0.024)) làm border treatment duy nhất — không dùng border-color rõ ràng.
- Áp dụng hero radial gradient (violet → vàng → cyan → trong suốt) chỉ làm background wash phía sau full-width sections, giữ opacity dưới 0.25.
- Định dạng mọi code component references bằng Söhne Mono với tracking +0.10em và angle-bracket syntax màu tím (#6c47ff).
- Giữ mọi page content trong container max-width 1200px; khoảng cách dọc giữa các section nên là 64-80px.

### Không nên làm
- Không dùng Electric Violet (#6c47ff) làm background fill cho bất kỳ thứ gì lớn hơn button hoặc badge — sức mạnh của nó đến từ sự khan hiếm.
- Không dùng #000000 thuần cho body text — luôn dùng #131316 (Void Black) hoặc #5e5f6 (Graphite) để đọc thoải mái trên bề mặt trắng.
- Không làm phẳng hệ thống hai bề mặt thành một light hoặc dark theme duy nhất — light marketing sections và dark product preview cards phải cùng tồn tại trên một trang.
- Không áp dụng deep card shadow (rgba(47,48,55,0.2) 0px 15px 35px -5px) cho dark obsidian cards — chúng chỉ dùng inset shimmer và không có drop shadow.
- Không đặt border-radius thành giá trị nào khác ngoài 6px, 8px, 12px, 16px hoặc 9999px — thiết kế không có radius 4px hay 24px.
- Không dùng Söhne Mono bên ngoài code snippets, component labels và terminal strings — body copy luôn là Geist.
- Không thêm decorative color fills phía sau section headings trên nền sáng — hero gradient là khu vực duy nhất được áp dụng color washes.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Page Canvas | `#f7f7f8` | Nền trang cơ bản cho light marketing sections |
| 1 | Card Surface | `#ffffff` | Bề mặt card và form mặc định trên nền sáng |
| 2 | Recessed Surface | `#f7f7f8` | Nền input, table row fills và card insets thứ cấp |
| 3 | Dark Canvas | `#212126` | Product demo sections và dark-mode showcase panels |
| 4 | Elevated Dark | `#2f3037` | Panel nâng cao và code blocks bên trong dark sections |

## Elevation

- **Light Card (standard):** `rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px`
- **Light Card (deep):** `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(47, 48, 55, 0.2) 0px 15px 35px -5px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px`
- **Auth Modal Card:** `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px, rgba(47, 48, 55, 0.05) 0px 24px 68px 0px, rgba(0, 0, 0, 0.04) 0px 2px 3px 0px`
- **Dark Card (obsidian):** `rgba(255, 255, 255, 0.024) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.024) 0px 0px 0px 1px inset`
- **Product Demo Screenshot:** `rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.2) 0px 15px 35px -5px`

## Imagery

Trang web gần như hoàn toàn dựa vào ảnh chụp màn hình UI sản phẩm trực tiếp và các Clerk component demos được tái tạo thay vì nhiếp ảnh hoặc minh họa. Auth modals (sign-in card, account chooser) được hiển thị dưới dạng card trắng nổi với shadow sâu, chụp ở góc nhẹ hoặc trình bày phẳng. Dark feature sections dùng stylized product mockups của điện thoại, cửa sổ trình duyệt và bảng quản lý session được render ở pixel-density trên bề mặt #212126. Icons là monochromatic outlined glyphs ở ~16-20px với stroke weight biểu kiến 1.5px, chuyển giữa #131316 trên nền sáng và #9394a1 trên nền tối. Không có lifestyle photography và không có abstract illustration — bằng chứng trực quan CHÍNH LÀ sản phẩm. Image density ở mức trung bình: mỗi feature section dùng một product mockup được bao quanh bởi text, không bao giờ full-bleed. Các cạnh mockup sắc nét với soft drop shadows, không bo tròn hoặc mask.

## Layout

Container căn giữa max-width 1200px, các dải màu full-bleed ở cấp section. Hero là stack căn giữa full-viewport-height: announcement strip trên cùng → sticky nav → display headline với gradient background halo → hai inline CTA → logo strip. Bên dưới hero, các section xen kẽ giữa dải sáng full-width (#f7f7f8) và dải tối full-width (#1a1a1f) với padding dọc trên/dưới 80px nhất quán. Feature sections dùng layout 2 cột text-trái / interactive-demo-phải. Component explorer section dùng layout 2 cột: accordion list bên trái, live auth modal preview bên phải. Dark authentication feature grid dùng grid card 3 cột trên desktop với bento-style spanning cards (một card rộng ở giữa, hai card hai bên). Navigation là fixed top bar với logo trái, text nav giữa, sign-in + CTA phải. Không có sidebar navigation ở cấp marketing.

## Agent Prompt Guide

**Quick Color Reference**
- text (primary): #131316
- text (secondary): #5e5f6e
- background (light): #f7f7f8
- background (dark section): #212126
- border / hairline: #d9d9de
- brand accent / primary action: #6c47ff (filled action)

**Ví dụ Component Prompts**

1. **Hero section (light):** Full-width section với radial gradient halo (violet→vàng→cyan, max opacity 0.24) trên canvas #f7f7f8. Headline căn giữa ở 64px Geist weight 700 #131316 letter-spacing -2.24px, hai dòng. Subheading ở 18px weight 400 #5e5f6e. Hai inline buttons: filled violet (#6c47ff, chữ trắng, radius 6px, padding 0px/12px) + ghost trắng (background #ffffff border #d9d9de, text #131316, cùng radius). Khoảng cách dọc giữa headline và buttons: 32px.

2. **Dark obsidian feature card:** Background #212126, radius 16px, inset shadow rgba(255,255,255,0.024) 0px 1px 0px inset + rgba(255,255,255,0.024) 0px 0px 0px 1px inset. Heading 16px Geist weight 600 #ffffff. Body 14px weight 400 #9394a1. Không có border-color rõ ràng — inset shimmer CHÍNH LÀ border. Internal padding 24px.

3. Tạo Primary Action Button: background #6c47ff, text #ffffff, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA.

4. **Code component label (sidebar):** Söhne Mono 11px weight 500 +0.10em tracking. Định dạng: `<ComponentName />` với `<`, `/>` màu #6c47ff, `ComponentName` màu #131316. Background trong suốt. Padding 4px 8px. Dùng trong accordion list items.

5. **Feature section (text + demo, 2 cột):** Container max-width 1200px. Cột trái: section eyebrow label (pill badge, text #6c47ff, bg #eeeef0, radius 9999px, 11px Geist weight 500); heading 32px weight 700 #131316 letter-spacing -1.12px; body 15px weight 400 #5e5f6e line-height 1.56; gap 8px giữa các phần tử. Cột phải: white hoặc dark product demo card với radius 16px và shadow tier phù hợp. Section top/bottom padding 80px.

## Gradient System

Ba gradient tiers phục vụ các mục đích riêng biệt:

1. **Hero Halo (atmospheric):** `radial-gradient(189.26% 126.1% at 49.27% 0%, rgba(108,71,255,0) 10%, rgba(255,249,99,0.15) 34%, rgba(98,72,246,0.24) 67.53%, rgba(98,72,246,0) 95.38%)` — chỉ áp dụng phía sau hero headlines, ở full section width. Yellow stop (#fff963 ở 15% opacity) tạo ra một điểm phát sáng ấm ở trung tâm, ngăn violet halo đọc như màu tím đơn thuần.

2. **Brand Sweep (decorative text/lines):** `linear-gradient(to right, #6c47ff 25%, #5de3ff 75%)` — dùng cho gradient text highlights và horizontal decorative rule accents. Violet-to-cyan mô phỏng bảng màu dev-tool terminal.

3. **Dark Card Radial (depth):** `radial-gradient(79.87% 92.91% at 81.25% 12.5%, #ffffff 0%, #19191b 100%)` — dùng bên trong từng dark card riêng lẻ để thêm chiều sâu mà không cần lighting rõ ràng. White hot-spot lệch về góc trên bên phải, ngụ ý một nguồn sáng xung quanh duy nhất.

## Dark Section Rules

Khi xây dựng section trên bề mặt #212126 hoặc tối hơn:
- Card borders: CHỈ dùng inset box-shadow (rgba(255,255,255,0.024)) — không dùng CSS border property
- Text hierarchy: #ffffff cho heading, #9394a1 (Stone) cho body, #696a78 (Slate Mid) cho caption
- Accent color (#6c47ff) giữ nguyên trong cả light và dark contexts — nó có đủ độ tương phản với cả hai
- Cyan (#5de3ff) chỉ là dark-section accent — không bao giờ dùng trên nền sáng
- Code blocks bên trong dark sections dùng background #2f3037 với cùng inset shimmer pattern
- Áp dụng backdrop-filter blur(4-8px) trên floating cards bên trong dark sections để tạo độ sâu kính

## Similar Brands

- **Auth0** — Cùng category developer-identity với brand accent tím/violet trên light documentation shell
- **Vercel** — Chiến lược hai bề mặt giống hệt: white marketing sections với embedded dark product preview cards hiển thị live UI
- **Stripe** — Cùng cách dùng live-component screenshots làm hero visuals với deep layered drop shadows trên floating white cards
- **Linear** — Dark product showcase sections với inset-shimmer glass-border cards và tight negative-tracked Geist-style display headlines
- **Resend** — Bảng màu đơn sắc được nhấn bởi một accent color sống động duy nhất, Söhne Mono code labels và mixed light/dark section banding

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void-black: #131316;
  --color-fog-white: #f7f7f8;
  --color-pure-white: #ffffff;
  --color-graphite: #5e5f6e;
  --color-ash: #747686;
  --color-hairline: #d9d9de;
  --color-mist: #eeeef0;
  --color-stone: #9394a1;
  --color-obsidian-card: #212126;
  --color-dark-surface: #2f3037;
  --color-slate-mid: #696a78;
  --color-electric-violet: #6c47ff;
  --gradient-electric-violet: radial-gradient(189.26% 126.1% at 49.27% 0%, rgba(108, 71, 255, 0) 10%, rgba(255, 249, 99, 0.15) 34%, rgba(98, 72, 246, 0.24) 67.53%, rgba(98, 72, 246, 0) 95.38%);
  --color-violet-soft: #615cf6;
  --color-cyan-spark: #5de3ff;

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

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.4;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.27px;
  --text-heading: 20px;
  --leading-heading: 1.25;
  --tracking-heading: -0.3px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -1.12px;
  --text-display: 64px;
  --leading-display: 1;
  --tracking-display: -2.24px;

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

  /* 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-64: 64px;
  --spacing-76: 76px;
  --spacing-80: 80px;
  --spacing-128: 128px;
  --spacing-172: 172px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --element-gap: 8px;

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

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 16px;
  --radius-badges: 9999px;
  --radius-inputs: 6px;
  --radius-modals: 16px;
  --radius-buttons: 6px;
  --radius-cardsmall: 8px;
  --radius-codeblocks: 12px;

  /* Shadows */
  --shadow-subtle: rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.2) 0px 15px 35px -5px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-3: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  --shadow-subtle-4: rgba(100, 229, 255, 0.08) 0px 0px 0px 1px inset;
  --shadow-subtle-5: rgba(255, 255, 255, 0.024) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.024) 0px 0px 0px 1px inset;
  --shadow-subtle-6: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 0px 0px, rgba(0, 0, 0, 0.08) 0px 2px 3px -1px;
  --shadow-subtle-7: rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 3px 0px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgb(47, 48, 55) 0px 0px 0px 1px;
  --shadow-subtle-8: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset;
  --shadow-subtle-9: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(47, 48, 55, 0.2) 0px 15px 35px -5px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px;
  --shadow-subtle-10: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset;
  --shadow-subtle-11: rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset;
  --shadow-subtle-12: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
  --shadow-subtle-13: rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px;
  --shadow-subtle-14: rgba(0, 0, 0, 0.11) 0px 0px 0px 1px, rgba(0, 0, 0, 0.07) 0px 0px 1px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.16) 0px 10px 19px 4px, rgba(255, 255, 255, 0.04) 0px -10px 16px -4px, rgba(255, 255, 255, 0.01) 0px 0px 0px 1px, rgba(255, 255, 255, 0.02) 0px 1px 0px 0px;

  /* Surfaces */
  --surface-page-canvas: #f7f7f8;
  --surface-card-surface: #ffffff;
  --surface-recessed-surface: #f7f7f8;
  --surface-dark-canvas: #212126;
  --surface-elevated-dark: #2f3037;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void-black: #131316;
  --color-fog-white: #f7f7f8;
  --color-pure-white: #ffffff;
  --color-graphite: #5e5f6e;
  --color-ash: #747686;
  --color-hairline: #d9d9de;
  --color-mist: #eeeef0;
  --color-stone: #9394a1;
  --color-obsidian-card: #212126;
  --color-dark-surface: #2f3037;
  --color-slate-mid: #696a78;
  --color-electric-violet: #6c47ff;
  --color-violet-soft: #615cf6;
  --color-cyan-spark: #5de3ff;

  /* Typography */
  --font-soehnemono: 'soehneMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-shne-mono: 'Söhne Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.4;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.27px;
  --text-heading: 20px;
  --leading-heading: 1.25;
  --tracking-heading: -0.3px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -1.12px;
  --text-display: 64px;
  --leading-display: 1;
  --tracking-display: -2.24px;

  /* 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-64: 64px;
  --spacing-76: 76px;
  --spacing-80: 80px;
  --spacing-128: 128px;
  --spacing-172: 172px;

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

  /* Shadows */
  --shadow-subtle: rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.2) 0px 15px 35px -5px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-3: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  --shadow-subtle-4: rgba(100, 229, 255, 0.08) 0px 0px 0px 1px inset;
  --shadow-subtle-5: rgba(255, 255, 255, 0.024) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.024) 0px 0px 0px 1px inset;
  --shadow-subtle-6: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 0px 0px, rgba(0, 0, 0, 0.08) 0px 2px 3px -1px;
  --shadow-subtle-7: rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 3px 0px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgb(47, 48, 55) 0px 0px 0px 1px;
  --shadow-subtle-8: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset;
  --shadow-subtle-9: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(47, 48, 55, 0.2) 0px 15px 35px -5px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px;
  --shadow-subtle-10: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset;
  --shadow-subtle-11: rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset;
  --shadow-subtle-12: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
  --shadow-subtle-13: rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px;
  --shadow-subtle-14: rgba(0, 0, 0, 0.11) 0px 0px 0px 1px, rgba(0, 0, 0, 0.07) 0px 0px 1px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.16) 0px 10px 19px 4px, rgba(255, 255, 255, 0.04) 0px -10px 16px -4px, rgba(255, 255, 255, 0.01) 0px 0px 0px 1px, rgba(255, 255, 255, 0.02) 0px 1px 0px 0px;
}
```