dice___style_reference:
  info: "> 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"

  info: "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:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| 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 |"
    info: "| 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 |"
    info: "| 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 |"
    info: "| Concrete | `#d9d9d9` | `--color-concrete` | Hairline divider, border muted, input field outline |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Secondary button fill, bề mặt tối nâng cao, text muted-on-dark trong component lồng nhau |"
    info: "| Slate | `#595959` | `--color-slate` | Body text muted, nhãn navigation phụ, metadata hỗ trợ |"
    info: "| 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:

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

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 100px |"
      info: "| cards | 8px |"
      info: "| small | 4px |"
      info: "| images | 8px |"
      info: "| buttons | 40px |"
      info: "| 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'"

      info: "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'"

      info: "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"

      info: "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"

      info: "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"

      info: "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"

      info: "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\""

      info: "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"

      info: "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"

      info: "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"

      info: "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"

      info: "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:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Canvas trang cơ bản — mọi section trắng, bề mặt card, nền navigation |"
    info: "| 1 | Ash Gray | `#eeeeee` | Fill mềm phía sau poster image và tint bề mặt nhẹ |"
    info: "| 2 | Charcoal | `#333333` | Secondary button fill và bề mặt tối nâng cao |"
    info: "| 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:

    info: "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:

    - "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'."

    - "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."

    - "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."

    - "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."

    - "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:

    info: "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;
        }