# Eclipse

> # Eclipse — Style Reference

## Prompt Content

```
# Eclipse — Style Reference
> Cel-shaded neon comic strip — nghĩ tới bảng hiệu kiểu Akira nhưng được render thành giao diện tài chính.

**Theme:** mixed

Eclipse vận hành trên nền canvas đơn sắc với một xung neon xanh lục duy nhất — ngữ pháp thị giác của nó gần với cel anime thập niên 90 hơn là một blockchain dashboard. Headline dùng GT Alpina Condensed ở hairline weights (100–200), nét serif mỏng nhất có thể nhưng vẫn đọc được thành chữ, kết hợp với Barlow Condensed cho UI chrome gọn nhẹ. Token màu duy nhất (#a1fea0) hoạt động như một chiếc bút dạ quang tô lên bản phác thảo mực trên giấy: border, button fill, hình minh họa đám mây, và hiệu ứng glow đều dùng chung một màu xanh tươi đó trên nền đen và trắng tuyệt đối. Bề mặt phẳng — không shadow, không gradient, không thủ thuật tạo chiều sâu. Button là dạng pill dày (25px radius), label là chữ in hoa kiểu máy chữ có tracking, illustration đảm nhận không khí còn type làm công việc cấu trúc.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Eclipse Green | `#a1fea0` | `--color-eclipse-green` | Primary action fill, active nav state, decorative border accents, cloud và glow illustration fills, investor-card spotlight — token màu duy nhất trong hệ thống, được dùng tiết kiệm để mỗi lần xuất hiện đều có cảm giác như một nét bút dạ quang |
| Ink Black | `#000000` | `--color-ink-black` | Body và heading text, hairline borders trên card/badge/button, footer rules, outlined button stroke — màu trung tính chủ đạo mang tất cả các đường nét cấu trúc |
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text trên nền tối, nav backgrounds, image backdrop — lớp nền cơ bản mà mọi thứ nằm trên đó |

## Tokens — Typography

### Barlow Condensed — UI chrome, nav links, buttons, badges, secondary headlines, marquee strips. Tỷ lệ condensed giữ cho copy ngang gọn bên trong pill buttons và ticker bars. 700 để nhấn mạnh, 500 cho nav, 400 cho body UI. Letter-spacing nới ra trên label chữ in hoa nhỏ (0.1–0.2em) và siết lại trên display size lớn (-0.02 đến -0.03em). · `--font-barlow-condensed`
- **Substitute:** Barlow Condensed (Google Fonts native)
- **Weights:** 400, 500, 700
- **Sizes:** 12px, 16px, 32px, 44px, 48px, 80px, 96px, 120px, 182px
- **Line height:** 0.83–1.60
- **Letter spacing:** 0.1em đến 0.2em cho small caps labels, -0.02em đến -0.03em cho large display
- **Vai trò:** UI chrome, nav links, buttons, badges, secondary headlines, marquee strips. Tỷ lệ condensed giữ cho copy ngang gọn bên trong pill buttons và ticker bars. 700 để nhấn mạnh, 500 cho nav, 400 cho body UI. Letter-spacing nới ra trên label chữ in hoa nhỏ (0.1–0.2em) và siết lại trên display size lớn (-0.02 đến -0.03em).

