# Sandclock

> # Sandclock — Style Reference

## Prompt Content

```
# Sandclock — Style Reference
> Terminal lệnh DeFi lúc nửa đêm — đèn tín hiệu xanh mint trên bảng điều khiển đen mờ

**Theme:** dark

Sandclock là một terminal yield DeFi khoác lên mình màu đen mờ: chrome gần như bằng không, một màu tín hiệu xanh mint rực rỡ, và typography đảm nhận mọi công việc. Giao diện mang phong cách Bloomberg terminal được tái hiện cho DeFi — canvas tối (#0a0a0a), viền graphite mảnh (#222222), bề mặt phẳng không có độ nâng trang trí, và Inter cho text tiện ích kết hợp với custom Aeonik display face cho headline 72px hiếm hoi. Màu xanh (#3fe280) chỉ xuất hiện như dấu câu chức năng: gạch chân nav active, primary CTA, và viền accent trên các thẻ số liệu trực tiếp. Mọi bề mặt khác đều giữ achromatic để màu xanh đọc như tín hiệu trực tiếp, không phải trang trí. Các component có cảm giác như một trading dashboard — gọn gàng, nhiều thông tin số, nhưng thoáng đãng nhờ khoảng cách section rộng. Không gradient, không drop shadow ngoại trừ một hiệu ứng nâng nhẹ duy nhất trên button, không có chrome minh họa màu sắc. Sự tin tưởng được truyền tải qua sự kiềm chế: thiết kế nói 'tiền của bạn ở đây' bằng cách giữ im lặng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Abyss | `#0a0a0a` | `--color-abyss` | Canvas trang và nền chính — toàn bộ site sống trên bề mặt gần như đen này để accent mint đọc như tín hiệu trực tiếp giữa bóng tối thuần khiết |
| Carbon | `#171717` | `--color-carbon` | Bề mặt card và panel được nâng lên — dùng cho stat cards, security badges, và announcement containers cần tách khỏi canvas mà không đưa thêm màu sắc |
| Graphite | `#222222` | `--color-graphite` | Viền mảnh, divider, và màu cấu trúc xuất hiện nhiều nhất trong hệ thống. Mang 356 borderColor uses — nó là khung dây (wireframe) định nghĩa mọi container |
| Ash | `#9b9b9b` | `--color-ash` | Secondary text mờ, helper labels, và nav items được giảm chú ý. Màu text không phải trắng duy nhất — dành #ffffff cho nội dung cần được đọc trước |
| Chalk | `#ffffff` | `--color-chalk` | Primary text, icon, và phần tô của Connect Wallet button. Độ tương phản tối đa với Abyss (19.8:1) đảm bảo khả năng đọc trên bề mặt tối nhất có thể |
| Signal Mint | `#3fe280` | `--color-signal-mint` | Accent màu duy nhất — gạch chân nav active, phần tô primary CTA (Start Earning), và viền highlight trên thẻ TVL stat. Xuất hiện tiết kiệm để mỗi lần xuất hiện đọc như một hành động trực tiếp, di chuyển tiền, thay vì trang trí |

## Tokens — Typography

### Aeonik — Display headlines (hero). Được dùng đúng một lần trên trang ở kích thước 72px — custom face với tracking chặt khiến câu từ của ứng dụng tài chính có cảm giác được kỹ thuật hóa thay vì dùng template. Weight 400 ở kích thước này là lựa chọn đặc trưng: các site tài chính khác dùng 600-800 bold; Sandclock thì thầm quyền lực. · `--font-aeonik`
- **Thay thế:** Satoshi (Indian Type Foundry) hoặc General Sans
- **Weights:** 400
- **Sizes:** 72px
- **Line height:** 1.00
- **Letter spacing:** -0.025em
- **Vai trò:** Display headlines (hero). Được dùng đúng một lần trên trang ở kích thước 72px — custom face với tracking chặt khiến câu từ của ứng dụng tài chính có cảm giác được kỹ thuật hóa thay vì dùng template. Weight 400 ở kích thước này là lựa chọn đặc trưng: các site tài chính khác dùng 600-800 bold; Sandclock thì thầm quyền lực.

### Inter — Tất cả UI text — body, buttons, nav, card content, subheadings, và section headings. Tracking dương 0.05em trên Inter khá bất thường cho body copy và mang lại cho label chất hơi kỹ thuật, giống bảng điều khiển thiết bị, thay vì sự ấm áp biên tập. Weight 500 dành cho nhấn mạnh (CTA labels, section titles); 400 đảm nhận mọi thứ còn lại. · `--font-inter`
- **Thay thế:** DM Sans hoặc system-ui
- **Weights:** 400, 500
- **Sizes:** 14px, 16px, 20px, 24px, 36px
- **Line height:** 1.11, 1.33, 1.40, 1.43, 1.50
- **Letter spacing:** 0.05em
- **Vai trò:** Tất cả UI text — body, buttons, nav, card content, subheadings, và section headings. Tracking dương 0.05em trên Inter khá bất thường cho body copy và mang lại cho label chất hơi kỹ thuật, giống bảng điều khiển thiết bị, thay vì sự ấm áp biên tập. Weight 500 dành cho nhấn mạnh (CTA labels, section titles); 400 đảm nhận mọi thứ còn lại.

