# GitHub

> # GitHub — Style Reference

## Tổng quan

Phong cách của GitHub thiên về utility-first, tập trung vào nội dung và khả năng đọc. Giao diện sử dụng hệ thống grid rõ ràng, typography sans-serif với weight vừa phải, và bảng màu trung tính làm nền. Các thành phần UI có border-radius nhẹ, shadow tinh tế, và hover state rõ ràng. Màu sắc được dùng có chủ đích để phân loại thông tin (xanh cho primary, đỏ cho danger, xám cho neutral). Không gian trắng (white space) được tận dụng tối đa để tạo cảm giác thoáng, dễ đọc.

## Prompt Content

```
# GitHub — Style Reference
> violet aurora trên vũ trụ developer — bề mặt nửa đêm sâu thẳm được thắp sáng bởi những vệt sáng tím lơ lửng và chữ trắng tĩnh lặng

**Theme:** dark

GitHub vận hành trong vũ trụ dark-mode, nơi những canvas gần-đen sâu thẳm (#0d1117) lùi lại phía sau các vệt sáng radial tím và xanh dương lơ lửng — trông giống aurora hơn là UI. Giao diện gần như hoàn toàn achromatic — chữ trắng và trắng-lạnh trên các bề mặt tối nhiều lớp — với màu sắc xuất hiện như những dấu câu chức năng thưa thớt: xanh da trời nhạt cho link, mint tươi cho thành công/code, và một emerald CTA duy nhất neo giữ chuyển đổi. Typography là custom (Mona Sans) với dải weight rộng bất thường và negative tracking mạnh ở display sizes, khiến headline cỡ lớn trông nén chặt và đầy tự tin. Các component phẳng và có elevation thấp — 6px radii trên controls, 24px trên cards — với border và surface lift tinh tế đảm nhận công việc cấu trúc mà shadow thường làm ở nơi khác. Nhịp điệu tổng thể rộng rãi, mang phong cách editorial và tĩnh lặng, với 3D character illustrations và gradient halos là những khoảnh khắc duy nhất của sự phấn khích thị giác.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Midnight Canvas | `#0d1117` | `--color-midnight-canvas` | Nền trang, canvas chính — signature near-black của GitHub với một chút cool tint hầu như không nhận thấy |
| Abyss Surface | `#090d0a` | `--color-abyss-surface` | Overlay sâu nhất, button base, nền modal — tối hơn canvas một bậc để tạo độ tương phản |
| Void Black | `#000000` | `--color-void-black` | Input fields, nav fills, lớp tối tuyệt đối — dùng khi cần pure black để phân tách |
| Elevated Surface | `#151a22` | `--color-elevated-surface` | Button fills, bề mặt card phụ — cao hơn canvas một bậc cho các phần tử tương tác |
| Card Surface | `#283041` | `--color-card-surface` | Nền card, panel nâng lên — xám pha lạnh, đọc như xanh dương trong dark mode |
| Border Subtle | `#21262d` | `--color-border-subtle` | Hairline borders, divider, input outlines — đường cấu trúc hầu như không thấy |
| Border Muted | `#818b98` | `--color-border-muted` | Border phụ, icon strokes, cạnh UI tinh tế |
| Border Strong | `#9198a1` | `--color-border-strong` | Nav borders, button borders, cạnh cấu trúc nổi bật hơn |
| Text Primary | `#ffffff` | `--color-text-primary` | Headline, văn bản chính, nội dung có emphasis cao |
| Text Cool White | `#f0f6fc` | `--color-text-cool-white` | Body text, nav text — trắng pha xanh nhạt giảm chói so với pure white |
| Text Muted | `#a4aea6` | `--color-text-muted` | Văn bản phụ, mô tả, helper text — xám-xanh bão hòa thấp |
| Text Subtle | `#c3c4c5` | `--color-text-subtle` | Văn bản cấp ba, nhãn button, label emphasis thấp |
| Icon Neutral | `#9ea0a2` | `--color-icon-neutral` | Icon fills mặc định, card borders, phần tử đồ họa emphasis thấp |
| Vibrant Mint | `#5fed83` | `--color-vibrant-mint` | Green outline accent cho tag, divider, và cạnh UI được focus. Dùng làm accent hỗ trợ, không phải màu trạng thái |
| Emerald CTA | `#08872b` | `--color-emerald-cta` | Primary action button fill — emerald đậm báo hiệu cam kết mà không hung hăng kiểu neon |
| Sky Link | `#8dd6ff` | `--color-sky-link` | Link, icon highlights, accent strokes — xanh da trời nhạt cho emphasis tương tác và tham chiếu code |
| Vivid Violet | `#8c93fb` | `--color-vivid-violet` | Card accent borders, illustration highlights — violet bão hòa cho phân biệt tính năng |
| Aurora Gradient | `radial-gradient(circle at 0px 100%, rgb(230, 183, 254) 10%, rgb(80, 73, 194) 20%, rgba(87, 78, 255, 0) 60%)` | `--color-aurora-gradient` | Nền atmosphere hero — indigo đậm neo giữ hiệu ứng violet aurora |
| Cosmic Glow | `radial-gradient(rgb(167, 162, 255) 30%, rgba(147, 80, 255, 0.5))` | `--color-cosmic-glow` | Radial glow halos, hiệu ứng quả cầu lơ lửng — nguồn sáng tím mềm phía sau 3D characters |
| Dusk Beam | `linear-gradient(rgba(120, 115, 203, 0.2) 60%, rgb(5993d4) 100%)` | `--color-dusk-beam` | Điểm kết thúc linear gradient cho chuyển tiếp section — fade xanh lạnh |