### GT Alpina Condensed — Display và hero headlines — giọng nói đặc trưng. Hairline weights 100–200 đẩy serif đến gần dạng wireframe của glyph, khiến chữ có cảm giác được đóng dấu hơn là được sắp chữ. Letter-spacing siết lại khi size tăng: -0.01em ở 24px lên đến -0.06em ở masthead 562px. Substitutes: Cormorant Garamond Condensed Light, EB Garamond 200. · `--font-gt-alpina-condensed`
- **Substitute:** Cormorant Garamond Condensed Light
- **Weights:** 100, 200
- **Sizes:** 24px, 33px, 44px, 46px, 61px, 64px, 88px, 120px, 562px
- **Line height:** 0.80–1.20 (tight, display-driven)
- **Letter spacing:** -0.01em ở 24px, -0.03em ở 44px, -0.04em ở 64px, -0.06em ở 88px+
- **Vai trò:** Display và hero headlines — giọng nói đặc trưng. Hairline weights 100–200 đẩy serif đến gần dạng wireframe của glyph, khiến chữ có cảm giác được đóng dấu hơn là được sắp chữ. Letter-spacing siết lại khi size tăng: -0.01em ở 24px lên đến -0.06em ở masthead 562px. Substitutes: Cormorant Garamond Condensed Light, EB Garamond 200.

### Atlas Typewriter — Eyebrow labels, section tags, small body annotations — giọng 'máy làm nhãn'. Luôn đặt ở uppercase với 0.2em tracking, hoạt động như dấu thời gian hoặc chương mục. Substitutes: IBM Plex Mono, Space Mono, JetBrains Mono. · `--font-atlas-typewriter`
- **Substitute:** Space Mono
- **Weights:** 400
- **Sizes:** 12px, 16px, 18px
- **Line height:** 1.00–1.60
- **Letter spacing:** 0.2em (nhất quán qua các size)
- **Vai trò:** Eyebrow labels, section tags, small body annotations — giọng 'máy làm nhãn'. Luôn đặt ở uppercase với 0.2em tracking, hoạt động như dấu thời gian hoặc chương mục. Substitutes: IBM Plex Mono, Space Mono, JetBrains Mono.

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

### Type Scale

| Vai trò | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | 0.2px | `--text-caption` |
| body-sm | 14px | 1.2 | — | `--text-body-sm` |
| body | 16px | 1.6 | 0.2px | `--text-body` |
| body-lg | 18px | 1.56 | 0.2px | `--text-body-lg` |
| subheading | 32px | 1.2 | — | `--text-subheading` |
| heading-sm | 48px | 1 | -0.03px | `--text-heading-sm` |
| heading | 80px | 0.9 | -0.04px | `--text-heading` |
| heading-lg | 120px | 0.83 | -0.06px | `--text-heading-lg` |
| display | 182px | 0.8 | -0.06px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 52 | 52px | `--spacing-52` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |
| 120 | 120px | `--spacing-120` |
| 140 | 140px | `--spacing-140` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 25px |
| pills | 100px |
| badges | 25px |
| buttons | 25px |

### Layout

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

## Components

### Primary Pill Button (Eclipse Green Fill)
**Vai trò:** Main CTA — 'Start Building', 'Build on Eclipse'

Nền fill #a1fea0, chữ Ink Black. Barlow Condensed 500, 16px, uppercase, 0.1em tracking. Padding 10px 24px. Border 1px solid Ink Black. Radius 25px (pill). Không shadow. Khi hover, nền đậm hơn và border dày lên 2px.

### Secondary Pill Button (Black Outline)
**Vai trò:** Companion CTA — 'Bridge to Eclipse'

Nền trắng, chữ Ink Black và border 1px. Barlow Condensed 500, 16px, uppercase, 0.1em tracking. Padding 10px 24px. Radius 25px. Icon mũi tên trailing (→) màu Ink Black. Đặt cạnh primary green button để tạo hệ thống phân cấp hai bước 'mềm hơn / mạnh hơn'.

### Top Navigation Bar
**Vai trò:** Site-wide navigation

Nền trắng, trong suốt cho đến khi scroll. Bên trái: text nav links bằng Barlow Condensed 500, 16px, uppercase (ABOUT, BUILDERS, CAREERS, ECOSYSTEM) kèm caret dropdown. Giữa: Eclipse wordmark bằng Barlow Condensed 700. Phải: cụm icon social (Instagram, YouTube, Discord, X) + pill 'Start Building' CTA radius 100px nền Ink Black chữ Paper White.