### DM Sans — Sử dụng secondary tối thiểu — có thể chỉ một element duy nhất hoặc fallback. Không phải giọng type chính. · `--font-dm-sans`
- **Thay thế:** Inter
- **Weights:** 500
- **Sizes:** 16px
- **Line height:** 1.20
- **Vai trò:** Sử dụng secondary tối thiểu — có thể chỉ một element duy nhất hoặc fallback. Không phải giọng type chính.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.43 | 0.7px | `--text-caption` |
| body | 16px | 1.5 | 0.8px | `--text-body` |
| subheading | 20px | 1.4 | 1px | `--text-subheading` |
| heading-sm | 24px | 1.33 | 1.2px | `--text-heading-sm` |
| heading | 36px | 1.11 | 1.8px | `--text-heading` |
| display | 72px | 1 | -1.8px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** 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` |
| 112 | 112px | `--spacing-112` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 12px |
| pills | 9999px |
| buttons | 16px |
| heroButton | 64px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(24, 39, 75, 0.08) 0px 2px 3px 0px` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 48-64px
- **Card padding:** 16px
- **Element gap:** 16px

## Components

### Primary CTA Button
**Vai trò:** Filled button cho hành động quan trọng nhất trên một trang (Start Earning, Connect)

Nền #3fe280 (Signal Mint), text #0a0a0a (Abyss) để tương phản đảo ngược. Inter 500 ở 16px, letter-spacing 0.05em. Padding 12px 24px. Border-radius 16px. Không shadow. Màu xanh trên nền tối khiến button nổi bật như element có màu duy nhất trên màn hình — ưu tiên thị giác là tức thì.

### Ghost Button
**Vai trò:** Secondary action đi kèm với Primary CTA (Buy QUARTZ)

Nền trong suốt, viền 1px #222222 (Graphite), text #ffffff. Inter 500 ở 16px. Padding 12px 24px. Border-radius 16px. Một icon nhỏ đứng trước label. Đọc như người bạn đồng hành yên tĩnh bên cạnh CTA xanh — cùng hình dạng, chrome tắt tiếng.

### Connect Wallet Button
**Vai trò:** Hành động kết nối wallet cố định ở nav góc trên bên phải

Fill trắng #ffffff với text #0a0a0a — đảo ngược so với phần còn lại của dark UI. Inter 500 ở 16px. Border-radius 9999px (full pill). Pill trắng giữa biển bề mặt tối là non-CTA có độ tương phản cao duy nhất trên trang; nó hoạt động như một tiện ích toàn cục, không phải hành động nội dung.

### Navigation Link
**Vai trò:** Nav items trên thanh top-bar (Home, Earn, Staking, Docs)

Inter 400 ở 16px, text #ffffff. Trạng thái active: viền dưới 3px solid #3fe280 — nơi duy nhất màu xanh xuất hiện trong nav. Các link inactive không có gạch chân. Gạch chân xanh là tín hiệu trực tiếp phản chiếu các CTA mint bên dưới.

### TVL Stat Card
**Vai trò:** Thẻ dữ liệu trực tiếp được highlight hiển thị số liệu giao thức

Nền #171717 (Carbon), viền 1px #3fe280 (Signal Mint) — viền xanh là tín hiệu. Layout bên trong: label Ash nhỏ (14px, uppercase tracking) phía trên giá trị trắng lớn (36px Inter 500). Padding 16-24px. Border-radius 12px. Viền xanh nên được dành riêng cho các thẻ hiển thị số liệu trực tiếp, mang tiền.

### Generic Card
**Vai trò:** Container mặc định được nâng lên cho các nhóm nội dung

Nền #171717 (Carbon), viền 1px #222222 (Graphite). Border-radius 12px. Padding 16px. Không shadow. Viền mảnh thay vì độ nâng — hệ thống truyền tải độ sâu layer bằng sự thay đổi màu sắc, không phải drop shadow.

### Announcement Card
**Vai trò:** Tile tin tức/đối tác với image hero và body text

Nền #171717, border-radius 12px. Nửa trên: ảnh full-bleed hoặc artwork gradient (được phép phá vỡ quy tắc không hình ảnh — hình ảnh đối tác bên ngoài). Nửa dưới: pill badge nhỏ (Announcement / Security) trong Graphite với text trắng, sau đó là heading (20px Inter 500, trắng) và body (14px Inter 400, Ash). Padding 16px trên khối text.

