# Axiom

> # Axiom — Style Reference

## Prompt Content

```
# Axiom — Style Reference
> Cửa sổ terminal lúc nửa đêm — nền đen phẳng, text monospaced, và một con trỏ màu cam nhấp nháy

**Theme:** dark

Axiom là giao diện tối mang phong cách terminal, nơi mọi ký tự đều monospaced, mọi bề mặt đều gần như đen tuyền, và một gam cam ấm duy nhất đảm nhận toàn bộ công việc tạo điểm nhấn màu sắc. Ngôn ngữ thiết kế vay mượn từ code editor và CLI tools — không gradient, gần như không đổ bóng, không bo tròn mềm mại — thay vào đó, thông tin được phân tầng qua những chuyển dịch tinh tế giữa các gam tối trung tính (từ nền #000000 đến card #191919, rồi border #202020) để UI trông giống như một file log được định dạng gọn gàng. BerkeleyMono đảm nhận toàn bộ giọng điệu, từ hero headline đến nav label, mang đến cho sản phẩm một cảm giác engineering-native, báo hiệu đối tượng người dùng trước khi báo hiệu thương hiệu. Màu cam xuất hiện như một công cụ chính xác: phần nền của primary CTA, log-bar visualization, và border trái 2px đánh dấu các editorial case-study card — không bao giờ mang tính trang trí, luôn luôn có chức năng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Void | `#000000` | `--color-void` | Nền trang, nav fill, bề mặt terminal |
| Carbon | `#111111` | `--color-carbon` | Bề mặt chính, nền card, hero canvas |
| Graphite | `#191919` | `--color-graphite` | Nền card nâng cao, fill case-study card |
| Iron | `#202020` | `--color-iron` | Hairline border, divider, phân cách tinh tế |
| Slate | `#3a3a3a` | `--color-slate` | Border mờ, icon stroke, đường kẻ phụ |
| Pewter | `#505050` | `--color-pewter` | Divider nhẹ, decorative rule |
| Steel | `#606060` | `--color-steel` | Text cấp ba, chi tiết icon, label không hoạt động |
| Ash | `#7e7e7e` | `--color-ash` | Muted helper text, chú thích nhỏ |
| Fog | `#b4b4b4` | `--color-fog` | Text phụ, label text, body mờ |
| Chalk | `#d9d9d9` | `--color-chalk` | Border sáng, stroke chi tiết trên icon |
| Paper | `#eeeeee` | `--color-paper` | Text chính, nav link, heading fill, button text |
| Ember | `#da5c2c` | `--color-ember` | Điểm nhấn cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp lên màu primary CTA |

## Tokens — Typography

### BerkeleyMono — Typeface đa năng — headline, body, nav, button, code, table cell, logo. Weight 400 dùng cho văn xuôi và UI label; weight 700 dành riêng cho nhấn mạnh và primary CTA. Cấu trúc hình học monospaced thống nhất thương hiệu và báo hiệu đối tượng kỹ sư. Mọi dòng text, bao gồm navigation và button label, đều nằm trong lưới monospaced này — không có proportional fallback cho nội dung. · `--font-berkeleymono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, Fira Code
- **Weights:** 400, 700
- **Cỡ chữ:** 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px
- **Line height:** 1.0–1.71
- **Letter spacing:** normal
- **Vai trò:** Typeface đa năng — headline, body, nav, button, code, table cell, logo. Weight 400 dùng cho văn xuôi và UI label; weight 700 dành riêng cho nhấn mạnh và primary CTA. Cấu trúc hình học monospaced thống nhất thương hiệu và báo hiệu đối tượng kỹ sư. Mọi dòng text, bao gồm navigation và button label, đều nằm trong lưới monospaced này — không có proportional fallback cho nội dung.

