bumble___style_reference:
  info: "> Sunlit honey editorial"

  theme: "light"

  info: "Bumble vận hành trên hệ thống monochrome cộng thêm một tông ấm: near-black ink (#202020) đảm nhận mọi chữ, mọi đường viền, mọi bề mặt tương tác, và một màu vàng mật ong rực rỡ (#ffdb5b) tràn ngập hero canvas và feature canvas như tín hiệu cảm xúc của thương hiệu. Hình học mềm mại và tự tin — radii 16-24px trên card và button, pill-shaped badges ở 1000px, shadow nhẹ đến mức khó thấy ở độ mờ 12% — nên không có gì cảm giác sắc cạnh hay hung hăng. BumbleSans nói với letter-spacing hơi rộng (0.007-0.02em), điều bất thường với một geometric sans và mang đến cho cả những dòng UI nhỏ nhất một nhịp điệu ấm áp, thong thả. Nội dung được sắp xếp trong các card có padding rộng rãi 24-40px trên nền trắng, với các dải vàng full-bleed đóng vai trò dấu câu thị giác giữa các section. Kết quả mang phong cách tạp chí lifestyle ngập nắng: ảnh con người làm phần việc nặng nhọc, màu thương hiệu không bao giờ là tiếng ồn trang trí, và UI lùi lại để những con người trong ảnh dẫn dắt."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Bumble Honey | `#ffdb5b` | `--color-bumble-honey` | Yellow state accent cho badge, bề mặt xác thực, và label trạng thái ngắn. |"
    info: "| Pollen | `#fff386` | `--color-pollen` | Bề mặt accent vàng nhạt hơn cho secondary card frame và biến thể tông màu so với Honey |"
    info: "| Bumble Ink | `#202020` | `--color-bumble-ink` | Primary text, filled action buttons, tất cả border và divider — near-black cấu trúc chịu trách nhiệm cho hơn 2.100 instance UI và là de facto primary action color |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, button text trên nền tối, body text inverse |"
    info: "| Mist | `#f3f3f3` | `--color-mist` | Bề mặt card nâng nhẹ cho các section cần nổi bật hơn trang trắng mà không tối đi |"
    info: "| Charcoal | `#3b3b3b` | `--color-charcoal` | Secondary border, muted icon stroke, và divider line bổ trợ khi Ink cảm giác quá nặng |"
    info: "| Graphite | `#575656` | `--color-graphite` | Muted helper text, inactive nav border, và UI label ít nhấn mạnh |"
    info: "| Onyx | `#343333` | `--color-onyx` | Badge border và badge text — màu tối ấm hơn dùng bên trong pill-shaped tag |"

  tokens___typography:

    bumblesans___single_typeface_cho_toàn_bộ_sản_phẩm___nav__body__heading__button__badge__hero_wordmark__weight_400_500_cho_body_và_nav__600_cho_subheading_và_emphasis__700_cho_display_headline_____font_bumblesans:
      - "**Thay thế:** Inter, DM Sans, hoặc Nunito Sans để giữ độ ấm geometric; tránh Helvetica/Geist (quá lâm sàng)."
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 15, 16, 17, 18, 20, 24, 32, 34, 40, 49, 68"
      - "**Line height:** 1.00, 1.10, 1.12, 1.18, 1.20, 1.25, 1.29, 1.33, 1.50"
      - "**Letter spacing:** 0.007em ở 15px (~0.11px), tăng dần lên 0.02em ở 32px+ (~0.64px)"
      - "**OpenType features:** `Không phát hiện, nhưng tracking hơi rộng gợi ý 'kern' bật và có thể 'ss01' stylistic alternates nếu có trong bộ font độc quyền.`"
      - "**Vai trò:** Single typeface cho toàn bộ sản phẩm — nav, body, heading, button, badge, hero wordmark. Weight 400-500 cho body và nav, 600 cho subheading và emphasis, 700 cho display headline."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 15px | 1.5 | 0.11px | `--text-caption` |"
      info: "| body | 17px | 1.5 | 0.2px | `--text-body` |"
      info: "| subheading | 20px | 1.33 | 0.32px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | 0.43px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | 0.64px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.18 | 0.8px | `--text-heading-lg` |"
      info: "| display | 68px | 1 | 1.36px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      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: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 16px |"
      info: "| cards | 24px |"
      info: "| badges | 1000px |"
      info: "| buttons | 16px |"
      info: "| small-elements | 9px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| sm | `rgba(32, 32, 32, 0.12) 0px 1px 8px 0px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 24px"

  components:

    filled_action_button_entrar___descargar_bumble:
      vai_trò: "Primary interactive element — button filled duy nhất trong hệ thống."

      info: "Nền #202020, chữ #ffffff, radius 16px, padding 14px 24px, BumbleSans 500 ở 16-17px. Dùng cho 'Sign In', 'Download', 'Subscribe', và CTA 'Inscribirme'. Không có hiệu ứng nâng khi hover; dựa vào đảo màu để phản hồi."

    active_nav_pill:
      vai_trò: "Đánh dấu section hiện tại của người dùng trong top navigation."

      info: "Nền #ffffff, chữ #202020, radius 16px, padding 10px 22px, BumbleSans 500. Trạng thái active là một pill trắng nổi trên page canvas — nghịch đảo của filled action button, tạo mối quan hệ toggle sạch sẽ."

    inactive_nav_link:
      vai_trò: "Navigation item tiêu chuẩn."

      info: "Nền trong suốt, chữ #202020, không border, weight 500 ở 16px. Bản thân nav bar không border và nổi trên trang."

    language_selector:
      vai_trò: "Icon quả địa cầu + label ngôn ngữ ở khu vực utility phía trên."

      info: "Nền trong suốt, icon và chữ #202020, radius 16px, đi kèm nút 'Entrar' filled bên phải."

    hero_wordmark_section:
      vai_trò: "Tuyên ngôn thương hiệu full-bleed với typography cỡ lớn và ảnh chụp màn hình sản phẩm nghiêng."

      info: "Nền #ffdb5b, tên thương hiệu hiển thị bằng BumbleSans 700 ở khoảng 200-300px+ màu #202020, với ảnh chụp màn hình điện thoại xoay ~5-8° và chồng lên chữ. Đây là component đặc biệt nhất của trang — wordmark CHÍNH LÀ hero."

    feature_card_white:
      vai_trò: "Content card giải thích tính năng với ảnh và chữ."

      info: "Nền #ffffff, radius 16-24px, shadow nhẹ rgba(32,32,32,0.12) 0px 1px 8px 0px, padding 24-40px. Chứa ảnh lifestyle ở một bên và headline + body copy ở bên kia trong bố cục 2 cột."

    product_variant_card_bumble_date___bff:
      vai_trò: "Trưng bày các chế độ sản phẩm khác nhau với phone mockup."

      info: "Khung Pollen (#fff386) hoặc Honey (#ffdb5b), radius 24px, chứa 2-3 ảnh chụp màn hình điện thoại chồng lên nhau với badge người dùng đã xác thực, tên sản phẩm bằng BumbleSans 700 ở 32px, và một đoạn mô tả ngắn."

    profile_verification_badge:
      vai_trò: "Chỉ báo tin cậy nhỏ trên ảnh chụp màn hình hồ sơ."

      info: "Nền trắng, chữ #202020, radius 1000px (pill), 15px, kèm icon checkmark nhỏ. Hiển thị 'X% verified' ở dạng gọn."

    member_circle_badge:
      vai_trò: "Con dấu trang trí cho chương trình cộng đồng/thành viên."

      info: "Badge hình tròn với border vàng/mật ong, vòng tròn trong tối, icon lục giác ở trung tâm. Xuất hiện chồng lên ảnh feature."

    app_store_download_badge:
      vai_trò: "Link tải xuống theo nền tảng trong hero."

      info: "Nền #202020, icon + chữ trắng, radius 9px, bố cục ngang với icon app store và label 'Download on the App Store' / 'Get it on Google Play'."

    stats_counter_pill:
      vai_trò: "Badge số liệu xoay vòng ('Correr', 'Reggaeton', v.v.) gần hero."

      info: "Nền #ffdb5b hoặc trắng, chữ #202020, radius 1000px, 15-16px, kèm icon nhỏ phía trước. Trang trí nhưng đúng thương hiệu."

    footer_link_list:
      vai_trò: "Sơ đồ trang và link pháp lý ở footer."

      info: "Chữ #202020 ở 15-16px, weight 500, xếp dọc với khoảng cách hàng 8-12px, không có divider giữa các mục."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #ffdb5b làm nền section full-bleed hoặc card frame lớn — không bao giờ dùng làm accent swatch nhỏ hoặc button fill."
      - "Đặt primary action button với nền #202020 và chữ #ffffff ở radius 16px; dành màu vàng cho sự ấm áp của thương hiệu, không cho khả năng click."
      - "Đặt card radii trong khoảng 16-24px; chỉ dùng 1000px cho badge và tag."
      - "Áp dụng một shadow nhẹ (rgba(32,32,32,0.12) 0px 1px 8px 0px) cho white card cần nâng lên khỏi trang — tránh chồng hoặc tăng cường shadow."
      - "Giữ letter-spacing dương (0.007-0.02em) trên tất cả kích thước BumbleSans; đây là yếu tố tạo nên nhịp điệu ấm áp, thoáng mở của font."
      - "Sử dụng ảnh lifestyle với chủ thể đa dạng làm nội dung thị giác chính; để con người dẫn dắt, để UI lùi lại."
      - "Duy trì card padding 24-32px và section gap 64px để giữ nhịp điệu thoải mái, không vội vã."

    không_nên_làm:
      - "Không dùng #ffdb5b làm button hoặc CTA fill — nó không mang affordance click trong hệ thống này và sẽ cạnh tranh với dark action button."
      - "Không đưa thêm màu chromatic (xanh dương, xanh lá, đỏ) cho trạng thái hoặc danh mục — hệ thống là monochrome+cộng một vàng, thêm sắc thái phá vỡ ràng buộc thương hiệu."
      - "Không dùng góc nhọn (0-4px) trên card, button, hoặc nav element; độ mềm 16-24px là bất khả thương lượng."
      - "Không đặt body text dưới 15px hoặc dùng weight 300; BumbleSans bắt đầu từ 400 và kích thước nhỏ nhất trong hệ thống là 15px."
      - "Không dùng drop shadow nặng, shadow màu, hoặc chồng nhiều lớp shadow; một shadow được phê duyệt là tiếng thì thầm ở độ mờ 12%."
      - "Không dùng màu đen full-opacity (#000000) — dùng #202020 cho tất cả text và interactive element; độ ấm nhẹ là có chủ đích."
      - "Không căn giữa body paragraph; hệ thống dùng căn trái cho tất cả văn xuôi và chỉ dành căn giữa cho display type hero."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 1 | Page Canvas | `#ffffff` | Nền mặc định cho hầu hết content section và bề mặt trong của card. |"
    info: "| 2 | Soft Card | `#f3f3f3` | Bước tông từ trắng lên cho các section cần nâng nhẹ mà không dùng shadow. |"
    info: "| 3 | Pollen Frame | `#fff386` | Nền card vàng nhạt hơn cho product variant và secondary feature frame. |"
    info: "| 4 | Honey Band | `#ffdb5b` | Canvas section hero và feature full-bleed — bề mặt ấm chủ đạo của thương hiệu. |"

  elevation:

    - "**White Feature Card:** `rgba(32, 32, 32, 0.12) 0px 1px 8px 0px`"

  imagery:

    info: "Nhiếp ảnh là phương tiện thị giác chủ đạo và là động cơ cảm xúc của thương hiệu. Ảnh lifestyle có người trẻ đa dạng trong bối cảnh thực tế — quán cà phê, công viên, tụ tập xã hội — chụp dưới ánh sáng tự nhiên ban ngày với hiệu chỉnh màu ấm vang vọng bảng màu mật ong của thương hiệu. Ảnh chụp màn hình điện thoại được xoay ở góc 5-8° và chồng lên nhau cũng như lên wordmark nền, tạo cảm giác collage năng động. Product UI mockup hiển thị màn hình ứng dụng thực với profile card, verification badge, và chat interface. Tỷ lệ ảnh so với chữ cao: ảnh chiếm 50-60% hầu hết feature section, với UI chrome tối giản có chủ đích để con người và ứng dụng dẫn dắt."

  layout:

    trang_theo_pattern_full_bleed_first: "một dải hero vàng với wordmark cỡ lớn và ảnh chụp màn hình điện thoại nghiêng, sau đó là các content section trắng và vàng xen kẽ trong nhịp xếp chồng một cột. Content section có max-width ~1200px căn giữa, dùng feature block 2 cột ảnh+chữ và product variant card 2 cột. Nav là thanh nổi không border ở trên cùng với pill trắng cho link active và dark filled button cho sign-in. Khoảng cách dọc rộng rãi (64px giữa các section, card padding 24-40px), tạo nhịp điệu như tạp chí. Section ảnh phá vỡ grid bằng cách đi edge-to-edge, sau đó section chữ tiếp theo bật lại về chiều rộng có giới hạn."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #202020"
    - "background: #ffffff"
    - "surface-accent: #ffdb5b (Honey — dải full-bleed và card frame)"
    - "surface-soft: #f3f3f3"
    - "border: #202020 hoặc #3b3b3b"
    - "primary action: #202020 (filled action)"

    ví_dụ_component_prompt:

    - "**Hero Section**: Nền full-bleed #ffdb5b. Wordmark thương hiệu bằng BumbleSans 700 ở 200px+ màu #202020, với 3 ảnh chụp màn hình điện thoại nghiêng (xoay 5-8°) chồng lên chữ. Nav nổi không border ở trên: logo 'Bumble' trái, 5 nav item giữa (item active là pill trắng #ffffff với radius 16px), language selector + nút 'Entrar' filled tối phải."

    - "**Feature Card**: Nền trắng (#ffffff), radius 24px, shadow rgba(32,32,32,0.12) 0px 1px 8px 0px, padding 32px. Bố cục 2 cột: ảnh lifestyle (radius 16px) trái, headline bằng BumbleSans 600 ở 32px #202020 + body copy ở 17px #202020 phải."

    - "**Product Variant Card**: Khung #fff386 (Pollen), radius 24px, padding 40px. Chứa 2 ảnh chụp màn hình điện thoại chồng lên nhau với verification badge trắng (pill radius 1000px), tên sản phẩm 'Bumble Date' bằng BumbleSans 700 ở 32px #202020, và mô tả 2 dòng ở 17px."

    - "**Filled Action Button**: Nền #202020, chữ #ffffff, radius 16px, padding dọc 14px / ngang 24px, BumbleSans 500 ở 16px, letter-spacing 0.016em. Dùng cho 'Sign In', 'Download', 'Subscribe' — kiểu button filled duy nhất trong hệ thống."

    - "**Badge/Pill Tag**: border-radius 1000px, padding dọc 10px / ngang 16px, BumbleSans 500 ở 15px, chữ #202020. Dùng cho số liệu xác thực, tag danh mục, và stat counter xoay vòng gần hero."

  monochrome_one_discipline:

    info: "Toàn bộ bề mặt chromatic của UI Bumble chính xác là hai màu vàng (#ffdb5b và #fff386) — mọi thứ khác đều achromatic. Đây không phải giới hạn, mà là thương hiệu. Khi xây dựng màn hình mới, hãy chống lại việc thêm màu ngữ nghĩa (không đỏ cho lỗi, không xanh lá cho thành công, không xanh dương cho thông tin) trừ khi ngữ cảnh sản phẩm bắt buộc. Sự tự tin của hệ thống đến từ sự kiềm chế: hơn 2.100 instance của #202020 chứng minh rằng một khối near-black có thể gánh vác toàn bộ trải nghiệm sản phẩm khi kết hợp với một accent ấm và khoảng cách rộng rãi."

  similar_brands:

    - "**Headspace** — Cùng cách tiếp cận warm-yellow + rounded-card + soft-shadow; cả hai đều xử lý một sắc thái sống động duy nhất như tín hiệu cảm xúc thay vì màu UI chức năng."
    - "**Duolingo** — Một màu thương hiệu đậm duy nhất (xanh lá cho Duolingo, vàng cho Bumble) tràn ngập section full-bleed trong khi phần còn lại của UI gần như monochrome với hình học bo tròn mềm mại."
    - "**Oatly** — Geometric sans thân thiện tùy chỉnh, khoảng trắng rộng rãi, ảnh lifestyle dẫn dắt, và bảng màu hạn chế có chủ đích với một tông ấm đặc trưng."
    - "**Calm** — Mật độ thoải mái với card padding 24-40px, nav và CTA hình pill, và màu thương hiệu dùng làm canvas full-bleed thay vì button accent."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bumble-honey: #ffdb5b;
          --color-pollen: #fff386;
          --color-bumble-ink: #202020;
          --color-paper-white: #ffffff;
          --color-mist: #f3f3f3;
          --color-charcoal: #3b3b3b;
          --color-graphite: #575656;
          --color-onyx: #343333;
        
          /* Typography — Font Families */
          --font-bumblesans: 'BumbleSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 1.5;
          --tracking-caption: 0.11px;
          --text-body: 17px;
          --leading-body: 1.5;
          --tracking-body: 0.2px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: 0.32px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: 0.43px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.18;
          --tracking-heading-lg: 0.8px;
          --text-display: 68px;
          --leading-display: 1;
          --tracking-display: 1.36px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 1000px;
        
          /* Named Radii */
          --radius-nav: 16px;
          --radius-cards: 24px;
          --radius-badges: 1000px;
          --radius-buttons: 16px;
          --radius-small-elements: 9px;
        
          /* Shadows */
          --shadow-sm: rgba(32, 32, 32, 0.12) 0px 1px 8px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-soft-card: #f3f3f3;
          --surface-pollen-frame: #fff386;
          --surface-honey-band: #ffdb5b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bumble-honey: #ffdb5b;
          --color-pollen: #fff386;
          --color-bumble-ink: #202020;
          --color-paper-white: #ffffff;
          --color-mist: #f3f3f3;
          --color-charcoal: #3b3b3b;
          --color-graphite: #575656;
          --color-onyx: #343333;
        
          /* Typography */
          --font-bumblesans: 'BumbleSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 1.5;
          --tracking-caption: 0.11px;
          --text-body: 17px;
          --leading-body: 1.5;
          --tracking-body: 0.2px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: 0.32px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: 0.43px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.18;
          --tracking-heading-lg: 0.8px;
          --text-display: 68px;
          --leading-display: 1;
          --tracking-display: 1.36px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 1000px;
        
          /* Shadows */
          --shadow-sm: rgba(32, 32, 32, 0.12) 0px 1px 8px 0px;
        }