# Moonli

> Moonli — Style Reference

## Prompt Content

```
# Moonli — Style Reference
> Vôi điện trên nền trắng — một căn phòng xanh rực rỡ được khoét ra từ không gian đơn sắc, đóng khung bởi những góc bo tròn rộng rãi.

**Theme:** light

Moonli vận hành trên chủ nghĩa tối giản màu sắc triệt để: canvas trắng, chữ đen, và một điểm nhấn vôi điện duy nhất xuất hiện như một khối không gian lớn thay vì rải rác trên các UI element. Màu vôi (#b8ff65) hoạt động như một căn phòng, không phải một highlight — nó tràn ngập toàn bộ hero và xuất hiện lại ở nền section, không bao giờ dùng làm button fill hay icon tint. Mọi thứ khác đều là đen thuần trên nền trắng, neo giữ bởi border-radius rộng 30-40px giúp làm mềm độ tương phản đơn sắc gay gắt. DM Sans đảm nhận toàn bộ hệ thống typography với dải weight rộng, letter-spacing dày đặc co lại mạnh ở kích thước display (-0.05em ở 58px). Minh họa nét đen trên bề mặt xanh lá thêm cá tính và sự ấm áp mà không phá vỡ kỷ luật hai màu. Kết quả mang phong cách tự tin, gần như poster — như một vật thể sáng duy nhất trong gallery toàn tường trắng.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Lime Voltage | `#b8ff65` | `--color-lime-voltage` | Nền section mang tính không khí, hero block — giọng màu duy nhất của hệ thống, dùng ở quy mô full-section thay vì làm UI accent |
| Obsidian | `#000000` | `--color-obsidian` | Text chính, tất cả border, tất cả icon, scroll-indicator fill, logo mark |
| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, nav element fills |
| Fog White | `#f3f3f3` | `--color-fog-white` | Bề mặt card phụ, nền section xen kẽ |
| Ash Border | `#e2e2e2` | `--color-ash-border` | Card borders, hairline dividers trên bề mặt trắng |
| Smoke | `#757575` | `--color-smoke` | Muted helper text, secondary metadata, caption-level information |

## Tokens — Typography

### DM Sans — Kiểu chữ duy nhất — weight 700 cho display và heading, 500 cho navigation và subheading, 400 cho body và caption. Tracking âm mạnh ở kích thước display (-0.05em ở 58px) là dấu ấn: DM Sans trở thành công cụ headline dạng poster nén chứ không phải body face trung tính. Ở kích thước body, tracking nới lỏng xuống -0.01em, mang lại nhịp điệu tự nhiên cho copy mà không cảm thấy máy móc. · `--font-dm-sans`
- **Thay thế:** Inter, Satoshi, General Sans
- **Weights:** 400, 500, 700
- **Sizes:** 14px, 16px, 24px, 38px, 48px, 58px
- **Line height:** 1.08 (display), 1.13–1.17 (large headings), 1.26 (subheadings), 1.45–1.50 (body), 1.75 (body-sm/captions)
- **Letter spacing:** -0.05em ở 58px, -0.03em ở 38–48px, -0.01em ở 14–24px
- **Role:** Kiểu chữ duy nhất — weight 700 cho display và heading, 500 cho navigation và subheading, 400 cho body và caption. Tracking âm mạnh ở kích thước display (-0.05em ở 58px) là dấu ấn: DM Sans trở thành công cụ headline dạng poster nén chứ không phải body face trung tính. Ở kích thước body, tracking nới lỏng xuống -0.01em, mang lại nhịp điệu tự nhiên cho copy mà không cảm thấy máy móc.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.75 | — | `--text-caption` |
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| subheading | 24px | 1.26 | — | `--text-subheading` |
| heading-sm | 38px | 1.17 | — | `--text-heading-sm` |
| heading | 48px | 1.13 | — | `--text-heading` |
| display | 58px | 1.08 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |
| 184 | 184px | `--spacing-184` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Value |
|---------|-------|
| nav | 40px |
| cards | 30px |
| buttons | 40px |
| circles | 9999px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40-70px
- **Card padding:** 30-40px
- **Element gap:** 20-25px

## Components

### Lime Hero Block
**Role:** Hero chính — atmospheric section full-width

Nền #b8ff65 full-width, border-radius 30px, padding 40-70px. Headline DM Sans 58px/1.08/weight 700/letter-spacing -0.05em căn giữa hoặc căn trái. Minh họa nét đen hai bên text trái và phải. Body copy đen 16px/1.5 bên dưới.

### White Content Card
**Role:** Bề mặt tiêu chuẩn cho các khối thông tin

Nền #ffffff, border 1px #e2e2e2, border-radius 30px, padding 30-40px. Chứa heading đen 38-48px và body 16px.

### Network Logo Card
**Role:** Card cuộn ngang hiển thị một blockchain network

