# Allfeat

> # Allfeat — Style Reference

## Prompt Content

```
# Allfeat — Style Reference
> Màn hình backstage lúc nửa đêm — một luồng sáng sân khấu màu teal xuyên qua dòng chữ màu kem ấm trên nền kính than chì.

**Theme:** dark

Allfeat là nền tảng hạ tầng âm nhạc dark-mode sử dụng bảng màu kem ấm trên than chì làm trạng thái nền tĩnh, sau đó thắp sáng canvas bằng hiệu ứng radial wash teal cho hero và gradient coral-red để tạo điểm nhấn cảm xúc. Hệ thống chỉ dùng một typeface duy nhất (TASA Orbiter) với ba font-weight tiết chế, các kích thước display được siết chặt bằng tracking -0.02em để headline đọc như những khối chữ tự tin thay vì những tuyên bố thoáng đãng. Hình học phân chia rõ rệt: bất cứ thứ gì có tính tương tác đều là pill tròn (900px), bất cứ thứ gì chứa nội dung đều là card bo góc 12px với viền hairline inset màu #383835 — không có drop shadow, không glass, không blur. Màu sắc được phân bổ có chủ đích: teal là màu duy nhất mang nghĩa 'hãy làm điều này', coral là màu duy nhất mang nghĩa 'hãy cảm nhận điều gì đó', và mọi bề mặt khác đều nằm trong họ warm-gray trung tính. Kết quả mang lại cảm giác như màn hình backstage của một phòng hòa nhạc — tối, chức năng, với một luồng sáng sân khấu xuyên qua.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Charcoal Stage | `#151515` | `--color-charcoal-stage` | Canvas trang, bề mặt chính, mọi nền tối — lớp nền cơ bản cho mọi màu sắc khác |
| Warm Cream | `#fffbeb` | `--color-warm-cream` | Văn bản chính, nav links, heading copy, viền hairline trên nền tối — không bao giờ là trắng tinh, luôn hơi ánh bơ |
| Card Edge | `#383835` | `--color-card-edge` | Viền card inset 1px, card ambient shadow, đường kẻ phân cách nhẹ trên bề mặt nâng cao |
| Mute Cream | `#b8b8b8` | `--color-mute-cream` | Văn bản thân cấp hai, mô tả nhẹ nhàng, helper copy mờ |
| Ash Gray | `#a6a6a6` | `--color-ash-gray` | Văn bản heading nhẹ, dấu phân cách danh sách, viền link không hoạt động |
| Bronze Veil | `#504f4a` | `--color-bronze-veil` | Viền badge, điểm nhấn hairline trên card, outline treatment mức thấp |
| Signal Teal | `#00b18c` | `--color-signal-teal` | Màu hành động teal cho button đã điền, trạng thái navigation được chọn, và các thời điểm chuyển đổi tập trung |
| Ember Coral | `#ff4a5f` | `--color-ember-coral` | Màu hành động đỏ cho button đã điền, trạng thái navigation được chọn, và các thời điểm chuyển đổi tập trung |

## Tokens — Typography