### Hero Display Headline
**Vai trò:** Above-the-fold brand statement

Bố cục ba dòng xếp chồng. Dòng 1 'SOLANA' bằng GT Alpina Condensed 200, 120–182px, line-height 0.80, -0.06em tracking, Paper White trên nền Ink Black. Dòng 2 'ON' ở 80px regular, đóng vai trò connector. Dòng 3 'ETHEREUM' giống dòng 1. Eyebrow 'ECLIPSE IS' bằng Atlas Typewriter 12px, 0.2em tracking, nằm phía trên. Căn giữa. Không drop cap, không trang trí — type tự làm công việc của nó.

### Section Eyebrow Label
**Vai trò:** Section identifier phía trên headline

Atlas Typewriter 12px, weight 400, uppercase, 0.2em tracking, Ink Black. Căn giữa. Khoảng cách 16px đến headline bên dưới. Ví dụ: 'ECLIPSE IS', 'BACKED BY', 'ETHEREUM'S FIRST SVM L2'.

### Investor Spotlight Card
**Vai trò:** Backer logo grid item với trạng thái highlight

Card trắng, border 1px Ink Black, radius 25px, padding 32px. Tên serif (ví dụ 'Portal Ventures') bằng GT Alpina Condensed 100–200, 24–33px, căn giữa. Trạng thái active: fill #a1fea0 thay thế nền trắng, chữ vẫn Ink Black, và một soft green glow halo kéo dài ~20px ra ngoài mép card (một green ellipse mờ phía sau card). Trạng thái inactive: trắng tinh.

### Full-Bleed Hero Illustration Panel
**Vai trò:** Animated hero visual + video entry point

Nền Ink Black, vòng trăng lưỡi liềm Paper White (Eclipse), hình minh họa đám mây xanh ở chân, và một nhân vật/phương tiện minh họa ở 1/3 dưới. Nút play căn giữa: vòng tròn 80px, border 1px Paper White, không fill, kèm icon tam giác Paper White. Không drop shadow trên illustration — chiều sâu đến từ lớp mây xanh nằm dưới nhân vật.

### Marquee Strip
**Vai trò:** Ticker banner các value props

Một dòng ngang duy nhất cuộn edge-to-edge. Barlow Condensed 700, 48–80px, uppercase, Ink Black trên Paper White. Các mục cách nhau bằng em-dashes và khoảng cách 32px. Không thay đổi màu nền — dựa vào weight và scale để nhấn mạnh.

### Footer / Social Footer
**Vai trò:** Bottom anchor và social links

Dải nền Ink Black. Chữ và icon trắng. Barlow Condensed 500, 16px, uppercase cho danh sách link. Social icons 24px, stroke 1px, Paper White. Top padding rộng 80px.

## Do's and Don'ts

### Do
- Chỉ dùng #a1fea0 cho primary CTAs, active states, và investor-card spotlight — không bao giờ dùng làm body text color hoặc page background.
- Đặt display headlines bằng GT Alpina Condensed ở weight 100 hoặc 200, không phải 300+; hairline serif là signature.
- Áp dụng radius 25px cho tất cả buttons, badges, và cards, và radius 100px chỉ cho nav-pill CTA.
- Đặt tất cả eyebrows và section labels bằng Atlas Typewriter, uppercase, 0.2em tracking, 12px.
- Giữ border #000000 ở 1px; chỉ dày lên 2px khi hover trên buttons.
- Phân cách các section với ít nhất 80px khoảng cách dọc; thiết kế thở giữa các dải.
- Đặt primary green button cạnh secondary button outline đen trong mọi nhóm CTA.

