# Caldera

> Caldera — Style Reference

## Prompt Content

```
# Caldera — Style Reference
> Risograph zine trên nền bê tông ấm

**Theme:** light

Caldera là một brand crypto mang phong cách editorial brutalist: nền canvas bê tông trắng kem ấm áp, display type condensed gần như đen kéo dài tới 189px, và một màu cam rực duy nhất đảm nhận toàn bộ tương tác. Ngôn ngữ thị giác vay mượn từ văn hóa zine thập niên 90 và kỹ thuật in risograph — các chấm halftone chuyển từ cam sang tím trên hero panels và card thumbnails, tạo cảm giác in phẳng thay vì product UI bóng bẩy. Các bề mặt giữ phong cách thấp và mờ: cream cards nổi trên nền đá ấm, border là hairline black thay vì đổ bóng, và góc bo tròn mạnh (40px là bán kính chủ đạo, không phải 8px). Màu sắc được phân bổ hạn chế — phần lớn giao diện là đơn sắc đen-trên-kem, và màu cam chỉ xuất hiện ở nơi người dùng phải hành động, một con số phải nổi bật, hoặc một card phải báo hiệu membership của brand.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Concrete Canvas | `#e2e2df` | `--color-concrete-canvas` | Nền trang — đá xám nhạt ấm áp, bề mặt chủ đạo mà toàn bộ site nằm trên đó |
| Cream Card | `#f7f6f2` | `--color-cream-card` | Bề mặt card, stat panels, khối nội dung nâng cao — sáng hơn canvas một bậc |
| Ink | `#070607` | `--color-ink` | Headlines, body text, hairline borders, và các đường viền cấu trúc tạo khung editorial cho layout |
| Pure Black | `#000000` | `--color-pure-black` | Icon strokes, border dày, và văn bản tối nhất khi Ink chưa đủ đậm |
| Paper White | `#ffffff` | `--color-paper-white` | Chữ trắng trên nền cam/tối và SVG mask fills — không phải background |
| Citra Orange | `#fc5000` | `--color-citra-orange` | Hành động chính — filled buttons, CTA pill, active links, stat-card fills, và brand accents; màu ấm bão hòa duy nhất trong hệ thống |
| Ion Violet | `#524ae9` | `--color-ion-violet` | Trang trí bề mặt — xuất hiện trong halftone gradient art và một hero card, không bao giờ dùng làm button hay text |
| Hazard Yellow | `#f5f28e` | `--color-hazard-yellow` | Bề mặt highlight hiếm gặp cho emphasis blocks và tag backgrounds — tương phản cao với cả Ink và Citra Orange |

## Tokens — Typography

### sans-serif — sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-sans-serif`
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 1.2
- **Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### PP Neue Corp Compact — Display và headline — toàn bộ giọng nói brand. Dùng cho hero, section titles, stat numbers, và blog post titles. Phiên bản condensed ultrabold cực đoan, chạy tới 189px trên hero với line-height dưới 1.0, là signature: một headline duy nhất chiếm toàn bộ chiều rộng và mang phong cách bìa tạp chí hơn là SaaS hero. · `--font-pp-neue-corp-compact`
- **Thay thế:** Oswald (weight 700), Anton, hoặc Bebas Neue cho condensed ultrabold substitute; hoặc stretch-compress Inter Black xuống 75% width
- **Weights:** 800 (Ultrabold)
- **Sizes:** 26, 32, 40, 48, 56, 64, 80, 96, 189px
- **Line height:** 0.94–1.20 (dày, đặc biệt ở kích thước lớn)
- **Letter spacing:** 0.02em
- **OpenType features:** `"ss06", "ss10", "blwf", "cv03", "cv04", "cv09", "cv11"`
- **Vai trò:** Display và headline — toàn bộ giọng nói brand. Dùng cho hero, section titles, stat numbers, và blog post titles. Phiên bản condensed ultrabold cực đoan, chạy tới 189px trên hero với line-height dưới 1.0, là signature: một headline duy nhất chiếm toàn bộ chiều rộng và mang phong cách bìa tạp chí hơn là SaaS hero.