### TASA Orbiter — Một typeface duy nhất cho toàn bộ hệ thống. Weight 600 cho hero và section headlines, weight 500 cho subheading và body runs được nhấn mạnh, weight 400 cho body và metadata. Tracking -0.02em chặt chẽ trên kích thước display (54-56px) nén headline thành một khối chữ tự tin; tracking 0.02em lỏng hơn trên văn bản badge/eyebrow (13-14px) khiến label mang cảm giác như những dấu ấn in. · `--font-tasa-orbiter`
- **Thay thế:** Inter, Manrope, hoặc bất kỳ geometric humanist sans nào có weight tương ứng
- **Weights:** 400, 500, 600
- **Kích thước:** 13px, 14px, 16px, 18px, 19px, 20px, 24px, 25px, 40px, 54px, 56px
- **Line height:** 0.95–1.20
- **Letter spacing:** -0.02em trên display/headings; 0.02em trên small caps và labels
- **Vai trò:** Một typeface duy nhất cho toàn bộ hệ thống. Weight 600 cho hero và section headlines, weight 500 cho subheading và body runs được nhấn mạnh, weight 400 cho body và metadata. Tracking -0.02em chặt chẽ trên kích thước display (54-56px) nén headline thành một khối chữ tự tin; tracking 0.02em lỏng hơn trên văn bản badge/eyebrow (13-14px) khiến label mang cảm giác như những dấu ấn in.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.1 | 0.2px | `--text-caption` |
| body | 16px | 1.2 | — | `--text-body` |
| body-lg | 18px | 1.2 | — | `--text-body-lg` |
| subheading | 20px | 1.2 | — | `--text-subheading` |
| heading-sm | 24px | 1.1 | — | `--text-heading-sm` |
| heading-lg | 40px | 1 | — | `--text-heading-lg` |
| display | 56px | 0.95 | -1.12px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 88 | 88px | `--spacing-88` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 900px |
| cards | 12px |
| badges | 900px |
| images | 12px |
| buttons | 900px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgb(56, 56, 53) 0px 0px 0px 1px inset` | `--shadow-subtle` |
| subtle-2 | `rgba(255, 251, 235, 0.25) 0px 0px 0px 2px inset` | `--shadow-subtle-2` |

### Layout

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

## Components

### Pill Primary Button
**Vai trò:** Call-to-action mặc định — nền teal trên nền than chì

Pill button bo tròn hoàn toàn (900px). Nền #00b18c, chữ #fffbeb ở 14-16px weight 500. Padding 16px ngang x 9px dọc. Không có drop shadow; thay vào đó là vòng inset 2px tại rgba(255,251,235,0.25) để xác định cạnh, khiến button trông như được chiếu sáng thay vì nâng lên.

### Pill Ghost Button
**Vai trò:** Hành động navigation thứ cấp — chỉ có chữ bên trong viền pill

Radius 900px, nền trong suốt trên #151515, viền 1px trong #fffbeb ở độ mờ ~40%, chữ 14-16px weight 500 màu #fffbeb. Padding 16px ngang. Nằm cạnh CTA đã điền trong nav như một lựa chọn nhẹ nhàng hơn.

### Nav Capsule
**Vai trò:** Pill header chứa tất cả nav controls

Một container radius 900px duy nhất nổi ở góc trên bên phải trang. Nền #151515, viền nhẹ. Chứa nav links, dropdown caret, và pill 'Get started' đã điền, tất cả được phân cách bằng dấu phân cách mỏng #fffbeb.

### Inset-Border Card
**Vai trò:** Card feature/product/insight — pattern card duy nhất của hệ thống

Radius 12px, nền #151515 (giống canvas để trông như một phần cắt ra), viền inset 1px trong #383835. Padding 24px. Khu vực hình ảnh ở trên cùng sử dụng radius 12px và tràn ra đến mép card. Không có drop shadow — stroke inset là tín hiệu độ sâu duy nhất.

### Hero Radial Wash
**Vai trò:** Nền tạo không khí cho hero và các chuyển tiếp section

Một gradient radial mềm lớn căn giữa trang với màu #00b18c ở độ mờ 20-35%, mờ dần đến trong suốt trên 60-80% chiều cao viewport. Tạo hiệu ứng ánh sáng sân khấu trên nền canvas #151515.

### Display Headline Block
**Vai trò:** Tuyên bố typographic xuyên suốt section

TASA Orbiter 56px weight 600, màu #fffbeb, line-height 0.95, letter-spacing -1.12px (-0.02em). Các đoạn mixed-weight rất phổ biến: weight 600 cho tuyên bố chính, weight 400-500 trong #a6a6a6 hoặc #504f4a cho mệnh đề phụ, tạo ra hệ thống phân cấp tích hợp trong một headline duy nhất.

### Eyebrow Label
**Vai trò:** Pre-title của section — 'OUR SOLUTION', 'PRELUDE'

13-14px TASA Orbiter weight 500, letter-spacing 0.02em (dương, bất thường), uppercase, màu #00b18c hoặc #ff4a5f. Hoạt động như một thẻ màu đặt tên cho section trước khi headline xuất hiện.

### Pill Badge
**Vai trò:** Label trạng thái, thẻ, và định danh

Radius 900px, không nền, viền 1px trong #504f4a hoặc #383835, padding 6px 12px, chữ 13px trong #fffbeb hoặc #b8b8b8 weight 500. Được sử dụng cho các định danh như 'ATS', 'Soon - MIDS'.

### Community Node
**Vai trò:** Phần tử avatar/badge hình tròn trong bố cục orbital hero

Đĩa tròn hoàn toàn, đường kính ~80-100px, nền #151515 với viền 1px #383835. Chứa logo đối tác (ISRC, IPI, ISWC, v.v.) trong #b8b8b8 hoặc ảnh chân dung. Được sắp xếp theo quỹ đạo đồng tâm xung quanh logo trung tâm.

### Central Brand Mark
**Vai trò:** Tiêu điểm hero — logo Allfeat với headline

Glyph logo hình tam giác/chòm sao màu trắng #fffbeb ở 48-64px, căn giữa phía trên headline 40-56px trong #fffbeb weight 600. Theo sau là một pill button Signal Teal đã điền duy nhất ('Discover how').

### Gradient Accent Border
**Vai trò:** Hairline trang trí chạy dọc theo cạnh card hoặc section màu coral

Một gradient tuyến tính 1px từ #151515 qua #ff4a5f trở lại #151515, được áp dụng làm viền trên các card nổi bật được chọn. Tần suất thấp — chỉ được sử dụng để báo hiệu nội dung nổi bật hoặc phá vỡ hiện trạng.

## Do's and Don'ts

### Nên làm
- Sử dụng nền #00b18c làm CTA màu sắc duy nhất — mọi interactive filled button trong hệ thống đều là màu teal chính xác này
- Đặt tất cả buttons, badges, và nav capsules ở radius 900px — đây là điều bắt buộc, ngoại lệ duy nhất là cards/images ở 12px
- Kéo tất cả display type về letter-spacing -0.02em và line-height 0.95-1.00 để headline thu gọn thành các khối chữ tự tin
- Sử dụng viền inset 1px #383835 làm phương pháp xử lý độ sâu card duy nhất — không bao giờ thêm drop shadow lên trên nó
- Dành riêng #ff4a5f cho eyebrow labels, gradient accents, và các đoạn nhấn mạnh cảm xúc bên trong headline — không bao giờ dùng làm nền button hoặc màu body text
- Neo mọi hero và section chính trong một radial wash teal mềm mờ dần từ #00b18c ở độ mờ ~25% đến trong suốt
- Giữ body text trong TASA Orbiter weight 400 ở 16-18px màu #fffbeb hoặc #b8b8b8; không bao giờ xuống dưới 13px

### Không nên làm
- Đừng giới thiệu màu nhấn mới — teal và coral là hai giọng nói màu sắc duy nhất trong hệ thống
- Đừng sử dụng radius 8px hoặc 16px cho cards hoặc images; hệ thống chỉ dùng 12px cho container và 900px cho interactive elements
- Đừng sử dụng trắng tinh (#ffffff) cho văn bản — luôn là #fffbeb, sắc kem ấm là một phần của thương hiệu
- Đừng áp dụng drop shadows ở bất cứ đâu — toàn bộ hệ thống elevation chỉ dùng inset
- Đừng phá vỡ quy tắc một typeface bằng cách giới thiệu font thứ hai; TASA Orbiter ở 400/500/600 đáp ứng mọi nhu cầu
- Đừng đặt headline ở weight nhẹ hoặc mảnh — 600 là mức tối thiểu cho kích thước display, chỉ pha 400-500 làm mệnh đề phụ mờ
- Đừng điền nền button với #ff4a5f coral — coral mang tính không khí, không phải hành động; chỉ #00b18c báo hiệu hành động

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Charcoal Canvas | `#151515` | Nền trang, nền hero bên dưới radial wash teal |
| 1 | Card Surface | `#151515` | Bên trong card — cùng màu với canvas, chỉ được phân biệt bằng viền inset 1px trong #383835 |
| 2 | Teal Wash | `#00b18c` | Lớp phủ gradient radial hero tạo chiều sâu không khí, không phải bề mặt thực |