### Inter — Lớp text phụ — icon label nhỏ, chữ nhỏ, chú thích cấp ba nơi proportional letterform giảm mật độ thị giác xuống dưới baseline mono · `--font-inter`
- **Thay thế:** system-ui, -apple-system, Segoe UI
- **Weights:** 400
- **Cỡ chữ:** 12px, 14px, 16px
- **Line height:** 1.33–1.50
- **Vai trò:** Lớp text phụ — icon label nhỏ, chữ nhỏ, chú thích cấp ba nơi proportional letterform giảm mật độ thị giác xuống dưới baseline mono

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 12px | 1.5 | — | `--text-caption` |
| body | 14px | 1.71 | — | `--text-body` |
| heading-sm | 18px | 1.56 | — | `--text-heading-sm` |
| heading | 20px | 1.4 | — | `--text-heading` |
| heading-lg | 24px | 1.33 | — | `--text-heading-lg` |
| display | 32px | 1.25 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ sở:** 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` |

### Border Radius

| Phần tử | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 2px |
| icons | 9999px |
| inputs | 2px |
| buttons | 2px |

### 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:** 40px
- **Card padding:** 32px
- **Element gap:** 16px

## Components

### Primary CTA Button
**Vai trò:** Hero call-to-action, neo chuyển đổi

Filled button với nền #da5c2c, text #eeeeee, BerkeleyMono 16px weight 700, border-radius 2px, padding 10px 16px. Ký tự mũi tên (→) theo sau label. Không đổ bóng, không hover lift — chỉ thay đổi màu sắc.

### Ghost Button
**Vai trò:** Hành động phụ bên cạnh primary CTA

Nền trong suốt, border 1px #3a3a3a, text #eeeeee, BerkeleyMono 16px weight 400, radius 2px, padding 10px 16px. Ký tự mũi tên theo sau label. Nằm trong nav dưới dạng "Sign up" và inline dưới dạng "Sign up for free".

### Top Navigation Bar
**Vai trò:** Navigation chính của trang, sticky khi cuộn

Nền #000000, full-width, padding ngang 16px. Logo (triangle mark + wordmark) bên trái, nav link ở giữa bằng BerkeleyMono 14px weight 400 #eeeeee kèm dropdown chevron, cụm login/signup/demo bên phải. Chiều cao ~56px. Hairline border dưới #202020 tùy chọn.

### Announcement Banner
**Vai trò:** Dải cập nhật sản phẩm ở đầu trang

Dải full-width #111111, text BerkeleyMono 12px weight 400 #eeeeee, căn giữa hoặc căn trái. Icon đóng × bên phải. Tinh tế, không sặc sỡ — thông điệp là điểm nhấn.

### Case Study Card
**Vai trò:** Đơn vị testimonial khách hàng trong horizontal scroller

Nền #191919, radius 2px, padding 32px. Border trái 2px solid #da5c2c chạy suốt chiều cao — màu sắc duy nhất trong card, hoạt động như một tag phân loại. Logo khách hàng ở trên, headline BerkeleyMono 18px weight 400 #eeeeee, body text 14px, quote 14px italic-weight trong sub-card #111111 lồng nhau, footer avatar + tên + vai trò, link "case study →" có gạch chân ở dưới.

### Logo Grid Cell
**Vai trò:** Hiển thị logo khách hàng trong social-proof band

Nền #111111, radius 2px, logo grayscale căn giữa, chiều cao ~80px, padding 24px. Hai hàng, mỗi hàng sáu cell. Logo hiển thị dưới dạng đơn sắc #eeeeee hoặc #b4b4b4.

### Product Screenshot Panel
**Vai trò:** Hình ảnh hero — UI sản phẩm observability

Mock sản phẩm full-width với chrome #111111, radius 2px, divider trong #202020. Tab bar (Datasets, Stream, Query, Dashboards, Monitor, Flows) bằng BerkeleyMono 12px với active tab có gạch chân. Hàng histogram log-bar màu xanh (#2a7fff range) là màu nội thất duy nhất; bảng kết quả bên dưới trong #111111 với cột monospaced BerkeleyMono 12px và row divider #3a3a3a.

### Arrow Decoration Field
**Vai trò:** Kết cấu nền ở phía bên phải hero

Các ký tự `>` lặp lại bằng BerkeleyMono 12px weight 400 #3a3a3a, sắp xếp theo mô hình chéo hướng về bên phải. Lấp đầy khoảng trống phía sau hero copy mà không thêm trọng lượng thị giác — một terminal-style marquee báo hiệu "dữ liệu đang truyền".

### Tag / Pill
**Vai trò:** Label phân loại phía trên nội dung card (ví dụ: SAVINGS, SIMPLICITY)

Nền trong suốt, BerkeleyMono 12px weight 400 #606060 viết hoa, padding 0px. Label thuần typography, không border, không fill — thuật ngữ nằm phía trên card headline dưới dạng editorial metadata.

### Pill Icon Badge
**Vai trò:** Badge hình tròn nhỏ hoặc wrapper icon

Radius 9999px, đường kính ~24px, fill #111111 hoặc #202020, glyph icon trắng căn giữa. Dùng cho utility icon và feature marker.

### Chevron Arrow Link
**Vai trò:** Link inline với chỉ báo hướng

Text có gạch chân BerkeleyMono 14px weight 400 #eeeeee, theo sau bởi glyph `→` cùng màu. Xuất hiện ở footer card ("Hapn case study →") và gợi ý kề CTA ("Book a demo →").

### Log Bar Histogram
**Vai trò:** Trực quan hóa dữ liệu trong UI sản phẩm và marketing

Các hàng thanh hình chữ nhật chặt chẽ bằng #2a7fff hoặc #da5c2c (điểm nhấn Ember), cao 4-8px, khoảng cách 2-4px. Đại diện cho khối lượng sự kiện theo thời gian. Không có label trục trong ngữ cảnh marketing — bản thân mô hình thanh là hình ảnh trực quan.

## Do's and Don'ts

### Nên làm
- Sử dụng BerkeleyMono cho tất cả UI text bao gồm nav, button và label — trộn proportional font sẽ phá vỡ thẩm mỹ terminal
- Phân tầng bề mặt theo các bước #000000 → #111111 → #191919 → #202020; không bao giờ dùng box-shadow để tạo độ nổi
- Sử dụng #da5c2c (Ember) riêng cho primary action fill, log-bar visualization và border trái 2px trên case-study card
- Đặt tất cả border-radius là 2px cho container, card và button; dành 9999px cho icon badge nhỏ và tag pill dưới 32px
- Đặt border trái màu cam 2px trên editorial/customer card như một dấu hiệu phân loại — đó là dấu câu màu sắc duy nhất trong các khối nội dung
- Sử dụng arrow glyph (→) inline sau action label trong BerkeleyMono để báo hiệu chuyển động về phía trước và củng cố nhịp điệu CLI
- Neo nền trang ở #000000 thuần và để text trắng giấy (#eeeeee) đảm nhận toàn bộ hệ thống phân cấp thông qua weight (400 vs 700) và kích thước

### Không nên làm
- Không đưa vào gradient, drop shadow ngoài hairline 1px/2px duy nhất, hoặc nền màu — hệ thống cố tình phẳng
- Không sử dụng proportional sans-serif font (Inter, system-ui) cho headline, nav hoặc button label — BerkeleyMono là bất khả nhượng cho nhận diện thương hiệu
- Không áp dụng #da5c2c cho text, icon hoặc border ngoài CTA fill, log bar và case-study left border — nó mất ý nghĩa khi bị rải rác
- Không bo tròn góc trên 2px cho card, panel hoặc button — hình học sắc cạnh phân biệt điều này với các quy ước soft-corner SaaS điển hình
- Không thêm section light-theme hoặc màu bề mặt thay thế — toàn bộ sản phẩm chỉ có dark-mode và bất kỳ bề mặt sáng nào cũng phá vỡ hệ thống
- Không sử dụng nền badge màu cho trạng thái (success/error/warning) — chỉ truyền đạt trạng thái thông qua ký hiệu BerkeleyMono và xử lý border
- Không đặt hình ảnh hoặc nhiếp ảnh không phải là UI sản phẩm hoặc logo grayscale — ngôn ngữ hình ảnh là screenshot, log pattern và arrow texture, không phải lifestyle photography

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Void | `#000000` | Nền trang, nav, terminal canvas |
| 1 | Carbon | `#111111` | Bề mặt nội dung chính, hero background, announcement strip, logo cell |
| 2 | Graphite | `#191919` | Card nâng cao, case-study panel, khối lồng nhau |
| 3 | Iron | `#202020` | Border, divider, phân cách bên trong tinh tế |