### DM Sans — Body, subheadings, nav, buttons, và form labels. Medium weight (không phải regular) là có chủ đích — nó khớp với mật độ thị giác của ultrabold headlines và ngăn body copy trông yếu ớt bên cạnh chúng. Kết hợp với display face như nửa yên tĩnh hơn của hệ thống. · `--font-dm-sans`
- **Thay thế:** Inter (weight 500) hoặc General Sans Medium
- **Weights:** 500
- **Sizes:** 14, 16, 18, 30px
- **Line height:** 1.11–1.55
- **Vai trò:** Body, subheadings, nav, buttons, và form labels. Medium weight (không phải regular) là có chủ đích — nó khớp với mật độ thị giác của ultrabold headlines và ngăn body copy trông yếu ớt bên cạnh chúng. Kết hợp với display face như nửa yên tĩnh hơn của hệ thống.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.2 | — | `--text-caption` |
| body-sm | 14px | 1.55 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.25 | — | `--text-subheading` |
| heading-sm | 26px | 1.1 | 0.52px | `--text-heading-sm` |
| heading | 40px | 1 | 0.8px | `--text-heading` |
| heading-lg | 64px | 0.95 | 1.28px | `--text-heading-lg` |
| display | 96px | 0.94 | 1.92px | `--text-display` |
| display-xl | 189px | 0.94 | 3.78px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 92 | 92px | `--spacing-92` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 20px |
| cards | 40px |
| pills | 800px |
| inputs | 100px |
| buttons | 40px |

### Layout

- **Page max-width:** 1280px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 10px

## Components

### Citra Primary Button
**Vai trò:** Filled CTA — button màu sắc duy nhất trong hệ thống

Background #fc5000, text #070607, DM Sans 16px weight 500, padding 12px 24px, border-radius 40px. Dùng cho 'Get Started', 'Explore Chains', và bất kỳ hành động chuyển tiếp không thể đảo ngược nào. Không border, không shadow — màu sắc CHÍNH LÀ trọng lượng.

### Ghost Secondary Button
**Vai trò:** Hành động phụ

Background trong suốt, 1px border #070607, text #070607, DM Sans 16px weight 500, padding 12px 24px, border-radius 40px. Dùng cho 'Book A Call' và 'Explore The Ecosystem'. Cùng hình học với primary button — điểm khác biệt duy nhất là fill.

### Stat Card
**Vai trò:** Card hiển thị số liệu

Background #fc5000, không border, border-radius 40px, padding trong 20–24px. Label bằng DM Sans 14px trắng; value bằng PP Neue Corp Compact Ultrabold 40px trắng (hoặc lớn hơn). Grid bốn cột trên metrics section.

### Blog Card
**Vai trò:** Card nội dung editorial

Background #f7f6f2, border-radius 40px, không shadow, hairline 1px border #070607 ở độ mờ 20% hoặc không. Thumbnail chiếm phần trên cùng tỷ lệ 16:9 với halftone orange art. Category tag (Announcement/Integration/Product) dùng Hazard Yellow #f5f28 background, DM Sans 12px, border-radius 20px. Title bằng PP Neue Corp Compact 26px, line-height 1.1.

### Hero Halftone Panel
**Vai trò:** Bề mặt brand trang trí

Hình chữ nhật bo tròn lớn (border-radius 40px+) chiếm khoảng 60% chiều rộng hero, chiều cao ~500px. Chứa halftone dot pattern gradient từ #fc5000 (cam) đến #524ae9 (tím), tạo bởi dot mask trên gradient. Panel tràn vào canvas mà không có border nhìn thấy được.

### Navigation Bar
**Vai trò:** Điều hướng cấp cao nhất

Floating pill nav (border-radius 800px), nền trắng/kem #f7f6f2, căn giữa ngang, padding 8px 16px. Logo (Caldera mark màu cam) bên trái, nav links bằng DM Sans 14px #070607 ở giữa, social icons + Get Started pill button bên phải. Nằm phía trên hero trên nền đá ấm.

### Nav Pill Button
**Vai trò:** Hành động chính trong nav

Background #fc5000, text #070607, DM Sans 14px weight 500, padding 8px 16px, border-radius 800px (full pill). Phản chiếu primary button ở tỷ lệ nav.

### Category Tag
**Vai trò:** Badge phân loại nội dung

Background #f5f28 (Hazard Yellow), text #070607, DM Sans 12px weight 500, padding 3px 8px, border-radius 20px. Nằm phía trên blog card titles.

### Logo Strip Card
**Vai trò:** Hiển thị logo đối tác/hệ sinh thái

Nền trắng #ffffff, border-radius 40px, dải ngang full-width với logo phân bố đều và được ngăn cách bởi hairline dọc 1px #e2e2df. Mỗi logo nằm trong một ô có padding.

### Text Input
**Vai trò:** Form input