## Elevation

- **Inset-Border Card:** `rgb(56, 56, 53) 0px 0px 0px 1px inset`
- **Pill Primary Button:** `rgba(255, 251, 235, 0.25) 0px 0px 0px 2px inset`

## Imagery

Hình ảnh chủ yếu là đồ họa isometric 3D minh họa (một khối lập phương trong suốt trên lưới, các nút tròn dạng mạng với hoa văn khuôn mặt hình học) được render trong bảng màu giới hạn gồm teal, coral, kem và than chì. Nhiếp ảnh chỉ giới hạn ở các chân dung đối tác hình tròn nhỏ trong hero orbital cộng đồng, được trình bày dưới dạng ảnh cắt đen trắng mềm mại. Biểu tượng là các geometric marks một nét (ISRC, IPI, ISWC badges) trong #b8b8b8. Phong cách minh họa là flat-isometric với các cạnh cứng, không có gradient trên bản thân đối tượng — gradient duy nhất trong hệ thống là lớp phủ teal không khí phía sau chúng.

## Layout

Max-width 1200px căn giữa, full-bleed dark canvas. Hero là một radial wash teal toàn viewport với brand mark, headline, và CTA duy nhất căn giữa tuyệt đối; các community nodes quay quanh trung tâm này dưới dạng các vòng tròn vị trí cố định. Bên dưới fold, nội dung sắp xếp trong các lưới card 2 cột xen kẽ (2-up trên desktop, xếp chồng trên mobile) với khoảng cách section dọc 80px rộng rãi. Mỗi section mở đầu bằng một eyebrow + display headline căn giữa, sau đó chuyển xuống các hàng card 2-up hoặc 3-up. Navigation là một wordmark cố định trên cùng bên trái cộng với một pill capsule nổi trên cùng bên phải — không có thanh nav full-width. Footer nhỏ gọn, tối, và chỉ có văn bản. Nhịp điệu tổng thể là: một khoảnh khắc lớn căn giữa, sau đó là một phần dài yên tĩnh gồm các cặp card, rồi lại một khoảnh khắc lớn căn giữa.

