vibrants___style_reference:
  info: "> Skyborne apothecary trên nền đá cẩm thạch trắng — mực xanh navy đậm là cối giã thuốc, quang phổ cầu vồng là liều thuốc."

  theme: "light"

  info: "Vibrants mang phong cách quầy wellness sáng sủa, mang hơi hướng lâm sàng: nền trắng, mực xanh navy đậm làm nhiệm vụ chính cho chữ và primary buttons, và một dải cầu vồng full-spectrum chỉ xuất hiện trên bề mặt sản phẩm. Ngữ pháp thị giác có chủ đích là yên tĩnh bên ngoài hero và product imagery — gần như cấu trúc đơn sắc với một điểm xanh lá tươi duy nhất dùng để nhấn mạnh khuyến mãi, badge và xác nhận. Headlines sử dụng custom serif nghiêng về editorial và đáng tin cậy, trong khi body copy và UI dùng geometric sans-serif mang cảm giác chính xác như dược phẩm. Các component phẳng với hairline borders, bo góc 8px mềm mại, và elevation tối thiểu; chiều sâu đến từ độ tương phản màu sắc và khoảng trắng rộng rãi thay vì đổ bóng. Hero gradient xanh trời và product mockup nổi tạo tông màu điềm tĩnh, lạc quan mà phần còn lại của trang duy trì qua khoảng cách thoáng đãng và typography tiết chế."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|-------|"
    info: "| Deep Navy | `#021422` | `--color-deep-navy` | Primary text, primary filled buttons, nav backgrounds, heading ink, footer surface — gần như đen nhưng đọc như mực chứ không phải đen tuyền, neo trang trong khi vẫn đủ mềm để kết hợp với trắng |"
    info: "| Vibrant Green | `#00852e` | `--color-vibrant-green` | Sale badges, discount pills, success indicators, điểm nhấn dùng một lần — sắc thái rực rỡ duy nhất chạm vào chrome; mọi bề mặt màu sắc khác đều thuộc về sản phẩm |"
    info: "| Midnight Navy | `#001f38` | `--color-midnight-navy` | Nhấn mạnh secondary text, card border accent trên hero product, phân cấp heading ngay dưới Deep Navy — xanh lam hơn một chút để tạo biến thể tông màu mà không rời khỏi họ |"
    info: "| Sky Wash | `#91c3ff` | `--color-sky-wash` | Outlined button borders, icon accents, link highlights — xanh lam nhẹ thì thầm chứ không la hét, dùng cho ghost controls vẫn cần định nghĩa màu sắc |"
    info: "| Snow | `#ffffff` | `--color-snow` | Page canvas, card surface, button text trên nền tối, badge text — background chủ đạo |"
    info: "| Cloud | `#f2f6ff` | `--color-cloud` | Bề mặt tông lạnh cho elevated cards, lớp wash nhẹ phía sau testimonials, backdrop panels xanh lam rất nhạt — mặt lạnh của surface stack |"
    info: "| Warm Sand | `#fff6ea` | `--color-warm-sand` | Bề mặt tông ấm cho promotional hoặc seasonal highlight cards, sale callout backgrounds — điểm đối trọng ấm của Cloud |"
    info: "| Silver Mist | `#ccd2d7` | `--color-silver-mist` | Card borders, badge backgrounds, hairline dividers — màu xám cấu trúc phân tách các lớp trắng-trên-trắng |"
    info: "| E6e8e9 | `#e6e8e9` | `--color-e6e8e9` | Navigation dividers, secondary hairline borders — nhạt hơn Silver Mist một chút cho các cạnh ít nổi bật |"
    info: "| Iron Gray | `#808f9c` | `--color-iron-gray` | Muted card borders, secondary borders, card outlines đã giảm nhấn — xám lạnh với undertone xanh lam |"
    info: "| Slate | `#6a7c89` | `--color-slate` | Muted body text, helper text, de-emphasized metadata — dễ đọc nhưng rõ ràng là phụ so với Deep Navy |"
    info: "| Graphite | `#67727a` | `--color-graphite` | Heading sub-labels, nav secondary text, card meta text — xám trung bình cho phân cấp thông tin |"
    info: "| Charcoal | `#262626` | `--color-charcoal` | Icon fills, micro-typography, SVG strokes mảnh — đen mềm không bao giờ chạm #000 tuyệt đối |"
    info: "| Spectrum Gradient | `linear-gradient(90deg, rgba(114,77,153,0.05) 0%, rgba(58,61,138,0.05) 17%, rgba(2,175,224,0.05) 35%, rgba(95,183,62,0.05) 51%, rgba(255,237,0,0.05) 67%, rgba(237,116,43,0.05) 83%, rgba(222,39,53,0.05) 100%)` | `--color-spectrum-gradient` | Decorative product-spectrum gradient chảy tím → chàm → lục lam → xanh lá → vàng → cam → đỏ — chỉ dùng trong hero wash và product card colorways, không bao giờ trên UI chrome |"

  tokens___typography:

    montserrat___họ_label__badge_support_và_footer_typography__dùng_cho_uppercase_labels_ở_10_12px_với_tracking_rộng_0_10_0_13em__và_cho_body_copy_cần_tông_geometric_trung_tính__khoảng_cách_chữ_rộng_ở_kích_thước_nhỏ_là_động_thái_xác_định_cho_category_labels_và_section_eyebrows_____font_montserrat:
      - "**Thay thế:** Montserrat, Work Sans, hoặc Space Grotesk"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 10px, 12px, 14px, 15px, 16px, 20px"
      - "**Line height:** 1.14–1.80"
      - "**Letter spacing:** 0.10em ở 10px, 0.13em ở 12px"
      - "**Vai trò:** Họ label, badge-support và footer-typography. Dùng cho uppercase labels ở 10–12px với tracking rộng (0.10–0.13em), và cho body copy cần tông geometric trung tính. Khoảng cách chữ rộng ở kích thước nhỏ là động thái xác định cho category labels và section eyebrows."

    new_kansas___họ_display_và_heading_chính___một_custom_serif_với_sự_ấm_áp_và_uy_tín_editorial__đảm_nhận_headlines_36_48px__subheads_20_28px__và_emphasized_body_16_20px__việc_chọn_serif_thay_vì_geometric_sans_là_quyết_định_typography_đặc_trưng_của_thương_hiệu__nó_mang_cảm_giác_apothecary_và_đáng_tin_cậy_thay_vì_tech_saas__weight_600_là_mặc_định_cho_headlines__500_cho_emphasis_kiểu_italic_____font_new_kansas:
      - "**Thay thế:** Fraunces, Playfair Display, hoặc DM Serif Display"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 14px, 15px, 16px, 18px, 20px, 22px, 24px, 28px, 32px, 36px, 44px, 48px"
      - "**Line height:** 1.00–2.00"
      - "**Letter spacing:** -0.02em ở 48px, -0.01em ở 24–32px, normal dưới 20px"
      - "**Vai trò:** Họ display và heading chính — một custom serif với sự ấm áp và uy tín editorial. Đảm nhận headlines 36–48px, subheads 20–28px, và emphasized body 16–20px. Việc chọn serif thay vì geometric sans là quyết định typography đặc trưng của thương hiệu: nó mang cảm giác apothecary và đáng tin cậy thay vì tech-SaaS. Weight 600 là mặc định cho headlines; 500 cho emphasis kiểu italic."

    inter___họ_ui_và_body_cho_cards__navigation__links__và_small_functional_text__negative_letter_spacing_thắt_chặt_ở_body_sizes__0_022em_ở_16px___0_01em_ở_14px_để_đọc_mượt__tối_ưu_màn_hình__xuất_hiện_khi_new_kansas_cảm_thấy_quá_editorial___tabs__micro_copy__card_metadata_____font_inter:
      - "**Thay thế:** Inter, DM Sans, hoặc system-ui"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 12px, 13px, 14px, 16px"
      - "**Line height:** 1.00–1.33"
      - "**Letter spacing:** -0.022em ở 16px, -0.01em ở 14px, -0.008em ở 12px"
      - "**Vai trò:** Họ UI và body cho cards, navigation, links, và small functional text. Negative letter-spacing thắt chặt ở body sizes (-0.022em ở 16px, -0.01em ở 14px) để đọc mượt, tối ưu màn hình. Xuất hiện khi New Kansas cảm thấy quá editorial — tabs, micro-copy, card metadata."

    rift_soft___chỉ_dùng_riêng_cho_sale_badge_và_discount_pill_text__một_condensed_display_face_với_tracking_0_063em_mang_lại_cho_promotional_copy_trọng_lượng_giống_như_tem__có_thẩm_quyền__không_bao_giờ_dùng_ngoài_ngữ_cảnh_giảm_giá___đây_là_giọng_badge__không_phải_giọng_heading_____font_rift_soft:
      - "**Thay thế:** Bebas Neue, Oswald, hoặc Anton"
      - "**Weights:** 600"
      - "**Kích thước:** 16px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** 0.063em"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Vai trò:** Chỉ dùng riêng cho sale-badge và discount-pill text. Một condensed display face với tracking 0.063em mang lại cho promotional copy trọng lượng giống như tem, có thẩm quyền. Không bao giờ dùng ngoài ngữ cảnh giảm giá — đây là giọng badge, không phải giọng heading."

    arial___arial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_arial:
      - "**Weights:** 400"
      - "**Kích thước:** 13px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Arial — đượ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 thước | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | 1.3px | `--text-caption` |"
      info: "| label | 12px | 1.2 | 1.56px | `--text-label` |"
      info: "| body-sm | 14px | 1.43 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.35px | `--text-body` |"
      info: "| body-lg | 20px | 1.5 | -0.1px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.33 | -0.24px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.25 | -0.32px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.17 | -0.54px | `--text-heading` |"
      info: "| heading-lg | 44px | 1.14 | -0.88px | `--text-heading-lg` |"
      info: "| display | 48px | 1.13 | -0.96px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 12px |"
      info: "| tags | 3px |"
      info: "| cards | 8px |"
      info: "| pills | 20px |"
      info: "| badges | 3px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| hero-panels | 12px |"

    layout:

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

  components:

    primary_filled_button_shop_patches:
      vai_trò: "Primary CTA — navy fill tương phản cao với chữ trắng, dùng một lần mỗi section cho hành động chính"

      info: "Nền Deep Navy (#021422), chữ trắng (#ffffff), border-radius 8px, padding dọc 18px, padding ngang 24px. New Kansas weight 600, 14–16px, uppercase tracking 0.10em. Không đổ bóng. Là một khối đặc — button filled duy nhất trong hệ thống."

    secondary_outlined_button_shop_now:
      vai_trò: "Secondary action — ghost variant cho supporting CTAs"

      info: "Nền trong suốt, border 1px #021422, radius 8px, padding 16–18px, chữ Deep Navy. New Kansas weight 600 ở 14px với uppercase 0.10em tracking. Dùng khi đã có primary filled button trên trang."

    sky_ghost_button:
      vai_trò: "Tertiary action — outlined variant xanh lam nhạt cho low-emphasis links-as-buttons"

      info: "Fill trong suốt, border 1px Sky Wash (#91c3ff), radius 8px, padding 14–16px, chữ Deep Navy. Inter weight 500. Border màu sắc báo hiệu khả năng tương tác mà không cạnh tranh với primary CTA."

    sale_badge_45__off:
      vai_trò: "Promotional discount pill đè lên product cards"

      info: "Nền Vibrant Green (#00852e), chữ trắng, border-radius 3px (hình chữ nhật góc sắc, không phải pill), padding dọc 3px / ngang 6px. Rift Soft weight 600, ~10–12px, uppercase 0.063em tracking. Nằm góc trên bên trái của product card. Góc sắc 3px phân biệt badges với tất cả các element bo tròn khác trong hệ thống."

    star_rating_row:
      vai_trò: "Social proof indicator — nội dòng với customer count"

      info: "Năm icon sao vàng (màu vàng hệ thống mặc định) ở 12px, theo sau là Inter weight 400 ở 13px màu Slate (#6a7c89) cho count text. Không có container — nổi nội dòng với copy xung quanh."

    product_card:
      vai_trò: "E-commerce product tile trong carousels và grids"

      info: "Bề mặt trắng, border 1px Silver Mist (#ccd2d7), radius 8px, padding 16px. Vùng ảnh là sản phẩm màu full-bleed (các biến thể xanh lá/xanh dương/đỏ). Tên sản phẩm bằng New Kansas weight 600 ở 18px Deep Navy, variant label bằng Inter 14px Slate, giá bằng New Kansas 16px Deep Navy với giá gốc gạch ngang màu Slate."

    hero_product_mockup_panel:
      vai_trò: "3D-illustrated product showcase nổi trong hero"

      info: "Các product box màu xếp chồng (xanh lá, xanh đậm, đỏ, xanh trời) với white inner cards, radius 8px trên mỗi box, border 1px nhẹ. Không có container — nổi trực tiếp trên hero background gradient xanh trời."

    testimonial_chat_bubble:
      vai_trò: "Customer review được render như một UI element dạng chat-message"

      info: "Fill trắng, border 1px Silver Mist, radius 16–20px (bo tròn nhưng không phải pill), padding 12–16px. Inter weight 400 ở 14px Deep Navy. Avatar tròn nhỏ với nền màu gắn góc dưới bên phải. Hai bubble xếp chồng trên background panel tông Cloud (#f2f6ff)."

    sticky_cart_notification:
      vai_trò: "Toast góc dưới bên trái xác nhận sản phẩm đã được thêm"

      info: "Bề mặt trắng, border 1px #ccd2d7, radius 8px, padding 12px. Chứa icon khiên xanh nhỏ, body text Inter 12px với tên sản phẩm được link màu Vibrant Green. Trượt vào từ bên trái, cố định ở góc dưới bên trái."

    top_announcement_bar:
      vai_trò: "Sitewide promo strip phía trên nav"

      info: "Nền Deep Navy (#021422), chữ trắng, căn giữa, padding 8–12px. Inter hoặc Montserrat weight 600 ở 12–14px, uppercase 0.10em tracking. Dải tối full-bleed duy nhất trên trang."

    section_header_our_patches:
      vai_trò: "Large editorial section title"

      info: "New Kansas weight 600 ở 36–44px, Deep Navy (#021422), không có eyebrow hoặc subtitle trừ khi đi kèm với carousel control. Căn trái, khoảng trống rộng bên dưới trước khi grid bắt đầu."

    nav_header:
      vai_trò: "Sticky top navigation bar"

      info: "Nền trắng, border dưới 1px #e6e8e9, padding dọc 12px. Logo (heart-icon + wordmark) bên trái, nav links ở giữa (New Kansas hoặc Inter 14–16px, Deep Navy), account/cart icons bên phải. Không đổ bóng — một hairline separator sạch sẽ xác định cạnh."

    footer:
      vai_trò: "Dark site footer với link columns và social icons"

      info: "Nền Deep Navy (#021422), padding dọc 40–48px, grid link 3–4 cột. Column headers bằng Montserrat 12px Vibrant Green, uppercase 0.10em. Links bằng Inter 14px trắng ở độ mờ 60%. Social icons (Instagram, Facebook, TikTok, Pinterest) dưới dạng glyphs trắng có outline, căn phải."

    circular_stamp_badge:
      vai_trò: "Decorative approval/seal element trong section 'Feel the Difference'"

      info: "Fill trắng hoặc rất nhạt, border 1px Deep Navy, hình tròn với text bao quanh chu vi (Rift Soft hoặc Montserrat 10–12px uppercase). Căn giữa phía trên section heading, dùng như thiết bị tín hiệu tin cậy."

  do_s_and_don_ts:

    do:
      - "Dùng Deep Navy (#021422) cho tất cả primary filled buttons và primary text — nó là mực cấu trúc, không chỉ là màu tối"
      - "Dùng New Kansas cho mọi heading từ 20px trở lên; serif là chữ ký editorial của thương hiệu"
      - "Dùng border-radius 8px cho tất cả cards, buttons và inputs làm mặc định; chỉ badges phá vỡ xuống 3px và chỉ một số decorative elements cụ thể đẩy lên 12px hoặc 20px"
      - "Chỉ dùng Vibrant Green (#00852e) cho sale badges, discount pills và success confirmations — không bao giờ cho body copy hoặc decorative fills"
      - "Dùng Sky Wash (#91c3ff) làm chromatic border cho outlined/ghost controls khi cần accent xanh lam nhẹ"
      - "Giữ page chrome gần như đơn sắc; để product imagery và hero gradient mang tất cả màu quang phổ"
      - "Dùng Montserrat với letter-spacing 0.10–0.13em cho uppercase category labels và section eyebrows"
      - "Chỉ kết hợp sky-blue gradient hero wash với product imagery hoặc hero mockup — không bao giờ mở rộng vào card hoặc section backgrounds"
      - "Dùng 16px làm spacing unit cơ sở cho card padding và element gaps; 48px cho section separation"
      - "Dùng Inter với negative letter-spacing (-0.022em ở 16px) cho tất cả UI body và link text để duy trì mật độ đọc được trên màn hình"

    don_t:
      - "Không dùng đen tuyền (#000000) cho body text hoặc icons — Deep Navy (#021422) và Charcoal (#262626) là các lựa chọn tối"
      - "Không dùng rainbow spectrum gradient trên UI chrome, buttons hoặc non-product surfaces — nó chỉ thuộc về product cards và hero wash"
      - "Không dùng Rift Soft cho bất cứ thứ gì khác ngoài sale-badge và discount-pill text — nó là stamp face, không phải body face"
      - "Không tạo filled buttons bằng màu sắc khác ngoài Deep Navy; chromatic fill thứ cấp duy nhất là green badge"
      - "Không dùng shadows cho elevation; thiết kế dựa vào hairline borders (#ccd2d7) và sự khác biệt surface tint"
      - "Không dùng giá trị radius ngoài scale đã thiết lập (3, 8, 12, 20, 32px) — sự nhất quán là điều làm cho hệ thống có chủ đích"
      - "Không căn giữa body copy hoặc card content; căn trái các khối text trừ khi section là một câu nói duy nhất được căn giữa"
      - "Không thêm nhiều hơn một filled primary button trên mỗi viewport — secondary actions phải là outlined hoặc ghost variants"
      - "Không trộn New Kansas và Inter ở cùng kích thước cho cùng vai trò — New Kansas sở hữu 20px+, Inter sở hữu bên dưới"
      - "Không dùng Warm Sand (#fff6ea) và Cloud (#f2f6ff) làm full-page backgrounds; chúng chỉ là panel-only surface tints"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background — màu trắng chủ đạo mà mọi thứ khác nổi trên đó |"
    info: "| 1 | Cloud | `#f2f6ff` | Panel tông lạnh cho testimonial sections, feature callouts, elevation mềm không cần shadow |"
    info: "| 2 | Warm Sand | `#fff6ea` | Promotional hoặc seasonal card surface tông ấm — đối trọng ấm của Cloud |"
    info: "| 3 | Cream Highlight | `#ffe9c9` | Accent surface cho hero highlights hoặc featured-product callouts (hiếm khi dùng) |"

  elevation:

    info: "Thiết kế cố tình tránh drop shadows. Chiều sâu được xây dựng thông qua ba kỹ thuật xếp lớp: hairline borders 1px màu Silver Mist (#ccd2d7) cho card edges, surface tint shifts từ trắng sang Cloud (#f2f6ff) hoặc Warm Sand (#fff6ea) để phân tách panel, và độ tương phản giữa Deep Navy filled elements và bề mặt trắng. Điều này tạo ra cảm giác phẳng, editorial, apothecary-counter nơi không có gì nổi — mọi thứ đặt chính xác trên một mặt phẳng. Box-shadow duy nhất được phát hiện là hairline 1px pha màu (#f2f6ff), không phải hiệu ứng elevation thực sự."

  imagery:

    info: "Ngôn ngữ thị giác bị chi phối bởi product photography của các miếng dán bio-frequency vật lý được render dưới dạng các colored boxes bão hòa — xanh lá, xanh trời, xanh navy đậm, đỏ — mỗi hộp được ghi nhãn bằng serif type trắng trên mặt hộp. Hero có một 3D-illustrated mockup của những hộp này xếp chồng ở các góc trên bệ trắng trên nền gradient xanh trời mềm, tạo cảm giác product-as-architecture. Rainbow spectrum gradient xuất hiện như một lớp wash trang trí mờ trong hero. Testimonials sử dụng avatar minh họa hình tròn nhỏ (nền phẳng, có màu, không có ảnh thực). Social proof icons (star rating) là glyphs vàng tiêu chuẩn. Phong cách nhiếp ảnh tổng thể là high-key, studio-clean và product-isolated: mọi đối tượng được chụp trên nền trắng tuyền hoặc màu tuyền, không có bối cảnh lối sống, không có chủ thể con người — miếng dán là anh hùng. Hero background xanh trời kết cấu mây là hình ảnh khí quyển/môi trường duy nhất trong hệ thống."

  layout:

    info: "Mô hình trang là max-width contained ở ~1200px, căn giữa, với top announcement bar và footer là các dải full-bleed. Hero là bố cục chia đôi: cột text bên trái (chiếm ~40% chiều rộng) với headline stack căn trái và CTA, và 3D product mockup nổi bên phải chiếm ~60% còn lại trên gradient xanh trời kéo dài đến các cạnh hero container. Các section bên dưới hero theo nhịp điệu nhất quán: white canvas sections xen kẽ với các section tông rất nhạt (Cloud) để tạo khoảng thở thị giác. Product showcases sử dụng horizontal carousels với circular arrow controls góc trên bên phải. Section 'Feel the Difference' quay lại bố cục chia đôi — text căn giữa + CTA bên trái, testimonial chat bubbles xếp chồng bên phải trên panel tông Cloud. Grids chủ yếu là bố cục card 3–4 cột cho sản phẩm. Navigation là một thanh trắng sticky đơn với hairline bottom border, không có mega-menu, không có sidebar. Density là comfortable trong suốt với section gaps rộng rãi 48px+."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text (primary): #021422"
    - "background (canvas): #ffffff"
    - "border (hairline): #ccd2d7"
    - "accent: #91c3ff"
    - "sale/badge: #00852e"
    - "primary action: #00852e (filled action)"

    info: "3-5 Ví dụ Component Prompts:"

    - "Xây dựng hero section trên nền gradient xanh trời (#c4e4fb đến #f2f6ff). Cột trái: New Kansas weight 600, 48px, #021422, letter-spacing -0.02em headline. Bên dưới, body copy Inter 16px, #021422. Bên dưới đó, một filled navy button (nền #021422, chữ trắng, radius 8px, padding 18px/24px, New Kansas 14px uppercase 0.10em). Cột phải: một dàn sắp xếp nổi của bốn colored product cards (xanh lá #00852e, navy #001f38, đỏ #c43030, xanh trời #4ba3d8) ở các góc nghiêng nhẹ, mỗi card có white inner panel."

    - "Xây dựng product card: nền trắng, border 1px #ccd2d7, radius 8px, padding 16px. Một sale badge Vibrant Green (#00852e) với radius 3px, Rift Soft 12px uppercase 0.063em, chữ trắng nằm góc trên bên trái phía trên ảnh. Tên sản phẩm bằng New Kansas 18px weight 600 #021422. Variant label bằng Inter 14px #6a7c89. Giá bằng New Kansas 16px #021422 với giá gốc gạch ngang màu #6a7c89."

    - "Xây dựng testimonial panel: nền #f2f6ff, radius 20px, padding 24px. Hai white chat bubbles xếp chồng với border 1px #ccd2d7, radius 16px, padding 16px, body text Inter 14px #021422. Mỗi bubble có avatar tròn nhỏ (32px, nền màu đặc) góc dưới bên phải."

    - "Xây dựng sticky cart notification: bề mặt trắng, border 1px #ccd2d7, radius 8px, padding 12px. Icon khiên xanh (16px) bên trái, sau đó text Inter 12px với tên sản phẩm được link màu #00852e. Định vị fixed góc dưới bên trái."

    - "Xây dựng footer: nền #021422, padding dọc 48px, grid 4 cột. Column headers bằng Montserrat 12px #00852e uppercase 0.13em. Links bằng Inter 14px trắng ở độ mờ 60%, row gap 8px. Social icons (Instagram, Facebook, TikTok, Pinterest) dưới dạng glyphs outline trắng 20px ở cột ngoài cùng bên phải."

  gradient_system:

    info: "Hai họ gradient cùng tồn tại nhưng phục vụ các mục đích khác nhau. Spectrum gradient (tím → chàm → lục lam → xanh lá → vàng → cam → đỏ ở độ mờ 5%) xuất hiện độc quyền trong hero như một lớp wash khí quyển mờ — nó báo hiệu sự đa dạng màu sắc của dòng sản phẩm mà không bao giờ lấn át. Striped diagonal gradients (trắng-xám và #021422 xen kẽ các dải 6–8px) là các mẫu sọc trang trí được dùng làm chi tiết nhấn nhỏ, không phải làm backgrounds. Một sky-gradient thứ ba (xanh lam nhạt #c4e4fb chuyển sang trắng) xuất hiện phía sau hero product mockup. Không gradient nào được áp dụng cho UI chrome, buttons, cards hoặc section backgrounds."

  iconography___glyphs:

    icons_tối_giản_và_chức_năng: "dạng line, stroke 1.5px, Deep Navy (#021422) hoặc white-on-dark fill, ở kích thước 16–20px. Brand mark kết hợp một glyph trái tim cách điệu với wordmark 'Vibrants'. Social icons (Instagram, Facebook, TikTok, Pinterest) là glyphs nền tảng tiêu chuẩn được render dưới dạng outlines trắng trên footer tối. Star icons cho ratings sử dụng vàng mặc định (dải #f5b500) ở 12px. Circular stamp badge trong section 'Feel the Difference' sử dụng một vòng text theo đường tròn, render bằng Rift Soft hoặc Montserrat 10–12px uppercase. Không có bộ icon nào chiếm ưu thế — hệ thống tiết chế, chỉ sử dụng icons ở nơi chúng mang trọng lượng chức năng (cart, account, navigation arrows, social platforms)."

  similar_brands:

    - "**Hims** — Cùng register thị giác clinical-wellness — light canvas, deep-navy ink cho primary text và CTAs, và một chromatic accent duy nhất (xanh lá) dành riêng cho promotional badges và confirmations"
    - "**Athletic Greens / AG1** — Editorial serif headlines kết hợp với bề mặt trắng sạch, bảng màu hẹp để product imagery mang tất cả màu sắc, và uppercase tracked labels cho section eyebrows"
    - "**Ritual** — Ngôn ngữ thương hiệu supplement tối giản với chrome gần như đơn sắc, hairline borders, bo góc 8px mềm, và pattern product carousel đặt sản phẩm màu sắc làm element chromatic duy nhất trên mỗi card"
    - "**Care/of** — Cảm giác wellness ấm áp pha lâm sàng: trang sáng với các cool tinted surface panels thỉnh thoảng, serif display type, và việc sử dụng tiết chế màu xanh lá cho tín hiệu tin cậy/khuyến mãi"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-navy: #021422;
          --color-vibrant-green: #00852e;
          --color-midnight-navy: #001f38;
          --color-sky-wash: #91c3ff;
          --color-snow: #ffffff;
          --color-cloud: #f2f6ff;
          --color-warm-sand: #fff6ea;
          --color-silver-mist: #ccd2d7;
          --color-e6e8e9: #e6e8e9;
          --color-iron-gray: #808f9c;
          --color-slate: #6a7c89;
          --color-graphite: #67727a;
          --color-charcoal: #262626;
          --color-spectrum-gradient: #724d99;
          --gradient-spectrum-gradient: linear-gradient(90deg, rgba(114,77,153,0.05) 0%, rgba(58,61,138,0.05) 17%, rgba(2,175,224,0.05) 35%, rgba(95,183,62,0.05) 51%, rgba(255,237,0,0.05) 67%, rgba(237,116,43,0.05) 83%, rgba(222,39,53,0.05) 100%);
        
          /* Typography — Font Families */
          --font-montserrat: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-new-kansas: 'New Kansas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rift-soft: 'Rift Soft', 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;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 1.3px;
          --text-label: 12px;
          --leading-label: 1.2;
          --tracking-label: 1.56px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.35px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.1px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.24px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.32px;
          --text-heading: 36px;
          --leading-heading: 1.17;
          --tracking-heading: -0.54px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.88px;
          --text-display: 48px;
          --leading-display: 1.13;
          --tracking-display: -0.96px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 32px;
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-tags: 3px;
          --radius-cards: 8px;
          --radius-pills: 20px;
          --radius-badges: 3px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-hero-panels: 12px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-cloud: #f2f6ff;
          --surface-warm-sand: #fff6ea;
          --surface-cream-highlight: #ffe9c9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-navy: #021422;
          --color-vibrant-green: #00852e;
          --color-midnight-navy: #001f38;
          --color-sky-wash: #91c3ff;
          --color-snow: #ffffff;
          --color-cloud: #f2f6ff;
          --color-warm-sand: #fff6ea;
          --color-silver-mist: #ccd2d7;
          --color-e6e8e9: #e6e8e9;
          --color-iron-gray: #808f9c;
          --color-slate: #6a7c89;
          --color-graphite: #67727a;
          --color-charcoal: #262626;
          --color-spectrum-gradient: #724d99;
        
          /* Typography */
          --font-montserrat: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-new-kansas: 'New Kansas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rift-soft: 'Rift Soft', 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;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 1.3px;
          --text-label: 12px;
          --leading-label: 1.2;
          --tracking-label: 1.56px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.35px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.1px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.24px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.32px;
          --text-heading: 36px;
          --leading-heading: 1.17;
          --tracking-heading: -0.54px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.88px;
          --text-display: 48px;
          --leading-display: 1.13;
          --tracking-display: -0.96px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 32px;
          --radius-full: 50px;
        }