## Tokens — Typography

### Mona Sans — Primary typeface trên toàn bộ UI — các weight trung gian 425–480 (signature của GitHub) cho phép chuyển tông vi mô giữa body, caption và label mà không cần thay đổi kích thước. Display sizes (40–64px) dùng negative tracking mạnh (-0.0350em) nén chặt headline để tạo sự tự tin mang phong cách editorial. Mona Sans là custom variable sans của GitHub; có thể thay thế bằng Inter hoặc General Sans để có tính trung lập hình học, dù các weight trung gian là độc nhất của Mona. · `--font-mona-sans`
- **Thay thế:** Inter
- **Weights:** 400, 425, 440, 460, 480, 500, 600, 800
- **Sizes:** 14, 16, 18, 22, 24, 40, 48, 64
- **Line height:** 1.00–1.50
- **Letter spacing:** -0.0350em ở 48–64px, 0.0100em ở 14–18px
- **OpenType features:** `"ss01" on, "cv11" on`
- **Vai trò:** Primary typeface trên toàn bộ UI — các weight trung gian 425–480 (signature của GitHub) cho phép chuyển tông vi mô giữa body, caption và label mà không cần thay đổi kích thước. Display sizes (40–64px) dùng negative tracking mạnh (-0.0350em) nén chặt headline để tạo sự tự tin mang phong cách editorial. Mona Sans là custom variable sans của GitHub; có thể thay thế bằng Inter hoặc General Sans để có tính trung lập hình học, dù các weight trung gian là độc nhất của Mona.

### Mona Sans Mono — Code samples, technical labels, file references — monospace companion của Mona Sans với positive tracking nhẹ (0.0150em) để code dễ đọc trên nền tối · `--font-mona-sans-mono`
- **Thay thế:** JetBrains Mono
- **Weights:** 400
- **Sizes:** 14
- **Line height:** 1.50
- **Letter spacing:** 0.0150em
- **Vai trò:** Code samples, technical labels, file references — monospace companion của Mona Sans với positive tracking nhẹ (0.0150em) để code dễ đọc trên nền tối

### ui-monospace — Fallback system monospace cho code blocks và inline code snippets · `--font-ui-monospace`
- **Thay thế:** SF Mono, Menlo, Consolas
- **Weights:** 400
- **Sizes:** 14
- **Line height:** 1.50
- **Vai trò:** Fallback system monospace cho code blocks và inline code snippets