### Don't
- Đừng thêm bất kỳ màu nào khác ngoài #a1fea0, #000000, và #ffffff — hệ thống cố tình là bichromatic-plus-one.
- Đừng dùng GT Alpina Condensed trên weight 200 — weight nặng hơn phá vỡ hairline signature.
- Đừng áp drop shadows cho cards, buttons, hoặc illustrations; ngôn ngữ ink-outline phẳng là phong cách.
- Đừng đặt body copy bằng typewriter face; chỉ dành Atlas Typewriter cho labels và eyebrows ở 12–18px.
- Đừng dùng radius 4px, 8px, hoặc 12px — tất cả góc phải là 25px hoặc 100px.
- Đừng đặt chữ xanh trên nền trắng hoặc chữ trắng trên nền xanh ở body sizes; tỷ lệ tương phản 1.2:1 không đạt accessibility.
- Đừng phá vỡ cột 1200px của page với nội dung edge-bleed; chỉ hero và footer được phép tràn ra ngoài.

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Paper White | `#ffffff` | Default page và card canvas |
| 2 | Eclipse Green | `#a1fea0` | Accent wash — investor spotlight, decorative blob, active highlight |
| 3 | Ink Black | `#000000` | Hero và footer inversion band |

## Elevation

- **Investor Card (active glow):** `0 0 40px 10px rgba(161, 254, 160, 0.5)`

## Imagery

Illustration-first, phong cách anime/cel-shaded với đường viền mực dày và màu fill phẳng. Nhân vật (người cưỡi bò trên xe máy, xe turbo) được vẽ theo phong cách anime thập niên 90. Môi trường kết hợp không gian âm đen tuyệt đối với các khối mây xanh phẳng — không gradient, không atmospheric perspective. Nhiếp ảnh vắng mặt; product UI được thể hiện qua illustration và video. Icons là line icons stroke tối giản, mono (Ink Black hoặc Paper White), weight 1px, không bao giờ filled. Imagery được giới hạn — không bao giờ full-bleed ngoại trừ bên trong hero band — và luôn nằm trên một trường màu phẳng, không bao giờ được ghép lên ảnh.

## Layout

Cột căn giữa max-width 1200px với dark hero full-bleed ở trên cùng. Hero là một vertical stack thuần túy: eyebrow label → stacked display headline → dual pill CTAs → illustration neo ở giữa-dưới cùng. Bên dưới hero, page xen kẽ giữa các section Paper White (investor grid, feature blocks) và các marquee strips mỏng, với khoảng cách section 80px rộng rãi. Investor grid là bố cục 3 cột thu gọn theo chiều dọc trên màn hình hẹp. Footer là dải Ink Black full-bleed. Navigation là thanh trắng cố định với wordmark căn giữa và cụm social + CTA căn phải.

## Agent Prompt Guide

Quick Color Reference
- text: #000000
- background: #ffffff
- border: #000000
- accent / decorative: #a1fea0
- primary action: #a1fea0 (filled action)
- inversion band: #000000 background, #ffffff text

Example Component Prompts
1. Hero Display Headline: nền #000000 full-bleed. Eyebrow 'ECLIPSE IS' bằng Atlas Typewriter 12px, 0.2em tracking, #ffffff, căn giữa. Sau đó là headline ba dòng xếp chồng: 'SOLANA' / 'ON' / 'ETHEREUM' bằng GT Alpina Condensed weight 200, 120px, line-height 0.80, -0.06em letter-spacing, #ffffff, căn giữa. Bên dưới, khoảng cách 16px, sau đó hai pill buttons cạnh nhau: outlined black 'Bridge to Eclipse →' và filled #a1fea0 'Build on Eclipse', cả hai radius 25px, Barlow Condensed 500, 16px, uppercase, 0.1em tracking, padding 10px 24px, border 1px solid #000000.

2. Investor Spotlight Card: parent max-width 1200px, grid 3 cột. Mỗi card padding 32px, border 1px solid #000000, radius 25px, nền #ffffff. Tên bằng GT Alpina Condensed 200, 24px, căn giữa. Card active đổi nền sang #a1fea0 và thêm green outer glow 40px (#a1fea0 ở alpha 50%). Eyebrow 'BACKED BY' / 'GREAT INVESTORS & ANGELS' bằng Atlas Typewriter 12px phía trên grid.

