platform___style_reference:
  info: "> white cube gallery dưới ánh đèn spotlight"

  theme: "light"

  info: "PLATFORM là một vitrine gallery đơn sắc: nền trắng tinh, chữ đen tuyền, và một giọng typography duy nhất để tác phẩm nghệ thuật mang toàn bộ màu sắc. Giao diện mang phong cách editorial hơn là thương mại — khoảng trống âm bản rộng rãi, đường viền mảnh như sợi tóc, và cỡ body 15px gọn gàng giúp catalog dày đặc mà không cảm giác tiện dụng. Mọi thành phần đều được rút gọn về dạng hình học cốt lõi: không đổ bóng, không bo góc, không gradient trang trí. Trọng lượng thị giác đến từ typography đơn thuần, với cỡ display 72px và line-height 1.00 tiết chế tạo nên nhịp điệu chậm rãi, có chủ đích của một catalog triển lãm in ấn."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Nền trang, bề mặt card, khoảng trống âm bản |"
    info: "| Lamp Black | `#000000` | `--color-lamp-black` | Văn bản chính, viền card và nav, màu link — màu cấu trúc duy nhất trong hệ thống |"
    info: "| Ash Gray | `#dddddd` | `--color-ash-gray` | Đường chia mảnh, phân tách bề mặt tinh tế |"
    info: "| Concrete Gray | `#cccccc` | `--color-concrete-gray` | Viền phụ, đường viền input, trạng thái disabled |"
    info: "| Smoke Gray | `#b3b3b3` | `--color-smoke-gray` | Văn bản trợ giúp mờ, chú thích metadata, label placeholder |"
    info: "| Graphite | `#808080` | `--color-graphite` | Chú thích phụ, timestamp, metadata đã giảm nhấn |"
    info: "| Iron Gray | `#aaaaaa` | `--color-iron-gray` | Chú thích cấp ba, dấu phân cách breadcrumb, chữ nhỏ |"

  tokens___typography:

    mediumllweb___tất_cả_văn_bản_trên_toàn_site___ui__body__và_display__một_font_chữ_neo_grotesque_tùy_chỉnh_duy_nhất_từ_production_type_đảm_nhận_mọi_vai_trò_typographic__weight_400_là_mặc_định_cho_body_và_navigation__weight_500_dành_riêng_cho_tên_nghệ_sĩ__giá_cả__và_điểm_nhấn_trong_metadata_card__cỡ_display_48_72px_dùng_cùng_weight_400_với_line_height_chặt_1_00_1_15_để_tạo_nhịp_điệu_đo_lường__giống_trang_catalog_____font_mediumllweb:
      - "**Thay thế:** Söhne, Inter, Neue Haas Grotesk"
      - "**Weights:** 400, 500"
      - "**Cỡ:** 12px, 15px, 20px, 48px, 72px"
      - "**Line height:** 1.00, 1.15, 1.20"
      - "**Letter spacing:** 0.01em ở 20px trở xuống, 0.02em ở 48px trở lên"
      - "**OpenType features:** `\"tnum\" on để căn chỉnh giá trong metadata card`"
      - "**Vai trò:** Tất cả văn bản trên toàn site — UI, body, và display. Một font chữ neo-grotesque tùy chỉnh duy nhất từ Production Type đảm nhận mọi vai trò typographic. Weight 400 là mặc định cho body và navigation; weight 500 dành riêng cho tên nghệ sĩ, giá cả, và điểm nhấn trong metadata card. Cỡ display (48–72px) dùng cùng weight 400 với line-height chặt (1.00–1.15) để tạo nhịp điệu đo lường, giống trang catalog."

    type_scale:

      info: "| Vai trò | Cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.01px | `--text-caption` |"
      info: "| body-sm | 15px | 1.2 | 0.01px | `--text-body-sm` |"
      info: "| subheading | 20px | 1.15 | 0.01px | `--text-subheading` |"
      info: "| heading | 48px | 1.15 | 0.02px | `--text-heading` |"
      info: "| display | 72px | 1 | 0.02px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      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: "| 13 | 13px | `--spacing-13` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 122 | 122px | `--spacing-122` |"

    border_radius:

      info: "| Thành phần | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 72px"
      - "**Card padding:** 30px"
      - "**Element gap:** 10px"

  components:

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

      info: "Thanh ngang với radius 0px. Bên trái: nhãn 'PLATFORM:' ở cỡ 12px MediumLLWeb 500 uppercase, tiếp theo là các link Shop / Objects / Artists ở 15px weight 400. Bên phải: bộ chọn khu vực (US), icon tài khoản, mục đã lưu, tìm kiếm. Viền dưới 1px solid #000000 ngăn cách nav với nội dung. Padding: 6px dọc, 20–40px ngang."

    hero_spotlight_banner:
      vai_trò: "Tính năng editorial toàn chiều rộng"

      info: "Ảnh chụp tối full-bleed lấp đầy viewport. Văn bản overlay căn giữa: 'SPOTLIGHT:' ở 48px weight 400 tiếp theo là tên nghệ sĩ ở 72px weight 400, cả hai đều #ffffff trên ảnh tối. Văn bản phụ ở 15px căn giữa bên dưới, cùng link '› Explore now'. Không button, không card chrome — thuần chữ trên ảnh."

    section_header_band:
      vai_trò: "Khối giới thiệu khu vực"

      info: "Thanh ngang với nền #dddddd hoặc viền mảnh. Cột trái: tiêu đề section ở 12px 500 uppercase tracking 0.02em. Giữa: đoạn mô tả ở 15px weight 400. Phải: link văn bản '› Browse artworks'. Viền dưới 1px #000000 ngăn cách band với grid nội dung."

    artwork_card:
      vai_trò: "Danh sách tác phẩm riêng lẻ"

      info: "Card dọc với radius 0px và không đổ bóng. Viền 1px #000000. Ảnh tác phẩm lấp đầy chiều rộng card với tỷ lệ khung hình 1:1 hoặc 3:4. Bên dưới ảnh: tên nghệ sĩ ở 12px 500 uppercase căn giữa, tiêu đề tác phẩm và năm ở 15px 400, mô tả chất liệu ở 15px 400, và giá ở 12px 500 — tất cả căn giữa. Một icon nhỏ hình sao/lưu nằm ở dưới cùng. Card padding: ~20px bên dưới ảnh."

    artwork_grid:
      vai_trò: "Bố cục bộ sưu tập catalog"

      info: "Grid 4 cột trên desktop, 2 cột trên tablet, 1 cột trên mobile. Các cột có chiều rộng bằng nhau với gutter 20–30px. Mỗi card chiếm một ô grid với tỷ lệ ảnh-văn bản nhất quán trên toàn hàng."

    text_link:
      vai_trò: "Điều hướng nội dòng và call-to-action"

      info: "Văn bản #000000 gạch chân đơn giản ở 15px weight 400. Ký tự chevron '›' dẫn đầu cho các link định hướng như 'Explore now', 'Browse artworks', 'View all'. Không nền button, không đổi màu khi hover — gạch chân dày lên hoặc weight chuyển sang 500."

    ghost_icon_button:
      vai_trò: "Hành động tiện ích trong nav và card"

      info: "Button chỉ icon với radius 0px, không nền, không viền. Dùng nét vẽ/fill #000000 cho các icon tài khoản, mục đã lưu, tìm kiếm, và lưu vào bộ sưu tập. Padding 4–6px xung quanh icon."

    body_text_block:
      vai_trò: "Đoạn văn editorial và mô tả"

      info: "15px MediumLLWeb weight 400 ở line-height 1.20. Màu #000000 trên nền #ffffff. Max-width ~640px để dễ đọc. Dùng cho mô tả tính năng, tiểu sử nghệ sĩ, và giới thiệu khu vực."

    metadata_caption:
      vai_trò: "Nghệ sĩ, tiêu đề, năm, chất liệu, giá"

      info: "Stack căn giữa bên dưới mỗi tác phẩm: tên nghệ sĩ ở 12px 500 uppercase, tiêu đề và năm ở 15px 400, giá ở 12px 500. Tabular numerals được bật để căn chỉnh giá. Tất cả #000000."

    footer:
      vai_trò: "Footer site với link và thông tin"

      info: "Viền trên 1px #000000, nền #ffffff. Danh sách link nhiều cột ở 15px weight 400, nhóm theo danh mục. Hàng dưới cùng: bản quyền và link pháp lý ở 12px. Phẳng, không trang trí."

    search_input:
      vai_trò: "Trường tìm kiếm trong nav"

      info: "Nền trong suốt, chỉ viền dưới 1px #000000 (không có khung đầy đủ). Văn bản placeholder ở 15px màu #b3b3b3. Không border-radius. Icon tìm kiếm nội dòng ở bên phải."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng #000000 cho tất cả văn bản, viền, và thành phần tương tác — không bao giờ đưa màu sắc vào UI"
      - "Đặt tất cả border-radius thành 0px trên button, card, input, badge, và tag — góc sắc là dấu ấn đặc trưng"
      - "Đặt MediumLLWeb 400 làm weight mặc định cho tất cả văn bản body và heading; chỉ dùng 500 cho label, tên nghệ sĩ, và giá"
      - "Dùng viền 1px #000000 cho đường viền card, phân cách nav, và divider section — không bao giờ dày hơn"
      - "Giữ type scale ở năm cỡ: 12, 15, 20, 48, 72px — không thêm các bước trung gian"
      - "Dùng tabular numerals (tnum) cho tất cả giá và metadata số để đảm bảo căn chỉnh cột trong card grid"
      - "Duy trì max-width ~1280px với lề rộng hai bên để catalog có không gian thở như tường gallery"

    không_nên_làm:
      - "Không bo góc bất kỳ thành phần nào — thẩm mỹ góc sắc là yếu tố chịu lực cho bản sắc gallery"
      - "Không thêm đổ bóng, phát sáng, hoặc hiệu ứng làm mờ — chiều sâu đến từ viền và chuyển màu band"
      - "Không dùng màu để phân cấp — chỉ dựa vào weight (400 vs 500) và cỡ (12–72px)"
      - "Không dùng nền gradient, dù là tinh tế — hệ thống hoàn toàn nhị phân đen/trắng"
      - "Không dùng cỡ body 13–17px — cỡ 15px compact ở line-height 1.20 là nhịp điệu có chủ đích"
      - "Không căn giữa body copy bên trong card ngoài metadata — văn bản dài nên căn trái với measure ~640px"
      - "Không thêm badge, tag, hoặc pill màu sắc — label là văn bản uppercase 12px 500 đơn thuần"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Bone White | `#ffffff` | Canvas trang cơ bản và nền card |"
    info: "| 2 | Ash Gray | `#dddddd` | Màu nền tinh tế cho zone band và divider |"

  elevation:

    info: "Design system cố tình tránh đổ bóng. Mọi chiều sâu và phân tách đều đạt được thông qua viền mảnh 1px màu #000000 hoặc #dddddd, cùng với chuyển màu nền giữa trắng và xám nhạt. Không có hiệu ứng nổi, không làm mờ, không có trục z — giao diện đọc như một trang in phẳng được ghim lên tường."

  imagery:

    info: "Hình ảnh hoàn toàn là fine-art photography: tranh vẽ, tác phẩm điêu khắc, và tác phẩm đa chất liệu được trình bày dưới dạng crop sản phẩm trực tiếp trên nền trắng. Không có bối cảnh lối sống, không ảnh phòng dàn dựng, không người mẫu tương tác với tác phẩm. Mỗi tác phẩm lấp đầy khung card edge-to-edge, được xử lý như một vật thể quý giá được cô lập để kiểm tra. Ảnh hero là ảnh chụp không khí full-bleed — tối, hơi mờ, với ánh sáng ấn tượng — hoạt động như một yếu tố tạo tâm trạng editorial hơn là ảnh sản phẩm. Không có minh họa, không icon ngoài glyph chức năng tối thiểu, không đồ họa trang trí."

  layout:

    info: "Section hero full-bleed với overlay type căn giữa, tiếp theo là header zone-band màu xám giới thiệu mỗi section nội dung, sau đó là grid card 4 cột của các tác phẩm. Trang được giới hạn trong max-width ~1280px cho card grid và khối văn bản, nhưng hero và section band trải dài edge-to-edge. Nhịp điệu section nhất quán: mỗi zone mở đầu bằng header band viền mảnh (nền xám, label căn trái, mô tả căn giữa, link căn phải), tiếp theo là card grid. Navigation là thanh trên cùng tối giản không có sticky behavior. Không sidebar, không breadcrumb trong luồng chính — bố cục hoàn toàn dọc: nav → hero → zone band → grid → zone band → grid → footer."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "muted text: #b3b3b3"
    - "divider: #dddddd"
    - "primary action: không có màu CTA riêng biệt"

    3_5_ví_dụ_component_prompts:

    - "*Artwork Card*: radius 0px, viền 1px solid #000000, không đổ bóng. Ảnh tác phẩm lấp đầy chiều rộng card edge-to-edge. Bên dưới: tên nghệ sĩ căn giữa ở 12px MediumLLWeb weight 500 uppercase, tiêu đề và năm ở 15px weight 400, chất liệu ở 15px weight 400, giá ở 12px weight 500. Tất cả văn bản #000000 trên nền #ffffff. 20px padding bên dưới ảnh."

    - "*Hero Spotlight Banner*: Ảnh chụp tối full-bleed, 100vh. Overlay căn giữa: 'SPOTLIGHT:' ở 48px MediumLLWeb 400 #ffffff, tên nghệ sĩ ở 72px weight 400 #ffffff, line-height 1.00, letter-spacing 0.02em. Bên dưới: văn bản phụ mô tả 15px #ffffff, sau đó link văn bản '› Explore now'."

    - "*Section Header Band*: Nền #dddddd, viền dưới 1px solid #000000. Trái: label section ở 12px weight 500 uppercase. Giữa: mô tả ở 15px weight 400. Phải: link văn bản gạch chân '› Browse all' ở 15px weight 400. 20px padding dọc."

    - "*Artwork Grid*: 4 cột bằng nhau, gap 24px, max-width 1280px căn giữa. Mỗi ô là một Artwork Card. Grid nằm ngay dưới Section Header Band, không có khoảng cách thêm."

    - "*Top Navigation*: radius 0px, nền #ffffff, viền dưới 1px solid #000000. Trái: 'PLATFORM:' ở 12px weight 500 uppercase. Nav links (Shop, Objects, Artists) ở 15px weight 400 #000000. Phải: bộ chọn khu vực và icon button (tài khoản, đã lưu, tìm kiếm) dưới dạng ghost button 0px. 6px padding dọc."

  similar_brands:

    - "**David Zwirner** — Cùng cách tiếp cận gallery-catalogue đơn sắc với canvas trắng, chữ đen, và tác phẩm được trình bày dưới dạng crop sản phẩm không khung trong grid dày đặc"
    - "**Hauser & Wirth** — Thẩm mỹ art-world editorial với viền mảnh, không đổ bóng, góc sắc, và một font chữ neo-grotesque duy nhất đảm nhận toàn bộ phân cấp"
    - "**The MoMA Store** — Bố cục bán lẻ nghệ thuật tối giản với stack metadata căn giữa bên dưới mỗi tác phẩm, viền card đen 1px, và không có chrome trang trí"
    - "**Pace Gallery** — Ảnh hero tối full-bleed, hệ thống đen-trắng tiết chế, và body type gọn nhẹ để tác phẩm catalog chiếm ưu thế"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-white: #ffffff;
          --color-lamp-black: #000000;
          --color-ash-gray: #dddddd;
          --color-concrete-gray: #cccccc;
          --color-smoke-gray: #b3b3b3;
          --color-graphite: #808080;
          --color-iron-gray: #aaaaaa;
        
          /* Typography — Font Families */
          --font-mediumllweb: 'MediumLLWeb', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.01px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.01px;
          --text-subheading: 20px;
          --leading-subheading: 1.15;
          --tracking-subheading: 0.01px;
          --text-heading: 48px;
          --leading-heading: 1.15;
          --tracking-heading: 0.02px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: 0.02px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-72: 72px;
          --spacing-122: 122px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 72px;
          --card-padding: 30px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-bone-white: #ffffff;
          --surface-ash-gray: #dddddd;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-white: #ffffff;
          --color-lamp-black: #000000;
          --color-ash-gray: #dddddd;
          --color-concrete-gray: #cccccc;
          --color-smoke-gray: #b3b3b3;
          --color-graphite: #808080;
          --color-iron-gray: #aaaaaa;
        
          /* Typography */
          --font-mediumllweb: 'MediumLLWeb', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.01px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.01px;
          --text-subheading: 20px;
          --leading-subheading: 1.15;
          --tracking-subheading: 0.01px;
          --text-heading: 48px;
          --leading-heading: 1.15;
          --tracking-heading: 0.02px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: 0.02px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-72: 72px;
          --spacing-122: 122px;
        }