# DICE

> DICE — Style Reference

## Prompt Content

```
# DICE — Style Reference
> Monochrome gig flyer — mực đen trên giấy trắng, headline gào thét, mọi thứ còn lại im lặng tuyệt đối.

**Theme:** light

DICE vận hành trên một hệ thống thị giác đơn sắc, tương phản cao, mang phong cách poster concert bị ép vào app store. Đen thuần và trắng thuần đảm nhiệm toàn bộ giao diện; màu sắc chỉ tồn tại trong artwork của event poster và một màn hình xác nhận màu xanh neon. Một custom condensed display face (Foggy) gào thét ở kích thước 100px+ trong hero, trong khi Favorit xử lý mọi bề mặt UI với tracking 0.06em hơi rộng, khiến ngay cả body copy cũng mang chất editorial. Các button là pill với border-radius 40px, ảnh nằm trong frame bo tròn 8px mềm mại, và các section xen kẽ giữa nền trắng canvas và dải đen full-bleed để tạo nhịp điệu như tạp chí zine. Thái độ tổng thể là punk, tự tin, và typographically ồn ào — kiềm chế ở mọi nơi ngoại trừ headline.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Pitch Black | `#000000` | `--color-pitch-black` | Text chính, filled pill button, nền section tối full-bleed, icon stroke, hairline border — xương sống cấu trúc của mọi trang |
| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, text trên section tối, text button trên filled black button, nền search field |
| Ash Gray | `#eeeeee` | `--color-ash-gray` | Nền ảnh mềm, tint bề mặt phụ, nền card/poster nhạt phía sau event artwork |
| Concrete | `#d9d9d9` | `--color-concrete` | Hairline divider, border muted, input field outline |
| Charcoal | `#333333` | `--color-charcoal` | Secondary button fill, bề mặt tối nâng cao, text muted-on-dark trong component lồng nhau |
| Slate | `#595959` | `--color-slate` | Body text muted, nhãn navigation phụ, metadata hỗ trợ |
| Stone | `#808080` | `--color-stone` | Body text cấp ba, trạng thái disabled, metadata ưu tiên thấp |

## Tokens — Typography

### Favorit — Toàn bộ UI text — navigation, body copy, button, label, card metadata. Weight 400 là mặc định; 700 dùng cho section heading như 'Trending in Barcelona'; 350 dành cho helper text nhẹ nhàng. Tracking 0.06em mang lại cảm giác hơi rộng, mang chất editorial — body copy không bao giờ bị chật chội. Stylistic sets ss02/ss03/ss05/ss06/ss08 luôn được bật và định hình cá tính của typeface. · `--font-favorit`
- **Thay thế:** Inter, Söhne, hoặc Neue Haas Grotesk
- **Weights:** 350, 400, 700
- **Kích thước:** 12, 14, 16, 18, 24, 28px
- **Line height:** 1.15–1.50 (phụ thuộc kích thước)
- **Letter spacing:** 0.06em (áp dụng cho mọi kích thước — ~0.72px ở 12px, ~1.68px ở 28px)
- **OpenType features:** `"ss02" on, "ss03" on, "ss05" on, "ss06" on, "ss08" on`
- **Vai trò:** Toàn bộ UI text — navigation, body copy, button, label, card metadata. Weight 400 là mặc định; 700 dùng cho section heading như 'Trending in Barcelona'; 350 dành cho helper text nhẹ nhàng. Tracking 0.06em mang lại cảm giác hơi rộng, mang chất editorial — body copy không bao giờ bị chật chội. Stylistic sets ss02/ss03/ss05/ss06/ss08 luôn được bật và định hình cá tính của typeface.

### Foggy — Chỉ dùng cho hero display headline. Tỷ lệ condensed cực đoan, line-height 0.83 siêu khít, và kích thước 106px cho phép 3–4 từ xếp chồng lấp đầy nửa màn hình. Đây là signature element — nó biến product copy thông thường ('WELCOME TO THE ALTERNATIVE') thành một gig poster. · `--font-foggy`
- **Thay thế:** Druk Condensed, Tungsten Bold Condensed, hoặc Antonio Bold
- **Weights:** 400
- **Kích thước:** 106px
- **Line height:** 0.83
- **Letter spacing:** normal
- **OpenType features:** `"ss02" on, "ss03" on, "ss05" on, "ss06" on, "ss08" on`
- **Vai trò:** Chỉ dùng cho hero display headline. Tỷ lệ condensed cực đoan, line-height 0.83 siêu khít, và kích thước 106px cho phép 3–4 từ xếp chồng lấp đầy nửa màn hình. Đây là signature element — nó biến product copy thông thường ('WELCOME TO THE ALTERNATIVE') thành một gig poster.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|---------|
| caption | 12px | 1.21 | 0.72px | `--text-caption` |
| body-sm | 14px | 1.33 | 0.84px | `--text-body-sm` |
| body | 16px | 1.4 | 0.96px | `--text-body` |
| subheading | 18px | 1.4 | 1.08px | `--text-subheading` |
| heading-sm | 24px | 1.25 | 1.44px | `--text-heading-sm` |
| heading | 28px | 1.22 | 1.68px | `--text-heading` |
| display | 106px | 0.83 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

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

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 100px |
| cards | 8px |
| small | 4px |
| images | 8px |
| buttons | 40px |
| navElements | 20px |

