ikea___style_reference:
  info: "> showroom Thụy Điển tràn ngập ánh sáng mặt trời, phong cách flat-pack"

  theme: "light"

  info: "Giao diện IKEA mang phong cách một spread editorial tương phản cao: chữ gần như đen trên nền trắng ấm, điểm xuyết các mảng vàng phẳng hoạt động như vùng CTA tích hợp sẵn. Hệ thống được thiết kế cố tình thưa thớt — một sans-serif tùy chỉnh (Noto IKEA) chỉ với hai weight (400 và 700), một border-radius 8px duy nhất cho mọi component, không shadow, không gradient. Sự chặt chẽ này mang tính cấu trúc, không phải minimalism theo trào lưu: letter-spacing âm (-0.029em ở display, -0.027em ở body) khiến ngay cả caption 13px cũng có cảm giác kiến trúc. Cards có kích thước lớn, lấy media làm trung tâm, sắp xếp trong các khối hai cột rộng rãi với lớp phủ text gradient-to-black để đảm bảo dễ đọc. Màu vàng #ffdb00 đảm nhận mọi công việc của giao diện — nó không bao giờ trang trí, nó chỉ kích hoạt."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| IKEA Yellow | `#ffdb00` | `--color-ikea-yellow` | Nền CTA chính, nền card nổi bật, accent panel hero, điểm nhấn màu sắc duy nhất của hệ thống |"
    info: "| Ink Black | `#111111` | `--color-ink-black` | Text chính, body copy, heading, border chủ đạo (851 occurrences), icon strokes |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Nền trang, bề mặt card, nền nav, text button trên nền tối |"
    info: "| Warm White | `#fffefb` | `--color-warm-white` | Biến thể nền hơi ngả trắng cho button và card — ấm hơn pure white một chút, phá vỡ cảm giác kỹ thuật số lạnh lẽo |"
    info: "| Steel Gray | `#818181` | `--color-steel-gray` | Text phụ, border mờ, trạng thái icon bị vô hiệu hóa |"
    info: "| True Black | `#000000` | `--color-true-black` | Nền SVG icon, border input, điểm nhấn true-black khi cần độ tương phản tối đa |"
    info: "| Link Blue | `#0159a3` | `--color-link-blue` | Màu link text, được dùng rộng rãi trong navigation và body links — màu xanh duy nhất trong hệ thống |"
    info: "| Soft Pink | `#ffa6da` | `--color-soft-pink` | Điểm nhấn trang trí không thường xuyên, dùng hạn chế trên một số link hoặc accent khuyến mại |"

  tokens___typography:

    noto_ikea___kiểu_chữ_duy_nhất___biến_thể_noto_tùy_chỉnh_mang_thương_hiệu_ikea__hệ_thống_hai_weight_regular_400__bold_700_là_sự_kiềm_chế_có_chủ_đích__không_italics__không_medium_weight__không_light__headline_700_ở_36_51px_mang_toàn_bộ_giọng_nói_thương_hiệu__body_ở_16px_giữ_trung_tính__letter_spacing_thắt_chặt_khi_kích_thước_tăng__tạo_cho_display_text_một_chất_lượng_nén_chặt__mang_tính_kiến_trúc_____font_noto_ikea:
      - "**Thay thế:** Inter, DM Sans"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 13px, 14px, 16px, 20px, 36px, 51px"
      - "**Line height:** 1.00–1.62"
      - "**Letter spacing:** -0.029em ở 51px display, -0.027em ở heading 20px+"
      - "**OpenType features:** `N/A`"
      - "**Vai trò:** Kiểu chữ duy nhất — biến thể Noto tùy chỉnh mang thương hiệu IKEA. Hệ thống hai weight (regular 400, bold 700) là sự kiềm chế có chủ đích: không italics, không medium weight, không light. Headline 700 ở 36–51px mang toàn bộ giọng nói thương hiệu; body ở 16px giữ trung tính. Letter-spacing thắt chặt khi kích thước tăng, tạo cho display text một chất lượng nén chặt, mang tính kiến trúc."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.4 | — | `--text-caption` |"
      info: "| body | 16px | 1.57 | — | `--text-body` |"
      info: "| subheading | 20px | 1.2 | -0.54px | `--text-subheading` |"
      info: "| heading | 36px | 1.08 | -0.97px | `--text-heading` |"
      info: "| display | 51px | 1 | -1.48px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "8px"

    mật_độ: "thoải mái"

    spacing_scale:

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| images | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| default | 8px |"

    layout:

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

  components:

    top_navigation_bar:
      vai_trò: "Site header"

      info: "Nền trắng, layout flex ngang. Logo IKEA (huy hiệu vàng+xanh) căn trái, text links (Stories, Jobs, Newsroom, Our business) màu Ink Black ở 14px weight 400, cách đều nhau. Border dưới 1px màu trắng/xám nhạt. Không sticky behavior, không có search bar trong chế độ xem này."

    hero_media_card:
      vai_trò: "Card nội dung nổi bật chính"

      info: "Card hình ảnh lớn, chiếm khoảng 2/3 chiều rộng viewport. Chứa ảnh sản phẩm full-bleed. Lớp phủ text ở góc dưới bên trái với nhãn kicker nhỏ (13–14px, trắng) và headline đậm (36–51px, trắng, weight 700, letter-spacing -0.027em). Lớp phủ gradient từ trong suốt đến đen ở phía dưới để đảm bảo dễ đọc text. Border radius 8px. Nút play/pause hình tròn ở góc dưới bên phải với nền tối bán trong suốt."

    yellow_cta_card:
      vai_trò: "Panel hành động chính"

      info: "Nền #ffdb00 đặc, chiếm 1/3 chiều rộng viewport bên cạnh hero media card. Chứa text đen đậm (36–51px, weight 700) như 'Go shopping'. Nút Ink Black hình tròn với icon mũi tên phải màu trắng cho hành động. Border radius 8px. Card này là chữ ký của hệ thống: mặt phẳng vàng + nội dung tối giản + mũi tên = hành động chính không thể nhầm lẫn."

    image_story_card:
      vai_trò: "Card nội dung editorial"

      info: "Media card được dùng trong grid 2 cột. Ảnh phong cách sống hoặc sản phẩm full-bleed. Lớp phủ gradient-to-black ở phía dưới với kicker nhỏ (13px trắng) và headline (20–36px trắng, weight 700). Border radius 8px. Một số biến thể có nền đặc (gradient xám-đen) không có ảnh."

    circular_media_control:
      vai_trò: "Nút play/pause"

      info: "Nút tròn nhỏ (~40px đường kính) với nền Ink Black hoặc tối và icon trắng. Đặt ở góc dưới bên phải của media cards. Border radius 50% (pill/circle). Dùng để chỉ nội dung video hoặc âm thanh."

    arrow_link_button:
      vai_trò: "Hành động điều hướng nội dòng"

      info: "Nút Ink Black hình tròn (~40px) với icon mũi tên phải màu trắng. Kết hợp với text đậm trong Yellow CTA cards. Mũi tên+vòng tròn là một mẫu tương tác lặp đi lặp lại — luôn có nghĩa là 'đi đến' hoặc 'điều hướng'."

    store_selector_footer:
      vai_trò: "Footer tiện ích"

      info: "Footer tối giản bên dưới CTA cards. Chứa nhãn cửa hàng (ví dụ: 'Store: IKEA.es') màu Ink Black ở 14px weight 400, căn phải, với icon chevron-up nhỏ. Padding 8px, radius 8px. Được phân tách khỏi card bằng khoảng cách tinh tế."

    timeline_section_block:
      vai_trò: "Hiển thị lịch sử/năm"

      info: "Section nền trắng với số display lớn (51px+ weight 700, Ink Black). Kèm theo các hàng vòng tròn xanh lá cây trang trí (không thuộc bảng màu chính nhưng được dùng trong ngữ cảnh này). Layout căn trái với padding dọc rộng rãi 80px+. Headlines nằm sát với các con số."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng #ffdb00 cho CTA chính và card accent nổi bật — không bao giờ dùng làm nền cho body text hoặc nội dung thông tin"
      - "Đặt tất cả các góc thành 8px — hệ thống có chính xác một border radius"
      - "Dùng weight 700 cho mọi headline và weight 400 cho mọi body element — không bao giờ thêm medium, semibold, hoặc light weights"
      - "Áp dụng lớp phủ gradient-to-black ở độ mờ 30–60% trên tất cả image cards có chứa text overlays"
      - "Dùng nút mũi tên đen hình tròn (nền Ink Black, mũi tên trắng, radius 8px hoặc 50%) làm affordance 'điều hướng' phổ quát"
      - "Giữ body text ở 16px với line-height 1.57 — IKEA's body line-height rộng rãi, không chặt"
      - "Chỉ dùng #0159a3 cho text links, không bao giờ dùng cho button hoặc nền"

    không_nên_làm:
      - "Không thêm shadow, elevation, hoặc bất kỳ hiệu ứng chiều sâu nào — hệ thống hoàn toàn phẳng"
      - "Không dùng nhiều hơn một border radius — 8px ở mọi nơi, không ngoại lệ"
      - "Không thêm font weights bổ sung (300, 500, 600) — hệ thống nhị phân 400/700 là ràng buộc"
      - "Không đặt body text trực tiếp lên ảnh mà không có lớp phủ gradient"
      - "Không dùng màu xanh #0159a3 làm nền CTA button — nó chỉ dành cho link, không phải hành động"
      - "Không làm mềm letter-spacing — tracking âm mang tính cấu trúc, không phải trang trí"
      - "Không thêm gradient accent hoặc chuyển tiếp màu sắc — hệ thống từ chối tất cả gradient fills trên bề mặt"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền trang cơ bản, top navigation |"
    info: "| 1 | Card Surface | `#ffffff` | Nền card mặc định trên trang trắng |"
    info: "| 2 | Warm White Surface | `#fffefb` | Màu trắng hơi ngả tinh tế cho bề mặt card hoặc button cụ thể |"
    info: "| 3 | Accent Surface | `#ffdb00` | Card nền vàng đặc và hero panels — cấp độ bề mặt cao nhất, đòi hỏi sự chú ý |"

  elevation:

    info: "Hệ thống cố tình sử dụng zero shadows và zero elevation. Tất cả chiều sâu và hệ thống phân cấp được tạo ra thông qua: (1) độ tương phản bề mặt vàng đặc trên nền trắng, (2) image overlays với gradient-to-black, (3) độ tương phản kích thước và weight trong type, và (4) khoảng cách rộng rãi giữa các card. Sự vắng mặt của shadow không phải là một tính năng bị thiếu — đó là tuyên bố trực quan xác định. Mọi thứ đều nằm trên cùng một mặt phẳng, giống như các trang in trên bàn."

  imagery:

    info: "Ảnh sản phẩm và phong cách sống là ngôn ngữ hình ảnh chủ đạo. Cách xử lý: high-key, ánh sáng tự nhiên, nội thất Scandinavia ấm áp với sự chân thực như đang sống — không phải studio trắng. Con người xuất hiện trong các cảnh tương tác với sản phẩm (cầm, lắp ráp, sử dụng). Hình ảnh luôn full-bleed trong card 8px-rounded của chúng, không bao giờ được cắt thành hình dạng hữu cơ. Lớp phủ gradient-to-black xuất hiện ở 30-40% phía dưới của bất kỳ image card nào mang text. Thỉnh thoảng có minh họa phẳng (ví dụ: bản đồ Đức với biểu tượng văn hóa màu teal/xanh lá/xanh dương). Photography mang phong cách editorial tự tin: không có độ bóng của stock-photo, không có color grading quá cách điệu."

  layout:

    info: "Full-bleed với content container căn giữa, giới hạn ở ~1440px. Navigation là một top bar đơn giản, không sticky. Trang được xây dựng từ các section card ngang xếp chồng theo chiều dọc với khoảng cách ~80px. Mẫu hero: split layout — 2/3 media card (hình ảnh) + 1/3 yellow CTA card đặc. Body sections sử dụng grid card 2 cột xen kẽ giữa các khối do hình ảnh dẫn dắt và khối do text dẫn dắt. Mật độ nội dung rộng rãi, không bao giờ chật chội. Cards có kích thước lớn (tối thiểu khoảng 600x400) với internal padding rộng rãi. Một section timeline/lịch sử phá vỡ grid với các chữ số quá khổ. Không có sidebar, không có mega-menu, không có kiến trúc navigation phức tạp."

  agent_prompt_guide:

  quick_color_reference:
    - "Background: #ffffff"
    - "Surface warm: #fffefb"
    - "Primary text: #111111"
    - "Border/divider: #111111"
    - "Accent/CTA: #ffdb00"
    - "Text link: #0159a3"
    - "primary action: #ffdb00 (filled action)"

  example_component_prompts:

    - "**Hero Media Card**: Ảnh sản phẩm full-bleed ở 2/3 chiều rộng trang, radius 8px. Lớp phủ góc dưới bên trái: kicker nhỏ 'A sneak peek!' màu trắng ở 14px weight 400, headline 'IKEA PS 2026 collection' màu trắng ở 51px weight 700, letter-spacing -1.48px. Lớp phủ gradient từ trong suốt đến rgba(0,0,0,0.6) ở 40% phía dưới. Nút play hình tròn góc dưới bên phải: đường kính 40px, nền #111111, icon pause trắng, radius 50%."

    - "**Yellow CTA Card**: Nền #ffdb00 đặc, 1/3 chiều rộng trang, radius 8px, padding 40px. Headline 'Go shopping' màu #111111 ở 51px weight 700, letter-spacing -1.48px. Nút mũi tên hình tròn: đường kính 40px, nền #111111, icon mũi tên phải trắng, đặt ở bên phải hoặc bên dưới headline."

    - "**Image Story Card**: Ảnh editorial full-bleed, radius 8px. Lớp phủ gradient từ trong suốt đến rgba(0,0,0,0.6) ở 35% phía dưới. Kicker trắng 'Market spotlight' ở 13px weight 400. Headline trắng 'Let\'s visit IKEA Germany!' ở 36px weight 700, letter-spacing -0.97px. Padding 20px từ các cạnh card."

    - "**Top Navigation**: Nền trắng, border dưới 1px #ffffff hoặc #f0f0f0. Logo IKEA bên trái. Text links 'Stories', 'Jobs', 'Newsroom', 'Our business' màu #111111 ở 14px weight 400, khoảng cách 24px giữa các mục. Padding dọc 16px."

    - "**Store Footer Strip**: Nền trắng, radius 8px, padding 16px. Text 'Store: IKEA.es' màu #111111 ở 14px weight 400, căn phải. Icon chevron-up nhỏ màu #111111, kích thước 12px."

  signature_design_choices:

    info: "Ba ràng buộc xác định bản sắc hình ảnh của IKEA hơn bất kỳ lựa chọn màu sắc hay font chữ nào: (1) Hệ thống weight nhị phân — 400 hoặc 700, không có gì khác. Điều này loại bỏ 90% quyết định về typography và buộc hệ thống phân cấp chỉ thông qua kích thước. (2) Radius 8px duy nhất — được áp dụng giống hệt nhau cho hero cards, image cards, buttons, inputs, và links. Tính đồng nhất về hình dạng củng cố cảm giác flat-pack, mô-đun. (3) Màu vàng là bề mặt, không phải trang trí — #ffdb00 không bao giờ là border, không bao giờ là text color, không bao giờ là hover tint. Nó là một mặt phẳng đặc mà toàn bộ cards và CTAs được xây dựng trên đó. Sự tương phản giữa một card màu vàng và text đen của nó là khoảnh khắc tác động cao nhất trong toàn bộ hệ thống, và nó được dành riêng cho hành động quan trọng nhất trên mỗi màn hình."

  similar_brands:

    - "**H&M** — Cùng DNA thiết kế Scandinavia — layout phẳng, vàng làm điểm nhấn trên nền trắng, grid card 2 cột, không shadow, và headline sans-serif đậm với tracking chặt"
    - "**LEGO** — Cách tiếp cận primary-color-against-white tương tự với layout card do sản phẩm dẫn dắt, mặc dù LEGO dùng màu đỏ trong khi IKEA dùng màu vàng; cả hai đều là media cards lớn với text overlays"
    - "**Best Buy** — Điểm nhấn thương hiệu vàng trên nền trắng, sans-serif đậm, grid nội dung nổi bật 2 cột với image cards và text overlays — mẫu editorial thương mại điện tử tương đương"
    - "**Craigslist** — Chrome giao diện tối giản, text links xanh, không có yếu tố trang trí — mặc dù IKEA có nhiều hệ thống phân cấp trực quan và media hơn"
    - "**Depot** — Màu thương hiệu đậm (cam so với vàng), homepage dạng card phẳng, khối media lớn, sans-serif tiện dụng — cùng thẩm mỹ bán lẻ chức năng-không-đẹp"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ikea-yellow: #ffdb00;
          --color-ink-black: #111111;
          --color-pure-white: #ffffff;
          --color-warm-white: #fffefb;
          --color-steel-gray: #818181;
          --color-true-black: #000000;
          --color-link-blue: #0159a3;
          --color-soft-pink: #ffa6da;
        
          /* Typography — Font Families */
          --font-noto-ikea: 'Noto IKEA', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.57;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.54px;
          --text-heading: 36px;
          --leading-heading: 1.08;
          --tracking-heading: -0.97px;
          --text-display: 51px;
          --leading-display: 1;
          --tracking-display: -1.48px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-images: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-default: 8px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-card-surface: #ffffff;
          --surface-warm-white-surface: #fffefb;
          --surface-accent-surface: #ffdb00;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ikea-yellow: #ffdb00;
          --color-ink-black: #111111;
          --color-pure-white: #ffffff;
          --color-warm-white: #fffefb;
          --color-steel-gray: #818181;
          --color-true-black: #000000;
          --color-link-blue: #0159a3;
          --color-soft-pink: #ffa6da;
        
          /* Typography */
          --font-noto-ikea: 'Noto IKEA', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.57;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.54px;
          --text-heading: 36px;
          --leading-heading: 1.08;
          --tracking-heading: -0.97px;
          --text-display: 51px;
          --leading-display: 1;
          --tracking-display: -1.48px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
        }