honk___style_reference:
  info: "> Billboard xanh coban với một vệt highlight vàng"

  theme: "light"

  info: "Honk vận hành trên hệ thống thiết kế nền xanh bão hòa dành cho một sản phẩm nhắn tin muốn năng lượng, không phải kiềm chế. Toàn bộ viewport là một khung xanh điện (#008fff) với typography trắng và vàng tín hiệu nổi trên đó — không có xám ấm, không thẻ mềm, không chrome light-mode. Headlines là một custom heavy display face ở 52px, tracking chặt, với một hoặc hai từ được chuyển sang vàng rực (#ffe400) để các từ khóa bật ra khỏi headline. Bề mặt tối giản: mọi thứ hoặc nằm trực tiếp trên nền xanh, hoặc dùng một panel trắng cứng với border-radius 16px làm notification/UI element. Phone mockup mang màu phụ duy nhất (game-green) và nổi với các chi tiết trang trí tinh tế — speech bubbles, emoji-shaped UI nubs. Hệ thống mang phong cách vui tươi, tự tin, và cố tình ồn ào: nó chống lại phong cách doanh nghiệp, chống lại tối giản, và dùng độ bão hòa màu làm phương tiện thương hiệu chính thay vì typography hay layout cầu kỳ."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Honk Blue | `#008fff` | `--color-honk-blue` | Full-viewport page canvas, hero background, tất cả section cấp cao nhất — màu xanh điện CHÍNH LÀ bề mặt thương hiệu, không phải accent phụ |"
    info: "| Honk Sky | `#00a0ff` | `--color-honk-sky` | Xanh phụ cho dải gradient, hình trang trí lớn, và lớp chiều sâu phía sau canvas chính |"
    info: "| Signal Yellow | `#ffe400` | `--color-signal-yellow` | Từ nhấn trong headlines, gạch chân heading border, và dấu câu highlight — điểm nhấn màu duy nhất trên nền xanh, dùng tiết kiệm để nhấn mạnh thay vì trang trí |"
    info: "| Honk White | `#ffffff` | `--color-honk-white` | Viền siêu mỏng, divider, input outlines, và card edges trên bề mặt sáng. Không nâng nó lên thành màu CTA chính |"
    info: "| Carbon | `#111111` | `--color-carbon` | Văn bản chính trên bề mặt sáng, viền tối, chi tiết gần đen — dùng khi text rời khỏi nền xanh |"
    info: "| True Black | `#000000` | `--color-true-black` | SVG fills, chi tiết đồ họa, text tương phản tối đa khi thiết kế cần xuống đến đen tuyệt đối |"
    info: "| Slate | `#363636` | `--color-slate` | Graphic fills phụ, chi tiết minh họa tối, accent mềm hơn đen trong SVG |"
    info: "| Game Green | `#3fcc6b` | `--color-game-green` | Nội dung màn hình điện thoại (in-game UI bên trong device mockups) — màu phụ đơn sắc dành riêng cho màn hình bên trong sản phẩm, để bộ ba xanh/vàng/trắng luôn sạch trên bề mặt marketing |"

  tokens___typography:

    honk_header___hero_và_section_display_headlines___custom_heavy_display_face_ở_một_kích_thước_duy_nhất_52px__tracking_chặt__0_012em__đây_là_giọng_wordmark_đặc_trưng__chunky__ồn_ào__hơi_condensed__được_thiết_kế_để_đọc_ở_tỷ_lệ_billboard_trên_nền_xanh____font_honk_header:
      - "**Thay thế:** Archivo Black, Space Grotesk Bold, hoặc Manrope ExtraBold"
      - "**Weights:** 700"
      - "**Kích thước:** 52px"
      - "**Line height:** 1.23"
      - "**Letter spacing:** -0.012em"
      - "**Vai trò:** Hero và section display headlines — custom heavy display face ở một kích thước duy nhất 52px, tracking chặt -0.012em. Đây là giọng wordmark đặc trưng: chunky, ồn ào, hơi condensed, được thiết kế để đọc ở tỷ lệ billboard trên nền xanh"

    honk_sans___body_copy__sub_headings__button_labels__link_text__footer__icons___một_neutral_grotesk_bao_phủ_toàn_bộ_thang_đo_ui_từ_micro_labels_13px_đến_lead_paragraphs_19px__negative_tracking_trên_toàn_bộ__0_026em_ở_13px___0_006em_ở_19px_thắt_chặt_grotesque_để_cảm_giác_hiện_đại_thay_vì_thoáng____font_honk_sans:
      - "**Thay thế:** Inter, Manrope, hoặc Plus Jakarta Sans"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 13px, 14px, 16px, 17px, 19px"
      - "**Line height:** 1.20, 1.38, 1.47, 1.55"
      - "**Letter spacing:** -0.026em ở 13px, -0.024em ở 14px, -0.018em ở 16px, -0.006em ở 17-19px"
      - "**Vai trò:** Body copy, sub-headings, button labels, link text, footer, icons — một neutral grotesk bao phủ toàn bộ thang đo UI từ micro-labels 13px đến lead paragraphs 19px. Negative tracking trên toàn bộ (-0.026em ở 13px, -0.006em ở 19px) thắt chặt grotesque để cảm giác hiện đại thay vì thoáng"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.55 | -0.026px | `--text-caption` |"
      info: "| body-lg | 19px | 1.55 | -0.006px | `--text-body-lg` |"
      info: "| display | 52px | 1.23 | -0.012px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 16px |"
      info: "| buttons | 6px |"
      info: "| small-pills | 6px |"
      info: "| notification-panels | 16px |"

    layout:

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

  components:

    blue_hero_canvas:
      vai_trò: "Full-bleed hero section"

      info: "Section chiếm 100% viewport width, tô màu #008fff. Chứa layout hai cột: bên trái = stacked headline + sub + notification strip; bên phải = floating phone mockup với hình speech-bubble trang trí. Không có padding trên/dưới bất đối xứng — nền xanh kéo dài edge-to-edge như brand canvas."

    highlighted_headline:
      vai_trò: "Hero/section H1"

      info: "Honk Header 700 ở 52px, trắng, tracking -0.012em, line-height 1.23. Thường chia thành 2-3 dòng với 1-2 từ bên trong được bọc trong <span> đặt màu #ffe400 (Signal Yellow). Từ màu vàng không bao giờ được gạch chân hoặc in đậm khác — chỉ chuyển màu."

    hero_sub_headline:
      vai_trò: "Body intro dưới headline"

      info: "Honk Sans 400 ở 19px, trắng, line-height ~1.55, không có styling nhấn mạnh. Cách headline 24-32px, không có divider."

    notification_banner:
      vai_trò: "Embedded chat notification UI"

      info: "Panel trắng (#ffffff), radius 16px, padding dọc 16-20px, full-width trong cột hero. Chứa một icon location-pin vàng nhỏ bên phải, nhãn 'Read Announcement →' bằng Honk Sans cỡ nhỏ, và một dòng message đậm. Hoạt động như một live-product proof card, không phải CTA — nó cho thấy ứng dụng đang được sử dụng."

    phone_mockup_frame:
      vai_trò: "Device illustration cho product showcase"

      info: "Khung iPhone-style (bezel tối) chứa màn hình game xanh. Nằm nghiêng nhẹ hoặc nổi ở bên phải hero. Tỷ lệ khoảng 45-55% chiều rộng hero. Không bao giờ có drop shadow — nằm trên nền xanh chỉ bằng tương phản màu."

    speech_bubble_decoration:
      vai_trò: "Floating emoji-shaped UI nubs"

      info: "Hình tròn mềm, bo tròn (radius 16-20px) màu trắng với một icon duy nhất (heart, settings gear) ở giữa. Nổi xung quanh phone mockup như confetti rải rác — đây là brand decoration, không phải interactive elements. Tối đa hai đến ba cái mỗi hero."

    in_phone_game_screen:
      vai_trò: "Product-internal UI (device screen content)"

      info: "Fill xanh (#3fcc6b) bên trong khung điện thoại với lưới tic-tac-toe trắng, avatar bubbles, và các nút action hình tròn nhỏ màu trắng (volume, mute, mic) dọc theo đáy. Đây là ngữ cảnh DUY NHẤT màu xanh xuất hiện."

    ghost_link_button:
      vai_trò: "Lightweight text link / action"

      info: "Honk Sans 500 ở 14-16px, trắng, không background, không border. Thường đi kèm với chevron hoặc arrow glyph. Dùng cho 'X Chatter', footer links, và secondary actions. Token radius 6px áp dụng nếu cần biến thể hình pill."

    footer_section:
      vai_trò: "Closing dark hoặc blue band"

      info: "Tiếp tục nền xanh hoặc chuyển sang tông đậm hơn. Text trắng, Honk Sans 400 ở 14-16px, các hàng link với padding tối thiểu. Không có footer columns dạng card — footer đọc như một danh sách link phẳng, không phải card grid."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #008fff làm full-viewport canvas cho mọi section cấp cao nhất — không bao giờ đặt headline trên thẻ trắng với nền xanh phía sau; màu xanh CHÍNH LÀ bề mặt."
      - "Chuyển một hoặc hai từ bên trong headline Honk Header 52px sang #ffe400 để tạo nhấn mạnh. Không bao giờ gạch chân, in nghiêng, hoặc in đậm từ được highlight — màu sắc là yếu tố phân biệt duy nhất."
      - "Đặt tất cả body copy bằng Honk Sans ở 16-19px với giá trị negative tracking từ type scale (-0.018em ở 16px, -0.006em ở 19px) — grotesque được thắt chặt là một phần của giọng điệu."
      - "Dùng token radius 16px cho bất kỳ panel trắng nào nằm trong nền xanh (notification banners, content cards, image containers) và token radius 6px cho small pills hoặc chips."
      - "Đặt phone mockup ở bên phải hero với chiều rộng cột 45-55%, bao quanh bởi 2-3 floating speech-bubble decorations màu trắng — không bao giờ căn giữa, không bao giờ thêm drop shadow."
      - "Dùng màu xanh #3fcc6b độc quyền bên trong màn hình điện thoại cho product-internal UI; giữ bề mặt marketing chỉ với bộ ba xanh/vàng/trắng."
      - "Giữ icon strokes ở 2px với weight Honk Sans, trắng trên nền xanh — icons là line-style, không bao giờ filled, không bao giờ chromatic."

    không_nên_làm:
      - "Không dùng nền trắng hoặc xám nhạt cho marketing screens — design system giả định nền xanh luôn hiện diện, nên trang trắng sẽ đọc như bị hỏng."
      - "Không dùng #ffe400 cho body text, button backgrounds, hoặc vùng fill lớn — Signal Yellow chỉ là word-level highlight, không phải surface color."
      - "Không đưa màu bão hòa thứ ba vào bề mặt marketing (tím, đỏ, cam) — chỉ cho phép nền xanh, accent vàng, text trắng, và màu xanh bên trong device mockups."
      - "Không dùng drop shadow nặng trên cards, buttons, hoặc phone mockup — độ cao đến từ tương phản màu với nền xanh, không phải từ shadow stacks."
      - "Không chia headline quá 3 dòng hoặc highlight quá 2 từ bằng màu vàng — hệ thống dựa vào một khoảnh khắc nhấn mạnh duy nhất, không phải rải rác."
      - "Không dùng font family khác cho sub-headings, buttons, hoặc links — Honk Sans ở các weight khác nhau bao phủ toàn bộ UI; Honk Header chỉ dùng cho display."
      - "Không dùng token radius 6px trên cards hoặc large panels, và không dùng token radius 16px trên buttons — giữ small-radius cho small elements, large-radius cho large surfaces."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Honk Blue Canvas | `#008fff` | Full-viewport page background, hero, section bands |"
    info: "| 1 | Honk Sky | `#00a0ff` | Gradient depth layer, large decorative shapes |"
    info: "| 2 | Honk White Panel | `#ffffff` | Notification banners, embedded UI cards, device screen bezel, icon fills |"

  imagery:

    info: "Product-internal screenshots là hình ảnh chính: một iPhone mockup nghiêng duy nhất mang màn hình game tic-tac-toe xanh, đặt lệch phải trong hero. Không có photography, không lifestyle imagery, không human subjects. Trang trí giới hạn ở 2-3 floating speech-bubble shapes màu trắng (heart icon, settings gear, generic chat nub) quay quanh điện thoại ở các kích thước khác nhau. Tất cả visual elements sống trên nền xanh bão hòa; màn hình điện thoại xanh là màu phụ duy nhất trong hệ thống. Ngôn ngữ hình ảnh mang phong cách 'sản phẩm LÀ hero' — không có nỗ lực nhân hóa hoặc ngữ cảnh hóa ứng dụng bằng ảnh."

  layout:

    info: "Two-column hero với nền xanh full-bleed, cột trái ~45% width chứa stacked headline → sub → notification banner → ghost link, cột phải ~50% width chứa phone mockup với speech-bubble decorations xung quanh. Bên dưới hero, các section tiếp tục canvas xanh với pattern xen kẽ một cột và hai cột. Không có centered stacks, không card grids, không pricing tables — hệ thống tránh layout thông tin dày đặc để ưu tiên các section thưa thớt, kiểu billboard, cách nhau bởi khoảng cách dọc 80px. Navigation là top bar tối giản (logo trái, links nhỏ phải) trên nền xanh, không có sticky variant và không có mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #008fff (full-viewport canvas)"
    - "text: #ffffff (trên nền xanh), #111111 (trên light panels)"
    - "border: #ffffff (trên nền xanh), #111111 (trên nền sáng)"
    - "accent: #ffe400 (headline word highlights, small accent borders)"
    - "primary action: không có màu CTA riêng biệt"
    - "device screen green: #3fcc6b (chỉ bên trong phone mockup)"

    3_5_example_component_prompts:
    - "**Hero Headline Block**: Nền full-viewport xanh #008fff. Headline 'Really, real-time messaging.' bằng Honk Header 700 ở 52px, trắng, letter-spacing -0.012em, line-height 1.23, chia thành 2 dòng với 'Really,' chuyển sang #ffe400. Sub-headline bằng Honk Sans 400 ở 19px trắng. Khoảng cách 80px đến sub-headline."
    - "**Notification Banner**: Panel trắng #ffffff, border-radius 16px, padding dọc 20px, full-width trong cột hero. Hàng trên: nhãn Honk Sans 500 ở 13px trắng-trên-xanh 'Read Announcement →' nằm phía trên dòng message đậm Honk Sans 600 ở 16px #111111. Icon location-pin vàng #ffe400 ở phía xa bên phải, kích thước 20px."
    - "**Phone Mockup with Game Screen**: iPhone bezel tối, 45% chiều rộng cột hero, căn phải. Screen fill xanh #3fcc6b. Bên trong: lưới tic-tac-toe 3×3 trắng với ô vuông 80px, 2 avatar bubbles hình tròn ở trên cùng màu #ffffff, và một hàng dưới gồm 3 nút tròn nhỏ màu trắng (volume, mute grid icon, mic). Không drop shadow."
    - "**Speech Bubble Decoration**: Hình tròn bo tròn màu trắng #ffffff, border-radius 16-20px, đường kính 60-80px, icon ở giữa (heart, settings gear) màu #111111 ở 24px. Nổi cách phone mockup 20-40px ở các kích thước khác nhau. Hai đến ba cái mỗi hero, không bao giờ chồng lên headline."
    - "**Footer Link Row**: Nền xanh #008fff, padding dọc 24px, Honk Sans 400 ở 14px trắng. Links cách nhau 16px gap ngang, không divider, không bullet characters. Danh sách phẳng thuần túy, không phải column grid."

  color_discipline:

    info: "Honk là hệ thống ba màu trên bề mặt marketing: nền xanh (#008fff), text trắng (#ffffff), nhấn vàng (#ffe400). Xanh (#3fcc6b) bị cách ly bên trong màn hình điện thoại vì sản phẩm là real-time messaging bao gồm in-chat games — màu xanh là product content, không phải brand chrome. Bất kỳ trang mới nào cũng phải giữ kỷ luật này: không đưa tím, đỏ, cam, hoặc hồng vào bề mặt marketing. Nếu cần state color (error/success), dùng Honk White ở opacity thay đổi (0.6 cho muted, 1.0 cho active) thay vì một hue mới."

  similar_brands:

    - "**Marco Polo** — Cùng full-bleed saturated brand color làm page canvas với pattern single phone-mockup-as-hero, và cùng sự kiềm chế thị giác của chat-product"
    - "**IRL** — Cùng cách tiếp cận anti-minimal: nền đơn sắc ồn ào (tím cho IRL, xanh cho Honk) với một accent màu sáng cho keyword highlights bên trong headlines trắng"
    - "**Dispo (David's Disposable)** — Cùng saturated canvas mã hóa giới trẻ và chiến lược accent vàng, với display headlines lật từng từ sang màu sáng thứ hai để nhấn mạnh"
    - "**Giphy** — Cùng bề mặt marketing xanh điện với floating emoji/GIF-shaped decorations và một custom display face duy nhất — năng lượng thị giác hơn kiềm chế doanh nghiệp"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-honk-blue: #008fff;
          --color-honk-sky: #00a0ff;
          --color-signal-yellow: #ffe400;
          --color-honk-white: #ffffff;
          --color-carbon: #111111;
          --color-true-black: #000000;
          --color-slate: #363636;
          --color-game-green: #3fcc6b;
        
          /* Typography — Font Families */
          --font-honk-header: 'Honk Header', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-honk-sans: 'Honk Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.55;
          --tracking-caption: -0.026px;
          --text-body-lg: 19px;
          --leading-body-lg: 1.55;
          --tracking-body-lg: -0.006px;
          --text-display: 52px;
          --leading-display: 1.23;
          --tracking-display: -0.012px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20-24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-buttons: 6px;
          --radius-small-pills: 6px;
          --radius-notification-panels: 16px;
        
          /* Surfaces */
          --surface-honk-blue-canvas: #008fff;
          --surface-honk-sky: #00a0ff;
          --surface-honk-white-panel: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-honk-blue: #008fff;
          --color-honk-sky: #00a0ff;
          --color-signal-yellow: #ffe400;
          --color-honk-white: #ffffff;
          --color-carbon: #111111;
          --color-true-black: #000000;
          --color-slate: #363636;
          --color-game-green: #3fcc6b;
        
          /* Typography */
          --font-honk-header: 'Honk Header', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-honk-sans: 'Honk Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.55;
          --tracking-caption: -0.026px;
          --text-body-lg: 19px;
          --leading-body-lg: 1.55;
          --tracking-body-lg: -0.006px;
          --text-display: 52px;
          --leading-display: 1.23;
          --tracking-display: -0.012px;
        
          /* Spacing */
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-2xl: 16px;
        }