discord___style_reference:
  info: "> Thế giới game ẩn sau một chat bubble — mỗi section là một không gian khép kín với ánh sáng và dàn nhân vật riêng."

  theme: "dark"

  info: "Màu xanh vũ trụ sâu thẳm tràn ngập mọi section như bầu trời sao lúc 2 giờ sáng — không phải lựa chọn background mà là một môi trường tổng thể. Hero lao vào gradient chàm-đen đậm đặc với nhân vật 3D, màn hình sản phẩm và linh vật nổi, khiến UI trông như thế giới game chứ không phải trang marketing. Blurple (#5865F2) — màu chủ đạo của Discord — chỉ xuất hiện trên primary CTA, tạo điểm nhấn có kiểm soát trong bầu không khí xanh-đen. Typography đảm nhận vai trò chính: ABC Ginto Nord weight 800 với tracking -0.01em dồn headline thành các khối in hoa dày đặc, cảm giác như kim loại dập nổi, trong khi body copy ở 16px/1.5 vẫn giữ giọng điệu trò chuyện. Hiệu ứng tổng thể là một không gian gaming-native, nơi mỗi section là một sân khấu nhập vai riêng, không phải cột nội dung."

  tokens___colors:

    info: "| Name | Value | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Blurple | `#5865f2` | `--color-blurple` | Nút CTA chính, brand icon, trạng thái active — điểm neo màu sắc duy nhất trong không gian xanh-đen gần như đơn sắc, tạo nhận diện tức thì khi là phần tử bão hòa duy nhất trong layout |"
    info: "| Dark Blurple | `#3442d9` | `--color-dark-blurple` | Trạng thái hover cho nút chính, trạng thái pressed |"
    info: "| Hover Blurple | `#8891f2` | `--color-hover-blurple` | Màu tint hover cho nút, tương tác blurple nâng cao |"
    info: "| Spring Green | `#57f287` | `--color-spring-green` | Chỉ báo trạng thái online, trạng thái thành công |"
    info: "| Fuchsia | `#eb459` | `--color-fuchsia` | Điểm nhấn gradient Nitro, highlight sự kiện đặc biệt |"
    info: "| Vivid Cerulean | `#00b0f4` | `--color-vivid-cerulean` | Chỉ báo kênh voice/video, trạng thái thông tin |"
    info: "| Ember Orange | `#fda220` | `--color-ember-orange` | Chỉ báo nhiệm vụ, highlight thành tích |"
    info: "| Ekko Red | `#de2761` | `--color-ekko-red` | Hành động hủy, cảnh báo nghiêm trọng |"
    info: "| Void | `#000000` | `--color-void` | Text trên nền sáng, icon fill, overlay background |"
    info: "| Snow | `#ffffff` | `--color-snow` | Text chính trên nền tối, text nút, nav links, card background |"
    info: "| Not Quite Black | `#23272a` | `--color-not-quite-black` | Text nút phụ và border, màu bề mặt UI tối |"
    info: "| Dark Charcoal | `#2c2f33` | `--color-dark-charcoal` | Bề mặt chrome UI app, panel tối nâng cao |"
    info: "| Graphite | `#333333` | `--color-graphite` | Text cấp ba trên nền sáng, image overlay |"
    info: "| Fog | `#babcd9` | `--color-fog` | Heading và body text nhẹ trên nền tối — màu trung tính pha tím giữ đúng thương hiệu đồng thời giảm độ tương phản |"
    info: "| Greyple | `#99aab5` | `--color-greyple` | Trạng thái disabled, placeholder text, metadata mờ |"
    info: "| Dim Grey | `#50555f` | `--color-dim-grey` | Input border, divider, icon fill thứ cấp |"
    info: "| Off White | `#f6f6f6` | `--color-off-white` | Background section sáng, bề mặt card trong ngữ cảnh sáng |"

  tokens___typography:

    abc_ginto_nord_discord___tất_cả_display_headline_và_section_heading__weight_800_là_signature_move___kết_hợp_với_styling_all_caps_và_tracking__0_01em__headline_nén_thành_các_khối_hình_chữ_nhật_dày_đặc__không_font_hay_weight_nào_khác_tạo_được_hiệu_ứng_dập_nổi_này__dùng_ở_56_61px_cho_hero__48px_cho_section_lead__36px_cho_subsection_____font_abc_ginto_nord_discord:
      - "**Thay thế:** Nunito Black, Poppins 800, hoặc Rounded Mplus 1c 800"
      - "**Weights:** 700, 800"
      - "**Kích thước:** 36px, 48px, 56px, 61px"
      - "**Line height:** 0.86–1.20"
      - "**Letter spacing:** -0.01em (xấp xỉ -0.56px ở 56px, -0.61px ở 61px)"
      - "**Vai trò:** Tất cả display headline và section heading. Weight 800 là signature move — kết hợp với styling all-caps và tracking -0.01em, headline nén thành các khối hình chữ nhật dày đặc. Không font hay weight nào khác tạo được hiệu ứng dập nổi này. Dùng ở 56–61px cho hero, 48px cho section lead, 36px cho subsection."

    abc_ginto_discord___navigation_label__body_copy__button_text__ui_label__letter_spacing_ở_0_013_0_016em_thêm_độ_thoáng_tinh_tế_ở_kích_thước_nhỏ___bù_lại_cảm_giác_condensed_của_font_headline_nord_bên_trên__weight_500_cho_nút_và_nav_emphasis__400_cho_body_và_metadata_____font_abc_ginto_discord:
      - "**Thay thế:** Inter, DM Sans, hoặc Nunito 400/500"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 16px, 20px"
      - "**Line height:** 1.20–1.50"
      - "**Letter spacing:** 0.013–0.016em"
      - "**Vai trò:** Navigation label, body copy, button text, UI label. Letter-spacing ở 0.013–0.016em thêm độ thoáng tinh tế ở kích thước nhỏ — bù lại cảm giác condensed của font headline Nord bên trên. Weight 500 cho nút và nav emphasis, 400 cho body và metadata."

    gg_sans___font_ui_độc_quyền_của_discord_dùng_trong_mock_up_sản_phẩm_và_ảnh_chụp_màn_hình_app_nhúng_trong_các_section_marketing__chỉ_xuất_hiện_ở_16px_1_5___phản_chiếu_typeface_trong_sản_phẩm_để_giữ_ảnh_chụp_chân_thực_____font_gg_sans:
      - "**Thay thế:** Inter 400"
      - "**Weights:** 400"
      - "**Kích thước:** 16px"
      - "**Line height:** 1.50"
      - "**Vai trò:** Font UI độc quyền của Discord dùng trong mock-up sản phẩm và ảnh chụp màn hình app nhúng trong các section marketing. Chỉ xuất hiện ở 16px/1.5 — phản chiếu typeface trong sản phẩm để giữ ảnh chụp chân thực."

    abc_ginto_normal___body_text_dạng_đoạn_văn_dài_trong_feature_section__danh_sách_link_trong_footer__về_mặt_chức_năng__metrics_giống_hệt_abc_ginto_discord_nhưng_là_biến_thể_quang_học_riêng_cho_đọc_văn_bản_dài_____font_abc_ginto_normal:
      - "**Thay thế:** Inter 400"
      - "**Weights:** 400"
      - "**Kích thước:** 16px"
      - "**Line height:** 1.50"
      - "**Vai trò:** Body text dạng đoạn văn dài trong feature section, danh sách link trong footer. Về mặt chức năng, metrics giống hệt ABC Ginto Discord nhưng là biến thể quang học riêng cho đọc văn bản dài."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 20px | 1.38 | — | `--text-body-lg` |"
      info: "| heading-sm | 36px | 1.2 | -0.36px | `--text-heading-sm` |"
      info: "| heading | 48px | 0.93 | -0.48px | `--text-heading` |"
      info: "| heading-lg | 56px | 0.86 | -0.56px | `--text-heading-lg` |"
      info: "| display | 61px | 0.86 | -0.61px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 28 | 28px | `--spacing-28` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 136 | 136px | `--spacing-136` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 16px |"
      info: "| pills | 104px |"
      info: "| buttons | 12px |"
      info: "| buttonsLarge | 16px |"
      info: "| featurePanels | 24px |"

    layout:

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

  components:

    primary_cta_button_blurple_filled:
      vai_trò: "Call-to-action chính, ví dụ 'Open Discord in your browser'"

      info: "backgroundColor #5865F2, color #FFFFFF, borderRadius 12px, padding 19.5px 24px. Không có border — blurple fill tự thân đã đủ. Hover chuyển sang #3442D9. Padding dọc 19.5px khiến đây là biến thể nút cao nhất trên trang — chiếm ưu thế vật lý trong cặp CTA."

    secondary_cta_button_white_filled:
      vai_trò: "Lời nhắc tải xuống, ghép cặp với primary CTA"

      info: "backgroundColor #FFFFFF, color #23272A, borderRadius 12px, padding 15px 24px. Một viên thuốc trắng sạch trên nền tối — tương phản cao mà không cần blurple. Border là #23272A dày 1px. Padding mềm hơn (so với primary) khiến nó trông như lựa chọn phụ."

    ghost_navigation_button_transparent_outlined:
      vai_trò: "Trigger dropdown nav và hành động navigation phụ"

      info: "backgroundColor transparent, color #FFFFFF, border 1px solid #FFFFFF, borderRadius 12px, padding 10px 16px. Dùng cho mục menu nav có mũi tên dropdown. Outline trắng toàn bộ trên nền tối giữ cho nó hiển thị mà không cạnh tranh với blurple."

    log_in_button_white_outlined:
      vai_trò: "Hành động xác thực header góc trên bên phải"

      info: "backgroundColor #FFFFFF, color #000000, border 1px solid #000000, borderRadius 16px, padding 10px 16px. Dùng radius 16px lớn hơn các nút khác — khớp với style pill-like của header. Xuất hiện trên dải header sáng/mờ, giúp bề mặt trắng đầy đủ dễ đọc trên nền nav."

    feature_showcase_card:
      vai_trò: "Container nội dung section full-bleed chứa ảnh chụp sản phẩm và copy tính năng"

      info: "Container tròn lớn với radius 24px+, đặt trên nền xanh đậm của trang. Mỗi card dùng gradient hoặc background solid riêng (tím-đỏ tươi cho 'Group Chats', xanh lá cho 'Watch Together') — bản sắc section được thể hiện qua màu nền card, không phải background trang. Nội dung chia 50/50: ảnh chụp sản phẩm bên trái, text bên phải. Card trải rộng toàn bộ chiều rộng viewport trên mobile, tối đa ~1100px trên desktop."

    3d_character_float:
      vai_trò: "Linh vật trang trí và minh họa nhân vật rải rác ở rìa section"

      info: "Không phải UI tương tác — đây là asset PNG/WebP 3D được đặt tuyệt đối ở ranh giới section, chồng lên cạnh card. Kích thước từ ~100px đến ~300px. Chúng xuất hiện và biến mất không thể đoán trước, tạo bầu không khí 'thế giới'. Không background, không border, không radius — compositing cạnh thô vào trang."

    product_screen_mock_up:
      vai_trò: "Ảnh chụp UI Discord nhúng trong feature card"

      info: "Ảnh chụp màn hình app Discord thật được render trong feature card với radius 12-16px. Chúng nổi lệch tâm nhẹ với drop shadow tinh tế. Khung mobile hiển thị dưới dạng outline điện thoại. Khung desktop hiển thị dưới dạng viền màn hình. Mock-up dùng UI tối thật của Discord (bề mặt #2C2F33, sidebar #23272A), neo các tuyên bố marketing vào sản phẩm thực tế."

    navigation_bar:
      vai_trò: "Điều hướng toàn cục phía trên"

      info: "Header cố định trải rộng toàn bộ chiều rộng viewport. Background bán trong suốt trên ảnh hero — trông gần trắng/mờ. Chứa wordmark Discord bên trái, link nav text ở giữa (16px ABC Ginto, #FFFFFF hoặc #000000 tùy trạng thái scroll), và nút 'Log In' ở xa bên phải. Trigger dropdown dùng biến thể nút ghost outlined. Không có shadow — nổi như một dải phẳng."

    hero_section:
      vai_trò: "Khối landing full-viewport"

      info: "Background chàm đậm full-bleed (#0E0F2D đến gần đen, gradient ngụ ý). Headline bằng ABC Ginto Nord 800 ở 56-61px, color #FFFFFF, all-caps, line-height 0.86, dồn vào 50% bên trái viewport. Body copy ở 16px ABC Ginto 400, color #FFFFFF, max-width ~380px. Cặp CTA (nút trắng + blurple) nằm dưới body. 50% bên phải chứa composite mock-up sản phẩm với nhân vật 3D chồng lên cả hai nửa."

    footer_navigation:
      vai_trò: "Nhóm link footer toàn trang"

      info: "Background tối (#23272A hoặc #000000). Lưới link nhiều cột với heading nhóm bằng 16px ABC Ginto 500 + letter-spacing dương. Text link ở 16px/1.5 weight 400, color #BABCD9 (Fog) trên nền tối. Wordmark Discord và icon mạng xã hội ở góc trên bên trái. Không có divider — các cột chỉ được phân cách bằng gap."

  do_s_and_don_ts:

    do:
      - "Dùng ABC Ginto Nord 800 all-caps cho tất cả section headline; letter-spacing phải là -0.01em để duy trì hình dáng hình chữ nhật nén."
      - "Giữ #5865F2 (Blurple) chỉ trên nút CTA chính và trạng thái focus tương tác — đây là màu bão hòa duy nhất có vai trò đảm bảo trên mọi trang."
      - "Đặt feature section card với màu gradient hoặc solid riêng (tím-đỏ tươi, xanh lá, v.v.) để phân biệt section, vì background trang toàn cục không bao giờ thay đổi."
      - "Ghép nút CTA blurple với nút phụ trắng đầy đủ dùng padding 15px 24px và radius 12px — không bao giờ dùng blurple cho cả primary và secondary trong cùng một cụm CTA."
      - "Đặt nhân vật 3D và asset linh vật ở rìa card, chồng lên giữa các section — sự chồng lấn mới tạo ra môi trường nhập vai, không phải đặt riêng lẻ."
      - "Áp dụng border-radius 12px cho nút tiêu chuẩn và 16px cho nút Log In/header để duy trì hệ thống phân cấp kích thước tinh tế giữa các ngữ cảnh tương tác."
      - "Dùng màu Fog (#BABCD9) cho body text trong section tối nơi màu trắng đầy đủ (#FFFFFF) sẽ lấn át headline — dành màu trắng tinh khiết cho headline và label UI quan trọng."

    don_t:
      - "Không bao giờ dùng background trang trắng hoặc xám nhạt — môi trường xanh-đen sâu là bất khả nhượng cho bầu không khí thương hiệu; ngay cả section chủ đề sáng cũng nên được chứa trong card."
      - "Không bao giờ áp dụng ABC Ginto Nord headline ở mixed-case — sự kết hợp all-caps + tracking chặt không thể tách rời khỏi nhận diện thị giác."
      - "Không bao giờ đặt Blurple làm background color trên vùng lớn (section, card) — ở tỷ lệ lớn, nó lấn át vai trò accent có kiểm soát và phá vỡ độ tương phản với text Blurple."
      - "Không bao giờ dùng gradient text trên headline — weight và khối lượng của chữ cái đầy đen là tuyên bố thị giác; gradient sẽ phá hủy chất lượng dập nổi."
      - "Không bao giờ thêm drop shadow cho feature card — bản sắc section đến từ background card tương phản, không phải độ sâu elevation shadow."
      - "Không bao giờ giảm button border-radius dưới 12px — bất cứ thứ gì sắc hơn đều phá vỡ hệ thống góc tròn làm mềm giọng typography vốn nặng."
      - "Không bao giờ dùng Greyple (#99AAB5) hoặc Dim Grey (#50555F) làm text chính — chúng chỉ dành cho trạng thái disabled, muted và placeholder."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Cosmic Page | `#0e0f2d` | Background trang toàn cục — môi trường chàm-đen sâu mà mọi section nằm trong đó |"
    info: "| 1 | App Chrome | `#23272a` | Nền sidebar và panel UI sản phẩm hiển thị trong mock-up |"
    info: "| 2 | App Surface | `#2c2f33` | Vùng nội dung chính bên trong ảnh chụp sản phẩm |"
    info: "| 3 | Feature Card | `#5865f2` | Background card feature section — mỗi card dùng gradient/solid theo chủ đề riêng (không phải lúc nào cũng blurple), nhưng đây đại diện cho biến thể màu thương hiệu |"

  elevation:

    info: "Trang marketing Discord không dùng box-shadow elevation truyền thống. Chiều sâu được tạo hoàn toàn qua độ tương phản màu giữa background section và bề mặt card nổi. Nhân vật 3D render thiết lập z-depth qua góc nhìn nghệ thuật và sự chồng lấn, không phải CSS shadow. Tín hiệu elevation duy nhất là tỷ lệ — element lớn hơn đọc là gần hơn."

  imagery:

    info: "Hoàn toàn là minh họa 3D và ảnh chụp sản phẩm — không có nhiếp ảnh. Nhân vật được render theo phong cách 3D cartoon-realistic với ánh sáng dưới bề mặt mềm, shadow pha xanh tím, và quần áo màu bão hòa (cam, oải hương, hoodie hồng). Chúng được tạo dáng giữa cử chỉ và đặt lệch trục so với trang, tạo sự năng động mà không cần lưới layout tĩnh. Ảnh chụp sản phẩm được compositing vào khung thiết bị (viền màn hình, outline điện thoại) render cùng phong cách 3D, khiến 'product demo' cảm giác như một phần của thế giới minh họa thay vì ảnh chụp màn hình phẳng. Feature card dùng background gradient full-bleed (tím-đỏ tươi, xanh lá đậm) làm canvas cho các composite ảnh chụp này — gradient CHÍNH LÀ ánh sáng cảnh. Đạo cụ 3D nổi (một quả đào, một tinh thể, linh vật robot xanh chanh) xuất hiện ở ranh giới section như phụ kiện cảnh. Không có nhiếp ảnh — thế giới thị giác hoàn toàn được xây dựng, củng cố rằng Discord là không gian bạn xây dựng chứ không phải nơi có sẵn."

  layout:

    info: "Full-bleed ở cấp trang không có container max-width rõ ràng — background xanh đậm trải rộng edge-to-edge. Hero là bố cục chia đôi: khối text căn trái với composite sản phẩm 3D lấp đầy nửa phải, cả hai nằm trong chiều cao viewport. Feature section bên dưới hero dùng card radius lớn (~24px) trải rộng 80-90% chiều rộng viewport, mỗi card là một sân khấu khép kín. Trong card, layout chia 50/50 — ảnh chụp sản phẩm trái, headline + body phải (hoặc đảo ngược). Không có nhịp điệu band sáng/tối xen kẽ — tất cả section đều chung background tối; sự khác biệt đến từ màu nền card. Navigation là thanh cố định trên cùng full-width với nhóm link căn giữa. Footer dùng lưới link 4-5 cột. Trang rất dài (7300px+), với khoảng cách giữa các section rộng rãi 80-120px, cho mỗi tính năng không gian để thở."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Page background: #0E0F2D (chàm đậm)"
    - "Primary headline text: #FFFFFF"
    - "Body text trên nền tối: #BABCD9 (Fog)"
    - "Primary CTA: #5865F2 (Blurple), text trắng"
    - "Secondary CTA: #FFFFFF background, #23272A text"
    - "Nav links: #FFFFFF"
    - "Border / UI outlines: #FFFFFF (trên nền tối) hoặc #23272A (trên nền sáng)"

    ví_dụ_component_prompts:

    - "**Hero Section**: Background full-bleed #0E0F2D. Trái 50%: headline 'GROUP CHAT THAT'S ALL FUN & GAMES' bằng ABC Ginto Nord 800, 56px, #FFFFFF, all-caps, letter-spacing -0.56px, line-height 0.86. Subtext 16px ABC Ginto 400, #FFFFFF, max-width 380px, line-height 1.5. Bên dưới: hai nút — trắng đầy đủ (#FFFFFF bg, #23272A text, 12px radius, 15px 24px padding) + blurple đầy đủ (#5865F2 bg, #FFFFFF text, 12px radius, 19.5px 24px padding), gap 16px. Phải 50%: composite màn hình sản phẩm với nhân vật 3D chồng lấn."

    - "**Feature Section Card** (biến thể tím): Card background linear-gradient từ #8B31A0 đến #E040A0, border-radius 24px, width 90vw căn giữa, padding 48px. Trái: ảnh chụp app Discord trong khung điện thoại/màn hình. Phải: headline 'MAKE YOUR GROUP CHATS MORE FUN' bằng ABC Ginto Nord 800, 48px, #FFFFFF, all-caps, letter-spacing -0.48px. Body text 16px ABC Ginto 400, #FFFFFF, line-height 1.5, max-width 360px."

    - "**Navigation Bar**: Thanh cố định full-width, background bán trong suốt. Trái: logo Discord + wordmark. Giữa: link text bằng ABC Ginto 400 16px, #FFFFFF, gap 4-8px. Trigger dropdown dưới dạng ghost button (transparent bg, #FFFFFF border 1px, 12px radius, 10px 16px padding). Xa bên phải: nút 'Log In' (#FFFFFF bg, #000000 text, 16px radius, 10px 16px padding)."

    - "**Primary CTA Button**: backgroundColor #5865F2, color #FFFFFF, border none, borderRadius 12px, padding 19.5px 24px, font ABC Ginto 500 16px, letter-spacing 0.016em. Trạng thái hover: backgroundColor #3442D9."

    - "**Footer Link Column**: Background tối #23272A. Column heading: ABC Ginto 500, 16px, #FFFFFF, letter-spacing 0.013em. Links: ABC Ginto 400, 16px, #BABCD9, line-height 1.5, gap 8px giữa các mục. 4-5 cột trong một hàng, gap 32px giữa các cột."

  brand_color_system:

    info: "Bảng màu của Discord là hệ thống hai tầng có chủ đích: môi trường tối gần như đơn sắc (trang chàm-đen, text trắng, UI than) cộng với một màu chủ đạo duy nhất — Blurple (#5865F2). Mọi màu khác (Spring Green cho online, Fuchsia cho Nitro, Cerulean cho voice) chỉ xuất hiện trong trạng thái UI theo ngữ cảnh hoặc chiến dịch theo mùa. Điều này có nghĩa là thiết kế trang mới nên mặc định text trắng trên nền tối với Blurple là element màu sắc DUY NHẤT trong chrome layout. Bảng màu mở rộng (Fuchsia, Yellow, Orange, Green) có sẵn cho mock-up UI trong sản phẩm, tô màu minh họa và khoảnh khắc chiến dịch đặc biệt — không dùng cho component trang chung."

  similar_brands:

    - "**Roblox** — Cùng display type nặng all-caps + linh vật nhân vật 3D làm kể chuyện thị giác chính, đặt lỏng lẻo trên môi trường màu sắc"
    - "**Twitch** — Dark theme tím đậm chủ đạo với một màu accent thương hiệu sống động duy nhất dành cho CTA, đối tượng cộng đồng game"
    - "**Epic Games Store** — Môi trường tối full-bleed, composite ảnh chụp sản phẩm trong khung minh họa, header section type lớn màu trắng trên gần đen"
    - "**Spotify (chiến dịch game)** — Background card gradient bão hòa làm điểm khác biệt section trong cấu trúc trang tối gần như đơn sắc"
    - "**Supercell** — Nhân vật cartoon 3D với ánh sáng dưới bề mặt, tạo dáng năng động ở rìa section, chồng lên container layout"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-blurple: #5865f2;
          --color-dark-blurple: #3442d9;
          --color-hover-blurple: #8891f2;
          --color-spring-green: #57f287;
          --color-fuchsia: #eb459;
          --color-vivid-cerulean: #00b0f4;
          --color-ember-orange: #fda220;
          --color-ekko-red: #de2761;
          --color-void: #000000;
          --color-snow: #ffffff;
          --color-not-quite-black: #23272a;
          --color-dark-charcoal: #2c2f33;
          --color-graphite: #333333;
          --color-fog: #babcd9;
          --color-greyple: #99aab5;
          --color-dim-grey: #50555f;
          --color-off-white: #f6f6f6;
        
          /* Typography — Font Families */
          --font-abc-ginto-nord-discord: 'ABC Ginto Nord Discord', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-ginto-discord: 'ABC Ginto Discord', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gg-sans: 'GG Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-ginto-normal: 'ABC Ginto Normal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 20px;
          --leading-body-lg: 1.38;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.36px;
          --text-heading: 48px;
          --leading-heading: 0.93;
          --tracking-heading: -0.48px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 0.86;
          --tracking-heading-lg: -0.56px;
          --text-display: 61px;
          --leading-display: 0.86;
          --tracking-display: -0.61px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-136: 136px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 32-48px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 104px;
          --radius-full-2: 120px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-pills: 104px;
          --radius-buttons: 12px;
          --radius-buttonslarge: 16px;
          --radius-featurepanels: 24px;
        
          /* Surfaces */
          --surface-cosmic-page: #0e0f2d;
          --surface-app-chrome: #23272a;
          --surface-app-surface: #2c2f33;
          --surface-feature-card: #5865f2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-blurple: #5865f2;
          --color-dark-blurple: #3442d9;
          --color-hover-blurple: #8891f2;
          --color-spring-green: #57f287;
          --color-fuchsia: #eb459;
          --color-vivid-cerulean: #00b0f4;
          --color-ember-orange: #fda220;
          --color-ekko-red: #de2761;
          --color-void: #000000;
          --color-snow: #ffffff;
          --color-not-quite-black: #23272a;
          --color-dark-charcoal: #2c2f33;
          --color-graphite: #333333;
          --color-fog: #babcd9;
          --color-greyple: #99aab5;
          --color-dim-grey: #50555f;
          --color-off-white: #f6f6f6;
        
          /* Typography */
          --font-abc-ginto-nord-discord: 'ABC Ginto Nord Discord', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-ginto-discord: 'ABC Ginto Discord', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gg-sans: 'GG Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-ginto-normal: 'ABC Ginto Normal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 20px;
          --leading-body-lg: 1.38;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.36px;
          --text-heading: 48px;
          --leading-heading: 0.93;
          --tracking-heading: -0.48px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 0.86;
          --tracking-heading-lg: -0.56px;
          --text-display: 61px;
          --leading-display: 0.86;
          --tracking-display: -0.61px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-136: 136px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 104px;
          --radius-full-2: 120px;
        }