### Layout

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

## Components

### Filled Pill Button
**Vai trò:** Primary action — 'GET THE APP', 'VIEW TICKET'

Border-radius 40px, fill Pitch Black (#000000), text Paper White (#ffffff), Favorit weight 700, font-size 12px, padding ngang 22px / padding dọc 12px, all-caps, tracking 0.06em. Hình dạng pill đầy đủ là bắt buộc — không có biến thể vuông hoặc bo nhẹ.

### Outlined Pill Button
**Vai trò:** Secondary navigation action — 'BROWSE EVENTS'

Border-radius 40px, fill trong suốt, border 1px Pitch Black (#000000), text Pitch Black, Favorit weight 700, 12px, padding 22px/12px. Chỉ xuất hiện trên nền trắng. Đảo ngược thành border trắng + text trắng trên section đen.

### Search Field
**Vai trò:** Tìm kiếm event/venue/thành phố toàn cục trong nav

Hình chữ nhật bo tròn (radius ~20px), fill Paper White, border 1px phù hợp với bề mặt xung quanh, icon search bên trái màu Pitch Black. Placeholder 'Search by event, venue or city' màu Stone (#808080), Favorit 14px. Nằm inline với primary nav.

### Event Card
**Vai trò:** Tile event đang thịnh hành/được đề xuất

Card dọc, radius 8px trên poster image, không border, không shadow. Poster image lấp đầy card; bên dưới là tên event (Favorit 16px weight 700), ngày (Favorit 14px Slate #595959), venue (Favorit 14px weight 700), và giá (Favorit 14px). Không có padding bên trong card — type nằm sát cạnh poster với margin ~8px.

### Hero Section
**Vai trò:** Tuyên ngôn thương hiệu above-the-fold

Hai cột: bên trái chứa Foggy 106px/0.83 hero headline (3–4 dòng xếp chồng), sub-paragraph Favorit 18px màu Charcoal, và một filled pill CTA. Bên phải chứa phone mockup với màn hình xác nhận (fill xanh neon — khoảnh khắc màu duy nhất). Nền trắng, max-width 1200px căn giữa, padding dọc ~80px.

### Phone Mockup Frame
**Vai trò:** Container xem trước sản phẩm/app

Hình chữ nhật bo tròn Pitch Black (#000000) (radius 40px) đóng vai trò khung điện thoại cách điệu. Nội dung màn hình nằm bên trong với một notch nhỏ. Dùng để showcase UI app trong hero/feature section.

### Dark Feature Band
**Vai trò:** Section xen kẽ full-bleed

Nền Pitch Black (#000000) full-width, padding dọc 80px+. Minh họa mascot line-art trắng (chunky, cartoon, nét đơn) nổi phía trên ba cột text trắng căn giữa (Favorit 16px, max-width ~280px mỗi cột). Tiêu đề section trắng căn giữa Favorit 28px weight 700 ở phía trên.

### Section Heading Block
**Vai trò:** Mở đầu section như "Trending in Barcelona"

Favorit 16px weight 700 màu Pitch Black cho tiêu đề, tiếp theo là mô tả 1–2 dòng Favorit 16px weight 400 màu Charcoal (#333333). Căn trái trong container max-width, với outlined pill 'BROWSE EVENTS' neo bên phải.

### Horizontal Event Carousel Row
**Vai trò:** Danh sách event đang thịnh hành/được đề xuất dạng cuộn ngang

Hàng Event Card trên nền trắng, gap 8–16px giữa các card, overflow scroll ngang. Card tràn ra mép trang với internal max-width padding để giữ hàng liên tục về mặt thị giác.

### What Else List
**Vai trò:** Danh sách tính năng phụ với icon

Danh sách căn trái gồm 3 mục; mỗi mục là một icon outlined nhỏ (~24px) theo sau là text Favorit 18px weight 400. Một mục active (text + icon Pitch Black), hai mục còn lại mờ (Stone #808080) để chỉ tính năng tương lai/phụ.

### Ticket Detail Card
**Vai trò:** Xem trước ticket trong app bên trong phone mockup

Màn hình điện thoại với nền xanh neon (#7ffeb1-ish), icon event minh họa nhỏ, thông tin event Favorit 18px weight 700, khối artist/title, và một filled black pill 'VIEW TICKET' căn giữa. Màu xanh này là màu duy nhất trong toàn bộ hệ thống và chỉ xuất hiện ở trạng thái xác nhận/thành công.

### Navigation Bar
**Vai trò:** Navigation chính của trang

Hàng trên cùng: logo DICE mascot (trái), Search Field (giữa trái), nav link (Browse events, Get help, Work with us, Log in / Sign up) bằng Favorit 14px, sau đó filled black pill 'GET THE APP' ở ngoài cùng bên phải. Border dưới 1px màu Concrete (#d9d9d9). Padding dọc 24px.

### Mascot Illustrations
**Vai trò:** Artwork nhân vật thương hiệu trên section tối

DICE mascot vẽ tay tùy chỉnh dạng line-art nét đơn màu trắng, các biến thể cho thấy nhân vật cầm các vật thể khác nhau (đồ uống, pháo sáng, v.v.). Kích thước ~200px vuông, không fill, stroke weight nhất quán, nổi phía trên mỗi cột tính năng.

## Do's and Don'ts

### Nên làm
- Dùng border-radius 40px cho mọi button — hình dạng pill là hệ thống, không phải gợi ý
- Đặt letter-spacing 0.06em trên mọi text Favorit và luôn bật ss02/ss03/ss05/ss06/ss08
- Xếp chồng hero headline bằng Foggy 106px/0.83 line-height để lấp đầy không gian dọc — không bao giờ để display face nằm trên một dòng duy nhất
- Xen kẽ section đen full-bleed với section trắng để tạo nhịp dọc kiểu zine; tối thiểu 80px padding dọc bên trong mỗi section
- Khóa bảng màu ở đen, trắng và ba tông xám (#eeeeee, #d9d9d9, #333333) — không có điểm nhấn màu trong UI chrome
- Bo tròn event poster image và card media ở 8px — mềm hơn button, khác biệt với hệ thống pill
- Dùng 24px làm base section padding và 8px cho inline element gap

### Không nên làm
- Không đưa bất kỳ màu nào vào UI chrome — nếu cần màu trạng thái, chỉ giới hạn trong màn hình xác nhận hoặc artwork minh họa, không bao giờ dùng cho button, border hoặc text token
- Không đặt button thành góc vuông hoặc bo nhẹ — 40px là bắt buộc
- Không dùng Foggy cho body copy hoặc bất kỳ thứ gì dưới 80px — nó chỉ hoạt động ở display scale
- Không dùng weight 500 hoặc 600 với Favorit — hệ thống chỉ dùng 350, 400 và 700
- Không thêm drop shadow vào card hoặc button — thiết kế dùng bề mặt phẳng và tương phản màu đặc, không dùng elevation
- Không dùng letter-spacing khác 0.06em trên Favorit — tracking rộng là tín hiệu thương hiệu, không phải tai nạn
- Không dùng gradient trang trí — hệ thống hoàn toàn flat; xử lý màu duy nhất là fill đặc và màn hình xác nhận xanh duy nhất

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Paper White | `#ffffff` | Canvas trang cơ bản — mọi section trắng, bề mặt card, nền navigation |
| 1 | Ash Gray | `#eeeeee` | Fill mềm phía sau poster image và tint bề mặt nhẹ |
| 2 | Charcoal | `#333333` | Secondary button fill và bề mặt tối nâng cao |
| 3 | Pitch Black | `#000000` | Dải section tối full-bleed và primary filled button |

## Elevation

- **Event Card:** `none — phẳng, không shadow, phân cách bằng khoảng trắng trên nền trắng`
- **Filled Pill Button:** `none — fill đen phẳng trên nền trắng`
- **Phone Mockup:** `none — khung đen trên nền trắng, không có cast shadow`

## Imagery

Event poster artwork là nội dung hình ảnh chính — mỗi event card có một poster thiết kế riêng (concert flyer, album cover, festival graphic) với nhiều màu sắc và phong cách khác nhau. Ngoài poster, hình minh họa nhất quán duy nhất là DICE mascot: một nhân vật hoạt hình vẽ tay dạng line-art nét đơn màu trắng, xuất hiện trên section tối và cầm các đạo cụ (đồ uống, pháo sáng, điện thoại). Hình ảnh sản phẩm dùng phone mockup frame (hình chữ nhật đen bo tròn) để xem trước app. Không có photography, không có 3D trừu tượng, không có gradient trang trí.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Text: #000000
- Background: #ffffff
- Border: #d9d9d9
- Muted text: #595959
- Dark band background: #000000
- primary action: #000000 (filled action)

**Ví dụ Component Prompt**

1. Xây dựng một filled black pill button: radius 40px, fill #000000, text #ffffff, Favorit 12px weight 700, tracking 0.06em, padding 12px/22px, label all-caps như 'GET THE APP'.

2. Tạo một Primary Action Button: background #000000, text #ffffff, radius 9999px, padding pill gọn. Dùng filled treatment này cho CTA chính.

3. Xây dựng một dark feature band: background #000000 full-bleed, padding dọc 80px, heading trắng Favorit 28px weight 700 căn giữa 'Weirdly easy ticketing', sau đó lưới 3 cột bên dưới với mascot icon line-art trắng (~200px), caption trắng Favorit 16px dưới mỗi icon, cách đều nhau.

4. Xây dựng một event card row: flex ngang với gap 16px, mỗi card có poster image radius 8px (aspect 1:1), tiếp theo là tên event Favorit 16px weight 700 màu #000000, sau đó dòng ngày Favorit 14px weight 400 màu #595959, rồi venue (700) và giá màu #000000.

5. Xây dựng một section header: tiêu đề 'Trending in Barcelona' Favorit 16px weight 700 căn trái màu #000000, mô tả 1–2 dòng Favorit 16px weight 400 màu #333333 bên dưới, và một outlined pill button 'BROWSE EVENTS' radius 40px neo bên phải.

## Typography Signature

Hệ thống sử dụng hai custom face với stylistic sets chồng chéo (ss02, ss03, ss05, ss06, ss08). Favorit xử lý mọi thứ dưới hero với tracking 0.06em rộng bất thường — độ rộng nhẹ này là thứ khiến UI mang chất editorial thay vì generic SaaS. Foggy chỉ xuất hiện TRONG hero ở kích thước 106px với line-height 0.83; đây là lựa chọn thiết kế ồn ào nhất trong hệ thống và không được dùng ở nơi khác.

## Similar Brands

- **Bandsintown** — Cùng trọng tâm khám phá concert với event card driven by poster, dù Bandsintown thêm nhiều màu sắc hơn vào UI chrome
- **Resident Advisor (RA)** — Nền tảng event thiên về editorial với display type đậm và layout tương phản cao, dù RA dùng điểm nhấn đỏ và hệ thống type khác
- **Songkick** — Đặt vé nhạc sống với card grid và ticket preview pattern tương tự, dù Songkick nghiêng về ấm áp hơn với điểm nhấn tím/xanh dương
- **Eventbrite** — Quy mô đặt vé và event card pattern, nhưng thiết kế của Eventbrite generic SaaS hơn nhiều so với sự tự tin typographic kiểu zine của DICE
- **Pioneer Works / trang web tổ chức văn hóa** — Cùng thẩm mỹ punk-zine với display type condensed khổng lồ, dải đen full-bleed và bảng màu đơn sắc nghiêm ngặt

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pitch-black: #000000;
  --color-paper-white: #ffffff;
  --color-ash-gray: #eeeeee;
  --color-concrete: #d9d9d9;
  --color-charcoal: #333333;
  --color-slate: #595959;
  --color-stone: #808080;

  /* Typography — Font Families */
  --font-favorit: 'Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-foggy: 'Foggy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.21;
  --tracking-caption: 0.72px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.33;
  --tracking-body-sm: 0.84px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.96px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: 1.08px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: 1.44px;
  --text-heading: 28px;
  --leading-heading: 1.22;
  --tracking-heading: 1.68px;
  --text-display: 106px;
  --leading-display: 0.83;

  /* Typography — Weights */
  --font-weight-w350: 350;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 40px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-tags: 100px;
  --radius-cards: 8px;
  --radius-small: 4px;
  --radius-images: 8px;
  --radius-buttons: 40px;
  --radius-navelements: 20px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-ash-gray: #eeeeee;
  --surface-charcoal: #333333;
  --surface-pitch-black: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pitch-black: #000000;
  --color-paper-white: #ffffff;
  --color-ash-gray: #eeeeee;
  --color-concrete: #d9d9d9;
  --color-charcoal: #333333;
  --color-slate: #595959;
  --color-stone: #808080;

  /* Typography */
  --font-favorit: 'Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-foggy: 'Foggy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.21;
  --tracking-caption: 0.72px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.33;
  --tracking-body-sm: 0.84px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.96px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: 1.08px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: 1.44px;
  --text-heading: 28px;
  --leading-heading: 1.22;
  --tracking-heading: 1.68px;
  --text-display: 106px;
  --leading-display: 0.83;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 40px;
  --radius-full: 100px;
}
```