glossier___style_reference:
  info: "> Sunlit beauty editorial — trắng giấy, đen mực, một tia vàng"

  theme: "light"

  info: "Glossier hoạt động như một tạp chí làm đẹp kỹ thuật số: một canvas gần như đơn sắc với trắng giấy và đen mực, bị phá vỡ bởi một điểm nhấn vàng điện duy nhất — vừa là brand wordmark vừa là lời kêu gọi hành động duy nhất. Hệ thống mang tính editorial ở sự tiết chế — headline Apercu cỡ lớn, khoảng thở rộng rãi, ảnh lifestyle full-bleed đảm nhận phần lớn trọng lượng cảm xúc — và mang tính thực dụng trong thực thi, với flat product cards, đường viền mảnh (hairline borders), và hoàn toàn không có chi tiết trang trí. Màu vàng không phải là màu phụ của thương hiệu; nó CHÍNH LÀ thương hiệu, được sử dụng một cách dè xẻn để mỗi lần xuất hiện đều như một tia sáng lóe. Mọi thứ khác phải lùi lại: các màu trung tính là xám ấm với một chút hồng nhẹ (blush undertone), đường viền gần như vô hình, chữ thì chặt và nén. Kết quả là một storefront mang phong cách tự tin, tinh tế, và hiện đại không hề nao núng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Glossier Yellow | `#fff116` | `--color-glossier-yellow` | Điểm nhấn vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính |"
    info: "| Ink | `#000000` | `--color-ink` | Văn bản chính, nav links, body copy, footer text, icon strokes, hairline borders; màu chủ đạo về typographic và cấu trúc |"
    info: "| Paper | `#ffffff` | `--color-paper` | Bề mặt product card, input fills, elevated panels; mức bề mặt sáng nhất trong hệ thống phân cấp |"
    info: "| Fog | `#f7f7f7` | `--color-fog` | Page canvas, nền section, chuyển tiếp ảnh sang trang; bề mặt nền mà toàn bộ trang web nằm trên đó |"
    info: "| Blush | `#faf2f4` | `--color-blush` | Nền footer, các ngắt section ấm áp nhẹ nhàng; một màu trắng ngà pha hồng gần như không nhận thấy, tạo thêm hơi ấm cho cuối trang |"
    info: "| Mist | `#f0f0f0` | `--color-mist` | Bề mặt hỗ trợ nhẹ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính |"
    info: "| Ash | `#e8e8e8` | `--color-ash` | Đường viền input, nền badge, hairline dividers; màu viền cấu trúc cho card và form elements |"
    info: "| Graphite | `#666666` | `--color-graphite` | Văn bản phụ, helper copy, muted labels, form placeholder text; màu xám trung duy nhất cho phân cấp typographic |"
    info: "| Slate | `#464545` | `--color-slate` | Product list và card swatch fills; màu xám chức năng tối nhất cho catalog imagery placeholders |"
    info: "| Cobalt Tag | `#0600ff` | `--color-cobalt-tag` | Điểm nhấn tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |"

  tokens___typography:

    apercu___kiểu_chữ_chính_trên_toàn_bộ_ui___body_ở_16px_400__navigation_và_labels_ở_12_14px_500__subheadings_ở_20px_500__editorial_headlines_ở_32px_700__cấu_trúc_geometric_humanist_của_apercu_mang_lại_cho_thương_hiệu_giọng_nói_nén__đương_đại__letter_spacing_gần_như_bằng_0_0_002_0_003em_giữ_cho_chữ_chặt_và_giống_tạp_chí_thay_vì_thoáng_hoặc_thân_thiện__weight_700_chỉ_dành_cho_các_khoảnh_khắc_editorial_display__không_dùng_cho_ui_chrome_____font_apercu:
      - "**Thay thế:** Inter, Suisse Int'l, hoặc Söhne"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 12, 14, 16, 20, 32"
      - "**Line height:** 1.00–1.70"
      - "**Letter spacing:** 0.0020em đến 0.0030em ở kích thước body; 0.0400em trên small caps/eyebrow labels"
      - "**Vai trò:** Kiểu chữ chính trên toàn bộ UI — body ở 16px/400, navigation và labels ở 12–14px/500, subheadings ở 20px/500, editorial headlines ở 32px/700. Cấu trúc geometric humanist của Apercu mang lại cho thương hiệu giọng nói nén, đương đại; letter-spacing gần như bằng 0 (0.002–0.003em) giữ cho chữ chặt và giống tạp chí thay vì thoáng hoặc thân thiện. Weight 700 chỉ dành cho các khoảnh khắc editorial display, không dùng cho UI chrome."

    apercu_mono___typography_micro_utility_cho_order_metadata__tracking_numbers__và_code_adjacent_labels__người_anh_em_monospaced_tạo_ra_kết_cấu_kỹ_thuật_đối_lập_với_proportional_body_face____font_apercu_mono:
      - "**Thay thế:** JetBrains Mono hoặc IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 12"
      - "**Line height:** 1.40"
      - "**Vai trò:** Typography micro-utility cho order metadata, tracking numbers, và code-adjacent labels; người anh em monospaced tạo ra kết cấu kỹ thuật đối lập với proportional body face"

    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:** 16px"
      - "**Line height:** 1.5"
      - "**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 | 12px | 1.4 | 0.48px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.06px | `--text-subheading` |"
      info: "| heading | 32px | 1.2 | -0.1px | `--text-heading` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 34 | 34px | `--spacing-34` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 41 | 41px | `--spacing-41` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    yellow_primary_button:
      vai_trò: "Kiểu call-to-action duy nhất trên toàn trang"

      info: "Nền #fff116 đầy, chữ #000000 bằng Apercu 14px/500, uppercase tracking ở 0.04em, border-radius 0px, padding 12px 24px, không shadow. Nút này là thứ ồn ào nhất trên bất kỳ trang nào và phải được sử dụng dè xẻn — tối đa một nút trên mỗi viewport."

    ghost_text_link:
      vai_trò: "Inline và navigation links mặc định"

      info: "Không nền, chữ #000000 bằng Apercu 14–16px/400, gạch chân chỉ xuất hiện khi hover. Kế thừa màu từ parent khi lồng trong các ngữ cảnh muted."

    outlined_secondary_button:
      vai_trò: "Các hành động phụ như 'Choose set' trên product cards"

      info: "Nền trong suốt, viền 1px solid #000000, chữ #000000 bằng Apercu 14px/500, radius 0px, full-width trong card, padding 14px 16px. Nằm bên dưới product card như một action strip full-width."

    product_card:
      vai_trò: "Mục catalog trong grid views"

      info: "Nền #ffffff, border-radius 0px, không shadow. Ảnh sản phẩm phủ kín phần trên card với tỷ lệ 1:1 hoặc 4:5. Bên dưới ảnh: tên sản phẩm bằng Apercu 16px/500 #000000, mô tả ngắn bằng 14px/400 #666666, giá bằng 16px/500 #000000. Không có card border — whitespace phân cách các card với nền trang #f7f7f7."

    new_badge:
      vai_trò: "Thẻ sản phẩm editorial"

      info: "Nền #0600ff đặc, chữ trắng bằng Apercu 12px/700 uppercase, radius 0px, padding 4px 8px. Đặt ở góc trên bên trái của ảnh sản phẩm."

    utility_announcement_bar:
      vai_trò: "Dải quảng cáo toàn trang"

      info: "Nền #000000 full-bleed, chữ #ffffff bằng Apercu 12px/400, căn giữa, paddingTop và paddingBottom 1px. Chứa thông báo vận chuyển và copy quảng cáo."

    top_navigation:
      vai_trò: "Navigation chính của trang"

      info: "Nền trắng, logo #000000 bằng Apercu bold (trái), các category links ngang bằng Apercu 12px/500 uppercase (giữa), utility icons và account links (phải). Sticky khi cuộn, radius 0px, viền dưới 1px solid #e8e8e8 khi cuộn."

    hero_overlay_card:
      vai_trò: "Product callout theo ngữ cảnh trên hero imagery"

      info: "Card nền trắng, không viền, không radius, nổi ở góc trên bên trái trên một bức ảnh lifestyle full-bleed. Chứa eyebrow label (Apercu 12px/500 uppercase), headline (20–32px/700), body copy (14px/400 #666666), và yellow CTA button. Tạo năng lượng bìa tạp chí editorial."

    text_input:
      vai_trò: "Form fields cho email, search, checkout"

      info: "Nền #ffffff, viền 1px solid #e8e8e8, radius 0px, padding 12px 16px, chữ Apercu 14px/400 #000000. Placeholder bằng #666666. Trạng thái focus dày viền lên 2px solid #000000."

    full_bleed_image_section:
      vai_trò: "Các khối ảnh lifestyle và atmospheric"

      info: "Ảnh edge-to-edge, không padding, không viền. Glossier wordmark bằng #fff116 Apercu 700 phủ lên ở tỷ lệ khổng lồ (200px+), thường tràn ra ngoài mép màn hình để tạo kịch tính editorial."

    two_column_image_split:
      vai_trò: "Các khối navigation category song song"

      info: "Hai panel 50/50, mỗi panel là một bức ảnh full-bleed với một thẻ chữ trắng căn giữa: eyebrow label bằng Apercu 12px/500 uppercase, CTA bằng 14px/500. Phân cách skincare với makeup categories không có viền nhìn thấy — chỉ có đường nối ảnh."

    footer:
      vai_trò: "Footer trang với navigation, newsletter, legal"

      info: "Nền #faf2f4 ấm áp (blush), radius 0px, padding trên 64px rộng rãi. Danh sách link Apercu 14px/400 #000000 trong grid 4 cột, newsletter signup inline, copyright bằng 12px/400 #666666."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ sử dụng #fff116 cho primary action button và brand wordmark — không bao giờ dùng làm nền, viền, hoặc màu chữ ở nơi khác"
      - "Duy trì border-radius 0px trên tất cả components — cards, buttons, badges, và inputs phải giữ góc sắc"
      - "Đặt body text ở 16px/400 bằng Apercu với letter-spacing 0.002–0.003em; chỉ dành 32px/700 cho editorial display headlines"
      - "Sử dụng ảnh lifestyle full-bleed làm yếu tố hình ảnh chính; nền trang #f7f7f7 chỉ nên hiển thị ở mép section và xung quanh card grids"
      - "Giữ product cards trên nền #ffffff thuần khiết, không viền, không shadow — để whitespace và canvas #f7f7f7 tạo sự phân cách"
      - "Viết hoa (uppercase) Apercu 12px/500 với tracking 0.04em cho tất cả eyebrow labels, category names, và nav items"
      - "Sử dụng #0600ff Cobalt chỉ cho NEW hoặc status badges — không bao giờ dùng làm CTA, link, hoặc điểm nhấn trang trí"

    không_nên_làm:
      - "Không thêm rounded corners, drop shadows, hoặc gradients — hệ thống cố tình phẳng và sắc"
      - "Không sử dụng #fff116 làm hover state, border, hoặc nền cho các element không phải nút — điều đó làm loãng sức mạnh của primary action"
      - "Không sử dụng màu sắc để tạo phân cấp typographic — dựa vào Apercu weight (400/500/700) và các bước kích thước"
      - "Không thêm borders hoặc backgrounds vào product cards; bề mặt #ffffff trên canvas #f7f7f7 cung cấp đủ sự phân cách"
      - "Không sử dụng #666666 cho văn bản chính; chỉ dành nó cho helper copy, metadata, và placeholders"
      - "Không căn giữa body copy hoặc product descriptions — căn trái mọi thứ ngoại trừ hero display type và section intros"
      - "Không sử dụng nhiều hơn một yellow element trên mỗi viewport; sức mạnh của điểm nhấn phụ thuộc vào sự khan hiếm của nó"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f7f7f7` | Nền cơ bản cho toàn bộ trang web; hiển thị phía sau product grids, giữa các section, và là màu body mặc định |"
    info: "| 1 | Product Card | `#ffffff` | Bề mặt nâng cao cho catalog items và content blocks; nằm một bước trên canvas mà không có borders hoặc shadows |"
    info: "| 2 | Footer | `#faf2f4` | Bề mặt ấm áp pha hồng (blush) cho footer; tạo sự thay đổi nhiệt độ màu tinh tế ở cuối trang |"
    info: "| 3 | Accent | `#fff116` | Bề mặt tín hiệu thương hiệu — chỉ xuất hiện dưới dạng CTA button fill và wordmark, không bao giờ là nền kéo dài |"

  imagery:

    info: "Nhiếp ảnh là ngôn ngữ hình ảnh chủ đạo. Ảnh lifestyle và chân dung full-bleed lấp đầy viewport — ánh sáng ngược giờ vàng ấm áp, cận cảnh làn da mềm mại, bàn tay cầm chai sản phẩm trước tia nắng mặt trời. Bảng màu trong nhiếp ảnh là ấm áp và bão hòa thấp: bầu trời màu đào, tông màu da terracotta, xanh dương đại dương sâu thẳm. Ảnh luôn edge-to-edge, không rounded corners, không borders, và không overlays ngoại trừ thẻ chữ trắng hoặc yellow wordmark. Ảnh sản phẩm trên catalog cards được chụp trên nền trắng thuần khiết (seamless) với ánh sáng phẳng, đều. Tỷ lệ ảnh so với chữ xấp xỉ 70/30 — ảnh mang cảm xúc, chữ mang chức năng. Không có illustrations, không có abstract graphics, không có 3D renders."

  layout:

    info: "Trang là một chuỗi các section full-bleed xếp chồng theo chiều dọc, mỗi section được thiết kế như một editorial spread độc lập. Hero là một bức ảnh full-viewport với một white overlay card nổi (góc trên bên trái) và một yellow wordmark khổng lồ tràn ra mép dưới. Bên dưới hero, các section xen kẽ giữa full-bleed imagery và contained card grids. Một two-column 50/50 image split phân cách các category zones (skincare/makeup) không có viền nhìn thấy — chỉ có đường nối ảnh phân chia chúng. Product catalog sử dụng grid 4 cột gồm các card vuông trên canvas #f7f7f7. Navigation là một top bar tối giản với một utility announcement strip phía trên. Section gaps rộng rãi (64px) nhưng chuyển tiếp giữa các section liền mạch — không có dividers, không có màu nền xen kẽ ngoại trừ footer ấm áp. Nhịp điệu tổng thể là: ảnh, chữ, ảnh, grid, ảnh — giống như lật một tạp chí thời trang."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 (Ink)"
    - "Background: #f7f7f7 (Fog)"
    - "Border: #e8e8e8 (Ash)"
    - "Accent: #fff116 (Glossier Yellow)"
    - "Surface: #ffffff (Paper)"
    - "Muted text: #666666 (Graphite)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatments đã trích xuất thay vì tự tạo ra màu CTA đầy."

    - "**Product Card**: Bề mặt trắng #ffffff, không border hoặc shadow, radius 0px. Ảnh sản phẩm phủ kín phần trên với tỷ lệ 4:5. Tên sản phẩm bằng Apercu 16px weight 500 #000000, mô tả bằng 14px weight 400 #666666, giá bằng 16px weight 500 #000000. Bên dưới card, một outlined button full-width: nền trong suốt, viền 1px solid #000000, radius 0px, Apercu 14px weight 500, padding 14px 16px."

    - "**Utility Bar**: Nền #000000 full-bleed, chữ #ffffff bằng Apercu 12px weight 400, căn giữa, padding dọc 4px."

    - "**NEW Badge**: Nền #0600ff đặc, chữ trắng bằng Apercu 12px weight 700 uppercase, radius 0px, padding 4px 8px, đặt ở góc trên bên trái của ảnh sản phẩm."

  similar_brands:

    - "**Aesop** — Cùng sự tiết chế editorial với bảng màu trung tính ấm, typography sans-serif gần serif, và nhiếp ảnh chiếm toàn bộ viewport"
    - "**Goop** — Thẩm mỹ DTC beauty tương tự với ảnh lifestyle full-bleed, whitespace rộng rãi, và một màu nhấn duy nhất neo thương hiệu"
    - "**Mejuri** — Bố cục product grid sạch sẽ với card trắng trên canvas xám ấm, chrome tối giản, và ảnh đen trắng tương phản cao"
    - "**Aesop / Mansur Gavriel / & Other Stories** — Cùng ngôn ngữ component phẳng, radius 0px và triết lý thiết kế nơi sự tiết chế và whitespace mang nhiều trọng lượng hơn trang trí"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-glossier-yellow: #fff116;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #f7f7f7;
          --color-blush: #faf2f4;
          --color-mist: #f0f0f0;
          --color-ash: #e8e8e8;
          --color-graphite: #666666;
          --color-slate: #464545;
          --color-cobalt-tag: #0600ff;
        
          /* Typography — Font Families */
          --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu-mono: 'Apercu Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.48px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.06px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.1px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-34: 34px;
          --spacing-40: 40px;
          --spacing-41: 41px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-page-canvas: #f7f7f7;
          --surface-product-card: #ffffff;
          --surface-footer: #faf2f4;
          --surface-accent: #fff116;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-glossier-yellow: #fff116;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #f7f7f7;
          --color-blush: #faf2f4;
          --color-mist: #f0f0f0;
          --color-ash: #e8e8e8;
          --color-graphite: #666666;
          --color-slate: #464545;
          --color-cobalt-tag: #0600ff;
        
          /* Typography */
          --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu-mono: 'Apercu Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.48px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.06px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.1px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-34: 34px;
          --spacing-40: 40px;
          --spacing-41: 41px;
        }