### Mona Sans VF — Mona Sans VF — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-mona-sans-vf`
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 16px, 24px
- **Line height:** 1, 1.25, 1.43, 1.5
- **Vai trò:** Mona Sans VF — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | 0.01px | `--text-caption` |
| body-sm | 14px | 1.5 | 0.01px | `--text-body-sm` |
| body | 16px | 1.5 | 0.01px | `--text-body` |
| subheading | 18px | 1.4 | 0.01px | `--text-subheading` |
| heading-sm | 22px | 1.3 | — | `--text-heading-sm` |
| heading | 24px | 1.2 | -0.01px | `--text-heading` |
| heading-lg | 40px | 1.18 | -0.02px | `--text-heading-lg` |
| display | 64px | 1 | -0.035px | `--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` |
| 44 | 44px | `--spacing-44` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| tags | 60px |
| cards | 24px |
| links | 6px |
| pills | 60px |
| images | 16px |
| inputs | 6px |
| buttons | 6px |

### Layout

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

## Components

### Primary CTA Button
**Vai trò:** Hành động chuyển đổi — Sign up, Get started

Emerald green fill (#08872b), chữ trắng, 6px radius, padding 8px 16px. Medium weight (500) Mona Sans ở 14px. Không shadow — dựa vào độ tương phản màu trên nền tối để nổi bật.

### Outline Button
**Vai trò:** Hành động phụ — Try GitHub Copilot, Learn more

Transparent fill, 1px white border (#ffffff ở 80% opacity), chữ trắng, 6px radius, padding 8px 16px. Phong cách ghost trong hero; chuyển sang filled neutral trên các trang nội bộ.

### Nav Dropdown Link
**Vai trò:** Mục điều hướng cấp cao nhất với submenus

Không background, text #f0f6fc ở 14px weight 500, 4px horizontal padding, 8px vertical. Caret indicator khi hover, underline xuất hiện với violet glow nhẹ khi active.

### Search Input
**Vai trò:** Global command palette / search

Dark surface fill (#000000 hoặc #151a22), 6px radius, 1px subtle border, monospace placeholder text. Chiều cao nhỏ gọn (~32px), icon prefix, keyboard shortcut hint căn phải.

### Email Input
**Vai trò:** Hero email capture field

White background fill (#ffffff), text #0d1117, 6px radius, padding 12px 16px. Là inversion sáng-trên-tối duy nhất trong hero — input sáng trông như 'có thể điền' trên nền tối.

### Feature Card
**Vai trò:** Tabbed content cards (Code, Plan, Collaborate, v.v.)

Dark elevated surface (#151a22 hoặc transparent trên nền tối), 24px radius, padding rộng rãi 24–32px, border 1px tinh tế màu #21262d. Thường chứa code-editor sub-component hoặc product screenshot.

### Code Editor Block
**Vai trò:** Embedded code preview với syntax highlighting

Fill rất tối (#0d1117 hoặc #000000), mono font (Mona Sans Mono ở 14px), line numbers màu xám muted (#9198a1), syntax tokens màu #5fed83 (keywords), #8dd6ff (strings), #8c93fb (functions). 6-16px radius tùy ngữ cảnh chứa.

### Tab Pill Group
**Vai trò:** Feature category navigation (Code/Plan/Collaborate/Automate/Secure)

Container hình pill (60px radius), dark surface fill, 1px subtle border. Tab active dùng background sáng hơn hoặc bottom underline indicator. Labels màu #f0f6fc ở 14px weight 500.

### 3D Character Illustration
**Vai trò:** Linh vật trang trí lơ lửng trong hero và section backgrounds

Sinh vật 3D bóng bẩy, có chiều sâu (bạch tuộc tím, blob vàng, chim hồng) với soft shadows và glow nhẹ. Luôn được đặt trên radial violet gradient halos. Không tương tác — thuần atmosphere.

### Hero Gradient Banner
**Vai trò:** Atmosphere nền hero full-bleed

Radial gradient từ #e6b7fe (violet nhạt) qua #5049c2 (indigo đậm) đến transparent. Tạo hiệu ứng nguồn sáng vũ trụ, luôn đi kèm với 3D characters lơ lửng ở điểm nhấn thị giác.

### Section Divider Glow
**Vai trò:** Chuyển tiếp giữa các section tối

Linear hoặc radial gradient dùng #a7a2ff và #5993d4 ở độ mờ thấp — tạo hiệu ứng đường chân trời giữa các khối nội dung mà không cần border cứng.

### Link Text
**Vai trò:** Inline links, navigation text links

Không underline mặc định; màu #8dd6ff (xanh da trời) ở body weight. Khi hover, underline xuất hiện với offset 1px. Link nằm inline với body copy mà không làm gián đoạn luồng đọc.

### Badge / Tag
**Vai trò:** Chỉ báo trạng thái, nhãn danh mục

60px radius pill shape, dark surface fill (#21262d hoặc #283041), text muted màu #f0f6fc ở 12-14px. Chiều cao nhỏ gọn (~24px), horizontal padding nhỏ (8-12px).

## Do's and Don'ts

### Do
- Dùng 6px radius cho tất cả interactive controls (buttons, inputs, links) — góc sắc-nhưng-mềm này là signature control shape của GitHub
- Dành riêng #08872b emerald cho hành động chuyển đổi quan trọng nhất trên mỗi trang — không bao giờ dùng cho secondary buttons hoặc phần tử trang trí
- Áp dụng -0.0350em letter-spacing cho display text ở 40px+ — negative tracking mạnh này làm cho Mona Sans headlines trông nén chặt và tự tin thay vì thoáng
- Dùng #8dd6ff sky blue cho tất cả interactive text links — không bao giờ dùng trắng cho link, màu xanh là tín hiệu cho clickability
- Xếp lớp radial violet gradients (#5049c2 → transparent) phía sau nội dung hero để tạo atmosphere vũ trụ — aurora glow là signature của dark identity GitHub
- Dùng Mona Sans intermediate weights (425–480) để tạo phân cấp tinh tế giữa body, label và caption mà không thay đổi kích thước
- Giữ cards ở 24px radius và elevated surfaces ở 6px–24px — khoảng cách 18px giữa control và card radii tạo phân lớp thị giác rõ ràng

### Don't
- Đừng thêm drop shadows vào cards hoặc buttons — GitHub dùng flat surfaces và border tints tinh tế cho elevation, không dùng shadow
- Đừng dùng trắng (#ffffff) cho body text trên nền tối — dùng #f0f6fc để giảm độ chói của pure white trên gần-đen
- Đừng áp dụng emerald CTA color cho bất kỳ thứ gì khác ngoài primary action — làm loãng nó sẽ giết chết sức mạnh chuyển đổi
- Đừng dùng #8dd6ff cho phần tử trang trí không tương tác — ý nghĩa của nó là 'có thể click/linked' và dùng cho heading hoặc label sẽ phá vỡ hợp đồng ngữ nghĩa
- Đừng đưa warm colors (cam, đỏ, vàng) vào bảng màu UI — hệ thống của GitHub chỉ có cool: xanh dương, violet, mint và grayscale
- Đừng dùng radius sắc 0px hoặc lớn 12px+ trên buttons — 6px là button radius duy nhất; sai lệch phá vỡ control identity
- Đừng dùng heavy font weights (700-800) cho body hoặc UI text — dành 600-800 cho display headlines; body luôn ở range 400-500

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Midnight Canvas | `#0d1117` | Nền trang, canvas chính |
| 1 | Elevated Surface | `#151a22` | Button fills, bề mặt card phụ, phần tử tương tác |
| 2 | Card Surface | `#283041` | Panel card nâng lên, feature containers |
| 3 | Void Black | `#090d0a` | Modal overlays, lớp UI sâu nhất, độ tương phản tối đa |

## Elevation

GitHub cố tình tránh drop shadows để chuyển sang flat surfaces được phân biệt bằng background-color shifts tinh tế và hairline borders 1px. Elevation được truyền đạt qua surface tone (canvas → elevated → card) thay vì z-axis shadow, giữ cho giao diện dark mode cảm giác nhẹ không trọng lượng và hiện đại thay vì skeuomorphic.

## Imagery

Imagery bị chi phối bởi 3D-rendered character mascots bóng bẩy — các dạng sinh vật màu tím, vàng và hồng với shading mềm có chiều sâu — lơ lửng trên các radial violet gradient halos. Những illustration này là atmosphere trang trí hơn là nội dung giải thích: chúng mang lại sự ấm áp thị giác và cá tính thương hiệu mà không truyền tải thông tin sản phẩm. Product screenshots và code editor mockups xuất hiện trong feature sections, luôn được nhúng trong dark cards với syntax highlighting chân thực. Hệ thống icon dạng line-based và mono-colored, dùng bảng màu sky-blue và neutral-gray. Nhiếp ảnh gần như vắng mặt — visual identity hoàn toàn là illustrated/3D-rendered thay vì photographic. Imagery chiếm khoảng 30-40% trang trong hero sections, giảm xuống 10-15% trong content sections nơi text và code chiếm ưu thế.

## Layout

Full-bleed dark canvas với content containers max-width 1200px căn giữa. Hero là dark section cao full-viewport với centered headline stack (headline + subtext + email CTA row) phía trên một bố cục 3D character lơ lửng trên radial violet glow. Bên dưới hero, content sections xen kẽ giữa pure dark canvas và elevated surfaces nhẹ, mỗi section được neo bởi pattern centered headline + subhead. Feature sections dùng tabbed card interface (Code/Plan/Collaborate/Automate/Secure) với tab active hiển thị dark code editor hoặc product visual lớn. Navigation là sticky top bar với logo căn trái, dropdown menus căn giữa-trái (Platform, Solutions, Resources, Open Source, Enterprise, Pricing), search command palette căn phải, và sign-in/sign-up controls. Nhịp section dùng vertical gaps 64-96px giữa các band, với gradient glow dividers thay thế hard borders giữa các section. Mật độ tổng thể rộng rãi và mang phong cách editorial — type lớn, padding rộng rãi, và khoảng thở giữa các khối nội dung thay vì grids dày đặc thông tin.

## Agent Prompt Guide

Quick Color Reference:
- text: #ffffff (headlines), #f0f6fc (body), #a4aea6 (muted)
- background: #0d1117 (canvas), #151a22 (elevated), #283041 (card)
- border: #21262d (subtle), #9198a1 (strong)
- accent: #8dd6ff (links, sky blue)
- primary action: #08872b (filled action)
- brand violet: #8c93fb (feature highlights, illustration accents)

Ví dụ Component Prompts:
1. Tạo Primary Action Button: background #08872b, text #ffffff, 9999px radius, compact pill padding. Dùng filled treatment này cho main CTA.

2. Tạo feature card: surface fill #151a22, 24px radius, 1px border #21262d, 32px padding. Headline ở 22px Mona Sans weight 600 #ffffff. Body text ở 16px weight 400 #f0f6fc. Tùy chọn link sky-blue #8dd6ff ở cuối, không underline mặc định.

3. Tạo tabbed feature section: dark pill container với 60px radius và border #21262d, chứa 5 tab labels (Code, Plan, Collaborate, Automate, Secure) màu #f0f6fc 14px weight 500. Tab active có bottom underline màu #8c93fb violet. Bên dưới tabs, dark code editor block (fill #0d1117, 16px radius) với Mona Sans Mono 14px code và syntax highlighting: #5fed83 keywords, #8dd6ff strings, #8c93fb functions.

4. Tạo top navigation bar: background #0d1117, 64px height, full-width với inner container max-width 1400px. Bên trái: GitHub logo + dropdown nav items (Platform, Solutions, Resources, Open Source, Enterprise, Pricing) màu #f0f6fc 14px weight 500 với caret icons #9198a1. Bên phải: dark search input (6px radius, fill #000000, placeholder #9198a1) + Sign in link + Sign up outline button (1px border #ffffff, 6px radius, 14px weight 500).

5. Tạo CTA banner: centered stack trên canvas #0d1117. Một icon violet (#8c93fb) nhỏ ở trên cùng (32px). Headline ở 40px Mona Sans weight 600 #ffffff với tracking -0.0350em. Subtext ở 18px weight 400 #a4aea6. Bên dưới: một emerald (#08872b) button duy nhất, 6px radius, padding 12px 24px, text trắng ở 14px weight 500.

## Similar Brands

- **Linear** — Cùng triết lý dark-mode flat-surface với accent gradients violet/tím, spacing rộng rãi, và compressed display headlines dùng negative letter-spacing
- **Vercel** — Cả hai đều dùng deep near-black canvases với màu tối thiểu, geometric sans-serif type, và sharp 6px control radii — dù Vercel nghiêng về monochrome còn GitHub thêm violet
- **Notion** — Cùng aesthetic dark-mode tĩnh lặng với custom sans-serif, độ sắc nét thấp, và card-based content sections — dù Notion dùng warmer neutrals
- **Supabase** — Chung developer-tool identity với dark canvas, emerald green CTA, và gradient hero atmospheres — Supabase nghiêng về xanh lá, GitHub nghiêng về violet
- **Cursor** — Cả hai kết hợp dark editorial layouts với 3D character mascots lơ lửng và violet/purple gradient halos, tạo tâm trạng thị giác 'cosmic developer' tương tự

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-canvas: #0d1117;
  --color-abyss-surface: #090d0a;
  --color-void-black: #000000;
  --color-elevated-surface: #151a22;
  --color-card-surface: #283041;
  --color-border-subtle: #21262d;
  --color-border-muted: #818b98;
  --color-border-strong: #9198a1;
  --color-text-primary: #ffffff;
  --color-text-cool-white: #f0f6fc;
  --color-text-muted: #a4aea6;
  --color-text-subtle: #c3c4c5;
  --color-icon-neutral: #9ea0a2;
  --color-vibrant-mint: #5fed83;
  --color-emerald-cta: #08872b;
  --color-sky-link: #8dd6ff;
  --color-vivid-violet: #8c93fb;
  --color-aurora-gradient: #5049c2;
  --gradient-aurora-gradient: radial-gradient(circle at 0px 100%, rgb(230, 183, 254) 10%, rgb(80, 73, 194) 20%, rgba(87, 78, 255, 0) 60%);
  --color-cosmic-glow: #a7a2ff;
  --gradient-cosmic-glow: radial-gradient(rgb(167, 162, 255) 30%, rgba(147, 80, 255, 0.5));
  --color-dusk-beam: #5993d4;
  --gradient-dusk-beam: linear-gradient(rgba(120, 115, 203, 0.2) 60%, rgb(5993d4) 100%);

  /* Typography — Font Families */
  --font-mona-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mona-sans-mono: 'Mona Sans Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-mona-sans-vf: 'Mona Sans VF', 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.01px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.01px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.01px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: 0.01px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.3;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --tracking-heading: -0.01px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.18;
  --tracking-heading-lg: -0.02px;
  --text-display: 64px;
  --leading-display: 1;
  --tracking-display: -0.035px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-w425: 425;
  --font-weight-w440: 440;
  --font-weight-w460: 460;
  --font-weight-w480: 480;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* 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-44: 44px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 48px;
  --radius-full-2: 60px;

  /* Named Radii */
  --radius-tags: 60px;
  --radius-cards: 24px;
  --radius-links: 6px;
  --radius-pills: 60px;
  --radius-images: 16px;
  --radius-inputs: 6px;
  --radius-buttons: 6px;

  /* Surfaces */
  --surface-midnight-canvas: #0d1117;
  --surface-elevated-surface: #151a22;
  --surface-card-surface: #283041;
  --surface-void-black: #090d0a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-canvas: #0d1117;
  --color-abyss-surface: #090d0a;
  --color-void-black: #000000;
  --color-elevated-surface: #151a22;
  --color-card-surface: #283041;
  --color-border-subtle: #21262d;
  --color-border-muted: #818b98;
  --color-border-strong: #9198a1;
  --color-text-primary: #ffffff;
  --color-text-cool-white: #f0f6fc;
  --color-text-muted: #a4aea6;
  --color-text-subtle: #c3c4c5;
  --color-icon-neutral: #9ea0a2;
  --color-vibrant-mint: #5fed83;
  --color-emerald-cta: #08872b;
  --color-sky-link: #8dd6ff;
  --color-vivid-violet: #8c93fb;
  --color-aurora-gradient: #5049c2;
  --color-cosmic-glow: #a7a2ff;
  --color-dusk-beam: #5993d4;

  /* Typography */
  --font-mona-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mona-sans-mono: 'Mona Sans Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-mona-sans-vf: 'Mona Sans VF', 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.01px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.01px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.01px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: 0.01px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.3;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --tracking-heading: -0.01px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.18;
  --tracking-heading-lg: -0.02px;
  --text-display: 64px;
  --leading-display: 1;
  --tracking-display: -0.035px;

  /* 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-44: 44px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 48px;
  --radius-full-2: 60px;
}
```