hyperaktiv___style_reference:
  info: "> Swiss editorial broadsheet. Black display type 90px trên nền trắng, với electric blue là điểm nhấn màu duy nhất."

  theme: "light"

  info: "HyperAktiv hoạt động như một poster editorial kiểu Thụy Sĩ: nền trắng tinh, display type đen cỡ lớn, và một mảng electric blue (#0000ff) chỉ xuất hiện trên action và footer. Headline chiếm ưu thế ở kích thước 72–90px với line-height được nén xuống 0.89–1.0, thu gọn trang thành một cột dọc các khối typographic đồ sộ. Layout luân phiên giữa ảnh full-bleed và split 50/50 bất đối xứng, xử lý ảnh nội thất như tư liệu thô thay vì tác phẩm được dàn dựng. Mọi thứ đều góc vuông, ngoại trừ một border-radius 20px duy nhất trên button, và bóng đổ duy nhất là bóng có sẵn trong ảnh — bản thân interface vẫn phẳng, nhị phân và đồ họa."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Nền trang, bề mặt card, chữ trên nền tối/nền action |"
    info: "| Absolute Black | `#000000` | `--color-absolute-black` | Body text, heading, icon strokes, border hairline, image overlays |"
    info: "| Mid Graphite | `#333333` | `--color-mid-graphite` | Chữ trong input, nội dung phụ |"
    info: "| Light Silver | `#cccccc` | `--color-light-silver` | Border input, đường phân cách form nhẹ |"
    info: "| Hyper Blue | `#0000ff` | `--color-hyper-blue` | Filled action buttons, nền footer, điểm nhấn tương tác — dấu chấm câu màu sắc duy nhất trong một hệ thống achromatic |"

  tokens___typography:

    studiofeixensans___display_và_heading_typeface__dùng_uppercase_ở_72_90px_với_line_height_nén_xuống_0_89_1_0_để_headline_khổng_lồ_xếp_chồng_thành_các_khối_typographic_dày_đặc__weights_400_và_700___weight_nhẹ_hơn_dùng_cho_sub_headline__700_nắm_giữ_các_display_statement__font_tùy_chỉnh__có_thể_thay_thế_bằng_archivo_hoặc_space_grotesk_vì_nét_chữ_chặt__hình_học__hơi_condensed_____font_studiofeixensans:
      - "**Thay thế:** Archivo hoặc Space Grotesk"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 14, 16, 20, 22, 25, 28, 42, 72, 80, 90px"
      - "**Line height:** 0.89, 1.00, 1.20, 1.22, 1.43, 1.50, 2.00"
      - "**Letter spacing:** normal ở mọi kích thước — độ chặt trực quan đến từ việc nén line-height, không phải tracking"
      - "**Vai trò:** Display và heading typeface. Dùng uppercase ở 72–90px với line-height nén xuống 0.89–1.0 để headline khổng lồ xếp chồng thành các khối typographic dày đặc. Weights 400 và 700 — weight nhẹ hơn dùng cho sub-headline, 700 nắm giữ các display statement. Font tùy chỉnh; có thể thay thế bằng Archivo hoặc Space Grotesk vì nét chữ chặt, hình học, hơi condensed."

    dm_sans___body_và_interface_text__single_weight_400_ở_14_20px__dùng_cho_form_labels__card_body_copy__navigation_và_các_đoạn_hỗ_trợ__dm_sans_giữ_vai_trò_lặng_lẽ_để_studiofeixensans_thống_trị_ở_bậc_cao_nhất_của_hệ_thống_phân_cấp_____font_dm_sans:
      - "**Thay thế:** Inter hoặc system-ui sans-serif"
      - "**Weights:** 400"
      - "**Kích thước:** 14, 16, 20px"
      - "**Line height:** 1.25, 1.43"
      - "**Vai trò:** Body và interface text. Single weight 400 ở 14–20px. Dùng cho form labels, card body copy, navigation và các đoạn hỗ trợ. DM Sans giữ vai trò lặng lẽ để Studiofeixensans thống trị ở bậc cao nhất của hệ thống phân cấp."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | — | `--text-caption` |"
      info: "| body | 16px | 1.43 | — | `--text-body` |"
      info: "| subheading | 20px | 1.25 | — | `--text-subheading` |"
      info: "| heading-sm | 25px | 1.22 | — | `--text-heading-sm` |"
      info: "| heading | 42px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 72px | 1 | — | `--text-heading-lg` |"
      info: "| display | 90px | 0.89 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 20px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 30px"
      - "**Card padding:** 15px"
      - "**Element gap:** 10px"

  components:

    full_bleed_hero_photograph:
      vai_trò: "Mở đầu trực quan"

      info: "Ảnh chạy sát mép (edge-to-edge) (ga tàu, cảnh quan thành phố) lấp đầy chiều rộng viewport. Không border-radius, không overlay tint, không gradient mask. Ảnh tự mang chiều sâu và độ tương phản tự nhiên so với lề trắng ở trên và dưới."

    display_headline:
      vai_trò: "Tiêu đề section"

      info: "Studiofeixensans weight 700, uppercase, 72–90px, line-height 0.89–1.0, màu #000000 trên nền #ffffff. Yếu tố định hình hệ thống — các headline này lớn gấp 5–6 lần body text và xác định nhịp điệu dọc của mọi trang."

    split_section_50_50_image___text:
      vai_trò: "Khối nội dung chính"

      info: "Layout hai cột, ảnh ở một bên (không padding, edge-to-edge), text ở bên kia với padding trong ~30px. Dùng cho các section concept, venue showcase và reservation. Cột text có max-width ~480px, căn giữa theo chiều dọc."

    primary_filled_button:
      vai_trò: "Call-to-action"

      info: "Nền #0000ff, chữ #ffffff, Studiofeixensans weight 400 uppercase, 14–16px, padding 10px 20px, border-radius 20px (element bo tròn duy nhất trong hệ thống). Không border, không shadow. Màu xanh dương trên nền đen/trắng khiến nó trở thành element duy nhất đòi hỏi sự chú ý."

    text_input:
      vai_trò: "Trường form"

      info: "Border 1px solid #cccccc (Light Silver), không border-radius, padding 8–12px dọc / 10–12px ngang. Màu chữ #333333 (Mid Graphite), 14–16px. Placeholder kế thừa weight nhẹ hơn. Dạng gạch chân hoặc khung, không bao giờ bo tròn — nhất quán với giọng điệu editorial phẳng."

    feature_bullet_list:
      vai_trò: "Danh sách tiện nghi/thông số kỹ thuật"

      info: "Studiofeixensans weight 400, uppercase, 16–20px, line-height 1.43, màu #000000. Các mục cách nhau bằng dấu chấm tròn đặc (●) dưới dạng ký tự inline — không có padding hoặc trang trí thêm. Nhịp điệu ngang chặt chẽ tạo cảm giác dày đặc, giống danh mục."

    image_grid_events:
      vai_trò: "Khối gallery nhiều ảnh"

      info: "Hàng ngang các ảnh hình chữ nhật, không gap hoặc gap 5–10px, không border-radius, không caption. Mỗi ảnh chảy sát mép section. Hoạt động như bằng chứng trực quan về không gian venue."

    marquee_headline:
      vai_trò: "Lặp lại thương hiệu dạng chuyển động"

      info: "Studiofeixensans weight 700, uppercase, 80–90px, lặp lại tên thương hiệu 'HyperAktiv.' trên toàn bộ viewport. Letter-spacing chặt, line-height 1.0, đen trên trắng. Dấu chấm ở cuối là một phần của wordmark identity."

    chat_widget_bubble:
      vai_trò: "Persistent contact CTA"

      info: "Cố định góc dưới bên phải, card trắng với border 1px nhẹ, bo tròn ~12px, chứa avatar thumbnail, tên đậm 'Olivia', timestamp và message preview. Icon button hình tròn xanh lá kiểu WhatsApp ở bên cạnh. Element duy nhất đưa chút mềm mại vào hệ thống."

    footer:
      vai_trò: "Footer trang web"

      info: "Nền full-bleed #0000ff, chữ trắng, Studiofeixensans weight 400 uppercase, padding rộng (40–60px dọc). Navigation links, legal text và contact info đều trắng trên xanh. Nền xanh là điểm nhấn màu sắc kết thúc cho trang trắng."

    pricing_statement:
      vai_trò: "Hiển thị giá"

      info: "Studiofeixensans weight 400, uppercase, 42px, line-height 1.20, màu #000000. Định dạng: 'DÈS CHF 1000/JOURNÉE' — một khoảnh khắc typographic đơn lẻ, mang tính tuyên bố, không phải badge hay card được tạo kiểu."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng #0000ff cho filled action buttons và footer — đây là bề mặt màu sắc duy nhất được phép"
      - "Đặt display headlines ở 72–90px với Studiofeixensans 700 uppercase, line-height 0.89–1.0"
      - "Dùng border-radius 20px cho button và 0px cho mọi thứ khác (cards, inputs, images, tags)"
      - "Để ảnh chạy edge-to-edge, không border-radius và không overlay"
      - "Dùng layout split 50/50 làm mặc định cho các section nội dung — ảnh một bên, text một bên"
      - "Giữ toàn bộ body và interface text ở DM Sans 400, 14–20px — không bao giờ để nó cạnh tranh với display face"
      - "Dùng uppercase cho tất cả heading, sub-heading, button labels và feature lists trong Studiofeixensans"

    không_nên_làm:
      - "Không bao giờ thêm accent colors khác — hệ thống là nhị phân (đen/trắng) cộng một màu xanh"
      - "Không bao giờ áp dụng drop shadows, glows hoặc bề mặt mờ cho UI components — giữ phẳng"
      - "Không bao giờ dùng góc bo tròn trên cards, inputs hoặc images — chỉ button mới có radius 20px"
      - "Không bao giờ đặt body hoặc display line-height trên 1.5 cho body và dưới 0.9 cho display — độ nén là dấu ấn đặc trưng"
      - "Không bao giờ dùng màu sắc cho chữ ngoại trừ chữ trắng trên nền footer xanh"
      - "Không bao giờ thêm gradients, glassmorphism hoặc noise textures — bề mặt chỉ là trắng đặc hoặc xanh đặc"
      - "Không bao giờ dùng serif, script hoặc decorative typeface — hệ thống chỉ gồm hai sans-serif"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#ffffff` | Nền trang chính — canvas chiếm ưu thế |"
    info: "| 2 | Hyper Blue Ground | `#0000ff` | Footer và action surface — bề mặt màu sắc duy nhất trong hệ thống |"

  elevation:

    info: "Interface được cố tình làm phẳng. Không drop shadows, không glows, không bề mặt mờ. Chiều sâu chỉ được truyền tải qua ảnh full-bleed và tỷ lệ typographic — UI giữ tính đồ họa, không skeuomorphic. Nếu một component dường như cần shadow, có lẽ nó cần border hoặc đổi background."

  imagery:

    info: "Chỉ tư liệu ảnh — không illustration, không đồ họa trừu tượng, không icon ngoài chat widget. Ảnh mang giọng điệu tư liệu: sân ga, phòng trống nội thất, chi tiết kiến trúc, ảnh venue tự nhiên. Full-bleed ở tỷ lệ hero, thu nhỏ ở ~480px trong split sections. Không filter, không duotone, không góc bo tròn. Ảnh mang độ tương phản và màu sắc tự nhiên của nhiếp ảnh kiến trúc/đô thị Thụy Sĩ và được để nguyên không qua xử lý. Ngôn ngữ hình ảnh của một venue portfolio, không phải lifestyle brand."

  layout:

    info: "Max-width ~1200px căn giữa, nhưng nội dung thường xuyên phá vỡ container để full-bleed cho hero và footer. Trang là một chuỗi dọc các band full-width: ảnh hero full-bleed → marquee text → split 50/50 (concept text) → split 50/50 (venue image + text) → image grid → split 50/50 (reservation form). Không sidebar, không card grid cho features. Navigation tối thiểu — có thể là top bar mỏng hoặc ẩn sau menu trigger. Nhịp điệu section được dẫn dắt bởi gap dọc 30px+ giữa các band và sự thay đổi tỷ lệ mạnh mẽ giữa display type 90px và body text 16px. Split 50/50 là mẫu layout chủ lực, được dùng 3+ lần mỗi trang."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000 (hairline) hoặc #cccccc (input)"
    - "accent: #0000ff (Hyper Blue — action và footer)"
    - "primary action: #0000ff (filled action)"

  example_component_prompts:

    - "**Display Headline Block**: 'NOUS ACCUEILLONS VOS AMAZING EVENTS DEPUIS 2016!' ở Studiofeixensans weight 700, uppercase, 90px, line-height 0.89, màu #000000 trên nền #ffffff. Full viewport width, margin trên/dưới 30px."

    - "**50/50 Split Section (Image + Text)**: Cột trái: ảnh nội thất full-bleed của không gian venue, không border-radius, không overlay. Cột phải: padding 30px, Studiofeixensans weight 700 uppercase 72px heading 'ALIVE' màu #000000, tiếp theo là DM Sans 400 16px body text màu #333333, line-height 1.43. Bên dưới: Studiofeixensans 400 uppercase 16px feature list với dấu ● phân cách."

    - "**Primary Filled Button**: Link 'DÈS CHF 1000/JOURNÉE' được tạo kiểu như button: nền #0000ff, chữ #ffffff, Studiofeixensans weight 400, uppercase, 16px, padding 10px 20px, border-radius 20px, không border, không shadow. Inline, căn trái trong cột text của nó."

    - "**Text Input Field**: Border 1px solid #cccccc, border-radius 0px, padding 10px 12px, width 100% của cột. Label phía trên ở DM Sans 400 14px #000000. Placeholder text màu #333333. Không focus glow — dùng border 2px #000000 khi focus."

    - "**Full-Bleed Hero Photograph**: Ảnh edge-to-edge lấp đầy 100vw chiều rộng và ~60vh chiều cao. Không overlay, không border-radius, không caption. Lề trắng trên và dưới (mỗi bên 30px). Tiếp theo ngay sau đó là marquee headline block."

  typography_philosophy:

    info: "Hệ thống typographic chính là sản phẩm. Hai typeface, mỗi loại một nhiệm vụ: Studiofeixensans (tùy chỉnh) cho mọi thứ cần được đọc từ xa, DM Sans cho mọi thứ đọc ở khoảng cách cánh tay. Kích thước display cực lớn (72–90px) với line-height nén xuống 0.89–1.0 không phải lỗi — đó là dấu ấn đặc trưng. Chúng buộc headline phải xếp chồng thành các khối dày đặc, giống poster, neo giữ mỗi section. Body text vẫn nhỏ (14–20px) và lặng lẽ (DM Sans, không bold, single weight 400). Sự tương phản giữa hai thanh ghi này tạo nên nhịp điệu thị giác cho trang."

  similar_brands:

    - "**Studio Raphaël Lutz** — Studio mẹ — chia sẻ cùng custom display typeface (Studiofeixensans) và hệ thống typographic editorial Thụy Sĩ"
    - "**Vitra** — Cùng headline sans-serif cỡ lớn trên nền trắng với ảnh kiến trúc full-bleed và không có tạp âm màu sắc"
    - "**Atelier Bingo** — Editorial broadsheet layout với display type khổng lồ và bảng màu đơn sắc được điểm xuyết bằng các khoảnh khắc accent đơn lẻ"
    - "**Haltbar** — Thẩm mỹ studio branding Thụy Sĩ — đen/trắng thuần túy với một accent điện, components phẳng, không shadow"
    - "**Sagmeister & Walsh** — Typography tỷ lệ poster, ảnh tư liệu full-bleed và kỷ luật màu nhị phân"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-absolute-black: #000000;
          --color-mid-graphite: #333333;
          --color-light-silver: #cccccc;
          --color-hyper-blue: #0000ff;
        
          /* Typography — Font Families */
          --font-studiofeixensans: 'Studiofeixensans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.43;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.22;
          --text-heading: 42px;
          --leading-heading: 1.2;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --text-display: 90px;
          --leading-display: 0.89;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-45: 45px;
          --spacing-50: 50px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 30px;
          --card-padding: 15px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-2xl: 20px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 20px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-hyper-blue-ground: #0000ff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-absolute-black: #000000;
          --color-mid-graphite: #333333;
          --color-light-silver: #cccccc;
          --color-hyper-blue: #0000ff;
        
          /* Typography */
          --font-studiofeixensans: 'Studiofeixensans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.43;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.22;
          --text-heading: 42px;
          --leading-heading: 1.2;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --text-display: 90px;
          --leading-display: 0.89;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-45: 45px;
          --spacing-50: 50px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-2xl: 20px;
        }