filling_pieces___style_reference:
  info: "> monochrome fashion editorial"

  theme: "light"

  info: "Filling Pieces vận hành như một editorial thời trang đơn sắc: toàn bộ giao diện là thang xám, nên tiếng nói thương hiệu sống trong nhiếp ảnh và typography, không phải màu sắc. Một custom sans-serif duy nhất (favorit, weight 400/600) đảm nhận mọi nhãn, headline và tên sản phẩm, với tracking cố định -0.04em nén từng glyph vào một editorial lockup chặt chẽ. Display weight 100px là dấu câu duy nhất của hero — nó rất lớn, đặt trực tiếp lên ảnh full-bleed mà không có overlay card hay gradient. Bề mặt giữ ấm và phẳng: viền hairline #e5e7eb 1px, không shadow, không gradient, border-radius 8px được áp dụng đồng nhất cho input và button. Product cards phẳng trên nền canvas warm-gray; grid đọc như một trang tạp chí, không phải tường gạch ecommerce điển hình. Mọi element đều có mặt bằng cách im lặng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Body text, icon, primary action button fill, footer ink — giá trị duy nhất mang cảm giác màu sắc, dùng với độ tương phản tối đa cho mọi affordance tương tác |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt chính cho card, input field, product tile và modal background; chữ trắng trên nền ảnh hero tối |"
    info: "| Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Viền 1px, divider, input outline, card edge — khung xương cấu trúc ngăn cách mọi bề mặt |"
    info: "| Stone | `#efefef` | `--color-stone` | Bề mặt phụ sau product grid, checkout band và footer — màu trung tính ấm nâng trang khỏi nền trắng tinh |"
    info: "| Driftwood | `#bfbfbf` | `--color-driftwood` | Canvas/background tone cho editorial section và product category wall — đủ ấm để phân biệt với trắng lâm sàng |"
    info: "| Slate | `#6b7280` | `--color-slate` | Input border accent, muted helper text, inactive form control |"
    info: "| Ink Wash | `#241f20` | `--color-ink-wash` | Gần đen thay thế với undertone ấm — dùng khi #000000 thuần đọc quá lạnh trên nền canvas warm-gray |"

  tokens___typography:

    favorit___typeface_duy_nhất_cho_mọi_thứ__weight_400_cho_body__nav_và_editorial_caption__weight_600_cho_button__tên_sản_phẩm_và_navigation_label__bộ_ký_tự_thay_thế_custom_ss04_là_một_phần_của_nhận_diện_thương_hiệu___phải_được_bật_____font_favorit:
      - "**Thay thế:** Söhne hoặc Inter (geometric sans-serif gần giống với tracking chặt); General Sans là lựa chọn miễn phí"
      - "**Weights:** 400, 600"
      - "**Cỡ chữ:** 8px, 10px, 11px, 12px, 14px, 16px, 18px, 35px, 50px, 100px"
      - "**Line height:** 0.90–1.78"
      - "**Letter spacing:** -0.04em (áp dụng đồng nhất cho mọi cỡ chữ — tracking âm nén type thành editorial lockup ở mọi tỷ lệ)"
      - "**OpenType features:** `\"ss04\" on`"
      - "**Vai trò:** Typeface duy nhất cho mọi thứ. Weight 400 cho body, nav và editorial caption; weight 600 cho button, tên sản phẩm và navigation label. Bộ ký tự thay thế custom ss04 là một phần của nhận diện thương hiệu — phải được bật."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| body | 14px | 1.5 | -0.04px | `--text-body` |"
      info: "| subheading | 18px | 1.5 | -0.04px | `--text-subheading` |"
      info: "| heading-sm | 35px | 1.2 | -0.04px | `--text-heading-sm` |"
      info: "| heading | 50px | 1 | -0.04px | `--text-heading` |"
      info: "| display | 100px | 0.9 | -0.04px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

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

    border_radius:

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

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 40px"
      - "**Card padding:** 16px"
      - "**Element gap:** 16px"

  components:

    top_navigation_bar:
      vai_trò: "Navigation chính của site"

      info: "Full-width flat bar trên #ffffff, không shadow, viền dưới 1px #e5e7eb. Bên trái: brand wordmark bằng favorit 400, 16px, #000000. Giữa: link ngang (Men, Women, Our World, Rewards) bằng favorit 400, 12–14px, #000000, gap 32px. Bên phải: utility icon (Search, Login, Wishlist, Bag kèm số lượng) bằng favorit 400, 12px, #000000, gap 24–32px. Chiều cao ~60px. Không background fill, không sticky behavior ngoài scroll."

    announcement_bar:
      vai_trò: "Dải quảng cáo toàn site"

      info: "Viền trên + dưới 1px #e5e7eb, chiều cao ~32px, text favorit 400 11–12px căn giữa màu #000000, letter-spacing -0.04em. Background warm-neutral hoặc trắng. Dùng cho thông báo điểm loyalty."

    primary_button_black_filled:
      vai_trò: "Call-to-action chính trên toàn site"

      info: "Background #000000, text #ffffff, favorit 400, 14px, letter-spacing -0.04em, uppercase hoặc sentence case. Border-radius 8px. Padding 12px 32px. Không shadow, không hover color change ngoài làm tối nhẹ. Dùng cho DISCOVER NOW, NEXT và checkout action."

    ghost_button_dark_outline:
      vai_trò: "CTA editorial phụ trên ảnh"

      info: "Background trong suốt, viền 1px #ffffff hoặc #000000 tùy bề mặt. Text #ffffff trên hero tối, #000000 trên nền sáng. Border-radius 8px. Padding 12px 32px. favorit 400, 14px. Dùng cho overlay DISCOVER trên editorial image block."

    product_card:
      vai_trò: "Item trong product grid"

      info: "Flat card trên canvas warm-gray (#bfbfbf). Không border, không shadow, không radius. Ảnh sản phẩm fill card với tỷ lệ ~1:1.2. Góc trên trái: category tag uppercase nhỏ bằng favorit 400, 10–11px, #000000 (ví dụ 'POPULAIR', 'NEW', 'BESTSELLER'). Góc trên phải: wishlist heart icon, 16px, #000000. Dưới ảnh: tên sản phẩm bằng favorit 400, 14px, #000000, tiếp theo là giá bằng favorit 400, 14px, #000000 trên dòng riêng. Không card padding giữa ảnh và text."

    hero_display_block:
      vai_trò: "Hero editorial full-bleed với text overlay"

      info: "Photographic background full-viewport, tông tối. Display text trắng bằng favorit 400, 100px, line-height 0.90, letter-spacing -0.04em, căn giữa. Subhead bằng favorit 400, 16–18px, #ffffff, căn giữa bên dưới. Ghost-button CTA (viền trắng, chữ trắng) căn giữa dưới subhead. Không overlay scrim, không gradient — ảnh là bầu không khí."

    editorial_split_section:
      vai_trò: "Block editorial hai cột"

      info: "Hai cột bằng nhau cạnh nhau, mỗi cột chứa ảnh photographic full-bleed với text overlay. Category label bằng favorit 400, 35–50px, #ffffff, đặt ở góc dưới trái. Ghost-button CTA (viền trắng) phía trên label hoặc ở giữa. Không border giữa các cột, không padding — ảnh chạm cạnh nhau."

    email_capture_input:
      vai_trò: "Input newsletter và form"

      info: "Background #ffffff, viền 1px #6b7280 (focus state chuyển sang #000000). Border-radius 8px. Padding 12px 16px. Placeholder text bằng favorit 400, 14px, #6b7280. Input text bằng favorit 400, 14px, #000000. Full-width trong container của nó."

    category_tag_product_badge:
      vai_trò: "Label trạng thái nhỏ trên product card"

      info: "Không background, không border. Uppercase favorit 400, 10–11px, #000000, letter-spacing -0.04em. Đặt ở góc trên trái của ảnh sản phẩm. Label: POPULAIR, NEW, BESTSELLER, BESTSELLIJER."

    language_selector:
      vai_trò: "Bộ chọn ngôn ngữ trong header"

      info: "Inline text link với flag icon + tên quốc gia bằng favorit 400, 12px, #000000, tiếp theo là dropdown caret. Không border, không background. Dropdown mở danh sách đơn giản các tùy chọn ngôn ngữ."

    wishlist_heart_icon:
      vai_trò: "Nút lưu sản phẩm"

      info: "Heart icon outline 16–20px, stroke #000000, không fill. Đặt ở góc trên phải của product card. Không background, không badge. Fill thành #000000 ở active state."

    modal_overlay_newsletter_popup:
      vai_trò: "Overlay thu thập email"

      info: "Card trắng căn giữa trên nền đen bán trong suốt (rgba(0,0,0,0.5)). Card: background #ffffff, radius 0px, padding 24–32px. Nút Close (×) ở góc trên phải, 16px, #000000. Headline bằng favorit 400, 24–35px, #000000. Email input + primary black filled button xếp chồng. Không shadow trên card."

    footer:
      vai_trò: "Footer toàn site"

      info: "Background #000000 hoặc #ffffff tùy section. Chữ trắng trên nền đen hoặc chữ đen trên nền trắng. Danh sách link nhiều cột bằng favorit 400, 12px, -0.04em. Đường divider 1px #e5e7eb giữa các section. Không logo lớn, không social icon màu."

  do_s_and_don_ts:

    nên_làm:
      - "Áp dụng letter-spacing -0.04em và `\"ss04\"` font-feature-settings cho mọi text element dùng favorit — tracking là thứ làm type mang cảm giác editorial"
      - "Dùng viền 1px #e5e7eb cho mọi separator, input outline và card edge; không bao giờ dùng viền dày hơn hoặc divider màu"
      - "Dùng border-radius 8px cho mọi input và button; dùng 0px cho card, modal và tag — sự tương phản giữa control bo tròn và bề mặt phẳng là signature"
      - "Chỉ dùng cỡ chữ display 100px cho hero headline; kết hợp với line-height 0.90 để type lấp đầy khung hình edge-to-edge"
      - "Để ảnh full-bleed làm background; đặt chữ trắng và ghost button trực tiếp lên ảnh không scrim, gradient hay overlay card"
      - "Dùng #000000 cho mọi primary action button fill và body text; dùng #ffffff chỉ cho bề mặt card và text trên ảnh tối"
      - "Giữ toàn bộ palette achromatic — thương hiệu có chủ đích là thang xám, bất kỳ màu sắc nào xuất hiện sẽ đọc như lỗi"

    không_nên_làm:
      - "Không đưa vào bất kỳ màu nào ngoài thang achromatic — không xanh, lục, đỏ hay brand accent; 1% màu sắc là trần của hệ thống"
      - "Không thêm box-shadow vào card, modal hay button — thiết kế cố tình phẳng và dùng tương phản tông bề mặt để tạo chiều sâu"
      - "Không dùng border-radius khác 8px (input/button) hoặc 0px (mọi thứ khác) — dữ liệu cho thấy không có radius nào khác"
      - "Không dùng font weight ngoài 400 và 600 — không bold, không light, không black weight; favorit tồn tại ở đúng hai giọng này"
      - "Không dùng typeface thứ hai — favorit là font duy nhất trong hệ thống, kể cả cho icon, badge và button"
      - "Không dùng decorative gradient, scrim hay overlay tint trên hero photography — ảnh cần thở xuyên qua text"
      - "Không dùng icon fill màu hoặc iconography nhiều màu — mọi icon chỉ stroke trong #000000 hoặc #ffffff, một màu"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Canvas | `#bfbfbf` | Page background warm-gray hiện phía sau product grid và editorial section |"
    info: "| 1 | Surface | `#efefef` | Bề mặt phụ cho checkout band, footer và content divider |"
    info: "| 2 | Card | `#ffffff` | Product card, modal popup, input field và mọi nội dung nổi |"
    info: "| 3 | Photographic Overlay | `#000000` | Ảnh editorial và hero full-bleed với chữ trắng đặt trực tiếp lên trên |"

  elevation:

    info: "Thiết kế cố tình không có shadow. Chiều sâu được tạo qua tương phản tông bề mặt (#bfbfbf → #efefef → #ffffff) và viền hairline 1px #e5e7eb, không qua box-shadow elevation. Điều này giữ giao diện phẳng và editorial — sản phẩm và ảnh nằm sát canvas mà không nổi lên."

  imagery:

    info: "Nhiếp ảnh là toàn bộ thương hiệu. Ảnh editorial full-bleed chiếm ưu thế trong mọi section — hero block, product background và editorial split panel đều là ảnh không mask. Ảnh có tông ấm, hơi giảm bão hòa và thiên về lifestyle: con người chuyển động trong môi trường thực (Brazil, urban setting, ánh sáng tự nhiên). Ảnh sản phẩm sạch sẽ, căn giữa trên nền warm-gray hoặc trắng, không có lifestyle context — vật thể đứng một mình. Không illustration, không 3D render, không abstract graphic. Icon chỉ outline, một màu, stroke weight 1–1.5px, không bao giờ fill. Tỷ lệ imagery so với UI chrome khoảng 80/20 — giao diện lùi lại để nhiếp ảnh lên tiếng."

  layout:

    info: "Full-width page model không có centered max-width container — section tràn cạnh. Hero là ảnh photographic full-viewport với text overlay căn giữa và một ghost CTA. Product grid là hàng card phẳng 4–5 cột, không gutter giữa các card, nằm trên canvas warm-gray (#bfbfbf). Editorial section xen kẽ dạng hai cột (50/50) với ảnh full-bleed và text overlay. Vertical rhythm dùng section gap 40px không có divider nhìn thấy giữa các section — luồng liền mạch. Navigation là một flat top bar, không sticky. Không sidebar, không mega-menu. Content density rộng rãi và thoáng — mỗi sản phẩm hoặc ảnh editorial có đủ không gian để chiếm lĩnh."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #e5e7eb"
    - "muted text: #6b7280"
    - "canvas/surface: #bfbfbf / #efefef"
    - "primary action: #000000 (filled action)"

    ví_dụ_component_prompts:
    - "Tạo Primary Action Button: background #000000, text #ffffff, radius 9999px, compact pill padding. Dùng filled treatment này cho CTA chính."
    - "Tạo product card: flat card trên canvas #bfbfbf, radius 0px, không shadow. Ảnh sản phẩm tỷ lệ 1:1.2 fill card. Góc trên trái: category tag bằng favorit 400, 10px uppercase, #000000, letter-spacing -0.04em ghi \"NEW\". Góc trên phải: wishlist heart icon, 16px stroke #000000, không fill. Dưới ảnh: tên sản phẩm favorit 400, 14px, #000000, sau đó giá trên dòng mới cùng style."
    - "Tạo email capture input: background #ffffff, viền 1px #6b7280, radius 8px, padding 12px 16px. Placeholder \"Enter your email address\" bằng favorit 400, 14px, #6b7280. Full-width. Khi focus, border chuyển sang #000000."
    - "Tạo editorial split section: hai cột 50% bằng nhau, mỗi cột có ảnh photographic full-bleed. Góc dưới trái mỗi ảnh: category label bằng favorit 400, 50px, #ffffff, line-height 1.00, letter-spacing -0.04em. Ghost button phía trên label: transparent, viền 1px #ffffff, radius 8px, padding 12px 32px, favorit 400 14px #ffffff ghi \"DISCOVER\". Không divider giữa các cột, không padding."
    - "Tạo navigation bar: full-width, background #ffffff, viền dưới 1px #e5e7eb, chiều cao ~60px. Bên trái: brand name \"FILLING PIECES\" bằng favorit 400, 16px, #000000, letter-spacing -0.04em. Giữa: link \"Men\", \"Women\", \"Our World\", \"Rewards\" bằng favorit 400, 14px, #000000, gap 32px. Bên phải: utility icon (Search, Login, Wishlist, Bag) với label bằng favorit 400, 12px, #000000, gap 24px."

  photography_direction:

    info: "Mọi hero và editorial imagery đều full-bleed, không mask và edge-to-edge. Không rounded corner, không drop shadow, không border frame trên ảnh. Product photography dùng background trung tính, hơi ấm (không phải #ffffff thuần) để sản phẩm nằm trong một tông, không phải khoảng không. Lifestyle và editorial photography có tông ấm, ánh sáng tự nhiên và chụp trong môi trường thực — không studio white-cyc backdrop, không product-staging rõ ràng. Brief hình ảnh: ảnh nên trông như do nhiếp ảnh gia thời trang tài liệu chụp, không phải catalog retoucher. Tông da, chất liệu vải và kết cấu đường phố nên đọc tự nhiên không cần color grading nặng."

  type_personality:

    info: "ss04 alternates của favorit là bắt buộc. Bộ ký tự của font bao gồm alternates custom (hiện trong ligature, hình dạng số hoặc chi tiết chữ) giúp phân biệt thương hiệu với bất kỳ system sans-serif nào. Designer dùng substitute như Söhne hoặc Inter vẫn nên bật OpenType alternates nếu có, và không bao giờ chuyển sang humanist hoặc geometric sans có terminal style khác — type phải mang cảm giác engineered, không friendly. Weight 400 đảm nhận phần lớn công việc; weight 600 chỉ xuất hiện cho navigation label và button text. Không italic, không condensed cut, không display variant — chiều biểu cảm duy nhất là size, và size được dùng một cách tiết kiệm."

  similar_brands:

    - "**Acne Studios** — Cùng palette chỉ đơn sắc, custom sans-serif identity và ảnh editorial full-bleed làm thiết bị layout chính"
    - "**COS** — Cùng cách tiếp cận canvas warm-gray (#bfbfbf-range) với flat product card, viền hairline 1px và zero shadow elevation"
    - "**Mr Porter** — Cùng product grid kiểu magazine spread với uppercase category tag, wishlist heart và editorial text-over-photography section block"
    - "**The Row** — Cùng ngôn ngữ luxury kiềm chế: single typeface, tracking chặt, bề mặt achromatic và nhiếp ảnh làm mọi công việc thương hiệu"
    - "**Needles** — Cùng kỷ luật tracking -0.04em chặt chẽ và editorial oversized display headline trên ảnh lifestyle không mask"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-hairline-gray: #e5e7eb;
          --color-stone: #efefef;
          --color-driftwood: #bfbfbf;
          --color-slate: #6b7280;
          --color-ink-wash: #241f20;
        
          /* Typography — Font Families */
          --font-favorit: 'favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.04px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.04px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.04px;
          --text-heading: 50px;
          --leading-heading: 1;
          --tracking-heading: -0.04px;
          --text-display: 100px;
          --leading-display: 0.9;
          --tracking-display: -0.04px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 40px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 8px;
          --radius-modals: 0px;
          --radius-buttons: 8px;
        
          /* Surfaces */
          --surface-canvas: #bfbfbf;
          --surface-surface: #efefef;
          --surface-card: #ffffff;
          --surface-photographic-overlay: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-hairline-gray: #e5e7eb;
          --color-stone: #efefef;
          --color-driftwood: #bfbfbf;
          --color-slate: #6b7280;
          --color-ink-wash: #241f20;
        
          /* Typography */
          --font-favorit: 'favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.04px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.04px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.04px;
          --text-heading: 50px;
          --leading-heading: 1;
          --tracking-heading: -0.04px;
          --text-display: 100px;
          --leading-display: 0.9;
          --tracking-display: -0.04px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-lg: 8px;
        }