graf_lantz___style_reference:
  info: "> Scandinavian atelier trên nền vải linen thô — một nét violet cấp bách giữa căn phòng trắng xương."

  theme: "light"

  info: "Graf Lantz mang phong cách Scandinavian atelier trên vải linen thô: nền trắng xương, một màu violet thương hiệu dùng gần như dấu chấm câu, và ảnh sản phẩm được crop sát đến mức kết cấu vải nỉ trở thành bầu không khí. Trang web thiên về typography và whitespace, với 99% bề mặt achromatic và một bề mặt accent duy nhất dành cho các hành động. Type sử dụng grotesque chặt, hơi condensed (NeueHaasUnica) cho các chức năng tiện ích, trong khi một display face mềm mại hơn, gần như humanist (accessibly) dành cho wordmark và các CTA chính — sự tương phản nằm giữa utility text sắc sảo và display moments ấm áp. Các component mỏng như giấy: không shadow, không elevation stack, border dạng hairline trong khoảng #474747–#212121, và pill-shaped controls với ~50px radius. Mật độ thoải mái đến thoáng đãng; mỗi khung sản phẩm được thiết kế để cảm giác như một vật thể trên kệ trưng bày."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, text inverted trên nền tối. Nền trung tính để mọi thứ khác được gắn lên |"
    info: "| Soft Ash | `#eeeeee` | `--color-soft-ash` | Fill action trung tính nhạt cho button trên nền tối. |"
    info: "| Mist Sage | `#d5e4e8` | `--color-mist-sage` | Thanh thông báo và các vùng thông tin nhẹ nhàng — một teal desaturated mang tính utility, không bao giờ là trang trí |"
    info: "| Graphite | `#474747` | `--color-graphite` | Body text chính, border mặc định, hairline tone chủ đạo. Màu trung tính cấu trúc của hệ thống |"
    info: "| Charcoal | `#212121` | `--color-charcoal` | Heading, divider cho list item, border nhấn mạnh — bước tối màu khi hierarchy cần độ nặng |"
    info: "| Onyx | `#000000` | `--color-onyx` | Body text khi cần độ tương phản tối đa, fill SVG icon, border nặng thỉnh thoảng |"
    info: "| Slate | `#2b2b2b` | `--color-slate` | Navigation border accent và nav text — nằm giữa Graphite và Onyx, dành riêng cho chrome |"
    info: "| Fog | `#7b7b7b` | `--color-fog` | Border tương phản trung bình, control outlines và structural separators. Không dùng làm màu CTA chính |"
    info: "| Indigo Pulse | `#574cd5` | `--color-indigo-pulse` | Nền cho filled CTA button, khoảnh khắc chromatic duy nhất trong hệ thống. Dùng tiết kiệm để hành động trông nổi bật trên trang gần như đơn sắc |"

  tokens___typography:

    neuehaasunicaw1g___grotesque_chủ_lực_cho_navigation__body_copy__list_item__footer__button_và_link__weight_900_dành_riêng_cho_logo_wordmark_và_các_display_moment_nặng_nhất__500_mang_sub_emphasis__400_là_giọng_body_mặc_định_____font_neuehaasunicaw1g:
      - "**Thay thế:** Inter, Neue Haas Grotesk, Söhne"
      - "**Weights:** 400, 500, 900"
      - "**Kích thước:** 12, 14, 16"
      - "**Line height:** 1.0, 1.2, 1.4, 1.5"
      - "**Letter spacing:** normal ở mọi kích thước"
      - "**Vai trò:** Grotesque chủ lực cho navigation, body copy, list item, footer, button và link. Weight 900 dành riêng cho logo wordmark và các display moment nặng nhất; 500 mang sub-emphasis; 400 là giọng body mặc định."

    instrument_sans___sans_thứ_cấp_cho_nav__search_input_và_section_heading__ấm_hơn_và_humanist_hơn_một_chút_so_với_neuehaas___dùng_khi_trang_cần_một_register_thông_tin_mềm_mại_hơn_mà_không_rời_khỏi_bảng_màu_trung_tính_____font_instrument_sans:
      - "**Thay thế:** Inter, Geist, Söhne"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 14, 16, 32"
      - "**Line height:** 1.2"
      - "**Vai trò:** Sans thứ cấp cho nav, search input và section heading. Ấm hơn và humanist hơn một chút so với NeueHaas — dùng khi trang cần một register thông tin mềm mại hơn mà không rời khỏi bảng màu trung tính."

    accessibly___giọng_display_thương_hiệu__dùng_cho_wordmark__graf_lantz__pill_cta__shop_coasters__và_hero_heading__line_height_1_0_và_hình_học_hơi_humanist_khiến_nó_nằm_phía_trên_hệ_thống_thay_vì_bên_trong_____font_accessibly:
      - "**Thay thế:** Söhne Schmal, Neue Haas Grotesk Display, ABC Diatype Mono (display cuts)"
      - "**Weights:** 400"
      - "**Kích thước:** 16, 35"
      - "**Line height:** 1.0"
      - "**Vai trò:** Giọng display/thương hiệu. Dùng cho wordmark 'graf lantz', pill CTA 'SHOP COASTERS' và hero heading. Line-height 1.0 và hình học hơi humanist khiến nó nằm phía trên hệ thống thay vì bên trong."

    source_sans_pro___fallback_phụ___xuất_hiện_một_lần__xem_như_legacy_utility_và_không_đưa_vào_màn_hình_mới_____font_source_sans_pro:
      - "**Thay thế:** Source Sans 3"
      - "**Weights:** 400"
      - "**Kích thước:** 16"
      - "**Line height:** 1.2"
      - "**Vai trò:** Fallback phụ — xuất hiện một lần, xem như legacy/utility và không đưa vào màn hình mới."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| display | 35px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

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

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

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 50px (pill) |"
      info: "| images | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 50px (pill) |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 50-80px"
      - "**Card padding:** 24-28px"
      - "**Element gap:** 15-24px"

  components:

    announcement_bar:
      vai_trò: "Thanh tiện ích toàn trang"

      info: "Dải full-bleed, nền Mist Sage (#d5e4e8), thông điệp một dòng căn giữa. 14px NeueHaasUnicaW1G weight 500, text Charcoal (#212121). Không border, không shadow. Chỉ dùng cho thông tin vận chuyển/khuyến mãi — không bao giờ trang trí."

    primary_navigation_header:
      vai_trò: "Chrome đầu trang"

      info: "Nền trắng, border dưới 1px Slate (#2b2b2b). Logo (accessibly 35px, weight 400) căn trái; nav link (NeueHaasUnicaW1G 14px, weight 500, Charcoal #212121) cụm giữa; search input + account + cart icons căn phải. 28px vertical padding trên hàng link."

    nav_link:
      vai_trò: "Mục tương tác trong top-nav"

      info: "NeueHaasUnicaW1G 14px weight 500, màu Charcoal (#212121), letter-spacing normal. Không underline mặc định; hover hiện underline 1px Charcoal (#212121) ở baseline. Padding 28px vertical, 10px horizontal để có vùng click rộng rãi."

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

      info: "Fill Soft Ash (#eeeeee), không border khi nghỉ, placeholder text Instrument Sans 16px weight 400 màu Fog (#7b7b7b). Search icon căn phải. Bo góc 0px — đây là input UI phẳng, không phải pill."

    pill_display_cta:
      vai_trò: "Nút hành động hero / nổi bật"

      info: "Fill trắng, border 1px Charcoal (#212121), border-radius 50px (full pill). Text: accessibly 16px weight 400, tracked normal, màu Charcoal. 16px vertical / 32px horizontal padding. Nằm trên ảnh sản phẩm, không shadow — chính bức ảnh LÀ elevation."

    filled_brand_cta:
      vai_trò: "Hành động thương mại chính"

      info: "Fill Indigo Pulse (#574cd5), text trắng. NeueHaasUnicaW1G 16px weight 500, tracked normal. border-radius 50px (pill). 15px vertical / 24px horizontal padding. Bề mặt chromatic duy nhất trong hệ thống — xem như một accent duy nhất, không phải bảng màu."

    text_link:
      vai_trò: "Link editorial nội dòng"

      info: "Text Fog (#7b7b7b) khi nghỉ, underline 1px Fog; hover chuyển thành text Charcoal (#212121) và underline Charcoal. 4–5px vertical padding để underline có khoảng cách với dòng chữ."

    body_paragraph:
      vai_trò: "Khối copy dài"

      info: "NeueHaasUnicaW1G 16px weight 400, line-height 1.5, màu Graphite (#474747). 7–8px margin giữa các đoạn. Không thụt lề dòng đầu, không drop cap — nhịp đọc hoàn toàn dựa vào vertical spacing."

    empty___error_state:
      vai_trò: "Màn hình 404 và không có kết quả"

      info: "Cụm dọc căn giữa trên nền trắng. 'Oops!' eyebrow bằng accessibly 16px, headline Instrument Sans 32px weight 500, helper line NeueHaasUnicaW1G 16px Graphite. Theo sau là một pill CTA duy nhất trên ảnh sản phẩm full-bleed. Top margin rộng ~80px để sự vắng mặt có chủ đích."

    product_image_block:
      vai_trò: "Visual hero / khung editorial"

      info: "Ảnh vuông hoặc gần vuông, 0px radius, full-bleed trong cột của nó. Không border, không caption overlay, không badge. Được xử lý như một vật thể trưng bày — khung hình, không phải chrome, định nghĩa cạnh."

    icon_button_account___cart:
      vai_trò: "Control nhỏ gọn trong header"

      info: "Stroke icon 16–20px màu Onyx (#000000), không nền, không border. 10px horizontal padding. Touch target được cung cấp bởi padding, không phải vùng hiển thị."

    list_divider:
      vai_trò: "Dòng phân cách trong list, menu, footer"

      info: "Horizontal rule 1px Charcoal (#212121) ở độ rộng đầy đủ của hàng. Không padding tricks, không double rules — divider là sự kiện thị giác, không phải các hàng."

    footer_link_group:
      vai_trò: "Danh sách cột trong footer"

      info: "Các link xếp chồng NeueHaasUnicaW1G 14px weight 400 màu Graphite, cách nhau bằng divider 1px Charcoal. 15–24px row padding. Không có column header in đậm — nhóm tạo hierarchy thông qua spacing, không phải weight."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng #574cd5 làm nền button filled và không bao giờ dùng làm bề mặt card, border hoặc accent stroke."
      - "Dùng border-radius 50px (pill) cho mọi button và tag; giữ input và image ở 0px radius."
      - "Đặt body text ở NeueHaasUnicaW1G 16px / line-height 1.5, màu #474747, và để white space làm công việc hierarchy."
      - "Để ảnh sản phẩm lấp đầy khung hình ở 0px radius, không overlay, badge hoặc caption chrome."
      - "Chỉ dùng Mist Sage #d5e4e8 trên thanh thông báo — không đưa thêm bề mặt trang trí thứ hai."
      - "Dùng Instrument Sans cho nav và informational heading; dành accessibly cho wordmark và một display moment duy nhất trên mỗi màn hình."
      - "Đặt section gap trong khoảng 50–80px và card padding ở 24–28px; chống lại sự thúc ép thu hẹp."

    không_nên_làm:
      - "Không đưa thêm accent hue — hệ thống chỉ có một màu violet trên trang đơn sắc."
      - "Không thêm drop shadow cho card, button hoặc image; thiết kế cố tình không có shadow."
      - "Không dùng Source Sans Pro trong màn hình mới; nó là legacy và phá vỡ bộ ba NeueHaas/Instrument/accessibly."
      - "Không áp dụng radius từ 1px đến 49px; hệ thống là nhị phân — pill hoặc vuông."
      - "Không đặt violet lên bề mặt có màu; nền duy nhất nó nên nằm trên là #ffffff hoặc ảnh sản phẩm."
      - "Không underline nav link khi nghỉ; underline chỉ xuất hiện khi hover và nằm ở baseline, không phải toàn bộ box."
      - "Không dùng #000000 cho body text khi #212121 hoặc #474747 đã đủ tương phản — dành Onyx cho iconography và các khoảnh khắc nhấn mạnh tối đa."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Nền trang, xung quanh trang sản phẩm, mặt sàn mặc định. |"
    info: "| 2 | Soft Ash Surface | `#eeeeee` | Input fill, ghost button resting state, bề mặt phụ khi trắng trên trắng sẽ biến mất. |"
    info: "| 3 | Sage Wash | `#d5e4e8` | Thanh thông báo và các dải thông tin nhẹ nhàng — bề mặt không phải hành động chromatic duy nhất. |"
    info: "| 4 | Indigo Action | `#574cd5` | Bề mặt hành động thương hiệu — chỉ filled CTA, không bao giờ dùng làm nền cho card hoặc panel. |"

  elevation:

    info: "Elevation cố tình không có. Hệ thống dựa vào flatness, hairline border (1px trong họ #474747–#212121) và white space để tạo hierarchy thay vì shadow. Dấu hiệu depth duy nhất là pill button 50px nằm trên ảnh sản phẩm bên dưới — shadow của pill chính là ảnh sản phẩm, không phải drop shadow."

  imagery:

    info: "Nhiếp ảnh chính là thương hiệu. Tất cả imagery là ảnh sản phẩm high-key trên bề mặt trung tính — crop sát biến kết cấu vải nỉ và sợi thành chủ thể. Khung hình vuông hoặc gần vuông, full-bleed trong cột, không bo góc, không overlay, không context lối sống. Ánh sáng mềm và tự nhiên; bảng màu là các tông trắng desaturated, xám ấm và đôi khi là chút ửng hồng của chính chất liệu (ví dụ: coaster marble pha hồng). Không có illustration, không 3D, không đồ họa trừu tượng. Icons là line icon stroke 1.5–2px tối thiểu màu #000000, monoline, chỉ dùng cho account, cart và search."

  layout:

    info: "Thanh thông báo full-bleed → dải header trắng (max-width 1200px, căn giữa) → top whitespace rộng (~80px) → cột hẹp căn giữa cho editorial/empty state → hàng ảnh sản phẩm full-bleed. Mô hình trang là max-width contained với các section dẫn dắt bằng whitespace thay vì các dải xen kẽ. Navigation là top bar phẳng với hairline border dưới; không sticky behavior, không sidebar, không mega-menu. Template 404/empty là một cụm dọc: eyebrow, headline, helper, sau đó là một ảnh sản phẩm duy nhất mang pill CTA — ảnh làm công việc mà feature grid thường làm."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text primary: #212121 (heading, nhấn mạnh) / #474747 (body)"
    - "text muted: #7b7b7b (link khi nghỉ, helper)"
    - "background: #ffffff (canvas) / #eeeeee (input, soft surface)"
    - "border: #474747 (hairline mặc định) / #212121 (emphasis divider)"
    - "brand accent: #574cd5 (filled CTA only)"
    - "primary action: #574cd5 (filled action)"

    ví_dụ_component_prompts:

    - "Tạo Primary Action Button: nền #574cd5, text #7b7b7b, radius 9999px, compact pill padding. Dùng filled treatment này cho CTA chính."

    - "**Filled Brand CTA** — Fill Indigo Pulse #574cd5, text trắng. NeueHaasUnicaW1G 16px weight 500, tracked normal. 50px radius, 15px vertical / 24px horizontal padding. Không border, không shadow. Dùng làm hành động chromatic duy nhất trên bất kỳ màn hình nào."

    - "**Empty / 404 State** — Canvas trắng, top margin ~80px. Cụm dọc căn giữa: 'Oops!' eyebrow bằng accessibly 16px #474747, headline 'We couldn't find…' Instrument Sans 32px weight 500 #212121, helper line NeueHaasUnicaW1G 16px #474747 line-height 1.5. Theo sau là hàng ảnh sản phẩm full-bleed mang Pill Display CTA."

    - "**Text Link in Body Copy** — Link nội dòng trong body paragraph. Nghỉ: text #7b7b7b với underline 1px #7b7b7b. Hover: text #212121 với underline 1px #212121. 4px vertical padding để underline không chạm vào descender."

  similar_brands:

    - "**MUJI** — Cùng nền trắng xương, hairline chrome, zero elevation, và kỷ luật để một bức ảnh sản phẩm duy nhất gánh vác cả màn hình."
    - "**Mansur Gavriel** — Cùng grid đơn sắc kiềm chế, một bề mặt chromatic duy nhất dành cho thương mại, và crop sản phẩm xử lý vật thể như tác phẩm trưng bày."
    - "**Greats** — Cùng header phẳng với hairline border dưới, nav grotesk chặt 14–16px, và ảnh sản phẩm full-bleed không chrome trang trí."
    - "**Aesop** — Cùng register typographic ấm-trung tính, vertical rhythm rộng rãi, và quy tắc màu sắc chỉ xuất hiện khi có công việc."
    - "**Toast (toa.st)** — Cùng ảnh sản phẩm thiên hướng Scandinavian trên nền linen-tone và một accent một màu dùng gần như dấu chấm câu."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-ash: #eeeeee;
          --color-mist-sage: #d5e4e8;
          --color-graphite: #474747;
          --color-charcoal: #212121;
          --color-onyx: #000000;
          --color-slate: #2b2b2b;
          --color-fog: #7b7b7b;
          --color-indigo-pulse: #574cd5;
        
          /* Typography — Font Families */
          --font-neuehaasunicaw1g: 'NeueHaasUnicaW1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-accessibly: 'accessibly', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-display: 35px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-64: 64px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 50-80px;
          --card-padding: 24-28px;
          --element-gap: 15-24px;
        
          /* Border Radius */
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 50px (pill);
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 50px (pill);
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-soft-ash-surface: #eeeeee;
          --surface-sage-wash: #d5e4e8;
          --surface-indigo-action: #574cd5;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-ash: #eeeeee;
          --color-mist-sage: #d5e4e8;
          --color-graphite: #474747;
          --color-charcoal: #212121;
          --color-onyx: #000000;
          --color-slate: #2b2b2b;
          --color-fog: #7b7b7b;
          --color-indigo-pulse: #574cd5;
        
          /* Typography */
          --font-neuehaasunicaw1g: 'NeueHaasUnicaW1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-accessibly: 'accessibly', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-display: 35px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-64: 64px;
          --spacing-144: 144px;
        
          /* Border Radius */
          --radius-full: 50px;
        }