## Agent Prompt Guide

## Quick Color Reference
- text (primary): #fffbeb
- text (muted): #b8b8b8
- background (canvas): #151515
- border (card hairline): #383835
- accent (eyebrow, gradient): #ff4a5f
- primary action: #00b18c (filled action)

## Example Component Prompts

1. **Hero Centered Stage** — Full-bleed canvas #151515 với radial wash teal mềm (#00b18c ở độ mờ ~25%, mờ dần đến trong suốt trên 70% chiều cao viewport). Căn giữa glyph logo hình tam giác trắng ở 56px. Bên dưới là headline trong TASA Orbiter 56px weight 600 #fffbeb, letter-spacing -1.12px, line-height 0.95. Một Signal Teal pill button (radius 900px, nền #00b18c, chữ #fffbeb 14px weight 500, padding 16px ngang, vòng inset 2px #fffbeb25).

2. Tạo Primary Action Button: nền #00b18c, chữ #151515, radius 9999px, padding pill nhỏ gọn. Sử dụng filled treatment này cho CTA chính.

3. **Mixed-Weight Display Headline** — Một khối TASA Orbiter 56px duy nhất, line-height 0.95, letter-spacing -1.12px. Mệnh đề chính ở weight 600 #fffbeb; mệnh đề phụ ở weight 400 #504f4a trong cùng một đoạn văn. Phía trên là eyebrow 13px trong #00b18c weight 500, letter-spacing 0.26px (0.02em), uppercase.

5. **Nav Capsule** — Nổi trên cùng bên phải, radius 900px, nền #151515, viền 1px #383835, padding 9px 16px. Bên trong: nav links ở 14px #fffbeb weight 500, được phân cách bằng dấu phân cách mỏng, một glyph caret nhỏ, và một pill button Signal Teal đã điền 'Get started' ở cuối.

## Gradient System

Hai gradient xác định mọi chiều sâu không khí trong hệ thống:

1. **Teal Stage Wash** — Radial, căn giữa, #00b18c ở độ mờ 20-35% mờ dần đến #151515 trong suốt. Được áp dụng phía sau hero headlines và các phần mở đầu section chính. Không bao giờ áp dụng cho container hoặc văn bản.