Background #ffffff, 1px border #070607, border-radius 100px (fully pill), padding 12px 20px, DM Sans 16px. Placeholder màu xám mờ. Được dùng hạn chế — brand không tập trung vào form.

## Do's and Don'ts

### Nên làm
- Dùng PP Neue Corp Compact Ultrabold cho mọi headline và stat number; không bao giờ thay thế bằng display font regular weight
- Đặt headlines với line-height 0.94–1.0 và letter-spacing 0.02em — khối condensed dày, có tracking là giọng nói của brand
- Dùng #fc5000 chỉ cho filled primary actions, active states, và stat-card fills; coi nó như tiền tệ có hạn
- Mặc định tất cả cards và buttons với border-radius 40px; dành 800px (full pill) cho nav buttons và links
- Tạo chiều sâu bằng sự chuyển màu bề mặt (stone → cream → orange) thay vì drop shadows
- Giữ page background ở #e2e2df và card surfaces ở #f7f6f2 — cặp đá ấm/kem là canvas mà hệ thống phụ thuộc vào
- Dùng DM Sans weight 500 cho body, không bao giờ weight 400 — regular weight trông yếu ớt bên cạnh ultrabold display

### Không nên làm
- Không thêm chromatic accents mới — hệ thống là đơn sắc cộng với Citra Orange; Ion Violet chỉ để trang trí
- Không dùng box-shadows hoặc elevation glows; thiết kế phẳng và mang tính in ấn
- Không dùng border-radius 8px hoặc 12px cho cards hoặc buttons — 40px là bán kính chủ đạo và bất kỳ góc sắc hơn nào trông giống một sản phẩm khác
- Không dùng pure white #ffffff làm page background; canvas phải là đá ấm #e2e2df
- Không đặt headlines bằng humanist hoặc geometric sans (Inter, Helvetica, v.v.); condensed ultrabold display là bất khả thương lượng
- Không dùng letter-spacing 0 ở kích thước display — tracking 0.02em trên PP Neue Corp là thứ tạo nhịp điệu editorial cho type
- Không áp dụng #fc5000 cho body text, icons, hoặc borders; nó chỉ hoạt động như filled surface hoặc focused link

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Concrete Canvas | `#e2e2df` | Page background mặc định — đá xám ấm, sàn mà mọi thứ nằm trên |
| 2 | Cream Card | `#f7f6f2` | Cards, nav, metric panels — bề mặt nâng cao tiêu chuẩn |
| 3 | Citra Surface | `#fc5000` | Bề mặt mang brand cho stats và feature cards cần nổi bật |
| 4 | Ion Surface | `#524ae9` | Bề mặt nghệ thuật trang trí cho halftone hero panels |

## Elevation

Hệ thống cố tình không có shadow. Mọi chiều sâu thị giác đến từ sự chuyển màu bề mặt (stone → cream → orange) và từ border-radius rộng rãi, không phải từ drop shadows. Điều này giữ nguyên tính thẩm mỹ in ấn/zine và ngăn bảng màu ấm trông bóng bẩy hoặc skeuomorphic.

## Imagery