Nền #ffffff, border 1px #e2e2e2, border-radius 30px, padding 20px. Tên network bằng DM Sans 500 ở 24px, logo icon dạng hình tròn 48-56px ở bên phải.

### Charity Circle
**Role:** Badge hình tròn cho logo từ thiện/cause trong phần Giving Back

Hình tròn hoàn hảo (9999px radius), nền #f3f3f3, logo đen bên trong ở ~50% fill. Sắp xếp dạng grid.

### Nav Pill Button
**Role:** CTA navigation chính (Stake Now)

Nền #ffffff, border 1px #e2e2e2, border-radius 40px, padding dọc 12px / ngang 20px. Text DM Sans 500 ở 16px, #000000.

### Ghost Nav Link
**Role:** Mục navigation text tiêu chuẩn

Không nền, không border. DM Sans 500 ở 16px, #000000. Khoảng cách ngang 25px giữa các mục.

### Scroll-Down Indicator
**Role:** Nút tròn nổi thúc đẩy cuộn trang

Fill #000000, hình tròn hoàn hảo (~48px), icon chevron trắng căn giữa. Đặt chồng lên ranh giới section.

### Two-Column Feature Section
**Role:** Giving Back và các layout chia đôi tương tự

Cột trái xanh vôi (#b8ff65) kết hợp với cột phải Fog White (#f3f3f3), cả hai border-radius 30px. Bên trái chứa heading + body + illustration; bên phải chứa logo grid + supporting copy.

### Logo Mark
**Role:** Nhận diện thương hiệu trong nav và footer

Icon tròn đen (~36px) chứa đường cong trừu tượng màu trắng bên trong, theo sau là wordmark 'moonli' bằng DM Sans 500 ở ~20px, #000000.

### Line Illustration Block
**Role:** Trang trí thị giác trên bề mặt xanh lá

Nghệ thuật đường nét đen một weight mô tả vật thể 3D (sách, đồng xu, màn hình, tinh thể). Vẽ ở stroke ~1.5px, không fill. Đặt ở rìa các section xanh vôi.

## Do's and Don'ts

### Do
- Chỉ dùng #b8ff65 làm nền full-section hoặc full-card — không bao giờ dùng làm button fill, text color, hay icon tint
- Áp dụng border-radius 30px cho tất cả card và 40px cho tất cả nav-pill element
- Dùng DM Sans 700 với letter-spacing -0.05em cho bất kỳ text nào ở 48px trở lên
- Giữ tất cả icon, border và text là #000000 — hệ thống là nhị phân giữa đen và trắng, với xanh vôi là giọng thứ ba duy nhất
- Dùng line illustration (nét đen một weight, không fill) để thêm cá tính trên bề mặt xanh vôi
- Ghép các section thành các khối bo tròn liền kề thay vì ngăn cách bằng divider — border-radius 30px và độ tương phản màu tạo nên cấu trúc
- Căn giữa trang ở max-width ~1200px; để lề trắng thở

### Don't
- Không bao giờ dùng #b8ff65 làm nền button CTA hoặc link color — xanh vôi mang tính không khí, không tương tác
- Tránh đưa thêm màu sắc khác — không xanh dương, tím, hay status hue. Hệ thống là hai tông cộng với xanh vôi
- Không áp dụng shadow hay gradient — thiết kế hoàn toàn flat với elevation được xác định bởi border
- Tránh góc nhọn dưới 30px trên card hoặc container — bán kính nhỏ phá vỡ sự mềm mại của hệ thống
- Không dùng letter-spacing rộng hơn -0.01em ở kích thước body hoặc chặt hơn -0.05em ở display
- Không bao giờ đặt text xanh vôi trên nền trắng hoặc text trắng trên nền xanh vôi ở kích thước nhỏ — giữ lớn để bảo toàn độ tương phản 17.5:1
- Tránh ảnh chụp, gradient, hoặc illustration có fill — line art đen là ngôn ngữ hình ảnh duy nhất

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper White | `#ffffff` | Canvas trang, nền nav |
| 1 | Fog White | `#f3f3f3` | Bề mặt card phụ, section xen kẽ |
| 2 | Lime Voltage | `#b8ff65` | Nền hero và feature block mang tính không khí |

## Elevation

Không có shadow. Elevation được thể hiện qua màu border (1px #e2e2e2) và sự chuyển đổi màu bề mặt (trắng → fog → xanh vôi). Hệ thống hoàn toàn flat; chiều sâu đến từ việc xếp lớp các khối bo tròn, không phải từ drop shadow.

## Imagery

Không có ảnh chụp. Tất cả hình ảnh là line illustration vẽ tay bằng nét đen một weight (khoảng 1.5px) mô tả vật thể 3D hình học — màn hình, đồng xu, sách, tinh thể, kim tự tháp, đồng xu xếp chồng. Minh họa nằm trên nền xanh vôi và hoạt động như trang trí không khí thay vì nội dung giải thích. Logo bên thứ ba (network chains, tổ chức từ thiện) xuất hiện dưới dạng mark đơn sắc nhỏ bên trong container tròn hoặc pill. Mật độ hình ảnh thấp — minh họa chiếm không gian âm rộng rãi và không bao giờ chồng lấn hay làm chật chội typography.

## Layout

Bố cục căn giữa, max-width ~1200px. Hero là khối xanh vôi full-width với headline căn giữa và minh họa nét hai bên. Bên dưới, một hàng card network cuộn ngang (#ffffff, radius 30px) nằm trong container fog-white. Các section hai cột theo mô hình lặp lại: một cột xanh vôi kết hợp với một cột fog-white, mỗi cột radius 30px, tạo nhịp điệu âm dương. Khoảng cách dọc rộng rãi (40-70px giữa các section). Navigation là thanh top tối giản với CTA dạng pill ở bên phải. Mật độ tổng thể thoáng đãng — không gian trắng chiếm ưu thế, các khối nội dung nổi như những card bo tròn rời rạc thay vì lấp đầy trang từ mép này sang mép kia.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000
- background: #ffffff
- surface: #f3f3f3
- border: #e2e2e2
- accent (chỉ mang tính không khí): #b8ff65
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

1. Tạo một hero section: nền #b8ff65 full-width, border-radius 30px, padding dọc 60px. Headline 58px DM Sans weight 700, #000000, letter-spacing -0.05em, line-height 1.08. Subtext 16px DM Sans weight 400, #000000, line-height 1.5. Minh họa nét đen một stroke hai bên text.

2. Tạo một network card: nền #ffffff, border 1px #e2e2e2, border-radius 30px, padding 20px. Tên network 24px DM Sans weight 500, #000000. Icon logo tròn (48px) ở bên phải.

3. Tạo một nav bar: nền #ffffff, căn giữa ở max-width 1200px. Logo (tròn đen + wordmark 'moonli' bằng DM Sans 500) bên trái. Nav links 16px DM Sans weight 500, #000000, khoảng cách ngang 25px. Nút 'Stake Now' bên phải: nền #ffffff, border 1px #e2e2e2, border-radius 40px, padding 12px 20px, DM Sans 500 ở 16px.

4. Tạo một feature block hai cột: cột trái #b8ff65 với border-radius 30px, cột phải #f3f3f3 với border-radius 30px. Cột trái có heading 38px DM Sans 700 + body 16px + line illustration đen. Cột phải có grid 3×2 charity circles (nền #f3f3f3, hình tròn hoàn hảo, logo đen bên trong).

5. Tạo một scroll-down indicator: hình tròn hoàn hảo 48px, fill #000000, icon chevron-down trắng căn giữa. Đặt chồng lên ranh giới giữa hero xanh vôi và section trắng tiếp theo.

## Similar Brands

- **Linear** — Cùng kỷ luật palette siêu tối giản với một accent color, góc bo tròn rộng rãi, và letter-spacing dày đặc trên display headings
- **Evervault** — Cùng hero block dạng poster với color wash full-bleed và display type sans-serif đậm
- **Ledger (corporate site)** — Cùng domain crypto/blockchain với UI đơn sắc stark và bề mặt card bo tròn
- **Cove** — Cùng thẩm mỹ hai tông (trắng + một accent màu sống động) với border-radius lớn và display type tự tin

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-lime-voltage: #b8ff65;
  --color-obsidian: #000000;
  --color-paper-white: #ffffff;
  --color-fog-white: #f3f3f3;
  --color-ash-border: #e2e2e2;
  --color-smoke: #757575;

  /* Typography — Font Families */
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.75;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.26;
  --text-heading-sm: 38px;
  --leading-heading-sm: 1.17;
  --text-heading: 48px;
  --leading-heading: 1.13;
  --text-display: 58px;
  --leading-display: 1.08;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-184: 184px;
  --spacing-200: 200px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40-70px;
  --card-padding: 30-40px;
  --element-gap: 20-25px;

  /* Border Radius */
  --radius-3xl: 30px;
  --radius-3xl-2: 40px;

  /* Named Radii */
  --radius-nav: 40px;
  --radius-cards: 30px;
  --radius-buttons: 40px;
  --radius-circles: 9999px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-fog-white: #f3f3f3;
  --surface-lime-voltage: #b8ff65;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-lime-voltage: #b8ff65;
  --color-obsidian: #000000;
  --color-paper-white: #ffffff;
  --color-fog-white: #f3f3f3;
  --color-ash-border: #e2e2e2;
  --color-smoke: #757575;

  /* Typography */
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.75;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.26;
  --text-heading-sm: 38px;
  --leading-heading-sm: 1.17;
  --text-heading: 48px;
  --leading-heading: 1.13;
  --text-display: 58px;
  --leading-display: 1.08;

  /* Spacing */
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-184: 184px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-3xl: 30px;
  --radius-3xl-2: 40px;
}
```