3. Marquee Strip: dải full-bleed, cao 80px, nền #ffffff. Copy một dòng cuộn bằng Barlow Condensed 700, 48px, uppercase, #000000, với dấu em-dash ngăn cách và khoảng cách 32px giữa các mục (ví dụ 'FASTEST LAYER 2 — POWERED BY SVM — ETHEREUM'S FASTEST LAYER 2').

4. Footer Band: nền #000000 full-bleed, top padding 80px. Layout hai cột bên trong, max-width 1200px, chữ #ffffff. Trái: danh sách link Barlow Condensed 500, 16px, uppercase. Phải: hàng social icons 24px, stroke 1px, #ffffff.

5. Section Header Pair: một eyebrow Atlas Typewriter 12px (#000000, 0.2em tracking, căn giữa) với khoảng cách 16px, sau đó heading Barlow Condensed 700, 48px bên dưới — ghép cặp này bất cứ khi nào section cần tiêu đề mà không dùng display serif.

## Similar Brands

- **Berachain** — Cùng kỷ luật mono-plus-one-accent với một màu thương hiệu tươi sáng duy nhất trên nền đen/trắng, cộng với pill-shaped CTAs và display type condensed nặng.
- **Blur (blur.io)** — Cel-illustration kết hợp crypto dashboard — bề mặt đen/trắng phẳng với một neon token, chữ in hoa letter-spacing chặt, và pill buttons.
- **Phantom Wallet** — Dark hero inversion trên nền site trắng, cặp pill CTA outlined-vs-filled, và một accent bão hòa duy nhất dùng làm spotlight chứ không phải chrome.
- **Azuki** — Ngôn ngữ illustration anime/cel-shaded áp dụng cho thương hiệu công nghệ, với display type siêu condensed và bề mặt ink-on-white tương phản cao.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-eclipse-green: #a1fea0;
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;

  /* Typography — Font Families */
  --font-barlow-condensed: 'Barlow Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-alpina-condensed: 'GT Alpina Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-atlas-typewriter: 'Atlas Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-math: 'math', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.2px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 0.2px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.56;
  --tracking-body-lg: 0.2px;
  --text-subheading: 32px;
  --leading-subheading: 1.2;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: -0.03px;
  --text-heading: 80px;
  --leading-heading: 0.9;
  --tracking-heading: -0.04px;
  --text-heading-lg: 120px;
  --leading-heading-lg: 0.83;
  --tracking-heading-lg: -0.06px;
  --text-display: 182px;
  --leading-display: 0.8;
  --tracking-display: -0.06px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-120: 120px;
  --spacing-140: 140px;

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

  /* Border Radius */
  --radius-3xl: 25px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-cards: 25px;
  --radius-pills: 100px;
  --radius-badges: 25px;
  --radius-buttons: 25px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-eclipse-green: #a1fea0;
  --surface-ink-black: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-eclipse-green: #a1fea0;
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;

  /* Typography */
  --font-barlow-condensed: 'Barlow Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-alpina-condensed: 'GT Alpina Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-atlas-typewriter: 'Atlas Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-math: 'math', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.2px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 0.2px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.56;
  --tracking-body-lg: 0.2px;
  --text-subheading: 32px;
  --leading-subheading: 1.2;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: -0.03px;
  --text-heading: 80px;
  --leading-heading: 0.9;
  --tracking-heading: -0.04px;
  --text-heading-lg: 120px;
  --leading-heading-lg: 0.83;
  --tracking-heading-lg: -0.06px;
  --text-display: 182px;
  --leading-display: 0.8;
  --tracking-display: -0.06px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-120: 120px;
  --spacing-140: 140px;

  /* Border Radius */
  --radius-3xl: 25px;
  --radius-full: 100px;
}
```