waka_waka___style_reference:
  info: "> poster bảo tàng trên nền giấy xương và mực — kiểu chữ grotesk đen hoành tráng in trên giấy trắng ấm, mọi thứ khác đều lùi về phía sau"

  theme: "light"

  info: "Waka Waka xử lý website của mình như một catalog triển lãm in ấn: nền giấy màu xương ấm áp, một màu mực gần đen, và một typeface grotesk tùy chỉnh được triển khai ở cả kích thước footnote 10px và tỷ lệ hoành tráng 560px. Hệ thống về cơ bản là monoline và đơn sắc — không có điểm nhấn, không có sắc thái phụ, không gradient, và hầu như không có chrome trang trí. Phân cấp thị giác được tạo ra hoàn toàn thông qua trọng lượng typographic, tỷ lệ và khoảng trắng, với chính tên thương hiệu đóng vai trò là công cụ đồ họa chủ đạo trên mọi màn hình. Các component đều phẳng, không viền hoặc viền mảnh (hairline), và mang cảm giác được tuyển chọn hơn là tương tác — trang đọc như một bức tường gallery trưng bày các vật thể và chữ cái khổng lồ, không phải một giao diện phần mềm."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Bone Paper | `#edeae4` | `--color-bone-paper` | Nền trang, mọi bề mặt canvas — trắng ấm mang cảm giác giấy chưa tẩy trắng thay vì trắng kỹ thuật số |"
    info: "| Stone Gray | `#c9c7c4` | `--color-stone-gray` | Bề mặt phụ và neutral ngữ cảnh mờ — xuất hiện trong các cặp tương phản như một lớp sâu hơn bên dưới canvas |"
    info: "| Ink Black | `#28282a` | `--color-ink-black` | Văn bản chính, mọi đường viền, hairline rules, nét icon, và là neo màu sắc duy nhất trong hệ thống — gần đen nhưng pha chút ấm để nằm thoải mái trên nền xương thay vì rung động |"

  tokens___typography:

    waka_sans___một_grotesk_tùy_chỉnh_duy_nhất_dùng_cho_mọi_thứ_từ_caption_10px_đến_display_560px___tracking_dày_đặc_thay_đổi_theo_kích_thước__0_09em_ở_display___0_02em_ở_body_để_chữ_khổng_lồ_khóa_thành_một_khối_dày_đặc_trong_khi_body_text_vẫn_dễ_đọc__line_height_0_80_0_83_ở_kích_thước_display_là_signature__các_ký_tự_xếp_chồng_thành_một_khối_mực_gần_như_đặc____font_waka_sans:
      - "**Thay thế:** Inter (miễn phí) hoặc Söhne (trả phí) — grotesk hiện đại với khẩu độ hẹp tương tự và trọng lượng nét đều"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 10px, 14px, 18px, 24px, 560px"
      - "**Line height:** 0.80, 0.83, 1.00, 1.20, 1.60"
      - "**Letter spacing:** -0.09em ở 560px, -0.03em ở 24px, -0.02em ở 18px"
      - "**Vai trò:** Một grotesk tùy chỉnh duy nhất dùng cho mọi thứ từ caption 10px đến display 560px — tracking dày đặc thay đổi theo kích thước (-0.09em ở display, -0.02em ở body) để chữ khổng lồ khóa thành một khối dày đặc trong khi body text vẫn dễ đọc. line-height 0.80–0.83 ở kích thước display là signature: các ký tự xếp chồng thành một khối mực gần như đặc"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.6 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.2 | -0.36px | `--text-body` |"
      info: "| subheading | 24px | 1 | -0.72px | `--text-subheading` |"
      info: "| display | 560px | 0.8 | -50.4px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 27 | 27px | `--spacing-27` |"

    border_radius:

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

    layout:

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

  components:

    monumental_display_headline:
      vai_trò: "Hero wordmark và section divider"

      info: "Waka Sans weight 700 ở 560px, line-height 0.80, letter-spacing -0.09em, màu #28282a. Dùng cho tên thương hiệu được hiển thị như một phần tử đồ họa khổng lồ duy nhất lấp đầy viewport dọc. Không có phần tử chữ nào khác đạt tới tỷ lệ này — sự tương phản giữa display 560px và caption 10px định nghĩa nhịp điệu thị giác."

    editorial_section_heading:
      vai_trò: "Tiêu đề tỷ lệ trung bình và nhãn danh mục"

      info: "Waka Sans weight 700 ở 24px, line-height 1.0, letter-spacing -0.03em, màu #28282a. Hoạt động như một headline phụ nhẹ nhàng xuất hiện phía trên các khối sản phẩm hoặc lưới ảnh."

    product_image_plate:
      vai_trò: "Container ảnh trong bố cục lưới"

      info: "Ảnh sản phẩm thô trên canvas #edeae4 không viền, không padding, không radius, không shadow. Ảnh được trình bày dưới dạng crop full-bleed ở kích thước ô lưới, nằm trực tiếp trên nền xương để khoảng trắng âm giữa các ảnh trở thành một phần của bố cục."

    hairline_divider:
      vai_trò: "Phân cách section và nội dung"

      info: "Đường kẻ 1px solid #28282a trải dài toàn bộ chiều rộng nội dung. Divider là separator cấu trúc duy nhất trong hệ thống — không có background tint, không shadow, không thủ thuật spacing để phân chia nội dung."

    nav_link:
      vai_trò: "Mục điều hướng trên cùng"

      info: "Waka Sans weight 500 ở 14px, màu #28282a, margin ngang 10px giữa các mục. Không background, không gạch chân, không active state background — navigation đọc như một danh sách từ ngữ yên tĩnh ở lề trên của trang."

    footer_text:
      vai_trò: "Thông tin cuối trang"

      info: "Waka Sans weight 400 ở 10–14px, line-height 1.6, màu #28282a, padding ngang 20px. Khối văn bản nhiều cột ở chân trang phản ánh mật độ của một colophon in ấn."

    outlined_action_border:
      vai_trò: "Cách xử lý element tương tác duy nhất có sẵn"

      info: "Sử dụng #28282a làm viền 1px trên các bề mặt tương tác (có bằng chứng ACTION_BORDER, ACTION_BACKGROUND=0). Đây chỉ là pattern ghost/outlined — không có button được tô màu. Khu vực tương tác được phân định bằng đường viền mảnh (hairline) trên nền xương, không bao giờ bằng màu nền."

    icon_stroke:
      vai_trò: "Mọi biểu tượng"

      info: "Glyph Waka Sans weight 400 hoặc icon stroke đơn giản ở #28282a, kích thước phù hợp với văn bản xung quanh (10–18px). Margin offset 6px. Icon được xử lý như element typographic, không phải minh họa."

    full_bleed_poster_page:
      vai_trò: "Landing page và index page"

      info: "Toàn bộ viewport hoạt động như một bố cục duy nhất: chữ khổng lồ ở trên, lưới ảnh ở giữa, footer ở dưới. Nền #edeae4, không có card container, không có section với màu bề mặt riêng biệt. Bản thân trang là component."

  do_s_and_don_ts:

    do:
      - "Dùng Waka Sans weight 700 ở 560px với line-height 0.80 và letter-spacing -0.09em cho bất kỳ element display hoành tráng nào — đây là lựa chọn dễ nhận biết nhất của hệ thống"
      - "Đặt tất cả background thành #edeae4 và tất cả văn bản, viền, icon thành #28282a — không bao giờ thêm màu thứ hai"
      - "Dùng border-radius 0px trên mọi component bao gồm card, button và image container"
      - "Dùng hairline divider và border 1px #28282a thay vì tương phản background-color để phân cách nội dung"
      - "Đặt letter-spacing dày đặc theo tỷ lệ: -0.09em ở display, -0.03em ở subheading, -0.02em ở body"
      - "Giữ spacing compact: element gap 10px, container padding 20px, section gap 80px"
      - "Để ảnh sản phẩm nằm trực tiếp trên nền xương không khung, không shadow, không radius"

    don_t:
      - "Không thêm bất kỳ màu sắc, gradient hay sắc thái nhấn nào — hệ thống chỉ có hai tông màu"
      - "Không dùng button được tô màu, background màu, hoặc hover state có background-fill trên element tương tác"
      - "Không áp dụng border-radius lớn hơn 0px cho bất kỳ element nào"
      - "Không dùng box-shadow hoặc bất kỳ hiệu ứng elevation nào — bề mặt phẳng"
      - "Không đặt chữ dưới 10px hoặc trên 560px — tỷ lệ có chủ đích và cực đoan"
      - "Không dùng line-height nhẹ (1.5+) ở kích thước display hoặc heading — 0.80–1.00 là bắt buộc để duy trì mật độ"
      - "Không phân cách section bằng các dải màu hoặc background fill — chỉ dùng khoảng trắng và hairline rules"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Bone Paper | `#edeae4` | Canvas nền — toàn bộ bề mặt trang |"
    info: "| 2 | Stone Gray | `#c9c7c4` | Bề mặt ngữ cảnh phụ xuất hiện trong các mối quan hệ tương phản, sâu hơn canvas một chút |"

  elevation:

    info: "Hệ thống cố tình phẳng. Không có shadow, không hiệu ứng elevation, không bề mặt phân lớp. Chiều sâu được truyền tải hoàn toàn thông qua tương phản tỷ lệ typographic, border hairline 1px #28282a và sự sắp xếp các vật thể trên mặt phẳng màu xương."

  imagery:

    info: "Ảnh sản phẩm là nội dung thị giác duy nhất ngoài chữ. Ảnh được trình bày như các nghiên cứu vật thể phong cách tài liệu trên nền xương ấm — đồ nội thất và vật dụng chức năng được chụp chính diện hoặc góc nhẹ, không có bối cảnh lối sống, không có con người, không có dàn dựng môi trường. Mỗi ảnh là một crop chặt chẽ lấp đầy ô lưới từ mép này sang mép kia không có margin, frame hay radius. Ảnh đảm nhận vai trò của một tấm catalog bảo tàng: vật thể CHÍNH LÀ hình ảnh, và giấy xương xung quanh là tường gallery. Không minh họa, không đồ họa trừu tượng, không hình ảnh trang trí. Xử lý màu sắc tự nhiên và hơi bão hòa thấp để vật thể đọc như hiện vật vật lý thay vì quảng cáo."

  layout:

    info: "Max-width 1200px căn giữa trên canvas xương với lề ngoài rộng tạo cảm giác trang in. Trang được tổ chức như một scroll dọc duy nhất gồm các section xếp chồng thay vì dashboard nhiều cột. Hero là một poster editorial full-viewport: wordmark 560px khổng lồ neo ở trên, tiếp theo là lưới ảnh, sau đó là khối chữ hoành tráng thứ hai. Bên dưới hero, các section xen kẽ giữa lưới ảnh sản phẩm (2 cột và bố cục bất đối xứng) và các tuyên bố typographic. Navigation là thanh trên cùng tối giản với chữ nhỏ và gap 10px. Footer là khối văn bản kiểu colophon dày đặc. Nhịp điệu tổng thể là nhịp điệu của một catalog in ấn: một ảnh hoặc tuyên bố chữ đậm, sau đó là không gian thở, rồi đến cái tiếp theo. Grid được sử dụng hạn chế — lưới ảnh 2 cột và bố cục editorial bất đối xứng, không phải ma trận card dày đặc."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "background: #edeae4"
    - "text: #28282a"
    - "border: #28282a"
    - "accent: không có màu nhấn"
    - "primary action: không có màu CTA riêng biệt"

    3_5_prompt_component_mẫu:
    - "*Tạo một hero poster section:* Full-viewport trên nền #edeae4. Headline ở 560px Waka Sans weight 700, màu #28282a, line-height 0.80, letter-spacing -50.4px (-0.09em). Subtitle ở 18px weight 400, màu #28282a, letter-spacing -0.36px. Không button, không trang trí — chữ chính là hero."

    - "*Tạo một product image grid:* Lưới 2 cột với gap 10px trên nền #edeae4. Mỗi ô là một ảnh sản phẩm lấp đầy ô từ mép này sang mép kia với radius 0px, không viền, không padding, không shadow. Caption bên dưới mỗi ảnh ở 10px Waka Sans weight 400, màu #28282a, margin-top 6px."

    - "*Tạo một navigation trên cùng tối giản:* Full-width trên nền #edeae4, padding ngang 20px. Nav items ở Waka Sans weight 500, 14px, màu #28282a, gap ngang 10px giữa các mục. Không background, không viền, không gạch chân khi hover — chỉ là một danh sách từ ngữ yên tĩnh."

    - "*Tạo một section divider:* Full-width 1px solid #28282a hairline rule, không padding, không trang trí margin. Đây là separator cấu trúc duy nhất trong hệ thống."

    - "*Tạo một footer colophon:* Khối văn bản 3 cột ở cuối trang trên nền #edeae4, padding ngang 20px, cách biệt với nội dung phía trên bằng hairline 1px #28282a. Văn bản ở Waka Sans weight 400, 10–14px, line-height 1.6, màu #28282a."

  similar_brands:

    - "**Menu Space** — Cùng bảng màu đơn sắc xương và mực, cùng cách tiếp cận poster editorial, cùng grotesk tùy chỉnh dùng ở tỷ lệ hoành tráng trên nền trắng ấm"
    - "**Areaware** — Cùng cách trình bày sản phẩm kiểu catalog bảo tàng trên neutral canvas ấm, cùng bố cục lưới viền mảnh, không chrome trang trí"
    - "**Hem** — Cùng sự kiềm chế của studio nội thất Scandinavia — một tông nền duy nhất, wordmark khổng lồ làm đồ họa chính, sản phẩm được chụp phẳng trên nền trung tính"
    - "**Coming Soon (studio)** — Cùng hệ thống typographic editorial với grotesk ở tỷ lệ cực đoan, cùng nhịp điệu ấn phẩm in thay vì phân chia kiểu app"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-paper: #edeae4;
          --color-stone-gray: #c9c7c4;
          --color-ink-black: #28282a;
        
          /* Typography — Font Families */
          --font-waka-sans: 'Waka Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 18px;
          --leading-body: 1.2;
          --tracking-body: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: -0.72px;
          --text-display: 560px;
          --leading-display: 0.8;
          --tracking-display: -50.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-27: 27px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-bone-paper: #edeae4;
          --surface-stone-gray: #c9c7c4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-paper: #edeae4;
          --color-stone-gray: #c9c7c4;
          --color-ink-black: #28282a;
        
          /* Typography */
          --font-waka-sans: 'Waka Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 18px;
          --leading-body: 1.2;
          --tracking-body: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: -0.72px;
          --text-display: 560px;
          --leading-display: 0.8;
          --tracking-display: -50.4px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-27: 27px;
        }