koox___style_reference:
  info: "> Phòng thí nghiệm ép lạnh phong cách Brutalist — gạch men trắng, in sticker, giọng điệu stencil."

  theme: "light"

  info: "Koox là một phòng thí nghiệm ép lạnh phong cách Brutalist, nơi gạch subway trắng kết hợp với ảnh sản phẩm và typography stencil mạnh mẽ. Thương hiệu sử dụng headline in hoa tự tin, tracking rộng ngang trang, viền màu cam như vữa gạch bao quanh mọi bề mặt như một bức tường ốp gạch, và bảng màu apothecary xanh đậm được neo bởi một bóng đổ burgundy lệch cứng duy nhất, khiến mọi nút bấm trông như một sticker in lụa. Các trang luôn sáng và sạch sẽ — canvas trắng, chữ gần đen, đường kẻ mảnh — với màu sắc chỉ dành cho các điểm nhấn chức năng: khung cam, CTA xanh đậm, bóng đổ burgundy. Kết quả là ồn ào nhưng có kỷ luật, giống như một quán nước ép do một nhà in thiết kế."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Tile Grout | `#d25a24` | `--color-tile-grout` | Viền thương hiệu và link accent — nét vẽ màu cam như vữa gạch bao quanh card, link và cạnh section, mang hơi ấm của gốm nung lên canvas trắng sạch sẽ |"
    info: "| Cold-Press Green | `#113722` | `--color-cold-press-green` | Màu nền action chính — xanh thực vật đậm cho nút CTA dạng filled, footer band và nền nút danh mục, báo hiệu sản phẩm bên trong mà không cần dùng đến tông xanh của ảnh đồ ăn |"
    info: "| Sticker Crimson | `#6b1229` | `--color-sticker-crimson` | Bóng đổ lệch cứng — burgundy đậm tạo bóng đổ 5px không blur dưới sticker và nút được nhấn mạnh, biến các element phẳng thành các lớp in lụa dán lên trang |"
    info: "| Noir | `#000000` | `--color-noir` | Navigation, body text và màu viền mặc định — màu đen cứng rắn cho mọi đoạn văn, icon stroke và card hairline |"
    info: "| Glacial White | `#ffffff` | `--color-glacial-white` | Canvas trang, bề mặt card và chữ đảo màu trên nav tối và CTA xanh — gạch men trắng của toàn bộ hệ thống |"
    info: "| Ash | `#efefef` | `--color-ash` | Viền card nhẹ và nền mờ — vữa xám giữa các bề mặt trắng, dùng cho hairline divider và khung card lõm |"
    info: "| Char | `#232323` | `--color-char` | Màu heading và accent bề mặt đậm — tông gần đen cho display text nặng nhất và các band tối không thường xuyên |"
    info: "| Concrete | `#cccccc` | `--color-concrete` | Viền utility xám trung tính và body text mờ — divider nhẹ hơn khi màu đen quá ồn |"
    info: "| Fog | `#d7d7d7` | `--color-fog` | Viền input field — đường viền trạng thái nghỉ trung tính cho form field |"
    info: "| Slate | `#646464` | `--color-slate` | Input text và icon fill — xám phụ đảm bảo độ rõ cho form label và chi tiết icon nhỏ |"
    info: "| Pewter | `#808080` | `--color-pewter` | Viền và text trang trí ít nhấn mạnh — hiếm khi dùng, xuất hiện trên UI mark cấp ba |"

  tokens___typography:

    helvetica___tất_cả_ui_và_editorial_text__việc_chọn_helvetica_hệ_thống_là_có_chủ_đích___nó_đọc_như_stencil_nhãn_phòng_thí_nghiệm__không_phải_sự_tinh_tế_của_serif_thời_trang__headline_weight_900_hét_to_ở_40_48px_in_hoa_với_tracking_dương__weight_400_500_đảm_nhận_body_copy_ở_14_18px__không_có_display_face_tùy_chỉnh__bản_thân_hệ_thống_đã_là_thương_hiệu_____font_helvetica:
      - "**Thay thế:** Helvetica, Arial, Inter (dùng thay thế chức năng nếu không có Helvetica)"
      - "**Weights:** 400, 500, 600, 700, 900"
      - "**Cỡ chữ:** 14, 16, 18, 20, 24, 26, 30, 32, 40, 46, 48"
      - "**Line height:** 0.70-2.50 (tight cho display, thoáng cho body)"
      - "**Letter spacing:** 0.0080em, 0.0120em, 0.0160em, 0.0180em, 0.0200em, 0.0500em"
      - "**Vai trò:** Tất cả UI và editorial text. Việc chọn Helvetica hệ thống là có chủ đích — nó đọc như stencil nhãn phòng thí nghiệm, không phải sự tinh tế của serif thời trang. Headline weight 900 hét to ở 40-48px in hoa với tracking dương, weight 400-500 đảm nhận body copy ở 14-18px. Không có display face tùy chỉnh: bản thân hệ thống đã là thương hiệu."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.38 | 0.7px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | 0.26px | `--text-body-sm` |"
      info: "| body | 18px | 1.57 | 0.29px | `--text-body` |"
      info: "| subheading | 24px | 1.44 | 0.48px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.3 | 0.6px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | 0.64px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.1 | 0.8px | `--text-heading-lg` |"
      info: "| display | 48px | 1 | 0.96px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 228 | 228px | `--spacing-228` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|--------|"
      info: "| tags | 5px |"
      info: "| cards | 5px |"
      info: "| buttons | 5px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(107, 18, 41) 5px 5px 0px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40-60px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    top_navigation_bar:
      vai_trò: "Site navigation cố định"

      info: "Nền #000000 solid, full bleed. Wordmark 'KOOX' màu trắng căn trái ở 26px weight 700 uppercase. Cụm nav items ở giữa (HOME, JUICE SHOP, CLEANSE, ABOUT US, CONTACT, BECOME A STOCKIST) ở 14px weight 600 uppercase, #ffffff, letter-spacing 0.7px. Icon giỏ hàng căn phải với badge đếm hình tròn màu trắng. Vertical padding 20px."

    hero_image_section:
      vai_trò: "Tuyên ngôn thương hiệu và sản phẩm ở màn hình đầu tiên"

      info: "Ảnh sản phẩm full-bleed (chai nước ép xếp trên gạch subway trắng) với lớp phủ tối. Headline overlay in hoa căn giữa ở 48px weight 900 #ffffff, letter-spacing 0.96px, line-height 1.0, xếp ba dòng. Star rating '4.8★' ở 32px weight 700 bên dưới headline. Reviews caption ở 16px weight 400. Nút CTA neo bên dưới."

    primary_cta_button_filled_green:
      vai_trò: "Action chuyển đổi chính"

      info: "Nền #113722 filled, 5px radius, 11px vertical và 15px horizontal padding. Text #ffffff, 14px weight 600 uppercase, letter-spacing 0.7px. Nằm phẳng trên bề mặt trắng, không có shadow mặc định."

    sticker_button_burgundy_shadow:
      vai_trò: "Action được nhấn mạnh với offset in lụa"

      info: "Nền #113722 filled, 5px radius, 11px/15px padding, text trắng uppercase ở 14px weight 600. Bóng đổ lệch cứng đặc trưng: rgb(107, 18, 41) 5px 5px 0px 0px — không blur, tạo hiệu ứng sticker in. Dùng cho hero CTA và link ưu tiên cao."

    ghost___outline_button:
      vai_trò: "Action phụ"

      info: "Nền trong suốt hoặc #ffffff với viền 1px #000000 hoặc #d25a24, 5px radius. Text trắng hoặc đen uppercase ở 14px weight 600. Không shadow."

    marquee_quality_bar:
      vai_trò: "Băng chạy lặp lại các thuộc tính thương hiệu"

      info: "Band #ffffff full-bleed, 20px vertical padding. Một dòng text uppercase ở 18px weight 700 #000000, các mục cách nhau bằng dấu '|'. Lặp lại theo chiều ngang. Ví dụ: '100% ORGANIC | 100% COLD-PRESSED | 100% RAW | 0% ADDITIVES | 0% PASTEURISATION | 0% HPP'."

    category_tile_card:
      vai_trò: "Điểm vào danh mục sản phẩm"

      info: "Card ảnh sản phẩm hình vuông lấp đầy ô grid. Không padding — ảnh tràn ra mép. Nhãn danh mục lớn màu trắng uppercase overlay ở giữa dưới của ảnh, 32px weight 700, letter-spacing 0.64px. 5px radius. Các card được bao quanh bởi divider hairline 1px #000000 để tái tạo hiệu ứng vữa gạch."

    star_rating_display:
      vai_trò: "Component bằng chứng xã hội inline"

      info: "Giá trị số lớn (ví dụ '4.8') ở 32px weight 700 #ffffff, kết hợp với glyph ngôi sao solid. Caption hỗ trợ bên dưới ở 14px weight 400 #ffffff. Nằm trên lớp phủ hero."

    bordered_link:
      vai_trò: "Link text inline hoặc nav có khung"

      info: "Text hoặc block được bọc trong viền 1-2px #d25a24, 5px radius, 10px-15px padding. Link text #d25a24 weight 600 uppercase. Có thể thêm offset shadow với #6b1229 để nâng lên trạng thái sticker."

    hairline_divider:
      vai_trò: "Separator section và grid"

      info: "Đường 1px solid #000000 hoặc #efefef trải dài toàn bộ chiều rộng hoặc một cột. Grid được xây dựng từ các đường này — chúng tạo thành viền gạch trực quan giữ toàn bộ hệ thống lại với nhau."

    footer_band:
      vai_trò: "Footer site với thông điệp quảng cáo"

      info: "Band xanh đậm #113722 full-bleed, ~60px vertical padding. Thông điệp uppercase căn giữa ở 18-24px weight 700 #ffffff, letter-spacing 0.48-0.6px. Hoạt động như một CTA lặp lại gần cuối trang."

    form_input:
      vai_trò: "Input text cho form"

      info: "Viền 1px #d7d7d7, 5px radius, 11px vertical và 15px horizontal padding. Text #646464 ở 14-16px weight 400. Không nền mặc định."

    organic_certification_mark:
      vai_trò: "Huy hiệu tin cậy"

      info: "Huy hiệu hình tròn có viền #000000, text uppercase 14px bao quanh chu vi, icon trung tâm. Đặt ở góc dưới bên phải của footer hoặc nổi trên ảnh sản phẩm."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Helvetica weight 900 cho mọi display headline ở 40-48px, tất cả uppercase, với letter-spacing dương từ 0.8px đến 0.96px"
      - "Đóng khung card, link và category tile bằng viền 1-2px #d25a24 (Tile Grout) và 5px radius để củng cố ngôn ngữ gạch subway"
      - "Chỉ áp dụng bóng đổ lệch #6b1229 (5px 5px 0px 0px, zero blur) cho sticker-style button và link được nhấn mạnh — không bao giờ dùng nó như elevation chung"
      - "Giữ canvas trang ở #ffffff và dành #113722 cho CTA filled và footer band"
      - "Đặt card padding là 20px và element gap là 20px để tạo nhịp điệu gạch nhất quán"
      - "Dùng pattern marquee bar (uppercase, weight 700, pipe-separated) cho các tuyên bố thuộc tính thương hiệu lặp lại"
      - "Chỉ dùng màu xanh #113722 làm nền cho action chính và footer; không dùng nó cho text hoặc icon"

    không_nên_làm:
      - "Không dùng negative letter-spacing — giọng điệu thương hiệu phụ thuộc vào tracking dương giúp text có không gian để hét to"
      - "Không áp dụng soft drop shadow, blur hoặc multi-layer elevation stack; elevation chỉ một màu và một offset"
      - "Không thêm các sắc thái thương hiệu khác ngoài Tile Grout cam, Cold-Press xanh và Sticker crimson"
      - "Không dùng border radius 6px+ hoặc nút hình pill — 5px là độ mềm tối đa trong hệ thống này"
      - "Không đặt body text bằng bất kỳ thứ gì ngoài Helvetica weight 400-500; weight 700+ chỉ dành cho display, navigation và marquee"
      - "Không đặt text sáng trên nền trắng hoặc text tối trên band xanh đậm mà không kiểm tra độ tương phản AAA"
      - "Không dùng #6b1229 crimson làm nền — nó là lớp shadow, không phải màu thương hiệu"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang chính và hầu hết bề mặt card — gạch subway trắng |"
    info: "| 1 | Recessed | `#efefef` | Bề mặt phụ nhẹ cho card có viền và section divider |"
    info: "| 2 | Ink | `#000000` | Top navigation bar và các band tối không thường xuyên |"
    info: "| 3 | Apothecary Green | `#113722` | Nút CTA chính và footer band |"
    info: "| 4 | Crimson Plate | `#6b1229` | Lớp shadow lệch cứng bên dưới element được nhấn mạnh |"

  elevation:

    - "**Sticker Button / Emphasis Link:** `rgb(107, 18, 41) 5px 5px 0px 0px`"

  imagery:

    info: "Ảnh sản phẩm là loại hình ảnh duy nhất. Chai được chụp từ trên xuống, sắp xếp theo grid chặt chẽ trên gạch subway trắng với các đường vữa tối có thể nhìn thấy — bề mặt gạch và vữa là một phần của bố cục. Xử lý phẳng, high-key, không có bối cảnh lối sống, không người, không đạo cụ ngoài chính các chai. Ảnh được phủ một lớp scrim tối trong hero để headline trắng uppercase có thể đặt lên trên với độ mờ đục tối đa. Category tile tái sử dụng cùng thẩm mỹ grid từ trên xuống ở full bleed, với một nhãn trắng uppercase duy nhất nổi trên ảnh. Không có illustration, không 3D, không icon ngoài badge có viền đơn giản."

  layout:

    info: "Trang full-bleed không có max-width căn giữa trên hero, marquee hoặc footer — các section đó kéo dài đến viewport. Các khối nội dung bên dưới hero nằm trong container max-width 1200px. Hero là ảnh full-bleed với text overlay căn giữa. Bên dưới là một marquee bar ngang duy nhất trải dài trang. Sau đó là grid 3 cột đều nhau của category tile card với divider hairline giữa các ô, mỗi tile lấp đầy cột của nó. Footer là band xanh đậm full-bleed. Navigation là thanh trên cùng cố định màu đen với layout 3 vùng (logo trái, link giữa, cart phải). Density comfortable — khoảng trống thoáng giữa marquee, grid và footer, với section gap 40-60px."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border (mặc định): #000000"
    - "border (khung thương hiệu): #d25a24 (Tile Grout)"
    - "accent: #6b1229 (Sticker Crimson — chỉ shadow)"
    - "primary action: #6b1229 (filled action)"

  example_component_prompts:
    - "**Top Navigation**: Thanh #000000 full-bleed, 20px vertical padding. Trái: wordmark 'KOOX' ở 26px Helvetica weight 700 #ffffff uppercase, letter-spacing 0.52px. Giữa: nav items ở 14px weight 600 #ffffff uppercase, letter-spacing 0.7px, gap 15px. Phải: icon giỏ hàng với badge đếm #ffffff."
    - "**Hero Headline Block**: Trên ảnh sản phẩm full-bleed có overlay tối. Headline ở 48px Helvetica weight 900 #ffffff uppercase, letter-spacing 0.96px, line-height 1.0, ba dòng căn giữa. Star rating '4.8★' ở 32px weight 700 #ffffff bên dưới, với caption 14px weight 400."
    - "Tạo Primary Action Button: Nền #6b1229, text #ffffff, radius 9999px, padding pill gọn. Dùng xử lý filled này cho CTA chính."
    - "**Category Tile Card**: Ảnh sản phẩm full-bleed, 5px radius, không padding, nhãn danh mục trắng uppercase overlay ở 32px weight 700 letter-spacing 0.64px. Hairline 1px #000000 giữa các ô grid."
    - "**Marquee Quality Bar**: Band #ffffff full-bleed, 20px vertical padding. Một dòng text 18px weight 700 #ffffff uppercase, các mục cách nhau bằng '|', ví dụ '100% ORGANIC | 100% COLD-PRESSED | 100% RAW'."
    - "**Footer Band**: #113722 full-bleed, 60px vertical padding. Thông điệp căn giữa ở 24px weight 700 #ffffff uppercase, letter-spacing 0.48px."

  similar_brands:

    - "**Joe & The Juice** — Cùng giọng điệu signage Helvetica bold uppercase trên ảnh sản phẩm phẳng, với cách tiếp cận CTA một accent tối cho thương hiệu nước ép hữu cơ"
    - "**Pressed Juicery** — Dàn dựng sản phẩm trên gạch men trắng lâm sàng với ảnh chai full-bleed và màu xanh thực vật đậm làm màu action"
    - "**Glossier** — Cấu trúc grid Brutalist nơi hairline và khung viền tổ chức trang như một bức tường ốp gạch, với type không chân hét to ở full weight"
    - "**Sweetgreen** — Navigation tracking all-caps và pattern marquee trên ảnh sản phẩm sạch sẽ, với một màu xanh đậm duy nhất mang thương hiệu qua CTA và footer"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-tile-grout: #d25a24;
          --color-cold-press-green: #113722;
          --color-sticker-crimson: #6b1229;
          --color-noir: #000000;
          --color-glacial-white: #ffffff;
          --color-ash: #efefef;
          --color-char: #232323;
          --color-concrete: #cccccc;
          --color-fog: #d7d7d7;
          --color-slate: #646464;
          --color-pewter: #808080;
        
          /* Typography — Font Families */
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.38;
          --tracking-caption: 0.7px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.26px;
          --text-body: 18px;
          --leading-body: 1.57;
          --tracking-body: 0.29px;
          --text-subheading: 24px;
          --leading-subheading: 1.44;
          --tracking-subheading: 0.48px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.6px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: 0.8px;
          --text-display: 48px;
          --leading-display: 1;
          --tracking-display: 0.96px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-228: 228px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40-60px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-md: 5px;
        
          /* Named Radii */
          --radius-tags: 5px;
          --radius-cards: 5px;
          --radius-buttons: 5px;
        
          /* Shadows */
          --shadow-subtle: rgb(107, 18, 41) 5px 5px 0px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-recessed: #efefef;
          --surface-ink: #000000;
          --surface-apothecary-green: #113722;
          --surface-crimson-plate: #6b1229;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-tile-grout: #d25a24;
          --color-cold-press-green: #113722;
          --color-sticker-crimson: #6b1229;
          --color-noir: #000000;
          --color-glacial-white: #ffffff;
          --color-ash: #efefef;
          --color-char: #232323;
          --color-concrete: #cccccc;
          --color-fog: #d7d7d7;
          --color-slate: #646464;
          --color-pewter: #808080;
        
          /* Typography */
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.38;
          --tracking-caption: 0.7px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.26px;
          --text-body: 18px;
          --leading-body: 1.57;
          --tracking-body: 0.29px;
          --text-subheading: 24px;
          --leading-subheading: 1.44;
          --tracking-subheading: 0.48px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.6px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: 0.8px;
          --text-display: 48px;
          --leading-display: 1;
          --tracking-display: 0.96px;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-228: 228px;
        
          /* Border Radius */
          --radius-md: 5px;
        
          /* Shadows */
          --shadow-subtle: rgb(107, 18, 41) 5px 5px 0px 0px;
        }