recess___style_reference:
  info: "> hoàng hôn pastel trên bể bơi"

  theme: "mixed"

  info: "Recess sống trong một giấc mơ giữa ban ngày với bầu trời pastel: những canvas periwinkle mềm mại, ánh sáng chân trời màu hồng đào, và các hình mây lơ lửng tạo nên bầu không khí tĩnh lặng có chủ đích thay vì thương mại. Thương hiệu thể hiện qua một font sans-serif hình học đầy tự tin (Sharp Grotesk) kết hợp với logo script lockup — sự tương phản giữa chữ có cấu trúc và nét vẽ tay định hình nên cá tính. Màu sắc là tâm trạng, không phải trang trí: deep navy ink mang toàn bộ chữ, một màu xanh dương rực rỡ duy nhất nhấn mạnh, và phần còn lại của bảng màu là oải hương nhạt, kem, và san hô — tất cả gợi cảm giác như bên trong một buổi hoàng hôn. Các component có độ cao thấp và bo tròn nhẹ nhàng — đường viền và fill mềm làm nhiệm vụ, không phải shadow. Layout là centered, rộng rãi, và nhiều khoảng thở, với một marquee banner ngang ở trên cùng và nội dung luôn có cảm giác như một trang tạp chí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Twilight Navy | `#25385b` | `--color-twilight-navy` | Primary text, headings, body copy, links, icons — màu mực cấu trúc mang toàn bộ giọng nói |"
    info: "| Periwinkle Sky | `#a2b0ff` | `--color-periwinkle-sky` | Nền section chủ đạo, accent mềm, lớp phủ không khí — nền signature tạo nên bản sắc mơ màng của Recess |"
    info: "| Dusk Indigo | `#0a0a3a` | `--color-dusk-indigo` | Nền footer, bề mặt tối tương phản cao, fill accent đậm |"
    info: "| Cobalt Pop | `#3252f4` | `--color-cobalt-pop` | Accent rực rỡ hiếm hoi cho emphasis, active states, và heading nổi bật — dùng tiết kiệm để tạo một nhịp điện duy nhất giữa bảng màu trầm |"
    info: "| Coral Blush | `#ff5a5a` | `--color-coral-blush` | Hơi ấm trang trí, accent thỉnh thoảng — nốt ấm duy nhất trong bảng màu lạnh |"
    info: "| Cloud White | `#ffffff` | `--color-cloud-white` | Bề mặt hỗ trợ sáng cho nền nhẹ và phân cách section. Không nâng lên thành màu CTA chính |"
    info: "| Cream Linen | `#fffcef` | `--color-cream-linen` | Bề mặt hỗ trợ sáng cho nền nhẹ và phân cách section. Không nâng lên thành màu CTA chính |"
    info: "| Slate Mist | `#84849c` | `--color-slate-mist` | Secondary text nhạt, caption, helper text, border ít nhấn mạnh |"
    info: "| Onyx | `#000000` | `--color-onyx` | Logo mark, icon strokes, border tương phản cao, nav elements |"

  tokens___typography:

    sharp_grotesk_web___typeface_chính_cho_mọi_ui_text__headings__body__buttons__và_nav___một_geometric_sans_có_cấu_trúc__đều_đặn_và_hiện_đại__display_weight_60px_tạo_cảm_giác_tự_tin_mà_không_nặng_nề__400_500_cho_body_giữ_mọi_thứ_nhẹ_nhàng_và_thoáng__hình_học_sạch_sẽ_của_sharp_grotesk_tương_phản_với_script_logo_viết_tay__và_sự_căng_thẳng_đó_là_cá_tính_của_type_____font_sharp_grotesk_web:
      - "**Thay thế:** Space Grotesk hoặc DM Sans"
      - "**Weights:** 400, 500, 700"
      - "**Cỡ chữ:** 14, 15, 16, 18, 20, 24, 60"
      - "**Line height:** 1.0–1.63"
      - "**Vai trò:** Typeface chính cho mọi UI text, headings, body, buttons, và nav — một geometric sans có cấu trúc, đều đặn và hiện đại. Display weight 60px tạo cảm giác tự tin mà không nặng nề; 400/500 cho body giữ mọi thứ nhẹ nhàng và thoáng. Hình học sạch sẽ của Sharp Grotesk tương phản với script logo viết tay, và sự căng thẳng đó là cá tính của type."

    recess_script_logo___wordmark_duy_nhất___một_script_cursive_vẽ_tay_đọc_là__recess__với_sự_ấm_áp_cá_nhân__giản_dị__script_cố_tình_giản_dị_để_đối_lập_với_sự_trang_trọng_của_sharp_grotesk__logo_là_chữ_ký__body_là_nhãn_mác_____font_recess_script_logo:
      - "**Thay thế:** Caveat hoặc Pacifico"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 32–40"
      - "**Line height:** 1.0"
      - "**Vai trò:** Wordmark duy nhất — một script cursive vẽ tay đọc là 'Recess' với sự ấm áp cá nhân, giản dị. Script cố tình giản dị để đối lập với sự trang trọng của Sharp Grotesk: logo là chữ ký, body là nhãn mác."

    adobe_blank___adobe_blank___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_adobe_blank:
      - "**Weights:** 400"
      - "**Cỡ chữ:** 14px, 24px"
      - "**Line height:** 1.38, 1.63"
      - "**Vai trò:** Adobe Blank — đượ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ò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.38 | — | `--text-caption` |"
      info: "| body | 16px | 1.63 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.25 | — | `--text-heading` |"
      info: "| display | 60px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "spacious"

    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: "| 84 | 84px | `--spacing-84` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| pills | 9999px |"
      info: "| badges | 9999px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4-8px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-100px"
      - "**Card padding:** 24-32px"
      - "**Element gap:** 8-16px"

  components:

    primary_cta_button_outlined:
      vai_trò: "Main action — ví dụ 'SHOP NOW', 'SHOP ALL PRODUCTS'"

      info: "Hình chữ nhật, radius 4–8px, padding 12px 24px. Border 1–2px Twilight Navy (#25385b), fill trong suốt hoặc Periwinkle, text Twilight Navy. All-caps, 14–16px Sharp Grotesk weight 500, letter-spacing nhẹ. Không shadow, không gradient — phẳng và tự tin."

    ghost_pill_button:
      vai_trò: "Secondary action sticky/floating — ví dụ 'SHOP NOW' ở góc dưới phải"

      info: "Full pill radius (9999px), fill Cloud White (#ffffff), text Twilight Navy (#25385b), border 1px Twilight Navy. 14px Sharp Grotesk weight 500, padding 10px 20px. Được thiết kế để float nhẹ nhàng trên các section pastel."

    top_marquee_banner:
      vai_trò: "Dải quảng cáo — vận chuyển, mã giảm giá, thông báo"

      info: "Dải ngang full-bleed, cao 32–40px, nền Twilight Navy (#25385b), text Cloud White, 12–14px Sharp Grotesk. Text lặp lại với dấu chấm nhỏ làm dấu phân cách. Không padding, chạy edge-to-edge phía trên nav."

    header___nav_bar:
      vai_trò: "Navigation toàn trang"

      info: "Trong suốt trên hero, chuyển thành solid khi scroll. Logo script 'Recess' bên trái (~32–40px), nav links bên phải ('shop', 'subscribe & save', 'login') + icon giỏ hàng. Links màu Twilight Navy, 14–16px Sharp Grotesk weight 400. Không background fill trên hero gradient — nó float."

    hero_section:
      vai_trò: "Brand statement màn hình đầu"

      info: "Nền gradient bầu trời full-bleed (xanh dương đến trắng). Headline 60px Sharp Grotesk weight 700 màu Twilight Navy, căn trái ở ~10% từ trái. Subtext 16–18px, Slate Mist. Product visual căn phải với organic blob/rounded-rectangle mask. Không card chrome — gradient LÀ bề mặt."

    product_showcase_card:
      vai_trò: "Hàng sản phẩm nổi bật — ví dụ 'calm for every occasion'"

      info: "Stack căn giữa trên nền gradient hoàng hôn. Sản phẩm hiển thị theo hàng ngang không có card riêng lẻ — chỉ có ảnh sản phẩm float. Headline 60px phía trên, subtext 16px, CTA button căn giữa bên dưới. Nền là linear gradient full-bleed (kem → oải hương → hồng đào)."

    testimonial_card:
      vai_trò: "Social proof — quote cards trong carousel"

      info: "Fill Cloud White (#ffffff), radius 8px, padding 24–32px, border 1px Slate Mist. Dấu ngoặc kép lớn màu Twilight Navy ở góc trên bên trái. Quote text 16–18px Sharp Grotesk weight 400, căn giữa. Attribution (handle) 14px Slate Mist. Nằm trên nền Periwinkle Sky với các hình mây float."

    cloud_decoration:
      vai_trò: "Đồ họa không khí — hình mây float"

      info: "Hình blob trắng/kem mềm với đường viền hữu cơ bất quy tắc, shadow bên dưới độ mờ ~10%. Rải rác trên các section Periwinkle với tỉ lệ khác nhau (60–160px). Không border, không text — hoàn toàn là chiều sâu không khí."

    footer:
      vai_trò: "Footer trang"

      info: "Nền Dusk Indigo (#0a0a3a) full-bleed, text Cloud White. Multi-column link grid, newsletter signup, social icons. 16px Sharp Grotesk weight 400, section padding 64–80px."

    promo_card_border_style:
      vai_trò: "Outlined card với chromatic border"

      info: "Border 1–2px Periwinkle Sky trên fill trong suốt hoặc trắng, radius 8px. Dùng cho các section được tô sáng hoặc nhóm sản phẩm. Không shadow, không fill — chỉ border xác định container."

  do_s_and_don_ts:

    nên:
      - "Dùng Sharp Grotesk cho mọi UI text; chỉ kết hợp với script logo như một wordmark — không bao giờ dùng làm body type."
      - "Đặt display headlines ở 60px weight 700 với line-height 1.0 để có giọng nói chặt chẽ, tự tin."
      - "Xây dựng section trên nền Periwinkle Sky (#a2b0ff) hoặc gradient hoàng hôn dưới dạng lớp không khí full-bleed, không phải hộp chứa."
      - "Dùng Twilight Navy (#25385b) cho mọi text và border — nó là màu cấu trúc duy nhất."
      - "Giữ buttons phẳng: outlined rectangles với border 1–2px Twilight Navy, không gradient, không shadow."
      - "Thêm organic cloud shapes ở độ mờ 10–20% làm decoration float tạo không khí trên các section oải hương."
      - "Duy trì khoảng thở dọc 80–100px giữa các section chính để giữ nhịp điệu rộng rãi, giống tạp chí."

    không_nên:
      - "Không dùng script logo cho headings hoặc body text — nó là chữ ký, không phải typeface."
      - "Không áp dụng shadow nặng hoặc elevation cho cards — Recess dùng borders và gradients, không phải chiều sâu."
      - "Không thêm accent colors khác ngoài Cobalt Pop (#3252f4) và Coral Blush (#ff5a5a) — bảng màu được kiềm chế có chủ đích."
      - "Không dùng nền đen tuyền cho bất cứ thứ gì ngoài icon strokes nhỏ — Dusk Indigo (#0a0a3a) là bề mặt tối."
      - "Không nhồi nhét sản phẩm vào grid với card chrome nhìn thấy được — để ảnh sản phẩm float tự do trên bề mặt gradient."
      - "Không dùng letter-spacing hoặc all-caps cho body text — chỉ display headings và buttons mới dùng tracked caps."
      - "Không phá vỡ ngôn ngữ gradient sky-to-sunset bằng các divider section solid màu cứng."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cloud White | `#ffffff` | Base page canvas |"
    info: "| 1 | Periwinkle Sky | `#a2b0ff` | Nền section không khí chủ đạo |"
    info: "| 2 | Cream Linen | `#fffcef` | Bề mặt thay thế pha ấm cho section tương phản |"
    info: "| 3 | Dusk Indigo | `#0a0a3a` | Footer và bề mặt tối tương phản |"

  elevation:

    info: "Recess cố tình tránh drop shadows. Mọi chiều sâu thị giác đến từ nền gradient nhiều lớp, hình mây mềm ở độ mờ giảm, và border chromatic 1–2px. Phong cách phẳng, không shadow giữ cho thẩm mỹ cảm giác như một poster in hoặc trang tạp chí thay vì web app."

  imagery:

    info: "Product photography là hero — các lon và hũ là nội dung thị giác, được chụp trên nền thuần khiết hoặc trong bối cảnh lifestyle (float trong phao bơi, xung quanh là trái cây). Xử lý: sáng, high-key, màu sản phẩm bão hòa trên nền không khí mềm mại. Phong cách photography là commercial-clean với bối cảnh lifestyle vui tươi. Không illustrations, không đồ họa trừu tượng ngoài organic cloud shapes. Cloud/blob SVG decorations có màu trắng mềm với độ mờ tinh tế, đóng vai trò là chiều sâu không khí chứ không phải nội dung."

  layout:

    info: "Full-bleed page model — mọi section đều kéo dài edge-to-edge với gradient hoặc màu riêng. Hero là bố cục chia đôi: headline block căn trái (~40% chiều rộng) + product visual căn phải với organic blob mask. Các section tiếp theo là centered stacks: headline → subtext → product row → CTA. Testimonials là card grid 3 cột với carousel dots, căn giữa trang. Navigation là transparent bar đơn giản float trên hero. Marquee banner là dải full-bleed mỏng phía trên nav. Nhịp điệu dọc rộng rãi (section gaps 80–100px) với nội dung luôn căn giữa trong max-width ~1200px. Dòng chảy tổng thể giống như lướt qua một tạp chí mơ màng — mỗi section là một màu tâm trạng mới."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #25385b"
    - "background: #a2b0ff (dominant atmospheric), #ffffff (canvas), #fffcef (warm alt)"
    - "border: #25385b (structural), #a2b0ff (atmospheric)"
    - "accent: #3252f4 (emphasis only), #ff5a5a (decorative warmth)"
    - "primary action: không có màu CTA riêng biệt"

    3_5_example_component_prompts:
    info: "Không quan sát thấy màu primary action riêng biệt; dùng các button treatment trung tính đã trích xuất thay vì tạo ra màu CTA fill."

    - "Xây dựng testimonial card: radius 8px, fill #ffffff, border 1px #84849c, padding 24px. Glyph ngoặc kép mở 32px #25385b góc trên bên trái. Quote text 16px Sharp Grotesk weight 400, #25385b, căn giữa. Attribution 14px #84849c."

    - "Xây dựng top marquee: full-bleed, cao 36px, nền #25385b, text #ffffff, 12px Sharp Grotesk. Các đoạn text lặp lại được phân cách bằng ký tự dấu chấm, không padding."

    - "Xây dựng ghost pill button: radius 9999px, fill #ffffff, border 1px #25385b, text #25385b, padding 10px 20px, 14px Sharp Grotesk weight 500."

    - "Xây dựng footer: nền #0a0a3a full-bleed, text #ffffff, link grid 4 cột, 16px Sharp Grotesk weight 400, padding dọc 80px."

  similar_brands:

    - "**Omsom** — Cùng nền gradient pastel bão hòa và bố cục product showcase căn giữa với nhiều khoảng thở"
    - "**Đối thủ của Recess như Kin Euphorics** — Cùng thẩm mỹ không khí mơ màng với hình ảnh trời/mây và bảng màu periwinkle pastel"
    - "**Magic Spoon** — Cùng cá tính thương hiệu vui tươi sử dụng section pastel mềm, geometric sans-serif type, và product photography float"
    - "**Olipop** — Cùng section gradient full-bleed với display headlines căn giữa và flat outlined CTA buttons"
    - "**Imperfect Foods** — Cùng cách tiếp cận dùng lớp màu không khí làm nền section thay vì card trắng trên nền xám"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-twilight-navy: #25385b;
          --color-periwinkle-sky: #a2b0ff;
          --color-dusk-indigo: #0a0a3a;
          --color-cobalt-pop: #3252f4;
          --color-coral-blush: #ff5a5a;
          --color-cloud-white: #ffffff;
          --color-cream-linen: #fffcef;
          --color-slate-mist: #84849c;
          --color-onyx: #000000;
        
          /* Typography — Font Families */
          --font-sharp-grotesk-web: 'Sharp Grotesk Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-recess-script-logo: 'Recess Script (logo)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-adobe-blank: 'Adobe Blank', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.38;
          --text-body: 16px;
          --leading-body: 1.63;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 24px;
          --leading-heading: 1.25;
          --text-display: 60px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --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-84: 84px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-100px;
          --card-padding: 24-32px;
          --element-gap: 8-16px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-pills: 9999px;
          --radius-badges: 9999px;
          --radius-inputs: 4px;
          --radius-buttons: 4-8px;
        
          /* Surfaces */
          --surface-cloud-white: #ffffff;
          --surface-periwinkle-sky: #a2b0ff;
          --surface-cream-linen: #fffcef;
          --surface-dusk-indigo: #0a0a3a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-twilight-navy: #25385b;
          --color-periwinkle-sky: #a2b0ff;
          --color-dusk-indigo: #0a0a3a;
          --color-cobalt-pop: #3252f4;
          --color-coral-blush: #ff5a5a;
          --color-cloud-white: #ffffff;
          --color-cream-linen: #fffcef;
          --color-slate-mist: #84849c;
          --color-onyx: #000000;
        
          /* Typography */
          --font-sharp-grotesk-web: 'Sharp Grotesk Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-recess-script-logo: 'Recess Script (logo)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-adobe-blank: 'Adobe Blank', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.38;
          --text-body: 16px;
          --leading-body: 1.63;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 24px;
          --leading-heading: 1.25;
          --text-display: 60px;
          --leading-display: 1;
        
          /* 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-84: 84px;
          --spacing-144: 144px;
        }