adam_lippes___style_reference:
  info: "> Monochrome editorial atelier trên nền cream paper — một trang Vogue nơi layout grid, chứ không phải bảng màu, là vật trang trí duy nhất."

  theme: "light"

  info: "Adam Lippes là một monochrome editorial atelier được xây dựng trên nền cream paper (#fefcf8) với typography Optima và ảnh thời trang full-bleed. Giao diện được kiềm chế có chủ đích: không điểm nhấn màu, không gradient trang trí, gần như không có bo góc — tấm ảnh chính là thiết kế. Hình ảnh sản phẩm mang toàn bộ trọng lượng thị giác bên trong một grid năm cột dày đặc; UI chrome lùi về sau những đường kẻ hairline và nav chữ hoa có tracking. Nút bấm là các khối đen tuyền hoặc outline ghost trên nền canvas ấm áp, và sự chuyển tông duy nhất giữa các trang đến từ chính nhiếp ảnh, không bao giờ đến từ UI chroma."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Bone Canvas | `#fefcf8` | `--color-bone-canvas` | Nền trang chính — off-white ấm áp, toàn bộ site nằm trên canvas giống giấy này thay vì trắng tinh |"
    info: "| Press White | `#ffffff` | `--color-press-white` | Bề mặt thay thế cho product card, input field và overlay sắc nét cần tách biệt khỏi Bone Canvas |"
    info: "| Onyx Black | `#000000` | `--color-onyx-black` | Text chính, đường kẻ hairline, nút action đã fill, icon stroke và viền nav. Mực cấu trúc của hệ thống |"
    info: "| Graphite | `#403f3e` | `--color-graphite` | Text phụ và icon color — một màu đen đã làm mềm cho copy ít quan trọng hơn và viền outline button |"
    info: "| Carbon | `#121212` | `--color-carbon` | Màu đen thay thế đậm cho viền button, badge tối và text tương phản cao trên bề mặt trắng khi pure black quá gắt |"
    info: "| Iron | `#1d1d1d` | `--color-iron` | Điểm nhấn viền button — gần như đen dùng cho outline button tinh tế |"
    info: "| Slate | `#2f2f2f` | `--color-slate` | Badge và text phụ — nằm giữa Graphite và Carbon cho label có độ nhấn vừa phải |"
    info: "| Stone | `#4c4c4a` | `--color-stone` | Body text phụ và viền nhẹ — xám thiên ấm kết hợp với cream canvas mà không bị lạnh |"
    info: "| Ash | `#b2b0ae` | `--color-ash` | Nền action trung tính nhạt cho nút trên bề mặt tối. |"

  tokens___typography:

    optima___font_chính_trên_toàn_bộ_ui___nav__nút_bấm__body__heading__các_nét_humanist_và_đường_cong_hình_học_của_optima_mang_vẻ_editorial_luxury_của_thương_hiệu__tỷ_lệ_hẹp_của_nó_giúp_grid_sản_phẩm_5_cột_dày_đặc_thoáng_hơn_mà_không_bị_chật_chội__text_nav_và_button_ở_dạng_uppercase_11_12px_với_tracking_rộng_0_0640em__body_ở_14px__body_link_lớn_hơn_ở_16px__subheading_ở_24px_____font_optima:
      - "**Thay thế:** Avenir Next, Futura PT, hoặc ITC Avant Garde Gothic"
      - "**Weights:** 400"
      - "**Kích cỡ:** 10, 11, 12, 13, 14, 16, 24px"
      - "**Line height:** 1.20–1.50 tùy kích cỡ"
      - "**Letter spacing:** 0.0310em ở cỡ body, 0.0640em trên nav uppercase và button label"
      - "**Vai trò:** Font chính trên toàn bộ UI — nav, nút bấm, body, heading. Các nét humanist và đường cong hình học của Optima mang vẻ editorial luxury của thương hiệu; tỷ lệ hẹp của nó giúp grid sản phẩm 5 cột dày đặc thoáng hơn mà không bị chật chội. Text nav và button ở dạng uppercase 11–12px với tracking rộng (0.0640em); body ở 14px, body/link lớn hơn ở 16px, subheading ở 24px."

    arial___system_fallback_dùng_hạn_chế_cho_button_và_icon_label_khi_optima_không_khả_dụng___không_dùng_làm_font_chính_____font_arial:
      - "**Thay thế:** Helvetica, Inter"
      - "**Weights:** 400"
      - "**Kích cỡ:** 13px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Vai trò:** System fallback dùng hạn chế cho button và icon label khi Optima không khả dụng — không dùng làm font chính."

    gtstandard_m___gtstandard_m___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_gtstandard_m:
      - "**Weights:** 400"
      - "**Kích cỡ:** 16px"
      - "**Line height:** 1.5"
      - "**Vai trò:** GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | 0.31px | `--text-caption` |"
      info: "| body | 14px | 1.4 | 0.43px | `--text-body` |"
      info: "| heading | 24px | 1.2 | 0.74px | `--text-heading` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| pills | 1000px |"
      info: "| badges | 40px |"
      info: "| buttons | 0px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 4px 5px 0px` | `--shadow-sm` |"
      info: "| lg | `rgba(0, 0, 0, 0.15) 0px -8px 24px 0px` | `--shadow-lg` |"

    layout:

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

  components:

    top_navigation_bar:
      vai_trò: "Navigation toàn site với wordmark ở giữa"

      info: "Full-width, nền trắng, viền dưới hairline 1px Onyx Black, shadow rgba(0,0,0,0.05) 0 4px 5px nhẹ. Bên trái: 5 link nav uppercase Optima 11px, weight 400, letter-spacing 0.0640em, màu Onyx Black. Giữa: wordmark ADAM LIPPES bằng Optima, uppercase, tracking 0.0640em, xếp 2 dòng chồng lên. Bên phải: label SEARCH, icon account, icon cart với badge đếm hình tròn. Tổng chiều cao ~60px, z-index fixed."

    filled_action_button___onyx:
      vai_trò: "CTA chính (Shop Now, View All)"

      info: "Nền Onyx Black (#000000) đặc, text Press White (#ffffff), Optima 12px uppercase, letter-spacing 0.0640em, weight 400. Padding 12px 20px. Radius 0px (góc sắc — editorial). Không shadow. Hover: đảo ngược thành nền trắng / viền đen / text đen."

    ghost_button:
      vai_trò: "Action phụ hoặc ít nhấn mạnh"

      info: "Nền trong suốt hoặc Bone Canvas, viền 1px Onyx Black, text Onyx Black, Optima 12px uppercase, letter-spacing 0.0640em. Padding và góc sắc giống variant filled."

    hero_overlay_text_block:
      vai_trò: "Headline + subtext + CTA trên ảnh editorial full-bleed"

      info: "Nằm ở 1/3 bên trái của ảnh full-bleed. Heading bằng Optima 24px, weight 400, Onyx Black, letter-spacing ~0.74px. Subtext bằng Optima 14px, Stone (#4c4c4a). CTA là nút Onyx filled. Căn trái, canh giữa theo chiều dọc so với người mẫu hoặc bố cục."

    product_card:
      vai_trò: "SKU riêng lẻ trong grid sản phẩm 5 cột"

      info: "Nền trắng hoặc trong suốt, không viền, radius 0px. Ảnh sản phẩm trên nền seamless trắng, không khung. Dưới ảnh: tên sản phẩm (vd 'anais top') bằng Optima 14px Onyx Black lowercase, giá căn phải ('€1.470,95') bằng Optima 14px. Bên dưới: swatch màu ngang nhỏ (ô vuông 8×8px với viền 1px Onyx Black, gap 5px). Tùy chọn: đường kẻ hairline gạch chân cho item khuyến mãi. Card padding 16px. Không hover lift — chỉ zoom ảnh nhẹ hoặc gạch chân text."

    category_banner_card:
      vai_trò: "Editorial section promo (Spring Knitwear, Seasonal Dresses)"

      info: "Layout hai cột, mỗi card là ảnh người mẫu crop full-bleed, text overlay ở 1/3 bên trái. Heading bằng Optima 24px Onyx Black. Subtext bằng Optima 14px Stone. CTA là nút Onyx filled. Không viền card hay nền — ảnh chính là card."

    circular_carousel_arrow:
      vai_trò: "Điều khiển phân trang trên grid sản phẩm"

      info: "Hình tròn 24×24px, fill Stone (#b2b0ae), icon mũi tên đen nhỏ ở giữa. Không viền, không shadow. Nằm ở điểm giữa theo chiều dọc của hàng sản phẩm."

    cart_count_badge:
      vai_trò: "Chỉ thị số trên icon cart trong nav"

      info: "Badge hình tròn nhỏ, nền Onyx Black, số trắng bên trong, đường kính ~16px. Góc trên bên phải của icon cart."

    color_swatch:
      vai_trò: "Chỉ thị màu biến thể sản phẩm"

      info: "Ô vuông 8×8px, không radius, viền 1px Onyx Black. Nằm trong hàng ngang dưới product card với gap 5px. Swatch active nhận viền dày hơn hoặc fill bên trong."

    email_signup_bar:
      vai_trò: "Dải quảng cáo footer"

      info: "Full-width, nền Bone Canvas, viền trên hairline 1px Onyx Black. Một dòng: 'Sign up for emails and save 10% on your first purchase' bằng Optima 12–14px Onyx Black căn trái, với icon + (expand) ở ngoài cùng bên phải. Padding dọc 16px."

    text_link:
      vai_trò: "Link inline navigation hoặc action"

      info: "Optima 16px Onyx Black, không gạch chân mặc định, gạch chân khi hover. Lowercase. Dùng cho tên sản phẩm, link footer."

    promo_hairline_rule:
      vai_trò: "Đường phân cách section và điểm nhấn"

      info: "Đường kẻ ngang 1px Onyx Black, dùng để phân cách product card, section header và nav. Đường phân cách cấu trúc chính của hệ thống — thay thế card và box."

  do_s_and_don_ts:

    do:
      - "Dùng Onyx Black (#000000) làm fill duy nhất cho nút action chính; kết hợp với text Press White và Optima 12px uppercase với tracking 0.0640em."
      - "Đặt nền trang là Bone Canvas (#fefcf8), không bao giờ dùng pure white — off-white ấm áp là bản sắc của hệ thống."
      - "Dùng corner radius 0px trên tất cả product card, nút bấm và đường phân cách section; element bo tròn duy nhất là badge (40px) và legacy pill button (1000px)."
      - "Hiển thị nav và button label bằng Optima uppercase ở 11–12px với letter-spacing 0.0640em; tracking này là thứ làm cho giao diện mang phong cách editorial thay vì tiện dụng."
      - "Dùng hairline 1px Onyx Black làm đường phân cách cấu trúc chính thay cho card hay box."
      - "Duy trì grid sản phẩm 5 cột với element gap 10px và card padding 16px; giữ tên sản phẩm lowercase bằng Optima 14px."
      - "Giữ toàn bộ UI chrome phẳng và monochrome; để nhiếp ảnh cung cấp mọi màu sắc và điểm nhấn thị giác."

    don_t:
      - "Không đưa vào bất kỳ màu sắc, gradient hay accent hue nào — hệ thống cố tình 0% sắc màu."
      - "Không dùng góc bo tròn trên product card, category banner hay đường phân cách section — góc sắc là bắt buộc."
      - "Không thêm drop shadow vào product card, nút bấm hay ảnh; shadow chỉ dành cho nav và một promo card."
      - "Không dùng font sans-serif thay thế cho body hay nav; Optima (hoặc Avenir Next thay thế) là giọng thương hiệu."
      - "Không phá vỡ sự đảo ngược cream-on-black; section tối phải là ảnh full-bleed, không bao giờ là khối màu đặc."
      - "Không dùng riêng màu sắc, weight hay kích cỡ để chỉ trạng thái; kết hợp với gạch chân, viền hoặc thay đổi tracking."
      - "Không dùng emoji, icon có màu hay hình minh họa trang trí — iconography duy nhất là glyph đường nét đơn sắc (account, cart, search, arrows)."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Bone Canvas | `#fefcf8` | Nền trang chính — toàn bộ site nằm trên off-white ấm áp này. |"
    info: "| 1 | Press White | `#ffffff` | Nền product card, input field và overlay cần tách biệt sáng hơn một chút so với canvas. |"

  elevation:

    - "**Top navigation bar:** `rgba(0, 0, 0, 0.05) 0px 4px 5px 0px`"
    - "**Promo card:** `rgba(0, 0, 0, 0.15) 0px -8px 24px 0px`"

  imagery:

    info: "Ảnh thời trang editorial chiếm ưu thế trên mọi màn hình. Hero và category banner dùng ảnh người mẫu full-bleed chụp trên nền bê tông, thạch cao hoặc kiến trúc trung tính ấm áp — high-key lighting, crop editorial, khung hình sát vào trang phục. Ảnh grid sản phẩm là ảnh studio clean white-seamless không người mẫu, không bóng, không đạo cụ — chỉ vật thể trên nền trắng. Toàn bộ ảnh được giảm bão hòa về xám ấm, hài hòa với cream canvas. Iconography tối thiểu: icon đường nét đơn sắc cho account, cart, search và mũi tên carousel, không fill màu."

  layout:

    info: "Layout editorial full-bleed không có background container cố định. Navigation là một thanh trắng fixed duy nhất ở trên cùng với viền dưới hairline. Hero là split toàn viewport: ảnh người mẫu lớn bên phải, block text overlay bên trái trên một panel riêng có texture bê tông. Bên dưới, grid sản phẩm 5 cột trải dài toàn bộ chiều rộng trang không có gutter giữa các card — chỉ có hairline rule và metadata sản phẩm. Category banner hai cột tiếp theo (Spring Knitwear, Seasonal Dresses) ở full-width, mỗi banner là một ảnh đơn với text overlay căn trái. Footer là một dải đơn full-width có viền hairline với email signup. Content max-width ~1440px nhưng hero, category banner và grid sản phẩm đều edge-to-edge. Nhịp điệu dọc là compact: 48px giữa các section chính, 10px giữa các hàng metadata, không có whitespace quá lớn."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (Onyx Black)"
    - "background: #fefcf8 (Bone Canvas)"
    - "surface: #ffffff (Press White)"
    - "border: #000000 (Onyx Black, 1px hairline)"
    - "accent: none (không có accent màu trong hệ thống)"
    - "primary action: #000000 (filled action)"

    example_component_prompts:
    - "*Tạo một product card*: ảnh nền seamless trắng full chiều rộng card, không viền, radius 0px. Bên dưới: tên sản phẩm bằng Optima 14px lowercase #000000 căn trái, giá bằng Optima 14px #000000 căn phải, row gap 10px. Bên dưới: hàng swatch màu 8×8px với viền 1px #000000, gap 5px. Tổng card padding 16px. Không shadow, không hover lift."
    - "*Tạo một filled action button*: nền #000000, text #ffffff, Optima 12px uppercase, letter-spacing 0.0640em, weight 400. Padding 12px 20px. Radius 0px. Không shadow."
    - "*Tạo một hero overlay block*: 1/3 bên trái của ảnh editorial full-bleed. Heading bằng Optima 24px #000000 letter-spacing 0.74px. Subtext bằng Optima 14px #4c4c4a. Nút filled #000000 với text uppercase trắng, radius 0px, padding 12px 20px. Canh giữa theo chiều dọc."
    - "*Tạo một category banner card*: ảnh người mẫu crop full-bleed, không viền hay nền. Text overlay ở 1/3 bên trái: heading Optima 24px #000000, subtext Optima 14px #4c4c4a, nút filled #000000 bên dưới. Text canh giữa theo chiều dọc."
    - "*Tạo một top nav bar*: full width, nền #ffffff, viền dưới 1px #000000, shadow rgba(0,0,0,0.05) 0 4px 5px nhẹ. Bên trái: 5 link nav Optima 11px uppercase với tracking 0.0640em, #000000. Giữa: wordmark 'ADAM' / 'LIPPES' xếp chồng bằng Optima uppercase. Bên phải: label 'SEARCH', icon account, icon cart với badge đếm hình tròn nhỏ #000000."

  photography_direction:

    info: "Nhiếp ảnh là một design token. Ảnh hero và category được chụp trên nền bê tông, thạch cao và bề mặt kiến trúc ấm áp với high-key directional lighting. Người mẫu được đóng khung sát vào trang phục — thường từ eo trở lên — với biểu cảm trung tính. Ảnh chỉ có sản phẩm dùng nền seamless trắng không đạo cụ, không bóng, với góc nhìn thẳng hoặc 3/4. Bảng màu nhiếp ảnh tổng thể giảm bão hòa về xám ấm để hài hòa với Bone Canvas (#fefcf8) và không bao giờ đưa vào chroma cạnh tranh. Bất kỳ trang nào xây dựng với hệ thống này phải đặt hàng hoặc chọn ảnh trong register này; layout không thể cứu vãn hệ thống khỏi ảnh sai thương hiệu."

  similar_brands:

    - "**The Row** — Cùng sự kiềm chế monochrome editorial — cream canvas, nav uppercase có tracking, ảnh sản phẩm là màu sắc duy nhất, product card góc sắc."
    - "**Khaite** — Cùng grid sản phẩm 5 cột luxury-fashion, đường chia hairline dày đặc, nút CTA đen tuyền trên nền off-white ấm áp."
    - "**Toteme** — Cùng cách tiếp cận quiet-luxury: nav chrome tối giản, display typography gần serif, ảnh editorial full-bleed với grid sản phẩm monochrome."
    - "**Jil Sander** — Cùng bản sắc minimalist fashion house — wordmark uppercase có tracking, layout product-first, không element UI trang trí, nhiếp ảnh mang thương hiệu."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-canvas: #fefcf8;
          --color-press-white: #ffffff;
          --color-onyx-black: #000000;
          --color-graphite: #403f3e;
          --color-carbon: #121212;
          --color-iron: #1d1d1d;
          --color-slate: #2f2f2f;
          --color-stone: #4c4c4a;
          --color-ash: #b2b0ae;
        
          /* Typography — Font Families */
          --font-optima: 'Optima', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.31px;
          --text-body: 14px;
          --leading-body: 1.4;
          --tracking-body: 0.43px;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --tracking-heading: 0.74px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 40px;
          --radius-full: 1000px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-pills: 1000px;
          --radius-badges: 40px;
          --radius-buttons: 0px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 4px 5px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.15) 0px -8px 24px 0px;
        
          /* Surfaces */
          --surface-bone-canvas: #fefcf8;
          --surface-press-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-canvas: #fefcf8;
          --color-press-white: #ffffff;
          --color-onyx-black: #000000;
          --color-graphite: #403f3e;
          --color-carbon: #121212;
          --color-iron: #1d1d1d;
          --color-slate: #2f2f2f;
          --color-stone: #4c4c4a;
          --color-ash: #b2b0ae;
        
          /* Typography */
          --font-optima: 'Optima', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.31px;
          --text-body: 14px;
          --leading-body: 1.4;
          --tracking-body: 0.43px;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --tracking-heading: 0.74px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 40px;
          --radius-full: 1000px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 4px 5px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.15) 0px -8px 24px 0px;
        }