Không có nhiếp ảnh. Hình ảnh được xây dựng từ halftone dot patterns áp dụng lên gradient hai điểm dừng (Citra Orange #fc5000 → Ion Violet #524ae9), tạo cảm giác in risograph. Blog thumbnails và hero panel sử dụng cách xử lý này. Logos trong ecosystem strip là wordmarks đơn sắc phẳng trên nền trắng. Icons là line/fill marks đơn giản màu #070607. Tỷ lệ image-to-text tổng thể rất thấp — type và colored blocks CHÍNH LÀ hình ảnh.

## Layout

Các section full-bleed trên Concrete Canvas (#e2e2df), nội dung căn giữa trong max-width 1280px. Hero bất đối xứng: headline cỡ lớn canh trái chiếm ~40% chiều rộng, halftone gradient panel bên phải chiếm ~55% chiều rộng, với hình học chồng lấn (một secondary card tràn từ dưới panel chính). Các section xếp chồng dọc với khoảng cách 80px, mỗi section là một dải ngang riêng biệt. Stats section là grid 4 cột căn giữa gồm các card màu cam bằng nhau. Blog/announcement section là carousel cuộn ngang gồm các card có chiều rộng bằng nhau. Navigation là floating pill bar căn giữa, không phải thanh full-width — nav tách rời khỏi mép trang để củng cố cảm giác editorial. Footer theo cùng màu canvas, lưới link dày đặc.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #070607
- background: #e2e2df
- card surface: #f7f6f2
- border: #070607
- accent: #fc5000
- primary action: #fc5000 (filled action)
- decorative: #524ae9

**Ví dụ Component Prompts**
1. Tạo Primary Action Button: background #fc5000, text #000000, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính.
2. Xây dựng stats row: bốn card bằng nhau, mỗi card background #fc5000, radius 40px, padding 24px. Label bằng DM Sans 14px trắng ở góc trên bên trái, value bằng PP Neue Corp Compact Ultrabold 40px trắng bên dưới. Khoảng cách giữa các card 16px.
3. Xây dựng blog card: background #f7f6f2, radius 40px, padding 24px. 60% trên cùng là thumbnail halftone gradient tỷ lệ 16:9. Bên dưới: Hazard Yellow tag (#f5f28e, DM Sans 12px, padding 3px 8px, radius 20px), sau đó title bằng PP Neue Corp Compact Ultrabold 26px #070607, sau đó date bằng DM Sans 14px mờ.
4. Xây dựng nav bar: floating pill, căn giữa, background #f7f6f2, radius 800px, padding 8px 16px. Caldera mark màu cam bên trái, danh sách link DM Sans 14px #070607 ở giữa, Ghost social icons + pill button #fc5000 (radius 800px) bên phải.
5. Xây dựng text input: background #ffffff, border 1px solid #070607, radius 100px, padding 12px 20px, DM Sans 16px #070607. Không focus glow — khi focus, border dày lên 2px.

## Similar Brands

- **Arbitrum** — Cùng thể loại crypto-rollup, cùng cách tiếp cận đơn sắc-với-một-điểm-nhấn-rực-rỡ, và headline display condensed cỡ lớn tương tự
- **Optimism** — Accent hồng/coral ấm trên text gần như đen, editorial type weight, và visual identity chịu ảnh hưởng in ấn/zine
- **Coinbase Brand Pages** — Headline cỡ lớn đậm, một màu brand bão hòa duy nhất trên neutral canvas, và primary CTA hình pill
- **Layer3** — Bề mặt trang trí halftone / chấm và thẩm mỹ in risograph trên nền sáng ấm

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-concrete-canvas: #e2e2df;
  --color-cream-card: #f7f6f2;
  --color-ink: #070607;
  --color-pure-black: #000000;
  --color-paper-white: #ffffff;
  --color-citra-orange: #fc5000;
  --color-ion-violet: #524ae9;
  --color-hazard-yellow: #f5f28e;

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-neue-corp-compact: 'PP Neue Corp Compact', 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: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.55;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.25;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: 0.52px;
  --text-heading: 40px;
  --leading-heading: 1;
  --tracking-heading: 0.8px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 0.95;
  --tracking-heading-lg: 1.28px;
  --text-display: 96px;
  --leading-display: 0.94;
  --tracking-display: 1.92px;
  --text-display-xl: 189px;
  --leading-display-xl: 0.94;
  --tracking-display-xl: 3.78px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-92: 92px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 40px;
  --radius-full: 100px;
  --radius-full-2: 800px;

  /* Named Radii */
  --radius-tags: 20px;
  --radius-cards: 40px;
  --radius-pills: 800px;
  --radius-inputs: 100px;
  --radius-buttons: 40px;

  /* Surfaces */
  --surface-concrete-canvas: #e2e2df;
  --surface-cream-card: #f7f6f2;
  --surface-citra-surface: #fc5000;
  --surface-ion-surface: #524ae9;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-concrete-canvas: #e2e2df;
  --color-cream-card: #f7f6f2;
  --color-ink: #070607;
  --color-pure-black: #000000;
  --color-paper-white: #ffffff;
  --color-citra-orange: #fc5000;
  --color-ion-violet: #524ae9;
  --color-hazard-yellow: #f5f28e;

  /* Typography */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-neue-corp-compact: 'PP Neue Corp Compact', 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: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.55;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.25;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: 0.52px;
  --text-heading: 40px;
  --leading-heading: 1;
  --tracking-heading: 0.8px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 0.95;
  --tracking-heading-lg: 1.28px;
  --text-display: 96px;
  --leading-display: 0.94;
  --tracking-display: 1.92px;
  --text-display-xl: 189px;
  --leading-display-xl: 0.94;
  --tracking-display-xl: 3.78px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-92: 92px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 40px;
  --radius-full: 100px;
  --radius-full-2: 800px;
}
```