# Monad

> Monad — Style Reference

## Prompt Content

```
# Monad — Style Reference
> Tạp chí kỹ thuật monospaced trên giấy kem — nhẹ nhàng, chính xác, mang phong cách editorial.

**Theme:** light

Monad hiện ra như một tài liệu editorial nhẹ nhàng trên nền giấy ấm: canvas màu kem, mực than, và một bề mặt card màu oải hương gần như xám duy nhất mang toàn bộ UI. Điểm nhấn đặc trưng là typography — một serif nhân văn (humanist serif) ở weight 400 cho headline, kết hợp với font monospaced cho gần như toàn bộ UI text, tạo cảm giác technical-journal hiếm thấy trong B2B SaaS. Màu sắc gần như hoàn toàn vắng bóng trong giao diện; các tông màu đào, oải hương và bạc hà chỉ xuất hiện trong sơ đồ luồng dữ liệu (data-flow diagram) ở hero, nơi chúng hoạt động như những mảng màu khí quyển mềm mại chứ không phải điểm nhấn thương hiệu. Các component phẳng và tự tin: pill buttons 100px, cards border-radius 40px, viền mảnh (hairline) gần như đen, và một bóng đổ mềm duy nhất — không có gì nặng nề, không có gì bóng bẩy. Nhịp điệu tổng thể là khoảng thở rộng rãi, các khối text căn giữa, và các đường flow ngang gợi ý chuyển động mà không cần animation.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Parchment Cream | `#f6f3f1` | `--color-parchment-cream` | Canvas trang, nền nav, bề mặt badge — nền off-white ấm áp khiến toàn bộ giao diện có cảm giác như giấy thay vì màn hình |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, viền mảnh (hairline borders), và màu viền chủ đạo trên nav, cards, và divider |
| Charcoal | `#242424` | `--color-charcoal` | Nền primary action button, viền badge, bề mặt nâng cao — filled CTAs hơi lệch khỏi đen tuyền để tạo độ mềm thị giác |
| Graphite | `#4e4d4d` | `--color-graphite` | Body và heading text ở độ tương phản thấp hơn, viền card phụ, muted UI elements |
| Slate Shadow | `#3d3d3d` | `--color-slate-shadow` | Viền cấp ba và các nét trang trí nơi màu đen tuyền sẽ quá nặng |
| Warm Stone | `#797776` | `--color-warm-stone` | Muted helper text, gạch chân link, và label ít quan trọng |
| Lavender Mist | `#cfdaf5` | `--color-lavender-mist` | Màu nền card surface — màu bề mặt duy nhất không phải thang xám, dùng như một lớp wash nhẹ để phân tách nội dung nâng cao khỏi canvas kem |
| Peach to Periwinkle Wash | `linear-gradient(rgba(255, 148, 115, 0.8) 7%, rgba(160, 181, 235, 0.8) 83.82%)` | `--color-peach-to-periwinkle-wash` | Gradient trang trí ở điểm cuối trong sơ đồ luồng dữ liệu — màu khí quyển mềm mại, không bao giờ dùng làm điểm nhấn UI |
| Mint to Periwinkle Wash | `linear-gradient(rgb(160, 181, 235), rgb(167, 252, 205))` | `--color-mint-to-periwinkle-wash` | Gradient trang trí trong aura của sơ đồ luồng dữ liệu — xuất hiện như một lớp phát sáng xanh lục mềm quanh node xử lý trung tâm |

## Tokens — Typography

### Untitled Serif — Tất cả headline và display text. Phản quy tắc: weight 400 (không phải 600-700) để các đường nét serif thì thầm — uy quyền đến từ tỷ lệ nhân văn (humanist proportions) của typeface và tracking âm rộng rãi, chứ không từ độ đậm. · `--font-untitled-serif`
- **Thay thế:** Source Serif 4, Lora, hoặc PT Serif
- **Weights:** 400
- **Kích cỡ:** 24px, 28px, 32px, 40px, 80px
- **Line height:** 1.20
- **Letter spacing:** -0.0200em
- **Vai trò:** Tất cả headline và display text. Phản quy tắc: weight 400 (không phải 600-700) để các đường nét serif thì thầm — uy quyền đến từ tỷ lệ nhân văn (humanist proportions) của typeface và tracking âm rộng rãi, chứ không từ độ đậm.