## Elevation

- **Button, bề mặt tương tác nhỏ:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`

## Imagery

Hình ảnh chủ yếu là product UI screenshot — dashboard observability thực tế với histogram log-bar màu xanh và bảng kết quả monospaced. Hình ảnh trang trí được giới hạn ở các ký tự mũi tên `>` lặp lại với độ tương phản thấp #3a3a3a tạo thành mô hình dữ liệu đang truyền phía sau hero. Logo khách hàng được hiển thị dưới dạng grayscale (#eeeeee hoặc #b4b4b4) trên cell #111111 phẳng — không nhiếp ảnh, không lifestyle imagery, không 3D render trừu tượng. Product screenshot CHÍNH LÀ hero.

## Layout

Full-bleed dark canvas với nội dung được giới hạn trong cột căn giữa max-width ~1200px. Hero là một khối text căn trái (terminal prompt `~/` phía trên headline monospaced hai dòng) kết hợp với arrow texture bên phải và product screenshot full-width bên dưới. Nhịp điệu section ổn định: hero → product screenshot → social proof logo grid (2×6) → case-study card cuộn ngang (3–4 card hiển thị, tràn với chevron ←→) → footer. Khoảng cách giữa các section là 40–64px. Case-study scroller phá vỡ lưới tĩnh bằng chuyển động ngang, gợi ý tương tác driven-by-scroll. Navigation là top bar đơn giản không có sticky mega-menu — mọi nav link là một dòng BerkeleyMono duy nhất với chevron dropdown tùy chọn.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #eeeeee
- background: #000000
- surface (card): #111111
- elevated surface: #191919
- border / divider: #202020
Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý button trung tính đã trích xuất thay vì phát minh ra màu CTA fill.
- primary action: không có màu CTA riêng biệt

**3 Ví dụ Component Prompt**
2. Xây dựng một customer case-study card: nền #191919, radius 2px, padding 32px, border trái 2px solid #da5c2c chạy suốt chiều cao. Logo khách hàng ở trên bằng #eeeeee. Headline BerkeleyMono 18px weight 400 #eeeeee. Khối quote lồng trong #111111 với padding 16px, BerkeleyMono 14px weight 400 #b4b4b4. Hàng footer: avatar hình tròn 24px + tên BerkeleyMono 14px weight 700 #eeeeee + vai trò 14px weight 400 #606060. Link dưới cùng BerkeleyMono 14px gạch chân #eeeeee với mũi tên →.
3. Xây dựng một product screenshot panel: khung ngoài #111111, radius 2px. Tab bar bằng BerkeleyMono 12px weight 400 #b4b4b4 với tab đang hoạt động được gạch chân #eeeeee. Hàng histogram gồm các thanh cao 4px bằng #2a7fff với khoảng cách 2px trên toàn bộ chiều rộng. Bảng kết quả bằng BerkeleyMono 12px weight 400 #eeeeee với row divider #3a3a3a và cột timestamp #606060. Không đổ bóng, không phần tử trong bo tròn.

## Similar Brands

- **Vercel** — Cùng thẩm mỹ developer dark-mode với monospaced accent typography và canvas gần như đen, mặc dù Vercel dùng Geist Mono thay vì BerkeleyMono
- **Linear** — Giao diện dark-first với góc 2px sắc cạnh, bề mặt phẳng và một màu nhấn ấm duy nhất cho primary action trên nền đen thuần
- **Fly.io** — UI sản phẩm engineering-native sử dụng monospaced type xuyên suốt, bề mặt gần như đen được phân tầng với hairline border và một điểm nhấn màu sắc duy nhất cho CTA
- **PlanetScale** — Trang sản phẩm database dark-mode với typography monospaced code-style, bề mặt card phẳng và một điểm nhấn cam ấm duy nhất trên primary CTA
- **Railway** — Dark UI nền tảng developer với bố cục lấy cảm hứng từ terminal, body text monospaced và phân tầng bề mặt gần như đen thay vì đổ bóng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void: #000000;
  --color-carbon: #111111;
  --color-graphite: #191919;
  --color-iron: #202020;
  --color-slate: #3a3a3a;
  --color-pewter: #505050;
  --color-steel: #606060;
  --color-ash: #7e7e7e;
  --color-fog: #b4b4b4;
  --color-chalk: #d9d9d9;
  --color-paper: #eeeeee;
  --color-ember: #da5c2c;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body: 14px;
  --leading-body: 1.71;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.56;
  --text-heading: 20px;
  --leading-heading: 1.4;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.33;
  --text-display: 32px;
  --leading-display: 1.25;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --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;

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

  /* Border Radius */
  --radius-sm: 2px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 2px;
  --radius-icons: 9999px;
  --radius-inputs: 2px;
  --radius-buttons: 2px;

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

  /* Surfaces */
  --surface-void: #000000;
  --surface-carbon: #111111;
  --surface-graphite: #191919;
  --surface-iron: #202020;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #000000;
  --color-carbon: #111111;
  --color-graphite: #191919;
  --color-iron: #202020;
  --color-slate: #3a3a3a;
  --color-pewter: #505050;
  --color-steel: #606060;
  --color-ash: #7e7e7e;
  --color-fog: #b4b4b4;
  --color-chalk: #d9d9d9;
  --color-paper: #eeeeee;
  --color-ember: #da5c2c;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body: 14px;
  --leading-body: 1.71;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.56;
  --text-heading: 20px;
  --leading-heading: 1.4;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.33;
  --text-display: 32px;
  --leading-display: 1.25;

  /* 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;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-full: 9999px;

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