2. **Coral Edge Trace** — linear-gradient(90deg, #151515 0%, #ff4a5f 50%, #151515 100%), được sử dụng làm viền 1px trên các card nổi bật được chọn. Tần suất cố tình thấp — chỉ một hoặc hai card mỗi trang được xử lý này.

3. **Diagonal Ember** — linear-gradient(185deg, #fffbeb 0px, #ff4a5f 40%, #151515 77%), được sử dụng một cách tiết kiệm làm nền cảm xúc toàn section, luôn ở 30% dưới cùng của trang nơi nó hòa vào dark canvas.

## Typography Voice

TASA Orbiter một mình mang toàn bộ giọng nói thương hiệu. Động tác đặc trưng là **mixed-weight display headlines**: một dòng 56px duy nhất trong đó weight 600 #fffbeb mang tuyên bố và weight 400 #504f4a theo sau mệnh đề hỗ trợ. Điều này tạo ra hệ thống phân cấp mà không cần màu thứ hai, không cần kích thước thứ hai, và không cần font thứ hai. Tracking dương 0.02em trên các label eyebrow 13-14px là tracking lỏng duy nhất của hệ thống — nó khiến pre-title của section đọc như những dấu ấn đóng dấu thay vì chữ chảy, vang vọng thẩm mỹ badge khắc của các định danh ngành công nghiệp âm nhạc (ISRC, IPI, ISWC) mà nền tảng quản lý.

## Similar Brands

- **Audius** — Cùng bảng màu dark-mode hạ tầng âm nhạc với một điểm nhấn sống động duy nhất (Audius dùng xanh lá, Allfeat dùng teal) và CTA hình pill
- **Sound.xyz** — Dark canvas, hành động chính teal/xanh lá sống động, hệ thống card tối giản với viền hairline, một sans-serif xuyên suốt
- **Zora** — Nền tảng crypto-creator dark-mode sử dụng một điểm nhấn màu sắc duy nhất trên nền gần đen, với pill buttons và cards radius 12px
- **Lens Protocol** — Cùng ngôn ngữ dark-canvas-cộng-với-teal-sống-động, pill navigation capsules, và inset-border card treatment
- **Royal** — Nền tảng crypto ngành công nghiệp âm nhạc với bảng màu ấm-trên-tối, một màu nhấn duy nhất, và display headlines pha trộn weight trong một khối

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-charcoal-stage: #151515;
  --color-warm-cream: #fffbeb;
  --color-card-edge: #383835;
  --color-mute-cream: #b8b8b8;
  --color-ash-gray: #a6a6a6;
  --color-bronze-veil: #504f4a;
  --color-signal-teal: #00b18c;
  --color-ember-coral: #ff4a5f;

  /* Typography — Font Families */
  --font-tasa-orbiter: 'TASA Orbiter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.1;
  --tracking-caption: 0.2px;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-body-lg: 18px;
  --leading-body-lg: 1.2;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.1;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1;
  --text-display: 56px;
  --leading-display: 0.95;
  --tracking-display: -1.12px;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-88: 88px;

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

  /* Border Radius */
  --radius-xl: 12px;
  --radius-full: 900px;

  /* Named Radii */
  --radius-nav: 900px;
  --radius-cards: 12px;
  --radius-badges: 900px;
  --radius-images: 12px;
  --radius-buttons: 900px;

  /* Shadows */
  --shadow-subtle: rgb(56, 56, 53) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(255, 251, 235, 0.25) 0px 0px 0px 2px inset;

  /* Surfaces */
  --surface-charcoal-canvas: #151515;
  --surface-card-surface: #151515;
  --surface-teal-wash: #00b18c;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-charcoal-stage: #151515;
  --color-warm-cream: #fffbeb;
  --color-card-edge: #383835;
  --color-mute-cream: #b8b8b8;
  --color-ash-gray: #a6a6a6;
  --color-bronze-veil: #504f4a;
  --color-signal-teal: #00b18c;
  --color-ember-coral: #ff4a5f;

  /* Typography */
  --font-tasa-orbiter: 'TASA Orbiter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.1;
  --tracking-caption: 0.2px;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-body-lg: 18px;
  --leading-body-lg: 1.2;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.1;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1;
  --text-display: 56px;
  --leading-display: 0.95;
  --tracking-display: -1.12px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-88: 88px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-full: 900px;

  /* Shadows */
  --shadow-subtle: rgb(56, 56, 53) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(255, 251, 235, 0.25) 0px 0px 0px 2px inset;
}
```