flowers_for_society___style_reference:
  info: "> indigo editorial trên nền gallery trắng — một giọng tím đậm duy nhất đặt trên canvas giấy trắng, nơi ảnh sản phẩm và typography làm toàn bộ công việc kể chuyện."

  theme: "light"

  info: "Flowers For Society là một fashion house nói bằng một giọng duy nhất, đầy quyết đoán: deep indigo (#203b90) xuyên suốt mọi bề mặt — logo, heading, button, border, và hero scrim — được neo bởi một gallery trắng thoáng đãng. Sản phẩm là hero: ảnh full-bleed với gradient overlay để đảm bảo độ dễ đọc, CTA hình pill cỡ lớn với border-radius 41-60px, và display type căn giữa sử dụng line-height cực sít của Integral (0.92-1.0) để nén không gian dọc. Hệ thống cố tình tối giản — hai custom typeface, không shadow, border-radius cực rộng, và một màu sắc duy nhất. Soehne đảm nhận UI với letter-spacing rộng (0.033-0.063em) giúp ngay cả chữ nhỏ cũng mang nhịp điệu boutique, editorial. Kết quả mang cảm giác như một trang tạp chí: tự tin, kiềm chế, và mang đậm dấu ấn thương hiệu."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Indigo Statement | `#203b90` | `--color-indigo-statement` | Màu thương hiệu chính — logo, tất cả heading, primary action fill, action border, và hero scrim bên trái. Đây là màu sắc duy nhất trong hệ thống; nó xuất hiện trên hầu hết mọi bề mặt để khẳng định sự hiện diện của thương hiệu |"
    info: "| Indigo Mist | `#7989bc` | `--color-indigo-mist` | Màu tím nhẹ cho border tinh tế và secondary outline — phiên bản dịu hơn của Indigo Statement, dùng khi độ bão hòa đầy đủ sẽ cảm thấy nặng nề |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Trạng thái form trung tính, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc nên giữ ở mức kín đáo. Không nâng cấp nó thành màu CTA chính |"
    info: "| Carbon | `#000000` | `--color-carbon` | Icon stroke, border sắc nét, và điểm nhấn văn bản tương phản cao. Dùng có chọn lọc khi màu thương hiệu indigo quá mềm |"
    info: "| Graphite | `#1b1b1b` | `--color-graphite` | Gần đen cho button border và chữ SHOP NOW — giải pháp thay thế mềm hơn so với đen nguyên chất cho các cạnh tinh tế |"
    info: "| Fog | `#f2f2f2` | `--color-fog` | Footer background — điểm khác biệt duy nhất so với trắng tinh, tạo một dải màu yên tĩnh ở cuối trang |"

  tokens___typography:

    soehne___body__navigation__buttons__ui_text___con_ngựa_thồ__tracking_cố_tình_rộng_trên_các_kích_thước_nhỏ_0_063em_ở_11px__0_055em_ở_14px_mang_lại_cho_ngay_cả_utility_text_nhịp_điệu_boutique__editorial__weight_700_dành_riêng_cho_nav_items_và_button_labels_____font_soehne:
      - "**Thay thế:** Inter, DM Sans"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 11px, 14px, 16px, 18px"
      - "**Line height:** 1.20, 1.30, 1.40, 1.50, 1.80"
      - "**Letter spacing:** 0.033em ở 16-18px, 0.043-0.056em ở 14px, 0.063em ở 11px"
      - "**Vai trò:** Body, navigation, buttons, UI text — con ngựa thồ. Tracking cố tình rộng trên các kích thước nhỏ (0.063em ở 11px, 0.055em ở 14px) mang lại cho ngay cả utility text nhịp điệu boutique, editorial. Weight 700 dành riêng cho nav items và button labels."

    integral___display_và_headings___giọng_editorial__dùng_ở_một_weight_duy_nhất_400_dựa_vào_mật_độ_tự_nhiên_của_font_và_line_height_cực_sít_0_92_1_0_để_tạo_display_type_nén__kiểu_tạp_chí__tracking_0_077em_ở_52px_là_xử_lý_dành_riêng_cho_logo_____font_integral:
      - "**Thay thế:** Druk Wide, Bebas Neue, Anton (chỉ cho display)"
      - "**Weights:** 400"
      - "**Kích thước:** 13px, 15px, 18px, 35px, 37px, 45px, 52px"
      - "**Line height:** 0.92, 1.00, 1.10, 1.28"
      - "**Letter spacing:** 0.013-0.017em ở 45-52px (sít), 0.035-0.048em ở 35-37px (vừa phải), 0.04em ở 18px, 0.077em ở 52px (logo display)"
      - "**Vai trò:** Display và headings — giọng editorial. Dùng ở một weight duy nhất (400) dựa vào mật độ tự nhiên của font và line-height cực sít (0.92-1.0) để tạo display type nén, kiểu tạp chí. Tracking 0.077em ở 52px là xử lý dành riêng cho logo."

    arial___system_fallback_cho_các_ngữ_cảnh_không_phải_thương_hiệu_email__transactional_surfaces__không_dùng_trong_site_chrome_chính_____font_arial:
      - "**Thay thế:** system-ui"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 14px"
      - "**Line height:** 1.20"
      - "**Vai trò:** System fallback cho các ngữ cảnh không phải thương hiệu (email, transactional surfaces). Không dùng trong site chrome chính."

    nunito_sans_klaviyo_hosted___nunito_sans_klaviyo_hosted___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_nunito_sans_klaviyo_hosted:
      - "**Weights:** 400, 700"
      - "**Kích thước:** 18px, 20px"
      - "**Line height:** 1, 1.2"
      - "**Vai trò:** Nunito-Sans-Klaviyo-Hosted — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

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

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.5 | 0.69px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.6px | `--text-body-sm` |"
      info: "| body | 16px | 1.4 | 0.53px | `--text-body` |"
      info: "| subheading | 18px | 1.1 | 0.72px | `--text-subheading` |"
      info: "| heading-sm | 35px | 1 | 1.23px | `--text-heading-sm` |"
      info: "| heading | 45px | 1 | 0.77px | `--text-heading` |"
      info: "| heading-lg | 52px | 0.92 | 0.68px | `--text-heading-lg` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 41px |"
      info: "| cards | 4px |"
      info: "| inputs | 41px |"
      info: "| buttons | 41px |"
      info: "| buttons-lg | 60px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 50px"
      - "**Card padding:** 30px"
      - "**Element gap:** 12px"

  components:

    announcement_bar:
      vai_trò: "Dải utility đầu trang cho các tag khuyến mãi hoặc chiến dịch."

      info: "Nền trắng, text căn giữa bằng Soehne 11px weight 700, uppercase, letter-spacing 0.063em, #203b90. Chiều cao ~40px. Có thể kèm mũi tên glyph ở cuối."

    header_navigation:
      vai_trò: "Navigation chính của site — link trái, logo giữa, icon utility phải."

      info: "Nền trắng, không border, không shadow. Bên trái: nav links bằng Soehne 14px weight 400, #203b90, letter-spacing 0.043em, cách nhau bằng khoảng cách ~24px. Giữa: logo mark. Phải: account và cart icons màu #203b90, kích thước 20-24px."

    logo_mark:
      vai_trò: "Wordmark — yếu tố nhận diện thương hiệu duy nhất và quan trọng nhất."

      info: "\"FLOWERS FOR SOCIETY\" xếp thành hai dòng, Integral 52px weight 400, #203b90, letter-spacing 0.077em, line-height 0.92. Tracking rộng và line-height sít tạo nên một khối logo nén, mang phong cách editorial."

    hero_banner:
      vai_trò: "Trưng bày sản phẩm full-bleed với text overlay."

      info: "Ảnh sản phẩm edge-to-edge (giày sneaker trong cánh đồng hoa cúc). Gradient scrim từ trái sang phải từ rgba(32,59,144,0.7) đến trong suốt để đảm bảo độ dễ đọc của text. Overlay text: Soehne 14-18px weight 700, uppercase, trắng, letter-spacing 0.055em. CTA đặt ở góc dưới bên phải."

    primary_cta_button_pill:
      vai_trò: "Call-to-action chủ đạo — dùng cho SHOP NOW và các primary action."

      info: "Fill trắng (#ffffff), text #1b1b1b, border-radius 41-60px (pill), Soehne 14px weight 700, uppercase, letter-spacing 0.043em, padding ngang 30px / padding dọc 12-15px. Không border, không shadow. Độ tương phản trắng-trên-ảnh làm nó nổi bật so với ảnh hero."

    indigo_action_button:
      vai_trò: "Secondary CTA trên các bề mặt sáng nơi màu thương hiệu nên đảm nhận hành động."

      info: "Fill #203b90, text trắng, border-radius 41px, Soehne 14px weight 700, uppercase, letter-spacing 0.043em, padding ngang 30px. Dùng trên các section trắng hoặc xám nhạt nơi pill trắng thiếu độ tương phản."

    section_display_heading:
      vai_trò: "Headline editorial căn giữa cho các section nội dung bên dưới hero."

      info: "Integral 35-45px weight 400, #203b90, uppercase, căn giữa, letter-spacing 0.017-0.035em, line-height 1.0. Ví dụ: \"A BRAND BUILT ON PURPOSE\" — sít, nén, tạo tuyên bố mạnh mẽ."

    navigation_link:
      vai_trò: "Header và inline navigation items."

      info: "Soehne 14px weight 400, #203b90, letter-spacing 0.043em, không gạch chân, không có chỉ dẫn đổi màu khi hover (indigo đã là màu thương hiệu). Khoảng cách 24px giữa các item."

    footer:
      vai_trò: "Khu vực utility cuối trang."

      info: "Nền #f2f2f2, padding 30px+, Soehne 14px weight 400 màu #203b90 cho links và body text. Bề mặt không trắng duy nhất trên site."

    input_field:
      vai_trò: "Form inputs (email, search, v.v.)."

      info: "Border-radius 41px (pill), border 1px màu #000000 hoặc #203b90, padding 15-16px, Soehne 16px weight 400. Radius cực rộng khớp với hệ thống button để đảm bảo tính nhất quán về mặt thị giác."

  do_s_and_don_ts:

    do:
      - "Dùng #203b90 làm màu sắc duy nhất — nó nên xuất hiện trên logo, heading, border, và hero scrim để khẳng định bản sắc thương hiệu."
      - "Dùng button hình pill với border-radius 41-60px cho mọi hành động; không bao giờ dùng button hình chữ nhật hoặc hơi bo tròn."
      - "Dùng ảnh sản phẩm full-bleed với gradient scrim từ trái sang phải cho hero section."
      - "Dùng Soehne với letter-spacing rộng (0.043-0.063em) cho tất cả UI và body text để duy trì nhịp điệu editorial."
      - "Dùng Integral với line-height sít (0.92-1.0) cho tất cả display heading để tạo type nén, kiểu tạp chí."
      - "Giữ trang chủ đạo màu trắng — chỉ dùng #f2f2f2 cho dải footer."
      - "Dùng padding ngang 30px và padding dọc 12-15px trên tất cả interactive elements."

    don_t:
      - "Không thêm màu sắc khác — toàn bộ hệ thống nói bằng indigo và màu trung tính."
      - "Không dùng box-shadow hoặc hiệu ứng elevation — thiết kế cố tình phẳng."
      - "Không dùng button hoặc input hình chữ nhật — radius cực rộng (41-60px) là signature."
      - "Không dùng body fonts cho heading hoặc display text — Integral đảm nhận giọng editorial độc quyền."
      - "Không dùng letter-spacing sít trên Soehne — tracking rộng là thứ mang lại cho UI cảm giác boutique."
      - "Không thêm decorative gradient hoặc background pattern vào các section không phải hero."
      - "Không dùng nhiều màu border — chỉ dùng #203b90 cho brand borders, #000000 cho utility borders."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Paper White Canvas | `#ffffff` | Nền trang chính — gallery trắng để indigo mang thương hiệu. |"
    info: "| 2 | Fog Footer | `#f2f2f2` | Bề mặt không trắng duy nhất, dùng riêng cho dải footer. |"

  elevation:

    info: "Thiết kế cố tình phẳng — không shadow, không hiệu ứng elevation. Phân cấp thị giác đạt được thông qua màu sắc (indigo trên trắng), typography (Integral display so với Soehne body), và hệ thống border-radius cực rộng, không phải thông qua chiều sâu."

  imagery:

    info: "Ảnh sản phẩm full-bleed, chất lượng cao trong bối cảnh tự nhiên, lãng mạn — giày sneaker trong cánh đồng hoa cúc, sản phẩm được tạo dáng trong môi trường hữu cơ. Hình ảnh tươi tốt, bão hòa, giàu phong cách sống, tương phản với UI chrome phẳng, tối giản. Xử lý: edge-to-edge, không bo góc, gradient scrim cho text overlay. Ảnh là hero; UI là khung."

  layout:

    info: "Hero photography full-bleed chiếm ưu thế ở viewport đầu tiên, tiếp theo là một content stack căn giữa trên canvas trắng. Header là một thanh trắng mỏng với nav căn trái, logo giữa, và icon utility phải — không có chỉ dẫn sticky behavior. Content section dùng display heading căn giữa với khoảng không dọc rộng rãi (section gap 50px+). Bố cục mang phong cách editorial: mỗi section là một tuyên bố, không phải một grid các tính năng. Navigation tối giản — bốn text links, không mega-menu, không sidebar."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text (headings): #203b90"
    - "text (body): #000000"
    - "background: #ffffff"
    - "border (brand): #203b90"
    - "accent: #7989bc"
    - "primary action: #203b90 (filled action)"

    ví_dụ_component_prompts:

    - "Tạo Primary Action Button: nền #203b90, text #ffffff, border-radius 9999px, padding pill gọn. Dùng xử lý filled này cho CTA chính."

    - "**Section Display Heading**: Căn giữa trên canvas trắng. \"A BRAND BUILT ON PURPOSE\" bằng Integral 45px weight 400, #203b90, uppercase, letter-spacing 0.017em, line-height 1.0. Margin dọc 50px phía trên và dưới."

    - "**Header Navigation**: Nền trắng, không border, không shadow. Bên trái: nav links (Footwear, Apparel & Collectables, About us, Stories) bằng Soehne 14px weight 400, #203b90, letter-spacing 0.043em, gap 24px. Giữa: logo mark \"FLOWERS FOR SOCIETY\" bằng Integral 52px weight 400, #203b90, letter-spacing 0.077em, line-height 0.92. Bên phải: account và cart icons màu #203b90, kích thước 24px."

    - "**Announcement Bar**: Nền trắng, text căn giữa \"FEEL THE FLOW →\" bằng Soehne 11px weight 700, uppercase, #203b90, letter-spacing 0.063em. Chiều cao 40px, không border."

    - "**Footer Band**: Nền #f2f2f2, padding 40px. Links và text bằng Soehne 14px weight 400, #203b90, letter-spacing 0.043em."

  similar_brands:

    - "**Aesop** — Cùng cách tiếp cận nhận diện thương hiệu một màu — một màu đậm, đặc trưng được mang trên canvas trắng với typography editorial và chrome tối giản."
    - "**Aimé Leon Dore** — Cùng thẩm mỹ thời trang boutique — letter-spacing rộng trên UI text, button hình pill, ảnh sản phẩm lifestyle full-bleed, và một màu thương hiệu duy nhất neo toàn bộ hệ thống."
    - "**Glossier** — Cùng triết lý thiết kế phẳng, không shadow với một màu thương hiệu duy nhất và khoảng trắng rộng rãi để ảnh sản phẩm được thở."
    - "**On Running** — Cùng hệ thống border-radius cực rộng (pill buttons và inputs) và xử lý ảnh sản phẩm lifestyle với gradient scrim cho text overlay."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-indigo-statement: #203b90;
          --color-indigo-mist: #7989bc;
          --color-paper-white: #ffffff;
          --color-carbon: #000000;
          --color-graphite: #1b1b1b;
          --color-fog: #f2f2f2;
        
          /* Typography — Font Families */
          --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-integral: 'Integral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nunito-sans-klaviyo-hosted: 'Nunito-Sans-Klaviyo-Hosted', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.69px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.6px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: 0.53px;
          --text-subheading: 18px;
          --leading-subheading: 1.1;
          --tracking-subheading: 0.72px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: 1.23px;
          --text-heading: 45px;
          --leading-heading: 1;
          --tracking-heading: 0.77px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: 0.68px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-52: 52px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 50px;
          --card-padding: 30px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-3xl: 41px;
          --radius-full: 60px;
        
          /* Named Radii */
          --radius-tags: 41px;
          --radius-cards: 4px;
          --radius-inputs: 41px;
          --radius-buttons: 41px;
          --radius-buttons-lg: 60px;
        
          /* Surfaces */
          --surface-paper-white-canvas: #ffffff;
          --surface-fog-footer: #f2f2f2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-indigo-statement: #203b90;
          --color-indigo-mist: #7989bc;
          --color-paper-white: #ffffff;
          --color-carbon: #000000;
          --color-graphite: #1b1b1b;
          --color-fog: #f2f2f2;
        
          /* Typography */
          --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-integral: 'Integral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nunito-sans-klaviyo-hosted: 'Nunito-Sans-Klaviyo-Hosted', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.69px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.6px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: 0.53px;
          --text-subheading: 18px;
          --leading-subheading: 1.1;
          --tracking-subheading: 0.72px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: 1.23px;
          --text-heading: 45px;
          --leading-heading: 1;
          --tracking-heading: 0.77px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: 0.68px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-52: 52px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-3xl: 41px;
          --radius-full: 60px;
        }