### Security Badge Tile
**Vai trò:** Thẻ tín hiệu tin cậy (Safe data, SOC2 Compliant, Insured by Schwarzschild)

Nền #171717, border-radius 12px. Icon căn giữa trong một vòng tròn nhỏ ở trên, một dòng label text trắng bên dưới. Không viền, không shadow. Màu icon: #ffffff hoặc accent xanh (badge SOC2 dùng vòng tròn xanh thương hiệu như một ngoại lệ màu duy nhất được phép cho chứng nhận bên thứ ba).

### Announcement Tag
**Vai trò:** Pill badge nhỏ phía trên heading của announcement card

Nền #222222 (Graphite), text #ffffff, Inter 500 ở 12px. Padding 4px 12px. Border-radius 9999px (pill). Dùng để phân loại card (Announcement, Security) — không bao giờ tô màu, luôn trung tính.

### Partner Logo Strip
**Vai trò:** Hàng ngang logo giao thức bên thứ ba (AAVE, LIDO, Compound, Morpho)

Logo trắng (#ffffff) trên canvas Abyss, phân bố đều trên toàn bộ chiều rộng. Không viền, không separator — chỉ logo và khoảng thở. Hoạt động như một dải trust-by-association bên dưới hero.

### Feature Icon Block
**Vai trò:** Đơn vị icon-plus-label nhỏ dùng trong danh sách tính năng

Icon trắng hoặc Signal Mint (16-20px) kết hợp với label text trắng (14px Inter 400). Khoảng cách 4-8px giữa icon và text. Căn chỉnh theo nhịp điệu dọc. Không nền hoặc viền — sống trực tiếp trên canvas.

## Do's and Don'ts

### Nên làm
- Chỉ dùng Signal Mint #3fe280 cho: primary CTA, indicator nav active, và viền trên thẻ stat dữ liệu trực tiếp. Mọi bề mặt khác giữ achromatic.
- Đặt Inter letter-spacing thành 0.05em trên tất cả text — tracking kỹ thuật này là thứ phân biệt type với body copy SaaS chung chung.
- Dùng border-radius 12px cho tất cả card và 16px cho tất cả button. Không pha trộn 8px hoặc 4px — sự phân chia 12/16 là chữ ký hình học.
- Chỉ dùng Aeonik 400 ở 72px cho display text cấp hero. Không bao giờ dùng Aeonik cho subheadings hoặc body — nó được dành riêng cho khoảnh khắc tuyên bố duy nhất mỗi trang.
- Mặc định canvas #0a0a0a với card #171717 và viền mảnh #222222. Truyền tải độ sâu layer bằng sự thay đổi màu sắc, không phải shadow.
- Áp dụng khoảng cách section rộng 48-64px. Mật độ đọc là 'thoải mái,' không phải gọn — sản phẩm tiền cần không gian thở.
- Đặt hành động Connect Wallet dưới dạng pill trắng (bán kính 9999px) ở góc trên bên phải — nó là element UI màu đảo ngược duy nhất được phép trong nav.

### Không nên làm
- Không dùng Signal Mint cho body text, icon, hoặc hình dạng trang trí. Màu xanh là tín hiệu, không phải màu chủ đề.
- Không đưa drop shadows vào card, modal, hoặc panel. Bề mặt phẳng là một quy ước tài chính-tin cậy có chủ đích.
- Không dùng gradient. Hệ thống cố tình phẳng; gradient sẽ phá vỡ thẩm mỹ terminal.
- Không đặt Inter letter-spacing thành normal hoặc âm. Tracking dương 0.05em là lựa chọn đặc trưng.
- Không dùng Ash #9b9b9b cho bất cứ thứ gì dài hơn một helper label ngắn — chỉ dành cho text được giảm chú ý.
- Không áp dụng border-radius dưới 12px trên container hoặc dưới 16px trên button. Hệ thống có quan điểm hình học rõ ràng.
- Không dùng Aeonik weights trên 400. Display face hoạt động ở 400 vì kích thước (72px) tự mang trọng lượng; bolding sẽ làm quá lố.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Abyss | `#0a0a0a` | Canvas trang full-bleed |
| 1 | Carbon | `#171717` | Cards, stat panels, và announcement containers |
| 2 | Graphite | `#222222` | Viền mảnh và đường divider |

## Elevation

- **Primary CTA Button:** `rgba(24, 39, 75, 0.08) 0px 2px 3px 0px`

## Imagery

Hình ảnh là tối thiểu và chỉ dùng cho nội dung đối tác/thông báo. Site không có product photography, không lifestyle imagery, không chrome minh họa — nó là giao diện text-và-dữ liệu. Nội dung hình ảnh duy nhất đến từ các announcement card của bên thứ ba (gradient đất/cực quang, certification marks) là tài sản bên ngoài, không phải thiết kế hệ thống. Hero và bề mặt sản phẩm cốt lõi là typography thuần túy trên Abyss. Icons xuyên suốt là monochrome line icons màu trắng, được dùng tiết kiệm như marker chức năng. Mật độ tổng thể là text-dominant với dữ liệu (TVL, stETH Exposure) chiếm ưu tiên thị giác hơn hình ảnh trang trí.

## Layout

Container căn giữa max-width ~1200px trên canvas Abyss full-bleed. Hero theo chia hai cột: headline Aeonik 72px lớn bên trái, supporting copy + stack CTA kép bên phải. Bên dưới hero, dải logo đối tác trải dài toàn bộ chiều rộng container với phân bố ngang đều. Các section nội dung là một cột, heading căn giữa, với feature/icon blocks trong lưới 2-3 cột. Thẻ TVL stat là full-width với viền xanh nhấn mạnh. Announcement cards dùng lưới 3 cột. Nhịp điệu dọc rộng rãi — 48-64px giữa các section chính. Navigation là top bar tối giản với logo căn trái, nav links giữa-trái, và pill Connect Wallet căn phải. Không có sticky behavior rõ ràng ngoài top bar tiêu chuẩn.

## Agent Prompt Guide

Tham chiếu màu nhanh:
- canvas: #0a0a0a
- card surface: #171717
- border: #222222
- primary text: #ffffff
- muted text: #9b9b9b
- accent: #3fe280
- primary action: #3fe280 (filled action)

Ví dụ Component Prompts:

1. Tạo một Primary Action Button: nền #3fe280, text #0a0a0a, bán kính 9999px, padding pill gọn. Dùng filled treatment này cho CTA chính.

2. Tạo một TVL stat card: nền #171717, viền 1px #3fe280, bán kính 12px, padding 24px. Label uppercase nhỏ #9b9b9b 14px Inter 400 phía trên giá trị lớn #ffffff 36px Inter 500.

3. Tạo một generic content card: nền #171717, viền 1px #222222, bán kính 12px, padding 16px. Heading trắng 20px Inter 500, body Ash #9b9b9b 14px Inter 400.

4. Tạo một security badge tile: nền #171717, bán kính 12px, layout căn giữa. Icon line trắng 24px ở trên, label trắng 14px Inter 400 bên dưới. Không viền.

5. Tạo một nav link với active state: text 16px Inter 400 #ffffff, viền dưới 3px solid #3fe280 khi active. Các link inactive không có gạch chân.

## Similar Brands

- **Aave** — Cùng thẩm mỹ terminal dark-mode DeFi với viền mảnh, bề mặt phẳng, và một accent màu duy nhất dành riêng cho tín hiệu giao thức trực tiếp
- **Lido Finance** — Cùng sự kiềm chế sản phẩm tài chính — canvas Abyss, hệ thống phân cấp typography trắng-trên-tối, spacing rộng rãi, và không hình ảnh trang trí
- **Yearn Finance** — Cùng ngôn ngữ hình ảnh sản phẩm vault: data cards gọn nhẹ, màu xanh như tín hiệu di chuyển tiền, và Inter cho utility text
- **Coinbase Advanced** — Tương tự dark UI trading-desk với typography nghiêng về monospace và accent kiểu Signal-Mint cho các hành động active

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-abyss: #0a0a0a;
  --color-carbon: #171717;
  --color-graphite: #222222;
  --color-ash: #9b9b9b;
  --color-chalk: #ffffff;
  --color-signal-mint: #3fe280;

  /* Typography — Font Families */
  --font-aeonik: 'Aeonik', 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-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.43;
  --tracking-caption: 0.7px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 1px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: 1.2px;
  --text-heading: 36px;
  --leading-heading: 1.11;
  --tracking-heading: 1.8px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.8px;

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

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

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

  /* Named Radii */
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-buttons: 16px;
  --radius-herobutton: 64px;

  /* Shadows */
  --shadow-subtle: rgba(24, 39, 75, 0.08) 0px 2px 3px 0px;

  /* Surfaces */
  --surface-abyss: #0a0a0a;
  --surface-carbon: #171717;
  --surface-graphite: #222222;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-abyss: #0a0a0a;
  --color-carbon: #171717;
  --color-graphite: #222222;
  --color-ash: #9b9b9b;
  --color-chalk: #ffffff;
  --color-signal-mint: #3fe280;

  /* Typography */
  --font-aeonik: 'Aeonik', 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-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.43;
  --tracking-caption: 0.7px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 1px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: 1.2px;
  --text-heading: 36px;
  --leading-heading: 1.11;
  --tracking-heading: 1.8px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.8px;

  /* 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-112: 112px;

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

  /* Shadows */
  --shadow-subtle: rgba(24, 39, 75, 0.08) 0px 2px 3px 0px;
}
```