mishmash____style_reference:
  info: "> paper boutique, black frame, vivid contents."

  theme: "light"

  info: "mishmash® vận hành như một phòng trưng bày đồ giấy: chrome (type, border, button, card) gần như hoàn toàn achromatic, để ảnh sản phẩm bão hòa màu đảm nhận mọi khoảnh khắc màu sắc. Bố cục là một grid nhỏ gọn, thiên về hình ảnh, nơi các editorial photo cỡ lớn làm phần việc nặng nhọc và các UI element giữ vai trò yên lặng, nhỏ gọn và tự tin. Chỉ có hai token màu tồn tại trong giao diện — một màu vàng bơ nhạt (butter yellow) và một màu hổ phách ấm hơn (amber) — và cả hai đều xuất hiện như những dấu chấm câu nổi nhỏ (sale badges, persistent discount chip) thay vì là filled buttons hay background. Type là nơi duy nhất hơi ấm đi vào hệ thống: Circular ở kích thước vừa phải với line-height thoải mái, đặt sát vào grid. Kết quả mang cảm giác như một cửa hàng văn phòng phẩm được tuyển chọn — vỏ ngoài kiềm chế, nội dung sống động."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Ink | `#171717` | `--color-ink` | Primary text, nav links, button text, card borders, footer dividers — gần đen nhưng pha chút ấm, không phải #000 thuần |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surface, product card background |"
    info: "| Bone | `#f2f2f2` | `--color-bone` | Subtle body borders, secondary text, input borders, hairline dividers giữa các section |"
    info: "| Ash | `#e3e3e3` | `--color-ash` | Button borders, card surface variant, footer separator lines — tối hơn Bone một chút dùng cho elevated borders |"
    info: "| Smoke | `#c7c7c7` | `--color-smoke` | Muted helper text, disabled borders, de-emphasized labels |"
    info: "| Graphite | `#a1a1a1` | `--color-graphite` | Secondary heading text, subdued body copy, inactive state labels |"
    info: "| Pewter | `#919191` | `--color-pewter` | Tertiary headings, less prominent metadata |"
    info: "| Iron | `#858585` | `--color-iron` | Body helper text, captions, subtle annotations |"
    info: "| Buttercream | `#f4debb` | `--color-buttercream` | Soft category card surface (kraft-adjacent pastel), gentle highlight wash phía sau editorial text |"
    info: "| Amber Tag | `#f9cb86` | `--color-amber-tag` | Yellow action color cho filled buttons, selected navigation states, và focused conversion moments. |"

  tokens___typography:

    circular___typeface_duy_nhất_cho_mọi_ngữ_cảnh___nav__body__buttons__headings__hero__footer__chủ_nghĩa_nhân_văn_hình_học_geometric_humanism_của_circular_mang_đến_cho_thương_hiệu_giọng_nói_thân_thiện_nhưng_mang_tính_editorial__weight_500_là_workhorse_cho_headings__400_cho_body__600_dành_riêng_cho_emphasis_và_small_caps_labels__bậc_10px_có_thể_dùng_cho_legal_announcement_bars_và_bậc_display_46px_xác_định_hai_đầu_mút_của_thang_đo_____font_circular:
      - "**Thay thế:** Inter hoặc Manrope cho system fallback"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 10px, 14px, 16px, 18px, 20px, 30px, 38px, 46px"
      - "**Line height:** 1.04 (display) / 1.12 (headings) / 1.20 (body)"
      - "**Vai trò:** Typeface duy nhất cho mọi ngữ cảnh — nav, body, buttons, headings, hero, footer. Chủ nghĩa nhân văn hình học của Circular mang đến cho thương hiệu giọng nói thân thiện nhưng mang tính editorial; weight 500 là workhorse cho headings, 400 cho body, 600 dành riêng cho emphasis và small caps labels. Bậc 10px (có thể dùng cho legal/announcement bars) và bậc display 46px xác định hai đầu mút của thang đo."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.2 | — | `--text-body` |"
      info: "| subheading | 18px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1.12 | — | `--text-heading` |"
      info: "| heading-lg | 38px | 1.12 | — | `--text-heading-lg` |"
      info: "| display | 46px | 1.04 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| tags | 9999px |"
      info: "| cards | 12px |"
      info: "| inputs | 4px |"
      info: "| buttons | 12px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 48px"
      - "**Card padding:** 24px"
      - "**Element gap:** 24px"

  components:

    primary_filled_button_black:
      vai_trò: "Main conversion action — 'Shop now', 'Add to cart'"

      info: "Nền đen (#171717), chữ trắng, radius 12px, padding dọc 14px × ngang 20px, Circular 16px weight 500. Dùng hạn chế — chỉ một button trên mỗi viewport section."

    ghost_text_button:
      vai_trò: "Secondary navigation actions"

      info: "Nền trong suốt, chữ #171717, radius 12px, padding 14px×20px. Dùng trong category cards và inline links."

    outlined_input_field:
      vai_trò: "Email capture, search, newsletter signup"

      info: "Nền trắng, border 1px solid #e3e3e3, radius 4px, padding dọc 14px × ngang 16px, Circular 16px weight 400 placeholder màu #858585. Focus state: border tối thành #171717."

    pill_discount_badge:
      vai_trò: "Discount indicator trên product cards và floating CTA"

      info: "Nền hổ phách (#f9cb86), chữ #171717, radius full 9999px, Circular 10–14px weight 600. Hai ngữ cảnh: (a) badge tròn nhỏ '30%' ở góc trên trái product card, (b) chip nổi dài 'WANT 15% OFF?' ở góc dưới phải."

    wishlist_heart_icon:
      vai_trò: "Save product action trên cards"

      info: "Icon heart dạng stroke, stroke 1.5px, màu #171717, góc trên phải product card. Container 16px, không background."

    product_card:
      vai_trò: "Planner/stationery product trong grid"

      info: "Bề mặt trắng, radius 12px, padding 24px, ảnh sản phẩm lấp đầy phần trên, Circular 16px weight 500 title, 14px weight 400 price màu #171717 kèm strikethrough giá gốc màu #a1a1a1. Button 'Add' outline trắng (1px #e3e3e3) ở góc dưới phải thân card."

    category_editorial_card:
      vai_trò: "Collection/feature highlight (Log, Accessories, v.v.)"

      info: "Nền màu full-bleed (vàng, hồng, kraft), ảnh sản phẩm chồng lên nửa phải, title Circular 20–30px weight 500 căn trái, subtitle weight nhẹ hơn 400, button 'Shop now' đen ở góc dưới trái. Không border, dựa vào image bleed để tạo cạnh."

    announcement_bar:
      vai_trò: "Site-wide promotional strip ở trên cùng"

      info: "Nền solid #171717, chữ trắng Circular 14px weight 400, căn giữa, padding dọc 8–10px. Một dòng, có thể cuộn."

    top_navigation:
      vai_trò: "Primary site navigation"

      info: "Nền trắng, 'Shop' và 'Search' bên trái Circular 16px weight 500, wordmark logo ở giữa (Circular 600 kèm ® mark), wishlist/cart/account icons bên phải kích thước 20px. Radius 4px trên bất kỳ active search/pill state nào. Chiều cao ~64px."

    hero_banner:
      vai_trò: "Full-bleed editorial product image"

      info: "Ảnh lifestyle/product cỡ lớn lấp đầy chiều rộng, corner radius 12px, button 'Shop now' đen chồng lên góc dưới trái radius 12px. Không có headline overlay — chính ảnh LÀ headline."

    newsletter_card:
      vai_trò: "Email capture kèm ưu đãi"

      info: "Nền kraft/nâu nhạt (#f4debb hoặc tương tự), headline Circular 20px weight 500, body 14px, inline email input + button 'Join now' đen đặt cạnh nhau. Radius 16px, padding 24px."

    footer_link_column:
      vai_trò: "Site map navigation trong footer"

      info: "Nền trắng, column header Circular 16px weight 600, links 14px weight 400 #171717, spacing dọc 12px giữa các link. Không divider giữa các column."

    section_heading_with_accent_dots:
      vai_trò: "Editorial copy break giữa các product bands"

      info: "Body text Circular 30–38px weight 500 cỡ lớn, màu đen, kèm hình tròn/chữ nhật nhỏ màu trang trí inline (buttercream, mint, amber) kích thước 12–16px. Căn trái, max-width ~800px, line-height thoải mái 1.2."

  do_s_and_don_ts:

    do:
      - "Giữ UI achromatic — chỉ để ảnh sản phẩm là nguồn màu bão hòa duy nhất trên mọi màn hình."
      - "Dùng #f9cb86 độc quyền cho các chip nổi nhỏ và percentage badges; không bao giờ tô màu lên bề mặt lớn với nó."
      - "Mặc định radius 12px cho cards, buttons và images; chỉ dùng 4px cho inputs và nav-pill states; chỉ dùng 9999px cho tag/discount pills."
      - "Đặt body type ở 16px Circular weight 400, line-height 1.2; dành weight 600 cho footer column headers và small labels."
      - "Dùng section padding 48px và card padding 24px; duy trì container max-width 1280px."
      - "Đặt chính xác một filled black button 'Shop now' hoặc 'Add to cart' trên mỗi viewport — để ghost/text buttons đảm nhận secondary actions."
      - "Neo mọi trang bằng black announcement bar với Circular 14px weight 400 chữ trắng."

    don_t:
      - "Đừng đưa màu chromatic mới vào UI chrome — 1% màu sắc chính là thương hiệu."
      - "Đừng tô nền button bằng #f9cb86 hoặc #f4debb; đó là surface/accent tokens, không phải action tokens."
      - "Đừng dùng box-shadows hay gradients — hệ thống là flat, phân cách bằng borders và surface contrast."
      - "Đừng dùng corner radius khác 4px (inputs/nav), 12px (cards/buttons), hoặc 9999px (pills)."
      - "Đừng đặt type dưới 14px cho body hoặc trên 46px cho display; 10px chỉ dành cho announcement bar và legal micro-copy."
      - "Đừng đặt hai filled black buttons trong cùng một viewport — dùng ghost hoặc text variants cho các action bổ sung."
      - "Đừng dùng colored backgrounds cho navigation, footer, hoặc structural chrome — chỉ dùng cho editorial category cards."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background, product card base |"
    info: "| 1 | Card | `#f2f2f2` | Secondary card surfaces, soft band backgrounds |"
    info: "| 2 | Border | `#e3e3e3` | Button outlines, elevated card borders, footer rules |"
    info: "| 3 | Accent Card | `#f4debb` | Editorial category cards, newsletter accent panels |"

  elevation:

    info: "Hệ thống cố tình flat. Chiều sâu được thể hiện qua độ tương phản màu bề mặt (#ffffff → #f2f2f2 → #e3e3e3) và hairline borders 1px màu #e3e3e3 hoặc #f2f2f2, không bao giờ dùng drop shadows. Ảnh sản phẩm là nguồn duy nhất tạo cảm giác ba chiều."

  imagery:

    info: "Ảnh sản phẩm là tài sản hình ảnh chủ đạo — crop cận các planner, notebook, bút, sticky tabs trên nền trung tính, thường có bàn tay hoặc bối cảnh bàn làm việc. Xử lý high-key với ánh sáng tự nhiên, màu sắc sống động nhưng không quá bão hòa, để màu sản phẩm (bìa đỏ M, bìa xanh W, bìa vàng D, bìa xanh lá UNDATED) đọc như các graphic element. Ảnh full-bleed trong hero, nằm trong cards radius 12px trong grid, và dùng làm right-half bleeds chồng lên trong editorial category cards. Không illustration, không 3D, không abstract graphics — nhiếp ảnh là ngôn ngữ hình ảnh duy nhất ngoài type."

  layout:

    info: "Các section full-width nằm trong max-width 1280px, căn giữa. Hero là một ảnh full-bleed duy nhất với một CTA chồng lên. Bên dưới hero, category cards nằm trong grid 3 cột với màu nền đa dạng và ảnh sản phẩm chồng lên. Product grids là 4 cột trên desktop với kích thước card đồng nhất. Trang luân phiên giữa các band trắng và band một màu nhấn (buttercream, hồng, kraft) để tạo nhịp điệu mà không cần dark-mode sections. Navigation là một top bar mỏng duy nhất với logo căn giữa; không sidebar, không mega-menu hiển thị. Chip nổi 'WANT 15% OFF?' cố định góc dưới phải trên mọi viewport. Khoảng cách giữa các section rộng rãi (48px) nhưng trong section thì nhịp điệu gọn gàng (gap 24px, button padding 14–20px)."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #171717"
    - "background: #ffffff"
    - "border: #e3e3e3"
    - "muted text: #858585"
    - "accent: #f9cb86"
    - "primary action: #f9cb86 (filled action)"

    example_component_prompts:

    - "*Product grid card*: Bề mặt trắng, radius 12px, padding 24px. Ảnh sản phẩm lấp đầy 60% phía trên, không border trong. Circular 16px weight 500 title màu #171717, 14px weight 400 price màu #171717 kèm strikethrough giá gốc màu #a1a1a1. Button 'Add' outline trắng (border 1px #e3e3e3, radius 4px, padding 14px×20px) ở góc dưới phải. Tùy chọn: amber pill 9999px (#f9cb86, chữ #171717) ở góc trên trái cho discount '30%'."

    - "*Editorial category card*: Nền buttercream (#f4debb) hoặc hồng full-bleed, không border, radius 16px. Ảnh sản phẩm chồng lên nửa phải (vượt ra ngoài cạnh card). Title Circular 30px weight 500 #171717 căn trái, subtitle 16px weight 400. Button 'Shop now' đen (bg #171717, chữ trắng, radius 12px, padding 14px×20px) ở góc dưới trái."

    - "*Hero banner*: Ảnh full-width, corner radius 12px, max-height 600px. Không headline overlay. Button 'Shop now' đen (#171717, chữ trắng, radius 12px, padding 14px×20px) đặt góc dưới trái, inset 24px."

    - "*Announcement bar*: Nền #171717 full-width, padding dọc 10px, một dòng chữ trắng Circular 14px weight 400 căn giữa. Sticky ở trên cùng."

    - "*Newsletter card*: Nền buttercream (#f4debb), radius 16px, padding 24px. Headline Circular 20px weight 500 #171717, subtext 14px weight 400. Inline email input (bg trắng, border 1px #e3e3e3, radius 4px, padding 14px×16px) kề bên button 'Join now' đen (radius 12px, padding 14px×20px)."

  accent_discipline:

    info: "Hệ thống chứa chính xác hai chromatic UI colors: #f4debb (buttercream, dùng cho bề mặt editorial card mềm mại) và #f9cb86 (amber, dùng cho discount badges và floating chips). Các màu này không bao giờ được dùng làm button fills, không bao giờ là body text, và không bao giờ là background band lớn. Vai trò của chúng là dấu câu — một amber tag đơn lẻ trên product card trắng, một buttercream card trong một hàng ba card. Tỷ lệ 1% màu sắc là một ràng buộc cứng: nếu một màn hình mới có cảm giác nhiều màu sắc, thì chrome đã sai."

  similar_brands:

    - "**Papier** — Cùng chrome achromatic với ảnh sản phẩm là nguồn màu duy nhất; editorial category cards tương tự với ảnh chồng lên; type gọn gàng và card grids chặt chẽ."
    - "**Field Notes (fieldnotesbrand.com)** — Stationery DTC tối giản với bảng màu gần đen/trắng, accent badges nhỏ, product-grid homepage, và wordmark-as-logo navigation."
    - "**Areaware** — Retailer đồ thiết kế dùng bảng màu đen/trắng/kem kiềm chế, ảnh sản phẩm cung cấp toàn bộ màu sắc; bề mặt flat, không shadow, card padding chặt."
    - "**HAY (hay.dk)** — Retailer thiết kế với cảm quan đồ giấy; dùng editorial cards một màu, product grids flat, và header wordmark-centered với navigation chrome tối giản."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #171717;
          --color-paper-white: #ffffff;
          --color-bone: #f2f2f2;
          --color-ash: #e3e3e3;
          --color-smoke: #c7c7c7;
          --color-graphite: #a1a1a1;
          --color-pewter: #919191;
          --color-iron: #858585;
          --color-buttercream: #f4debb;
          --color-amber-tag: #f9cb86;
        
          /* Typography — Font Families */
          --font-circular: 'Circular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 30px;
          --leading-heading: 1.12;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.12;
          --text-display: 46px;
          --leading-display: 1.04;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 48px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 99999px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-tags: 9999px;
          --radius-cards: 12px;
          --radius-inputs: 4px;
          --radius-buttons: 12px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #f2f2f2;
          --surface-border: #e3e3e3;
          --surface-accent-card: #f4debb;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #171717;
          --color-paper-white: #ffffff;
          --color-bone: #f2f2f2;
          --color-ash: #e3e3e3;
          --color-smoke: #c7c7c7;
          --color-graphite: #a1a1a1;
          --color-pewter: #919191;
          --color-iron: #858585;
          --color-buttercream: #f4debb;
          --color-amber-tag: #f9cb86;
        
          /* Typography */
          --font-circular: 'Circular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 30px;
          --leading-heading: 1.12;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.12;
          --text-display: 46px;
          --leading-display: 1.04;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 99999px;
        }