gleap___style_reference:
  info: "> Editorial serif trên nền pastel SaaS — như một trang tạp chí design được render trong product UI."

  theme: "light"

  info: "Gleap vận hành một hệ thống editorial trên nền sáng: tông kem ấm trắng ngà, chữ gần đen, và hai điểm nhấn pastel (oải hương hồng nhạt và xanh bột) đóng vai trò highlight nhẹ nhàng thay vì màu thương hiệu mạnh. Điểm đặc trưng là sự kết hợp giữa editorial serif tương phản cao (PP Editorial New) cho hero và section headline với một geometric grotesk (Switzer) cho mọi thành phần chức năng — điều này khiến giọng nói marketing giống như một trang tạp chí trong khi product UI vẫn giữ tính thực dụng. Bề mặt phẳng với shadow rất nhẹ, card bo tròn rộng (24–42px), button nằm ở radius nhỏ (10px) với fill đen đặc hoặc pastel — sự tương phản giữa geometric control cứng cáp và bề mặt product mềm mại, rộng lớn tạo nên nhịp điệu cho toàn bộ hệ thống."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, filled dark CTA, border tương phản cao. Tạo neo typographic trên nền kem |"
    info: "| Graphite | `#333333` | `--color-graphite` | Secondary text và màu hairline border chủ đạo (336 lần sử dụng). Mang hệ thống cạnh cấu trúc |"
    info: "| Slate | `#7b7b7b` | `--color-slate` | Muted helper text và inactive link text. Dùng khi thông tin phụ cần lùi lại |"
    info: "| Mist | `#bcbcbc` | `--color-mist` | Badge border nhẹ và soft body border. Nằm giữa Graphite cấu trúc và canvas trong hệ thống phân cấp border |"
    info: "| Silver | `#d6d6d6` | `--color-silver` | Light divider, input border, inactive link border. Neutral cấu trúc yên tĩnh nhất |"
    info: "| Bone | `#f5f2f0` | `--color-bone` | Bề mặt kem ấm — badge background và off-white secondary surface. Khác biệt với trắng tinh, mang lại cảm giác giấy ấm áp |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas và card surface. Nền mặc định cho mọi thứ |"
    info: "| Lilac Bloom | `#f1ccff` | `--color-lilac-bloom` | Màu action hồng cho filled button, selected navigation state, và focused conversion moment |"
    info: "| Sky Veil | `#91e0ff` | `--color-sky-veil` | Secondary accent — dùng có chừng mực cho icon accent, chi tiết illustration, và alternate highlight surface. Đối trọng mát mẻ với Lilac Bloom |"

  tokens___typography:

    switzer___mọi_ui_chức_năng__body_copy__subheading__nav__button__badge__weight_400_cho_body__500_cho_subheading__600_cho_emphasized_ui_label__letter_spacing_thắt_chặt_ở_kích_thước_lớn__0_025em_ở_32px___0_01em_ở_20px__thay_thế___inter__hoặc__general_sans_____font_switzer:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 13px, 14px, 16px, 20px, 32px"
      - "**Line height:** 1.19-1.44"
      - "**Letter spacing:** -0.010em ở 20px, -0.020em ở 32px, -0.025em ở 32px+"
      - "**Vai trò:** Mọi UI chức năng, body copy, subheading, nav, button, badge. Weight 400 cho body, 500 cho subheading, 600 cho emphasized UI label. Letter-spacing thắt chặt ở kích thước lớn (-0.025em ở 32px, -0.01em ở 20px). Thay thế: 'Inter' hoặc 'General Sans'."

    pp_editorial_new___hero_và_section_headline__editorial_serif_tương_phản_cao_chỉ_dùng_ở_display_size___sự_tương_phản_có_chủ_đích_với_geometric_switzer_body_là_đòn_typographic_đặc_trưng_của_hệ_thống__khiến_thương_hiệu_đọc_như_tạp_chí_thay_vì_trang_sản_phẩm__thay_thế___playfair_display__hoặc__dm_serif_display_____font_pp_editorial_new:
      - "**Thay thế:** Playfair Display"
      - "**Weights:** 400"
      - "**Kích thước:** 48px, 62px"
      - "**Line height:** 1.20-1.30"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Hero và section headline. Editorial serif tương phản cao chỉ dùng ở display size — sự tương phản có chủ đích với geometric Switzer body là đòn typographic đặc trưng của hệ thống, khiến thương hiệu đọc như tạp chí thay vì trang sản phẩm. Thay thế: 'Playfair Display' hoặc 'DM Serif Display'."

    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:** 14px, 16px"
      - "**Line height:** 1.25, 1.43"
      - "**Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    system_ui___system_ui___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_system_ui:
      - "**Weights:** 400"
      - "**Kích thước:** 14px"
      - "**Line height:** 1"
      - "**Vai trò:** system-ui — đượ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 | 13px | 1.19 | — | `--text-caption` |"
      info: "| body | 16px | 1.44 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.2 | -0.8px | `--text-heading-sm` |"
      info: "| display | 48px | 1.25 | — | `--text-display` |"
      info: "| display-lg | 62px | 1.2 | — | `--text-display-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 116 | 116px | `--spacing-116` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| pills | 32px |"
      info: "| badges | 10px |"
      info: "| inputs | 10px |"
      info: "| buttons | 10px |"
      info: "| cards-elevated | 42px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.04) 0px 8px 16px 0px` | `--shadow-md` |"
      info: "| subtle | `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |"

    layout:

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

  components:

    editorial_display_heading:
      vai_trò: "Hero và section-level headline"

      info: "PP Editorial New ở 48–62px, weight 400, line-height 1.20–1.25, màu Obsidian. Căn giữa hoặc căn trái tùy section. Serif ở scale này là tín hiệu chính của thương hiệu — không bao giờ thay thế bằng sans."

    filled_dark_cta:
      vai_trò: "Primary conversion button (secondary action)"

      info: "Nền Obsidian #000000, chữ Paper #ffffff, Switzer 16px weight 500, radius 10px, padding dọc 14px / ngang 20px. Mang shadow 1px gần như vô hình. Dùng cho CTA ưu tiên thứ hai."

    filled_lilac_cta:
      vai_trò: "Primary action button (start trial / book demo)"

      info: "Nền Lilac Bloom #f1ccff, chữ Obsidian, Switzer 16px weight 500, radius 10px, padding dọc 14px / ngang 20px. CTA chủ đạo — pastel fill trên nền kem thu hút mắt mà không gây cảm giác mạnh."

    ghost_nav_button_sign_up:
      vai_trò: "Conversion ở navigation góc phải trên"

      info: "Nền Obsidian, chữ Paper, Switzer 14px weight 500, radius 10px, padding dọc 10px / ngang 20px. Nằm trong nav bar như conversion path khép kín."

    tag_pill:
      vai_trò: "Nhãn category hoặc section phía trên headline"

      info: "Switzer 13–14px weight 500, nền Lilac Bloom hoặc Bone, radius 10px, padding dọc 5px / ngang 12px, chữ Obsidian. Luôn căn giữa phía trên heading, đóng vai trò section marker."

    product_preview_card:
      vai_trờ: "Container screenshot sản phẩm hero"

      info: "Card bo tròn lớn (24–42px radius) chứa screenshot UI sản phẩm. Gradient overlay nhẹ từ Lilac Bloom sang muted purple ở viền. Card nằm dưới hero với khoảng thở rộng rãi."

    hairline_border_surface:
      vai_trò: "Card cấu trúc hoặc input field"

      info: "Border 1px Graphite #333333 hoặc Silver #d6d6d6, nền Paper, radius 10–24px. Border là phương pháp phân tách chính — shadow chỉ là thứ yếu."

    logo_strip_card:
      vai_trò: "Social proof — hàng trusted-by"

      info: "Logo xếp thành một hàng ngang bên dưới caption 'Trusted by', nền Paper, không có card container. Logo hiển thị màu Slate #7b7b7b để trình bày muted."

    section_label_all_caps_caption:
      vai_trò: "Section divider text"

      info: "Switzer 14px weight 500, Obsidian, căn giữa. Dùng để giới thiệu content section bên dưới hero."

    chat_bubble_user:
      vai_trò: "Product UI chat thread — tin nhắn người dùng"

      info: "Nền Sky Veil #91e0ff, chữ Obsidian, Switzer 14px, radius 16px, căn phải trong thread."

    chat_bubble_support:
      vai_trò: "Product UI chat thread — tin nhắn agent"

      info: "Nền Bone #f5f2f0 hoặc Paper với border Graphite, chữ Obsidian, Switzer 14px, radius 16px, căn trái."

    highlight_gradient_card:
      vai_trò: "Accent feature card trong marketing section"

      info: "Fill gradient từ Lilac Bloom sang muted purple, chữ Paper, radius 24–42px, padding rộng (32–48px). Dùng để phá vỡ các section đơn sắc bằng dấu câu màu sắc."

  do_s_and_don_ts:

    do:
      - "Dùng PP Editorial New ở 48–62px cho bất kỳ headline nào cần mang giọng nói thương hiệu — không bao giờ thay thế bằng sans-serif ở display size"
      - "Đặt filled button Lilac Bloom #f1ccff làm primary CTA và filled button Obsidian làm secondary — cặp đôi này là ngữ pháp conversion của hệ thống"
      - "Áp dụng border-radius 24–42px cho mọi marketing card và 10px cho mọi functional control (button, badge, input)"
      - "Dùng Bone #f5f2f0 cho bất kỳ bề mặt nào cần sự ấm áp — badge, section xen kẽ, secondary card background — không dùng cool gray"
      - "Thắt chặt letter-spacing của Switzer ở kích thước lớn: -0.010em ở 20px, -0.020em ở 32px, -0.025em ở 48px+"
      - "Giữ shadow ở độ đen 4% hoặc thấp hơn — hệ thống dùng radius và whitespace để phân tách, không dùng elevation"
      - "Đặt Tag Pill (fill Lilac Bloom hoặc Bone) trực tiếp phía trên mọi major section heading làm category marker"

    don_t:
      - "Không dùng PP Editorial New cho body copy, nav item, button, hoặc badge — chỉ dành riêng cho display headline 48px+"
      - "Không thêm colored shadow, glow, hoặc elevation nặng — hệ thống cố tình phẳng"
      - "Không đưa thêm accent hue nào ngoài Lilac Bloom và Sky Veil — palette cố ý chỉ có hai màu"
      - "Không dùng Arial hoặc system-ui cho primary UI text — Switzer (hoặc thay thế Inter) sở hữu mọi functional type"
      - "Không dùng radius vuông hoặc 4px cho card — sự mềm mại của hệ thống phụ thuộc vào khoảng 24–42px"
      - "Không áp dụng Lilac Bloom cho large background fill ngoài card và CTA — nó nên giữ vai trò accent có kiểm soát"
      - "Không căn giữa body paragraph hoặc functional list — căn trái để dễ đọc, chỉ căn giữa cho hero headline và caption ngắn"

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas và default card ground |"
    info: "| 1 | Bone | `#f5f2f0` | Bề mặt secondary kem ấm cho badge và section xen kẽ |"
    info: "| 2 | Lilac Bloom | `#f1ccff` | Accent surface cho highlight card, tag background, và CTA fill |"
    info: "| 3 | Sky Veil | `#91e0ff` | Accent surface mát mẻ cho illustration card và secondary highlight |"

  elevation:

    - "**Card:** `0px 8px 16px 0px rgba(0, 0, 0, 0.04)`"
    - "**Button:** `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`"

  imagery:

    info: "Product screenshot là hình ảnh chủ đạo — lớn, bo tròn, nghiêng nhẹ trong khung gradient Lilac Bloom. Bản thân product UI (chat thread, inbox list, detail panel) đảm nhận việc kể chuyện. Không có lifestyle photography, không có stock imagery. Icon dạng outline và đơn sắc (Slate hoặc Obsidian). Hình ảnh trang trí duy nhất là các lớp gradient pastel mềm phía sau product card, pha trộn Lilac Bloom vào muted purple. Chat avatar trong product UI dùng hình tròn màu (xanh dương, vàng) làm nguồn màu tinh tế."

  layout:

    info: "Container max-width căn giữa ở 1200px, với hero full-width đặt serif headline và hai-button CTA stack trên nền kem. Hero được theo sau ngay bởi product preview card lớn (full container width) với gradient border Lilac Bloom. Bên dưới: logo strip 'Trusted by' căn giữa, sau đó là các content section xen kẽ dùng grid 2-column hoặc 3-column với khoảng cách dọc rộng 80–120px. Navigation là top bar đơn giản — logo trái, menu trung tâm 3 item, Login + Sign up filled phải. Không sidebar, không mega-menu. Trang thở mạnh giữa các section."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000 (Obsidian)"
    - "background: #ffffff (Paper)"
    - "warm surface: #f5f2f0 (Bone)"
    - "border: #333333 (Graphite) primary, #d6d6d6 (Silver) light"
    - "accent: #f1ccff (Lilac Bloom)"
    - "secondary accent: #91e0ff (Sky Veil)"
    - "primary action: #f1ccff (filled action)"

    info: "Example Component Prompts:"

    - "Hero section: Canvas #ffffff. Tag pill ở 14px Switzer weight 500, nền #f1ccff, radius 10px, padding 5px/12px, chữ #000000. Headline ở 62px PP Editorial New weight 400, #000000, line-height 1.20, căn giữa. Subtext ở 16px Switzer weight 400, #333333, căn giữa, max-width 640px. Hai CTA cạnh nhau: (a) fill #f1ccff, radius 10px, padding 14px/20px, 16px Switzer 500 chữ #000000; (b) fill #000000, cùng shape, chữ #ffffff."

    - "Product preview card: Radius 42px, shadow nhẹ 0 8px 16px rgba(0,0,0,0.04), khung gradient Lilac Bloom-to-muted-purple (~16px gradient border rộng). Chứa product UI screenshot phẳng với internal panel radius 16px."

    - "Feature section grid: Grid 3-column với gap 24px, section gap 80px phía trên. Mỗi card: radius 24px, nền #ffffff, border 1px #d6d6d6, padding 24px. Card icon ở 24px, outline, #333333. Card title ở 20px Switzer 500, #000000. Card body ở 16px Switzer 400, #7b7b7b."

    - "Trust strip: Caption căn giữa 'Trusted by 4500+ high-growth global companies' ở 16px Switzer 500 #000000. Bên dưới: một hàng 4–5 logo màu #7b7b7b, cách đều nhau, max cao 48px."

    - "Highlight gradient card: Radius 24px, fill linear-gradient(135deg, #f1ccff, #c89cd9), padding 32px. Chữ trắng #ffffff ở 20px Switzer 500. Decorative blob hoặc icon màu #ffffff ở độ mờ 20%."

  similar_brands:

    - "**Linear** — Cùng cách tiếp cận light-canvas tối giản với một accent color kiềm chế và bề mặt product bo tròn lớn, dù Linear đi theo hướng tối hơn/kịch tính hơn"
    - "**Framer** — Sự tự tin typographic editorial với một pastel accent đơn lẻ và whitespace rộng rãi giữa các product-forward section"
    - "**Cal.com** — SaaS marketing sáng, rộng rãi với product preview card bo tròn và pastel accent màu mềm"
    - "**Pitch** — Thẩm mỹ editorial-meets-product tương phản cao với hero căn giữa, product card lớn và một accent hue duy nhất"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-graphite: #333333;
          --color-slate: #7b7b7b;
          --color-mist: #bcbcbc;
          --color-silver: #d6d6d6;
          --color-bone: #f5f2f0;
          --color-paper: #ffffff;
          --color-lilac-bloom: #f1ccff;
          --color-sky-veil: #91e0ff;
        
          /* Typography — Font Families */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-editorial-new: 'PP Editorial New', 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-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.19;
          --text-body: 16px;
          --leading-body: 1.44;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.8px;
          --text-display: 48px;
          --leading-display: 1.25;
          --text-display-lg: 62px;
          --leading-display-lg: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-116: 116px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24-32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 13px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 42px;
          --radius-full: 48px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-pills: 32px;
          --radius-badges: 10px;
          --radius-inputs: 10px;
          --radius-buttons: 10px;
          --radius-cards-elevated: 42px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.04) 0px 8px 16px 0px;
          --shadow-subtle: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-bone: #f5f2f0;
          --surface-lilac-bloom: #f1ccff;
          --surface-sky-veil: #91e0ff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-graphite: #333333;
          --color-slate: #7b7b7b;
          --color-mist: #bcbcbc;
          --color-silver: #d6d6d6;
          --color-bone: #f5f2f0;
          --color-paper: #ffffff;
          --color-lilac-bloom: #f1ccff;
          --color-sky-veil: #91e0ff;
        
          /* Typography */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-editorial-new: 'PP Editorial New', 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-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.19;
          --text-body: 16px;
          --leading-body: 1.44;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.8px;
          --text-display: 48px;
          --leading-display: 1.25;
          --text-display-lg: 62px;
          --leading-display-lg: 1.2;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-116: 116px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 13px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 42px;
          --radius-full: 48px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.04) 0px 8px 16px 0px;
          --shadow-subtle: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
        }