### ABC Diatype Mono — Body text, navigation, buttons, badges, tags, và tất cả functional UI copy. Việc xử lý monospaced cho text không phải code là lựa chọn đặc biệt nhất của hệ thống — nó mang lại cho mọi label trọng lượng thị giác của một chú thích đã được sắp chữ, củng cố ẩn dụ technical-journal. · `--font-abc-diatype-mono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Berkeley Mono
- **Weights:** 400, 500
- **Kích cỡ:** 12px, 14px, 16px, 18px, 20px, 28px
- **Line height:** 1.30-1.35
- **Letter spacing:** -0.0200em
- **Vai trò:** Body text, navigation, buttons, badges, tags, và tất cả functional UI copy. Việc xử lý monospaced cho text không phải code là lựa chọn đặc biệt nhất của hệ thống — nó mang lại cho mọi label trọng lượng thị giác của một chú thích đã được sắp chữ, củng cố ẩn dụ technical-journal.

### Untitled Sans — Body text phụ dự phòng — xuất hiện tối thiểu, có thể dùng cho đoạn văn dài nơi monospaced character widths sẽ gây mất tập trung · `--font-untitled-sans`
- **Thay thế:** Inter, Söhne, hoặc system-ui
- **Weights:** 400
- **Kích cỡ:** 16px
- **Line height:** 1.35
- **Letter spacing:** -0.0200em
- **Vai trò:** Body text phụ dự phòng — xuất hiện tối thiểu, có thể dùng cho đoạn văn dài nơi monospaced character widths sẽ gây mất tập trung

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|------|
| caption | 12px | 1.3 | -0.24px | `--text-caption` |
| body-sm | 14px | 1.35 | -0.28px | `--text-body-sm` |
| body | 16px | 1.35 | -0.32px | `--text-body` |
| subheading | 18px | 1.35 | -0.36px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |
| heading | 32px | 1.2 | -0.64px | `--text-heading` |
| heading-lg | 40px | 1.2 | -0.8px | `--text-heading-lg` |
| display | 80px | 1.2 | -1.6px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** thoải mái (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` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 200 | 200px | `--spacing-200` |
| 216 | 216px | `--spacing-216` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 100px |
| cards | 40px |
| inputs | 8px |
| buttons | 100px |

### Shadows

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

### Layout

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

## Components

### Filled CTA Button
**Vai trò:** Primary action trigger trong nav và hero

Nền Charcoal (#242424), text Parchment Cream (#f6f3f1), ABC Diatype Mono 14px weight 500, border-radius 100px, padding dọc 10px × ngang 24px, không shadow. Bao gồm một mũi tên chevron nhỏ màu kem.

### Ghost Outline Button
**Vai trò:** Secondary action trigger đi kèm với filled CTA

Nền trong suốt, viền 1px Ink Black (#000000), text Ink Black, ABC Diatype Mono 14px weight 500, border-radius 100px, padding dọc 10px × ngang 24px.

### Navigation Bar
**Vai trò:** Navigation cấp cao nhất cố định (sticky)

Nền Parchment Cream, viền dưới dạng hairline 1px Ink Black, logo bên trái, nav links mono ở giữa, filled và ghost CTAs bên phải. Links là ABC Diatype Mono 14px, implied uppercase tracking nhờ mono character width.

### Announcement Bar
**Vai trò:** Dải quảng cáo đầu trang

Nền Ink Black full-width, text Parchment Cream bằng ABC Diatype Mono 12-14px, inline CTA pill button màu kem với text đen. Có thể đóng bằng icon close.

### Source/Destination Tag
**Vai trò:** Label hình pill trong sơ đồ luồng dữ liệu

Nền trắng hoặc Parchment, viền 1px Ink Black, border-radius 100px, icon căn trái + label ABC Diatype Mono 12-14px, padding 8px 16px. Các tag này nổi trên các đường kết nối trong hero diagram.

### Feature Card
**Vai trò:** Content card trong phần 'How Monad Works'

Nền Lavender Mist (#cfdaf5), không viền, border-radius 40px, padding 40px, bóng đổ mềm (rgba(0,0,0,0.1) 0 0 10px). Chứa một icon nhỏ, serif heading, và mono body text. Phía bên phải thường có một decorative gradient illustration (đào/oải hương/bạc hà).

### FAQ Accordion Item
**Vai trò:** Hàng câu hỏi có thể mở rộng trong phần FAQ

Không nền, không border-radius, viền dưới dạng hairline 1px Ink Black ở độ mờ 20-30%, text câu hỏi ABC Diatype Mono 16px màu Ink Black, icon cộng/trừ căn phải. Trạng thái mở rộng hiển thị body text bên dưới màu Graphite.

### Data Flow Diagram
**Vai trò:** Visualization trong hero thể hiện sources → processing → destinations

Bố cục full-width trải dài bên dưới hero text. Cột bên trái xếp chồng các source tags (ANY SOURCE, CLOUD LOGS, VULNERABILITIES, IAM ACTIVITY, EDR ALERTS, SAAS AUDIT LOGS, ASSET INVENTORY). Trung tâm chứa một vùng phát sáng hình tròn màu xanh bạc hà mềm với một processing node và các status badges nhỏ (EVENT, INGEST, ROUTE, NORMALIZE). Cột bên phải xếp chồng các destination tags (SIEM, CLOUD STORAGE, XDR, DATA LAKE, ANY DESTINATION). Các đường kết nối mảnh nối sources đến trung tâm đến destinations.

### Processing Status Badge
**Vai trò:** Label inline nhỏ trong sơ đồ luồng dữ liệu

Pill tags nhỏ (border-radius 100px) với mono text cỡ 10-12px. Trạng thái success có tiền tố chấm tròn xanh nhạt; trạng thái neutral có chấm tròn xám. Không nền, chỉ có viền mảnh (hairline).

### Decorative Gradient Panel
**Vai trò:** Minh họa bên phải trong feature cards

Gradient mờ, trong suốt pha trộn đào (#ff9473), oải hương (#a0b5eb), bạc hà (#a7fccd), và hổ phách (#e2c161) ở độ mờ 60-80%. Luôn nằm gọn trong card radius 40px. Không bao giờ dùng làm CTA hoặc interactive element.

### Footer Link Group
**Vai trò:** Footer navigation dạng cột

Section headings bằng ABC Diatype Mono 12px weight 500 với tracking dương (0.050em), viết hoa. Links bên dưới bằng mono 14px weight 400, màu Graphite, row gap 12px.

## Do's and Don'ts

### Nên làm
- Dùng Untitled Serif weight 400 cho tất cả headline — không bao giờ dùng bold, không bao giờ dùng black-weight.
- Dùng ABC Diatype Mono cho mọi functional UI label: buttons, nav, tags, badges, và short body text.
- Áp dụng border-radius 100px cho tất cả buttons, tags, và pill-shaped elements.
- Áp dụng border-radius 40px cho tất cả card và panel surfaces.
- Giữ canvas là Parchment Cream (#f6f3f1) — không bao giờ chuyển sang trắng tinh, vì điều đó sẽ phá vỡ sự ấm áp editorial.
- Dùng soft ambient shadow (rgba(0,0,0,0.1) 0 0 10px) một cách tiết kiệm — chỉ trên elevated cards, không bao giờ trên buttons hoặc nav.
- Giới hạn tất cả màu sắc (chromatic color) trong decorative gradient illustrations; bản thân UI vẫn ở gần thang xám.

### Không nên làm
- Không dùng bold hoặc semibold weights cho serif headlines — weight 400 là đặc trưng.
- Không dùng proportional sans-serif cho body text hoặc nav — mono là bản sắc của hệ thống.
- Không thêm saturated brand colors làm điểm nhấn, gạch chân, hoặc trạng thái active — bảng màu được cố tình hạn chế.
- Không dùng góc vuông hoặc corner radii 4-8px trên interactive elements — pills (100px) và bo tròn rộng rãi (40px) là bắt buộc.
- Không đặt gradient màu phía sau text hoặc dùng làm nền section — chúng chỉ thuộc về decorative illustration panels.
- Không dùng heavy drop shadows hoặc layered elevation — hệ thống chỉ dùng một bóng đổ ambient 10px tinh tế.
- Không phá vỡ canvas kem bằng các bề mặt trắng hoặc gần trắng — sự ấm áp phải duy trì trên mọi cấp độ trang.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Parchment Canvas | `#f6f3f1` | Nền trang — off-white kem ấm xác định cảm giác giấy editorial |
| 1 | Lavender Card | `#cfdaf5` | Bề mặt card nâng cao — tông oải hương gần xám tinh tế phân tách khối nội dung khỏi canvas |
| 2 | Charcoal Surface | `#242424` | Bề mặt tối nâng cao cho CTAs và badges — bề mặt không ấm duy nhất trong hệ thống |

## Elevation

- **Feature Card:** `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px`

## Imagery

Ngôn ngữ hình ảnh của Monad gần như hoàn toàn là diagrammatic và typographic — không có photography, không có product screenshots, không có lifestyle imagery. Hero tập trung vào một sơ đồ luồng dữ liệu: source tags hình pill bên trái, một processing node phát sáng ở trung tâm (được bao quanh bởi một lớp wash hình tròn màu xanh bạc hà mềm), và destination tags bên phải, tất cả được kết nối bằng các đường flow ngang mảnh. Feature cards kết hợp một khối text với một decorative gradient panel ở bên phải — các panel này sử dụng gradient đào, oải hương, bạc hà và hổ phách mờ với các hình dạng hình học trừu tượng (hình tròn, hình vuông bo tròn, các chấm như chòm sao). Icons xuyên suốt là minimal line-art glyphs màu Ink Black với stroke weight nhất quán. Mật độ tổng thể là text-dominant; hình ảnh đóng vai trò là điểm nhấn khí quyển hơn là nội dung.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000 (Ink Black)
- background: #f6f3f1 (Parchment Cream)
- card surface: #cfdaf5 (Lavender Mist)
- border / hairline: #000000 at 1px
- muted text: #4e4d4d (Graphite)
- primary action: không có màu CTA riêng biệt

## Example Component Prompts

Không quan sát thấy màu primary action riêng biệt; sử dụng các button neutral đã trích xuất thay vì phát minh ra màu filled CTA.

2. **Feature Card**: Nền Lavender Mist (#cfdaf5), border-radius 40px, padding 40px, shadow rgba(0,0,0,0.1) 0 0 10px. Cột trái: icon nhỏ, sau đó heading bằng Untitled Serif 24px weight 400, sau đó body bằng ABC Diatype Mono 16px màu #4e4d4d. Cột phải: decorative gradient panel (đào đến oải hương, độ mờ 60-80%) nằm gọn trong card radius.

3. **Pill Source Tag**: Nền trắng hoặc trong suốt, viền 1px #000000, border-radius 100px, padding 8px/16px. Icon 14px căn trái màu #000000, sau đó label bằng ABC Diatype Mono 12px weight 400 màu #000000, gap 8px giữa icon và text.

4. **FAQ Accordion Row**: Hàng full-width, không nền, viền dưới 1px #000000 ở độ mờ 20%. Text câu hỏi bằng ABC Diatype Mono 16px màu #000000. Icon cộng/trừ căn phải, stroke 1.5px màu #000000. Padding dọc 24px.

5. **Announcement Bar**: Nền #000000 full-width, cao 48px, nội dung căn giữa. Text bằng ABC Diatype Mono 13px màu #f6f3f1. Inline link hoặc pill button màu #f6f3f1 với text #000000, border-radius 100px.

## Similar Brands

- **Linear** — Cùng bảng màu gần như đơn sắc, hạn chế, với một dark filled CTA pill duy nhất và ghost outline secondary — nhưng Monad tiến xa hơn với kem ấm và cặp serif/mono.
- **Stripe** — Cùng sự tự tin trong việc sử dụng whitespace rộng rãi, các khối text căn giữa, và pill buttons 100px cho CTAs; cả hai hệ thống đều dựa vào độ chính xác của layout hơn là màu sắc để tạo hierarchy.
- **Vercel** — Chia sẻ cách tiếp cận minimal-chrome, hairline-border, single-shadow với UI đơn sắc — Monad khác biệt bằng cách dùng kem ấm và serif headlines thay vì thang xám thuần túy và geometric sans của Vercel.
- **Resend** — Cả hai đều dùng font monospaced cho functional UI text, canvas off-white ấm, và bảng màu hạn chế — một cảm quan technical-editorial chung.
- **Cursor** — Cùng pill-shaped CTAs, hero layout sạch sẽ căn giữa, và sự tự tin khi dùng gần như không màu trong giao diện cốt lõi trong khi để illustrations mang các điểm nhấn màu sắc.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-parchment-cream: #f6f3f1;
  --color-ink-black: #000000;
  --color-charcoal: #242424;
  --color-graphite: #4e4d4d;
  --color-slate-shadow: #3d3d3d;
  --color-warm-stone: #797776;
  --color-lavender-mist: #cfdaf5;
  --color-peach-to-periwinkle-wash: #ff9473;
  --gradient-peach-to-periwinkle-wash: linear-gradient(rgba(255, 148, 115, 0.8) 7%, rgba(160, 181, 235, 0.8) 83.82%);
  --color-mint-to-periwinkle-wash: #a7fccd;
  --gradient-mint-to-periwinkle-wash: linear-gradient(rgb(160, 181, 235), rgb(167, 252, 205));

  /* Typography — Font Families */
  --font-untitled-serif: 'Untitled Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-abc-diatype-mono: 'ABC Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --tracking-caption: -0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.35;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.35;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.35;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.64px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.8px;
  --text-display: 80px;
  --leading-display: 1.2;
  --tracking-display: -1.6px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-200: 200px;
  --spacing-216: 216px;

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

  /* Border Radius */
  --radius-3xl: 40px;
  --radius-full: 100px;
  --radius-full-2: 2000px;

  /* Named Radii */
  --radius-tags: 100px;
  --radius-cards: 40px;
  --radius-inputs: 8px;
  --radius-buttons: 100px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;

  /* Surfaces */
  --surface-parchment-canvas: #f6f3f1;
  --surface-lavender-card: #cfdaf5;
  --surface-charcoal-surface: #242424;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-parchment-cream: #f6f3f1;
  --color-ink-black: #000000;
  --color-charcoal: #242424;
  --color-graphite: #4e4d4d;
  --color-slate-shadow: #3d3d3d;
  --color-warm-stone: #797776;
  --color-lavender-mist: #cfdaf5;
  --color-peach-to-periwinkle-wash: #ff9473;
  --color-mint-to-periwinkle-wash: #a7fccd;

  /* Typography */
  --font-untitled-serif: 'Untitled Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-abc-diatype-mono: 'ABC Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --tracking-caption: -0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.35;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.35;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.35;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.64px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.8px;
  --text-display: 80px;
  --leading-display: 1.2;
  --tracking-display: -1.6px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-200: 200px;
  --spacing-216: 216px;

  /* Border Radius */
  --radius-3xl: 40px;
  --radius-full: 100px;
  --radius-full-2: 2000px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
}
```