contrast___style_reference:
  info: "> tín hiệu neon coral trên nền trắng tĩnh lặng"

  theme: "light"

  info: "Contrast vận hành trên nền trắng tĩnh lặng, bị ngắt quãng bởi một tín hiệu coral rực rỡ duy nhất. Toàn bộ hệ thống thị giác được kiềm chế có chủ đích — khoảng trắng rộng rãi, bề mặt đơn sắc, geometric type dày — để một CTA đỏ-ấm duy nhất có thể đảm nhận toàn bộ nhiệm vụ tạo cảm xúc. Các card nổi trên những đổ bóng gần như vô hình (alpha 0.06), bo góc rộng rãi và thiên về pill, và accent coral lặp lại như một hệ thống: button, border, icon, badge, mảng màu trang trí. Chữ đen gần như thuần (#0e0f10) thay vì xám làm mềm, mang lại cho headline trọng lượng và uy lực mà phần chrome mỏng manh kia sẽ thiếu nếu không có. Layout xen kẽ giữa hero stack full-bleed canh giữa và lưới card nhiều cột dày đặc, với một floating webinar widget cố định ở góc dưới-bên trái."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Signal Coral | `#ff5065` | `--color-signal-coral` | Primary action buttons, active links, icon accents, decorative badges — yếu tố màu sắc duy nhất được phép lấp đầy không gian |"
    info: "| Ember Wash | `#ff7a59` | `--color-ember-wash` | Accent ấm phụ cho icon borders, decorative fills và illustration strokes khi coral cần một sắc độ nhẹ hơn đi kèm |"
    info: "| Persimmon | `#ff5c35` | `--color-persimmon` | Accent ấm đậm nhất cho icon borders, decorative fills và hero illustration strokes |"
    info: "| Coral Mist | `#ffe9eb` | `--color-coral-mist` | Mảng màu hồng nhạt mềm mại cho accent backgrounds, hover surfaces và decorative bands |"
    info: "| Carbon Ink | `#0e0f10` | `--color-carbon-ink` | Primary text, filled neutral buttons, dark surface backgrounds |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, text on dark fills, outlined button borders |"
    info: "| Fog | `#f4f4f8` | `--color-fog` | Section backgrounds nhẹ nhàng, tertiary surface layer |"
    info: "| Graphite | `#2f3133` | `--color-graphite` | Badge fills, dark nav backgrounds, subtle card borders |"
    info: "| Slate | `#7a7b7c` | `--color-slate` | Muted helper text, icon strokes, secondary borders, list dividers |"
    info: "| Smoke | `#666666` | `--color-smoke` | Secondary text trên nền sáng |"

  tokens___typography:

    gilroy___toàn_bộ_ui_và_display_text__dùng_ở_56px_weight_700_cho_hero_headlines_với_leading_cực_kỳ_chặt__0_80__tạo_khối_display_dày__weight_600_cho_section_headings_ở_48px__weight_500_600_cho_body_16_18px__weight_500_cho_nav_và_labels_ở_14px____font_gilroy:
      - "**Thay thế:** Sora, DM Sans, hoặc Manrope"
      - "**Weights:** 500, 600, 700"
      - "**Cỡ chữ:** 14, 16, 18, 20, 48, 56"
      - "**Line height:** 1.0–1.2 cho display, 1.4–1.6 cho body, 0.80–0.88 cho headline lockups chặt nhất"
      - "**Letter spacing:** normal (0) ở mọi cỡ — tracking không bao giờ được điều chỉnh, để các geometric letterforms tự làm việc"
      - "**Vai trò:** Toàn bộ UI và display text. Dùng ở 56px weight 700 cho hero headlines với leading cực kỳ chặt (~0.80), tạo khối display dày. Weight 600 cho section headings ở 48px, weight 500–600 cho body 16–18px, weight 500 cho nav và labels ở 14px"

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.56 | — | `--text-body` |"
      info: "| subheading | 20px | 1.6 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 48px | 1.11 | — | `--text-heading` |"
      info: "| display | 56px | 0.8 | — | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      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: "| 88 | 88px | `--spacing-88` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 4px |"
      info: "| cards | 24px |"
      info: "| badges | 100px |"
      info: "| images | 100px |"
      info: "| buttons | 100px |"
      info: "| largeCards | 40px |"
      info: "| smallCards | 16px |"
      info: "| extraLargeCards | 120px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| xl | `rgba(38, 42, 62, 0.06) 0px 5px 25px 0px` | `--shadow-xl` |"

    layout:

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

  components:

    coral_filled_button:
      vai_trò: "Primary call-to-action trên toàn site"

      info: "Background #ff5065, chữ trắng, border-radius 100px (pill), padding 12px 24px, font-weight 500 ở 16px, Gilroy. Dùng cho các hành động 'Start for free' và 'Register now'."

    dark_filled_button:
      vai_trò: "Secondary action trong navigation"

      info: "Background #0e0f10, chữ trắng, border-radius 100px, padding 8px 16px, 14px Gilroy weight 500. Dùng cho 'Log in' trong header."

    outlined_ghost_button:
      vai_trò: "Secondary action đi kèm với coral CTAs"

      info: "Background trắng, border đen 1px (#000000), chữ đen, border-radius 100px, padding 12px 24px, 16px Gilroy weight 500. Dùng cho 'Book a demo'."

    navigation_bar:
      vai_trò: "Site navigation cấp cao nhất"

      info: "Background trắng, sticky, layout ngang với logo bên trái, nav links canh giữa, actions bên phải. Links là 16px Gilroy 500 màu #0e0f10. 'Partners' có badge 'new' nhỏ inline màu coral."

    new__diagonal_badge:
      vai_trò: "Đánh dấu mục nav mới được thêm"

      info: "Chữ coral #ff5065 trên nền trắng, italic nhỏ 12px, đặt inline sau nav label. Lặp lại như một decorative marquee band trong dải sọc chéo hồng-coral."

    hero_headline_block:
      vai_trò: "Tiêu đề và phụ đề màn hình mở đầu"

      info: "Layout canh giữa, 56px Gilroy weight 700, #0e0f10, line-height 0.80 (xếp chồng chặt). Subtitle ở 18px weight 500 màu #0e0f10. Bên dưới: hai CTA (coral filled + ghost outlined)."

    logo_marquee_strip:
      vai_trò: "Social proof band"

      info: "Một hàng logo khách hàng duy nhất ở chế độ grayscale trên nền trắng, không có divider, khoảng cách đều nhau, nằm giữa hero và section nội dung đầu tiên."

    feature_screenshot_card:
      vai_trò: "Panel giới thiệu sản phẩm"

      info: "Bề mặt trắng, border-radius 16px hoặc 24px, shadow 0 5px 25px rgba(38,42,62,0.06). Chứa ảnh chụp màn hình UI sản phẩm phía trên một label ngắn. Shadow được làm mờ có chủ đích — card nằm trên trang chứ không lơ lửng phía trên."

    testimonial_card:
      vai_trò: "Social proof quote card"

      info: "Background trắng, radius 24px, shadow nhẹ, padding 24px. Năm ngôi sao coral ở trên cùng, headline ở 18px weight 600, quote ở 16px weight 500, tác giả với avatar tròn 100px và tên + vai trò ở 14px."

    floating_webinar_widget:
      vai_trò: "Persistent lead-capture overlay"

      info: "Card cố định góc dưới-bên trái, radius 16px, bề mặt trắng, soft shadow. Chứa label 'Upcoming webinar' với close icon, thumbnail 100px-radius, tiêu đề webinar ở 16px weight 600, và CTA coral full-width ('Register now') ở radius 100px."

    coral_diagonal_marquee_band:
      vai_trò: "Decorative announcement strip"

      info: "Background pha coral #ffe9eb với chữ 'new' lặp lại trên góc chéo 45°, tạo hiệu ứng ribbon giữa các section."

    rating_badge_row:
      vai_trò: "Trust indicator cluster"

      info: "Hàng icon nền tảng (G2, Capterra, HubSpot) đi kèm với số sao và rating ở 14px Gilroy 500. Sao coral, chữ đen, khoảng cách nhẹ giữa các nhóm."

    footer_link_section:
      vai_trò: "Site footer navigation"

      info: "Background tối hoặc trắng, nhóm link dạng cột, 16px Gilroy 500 màu #0e0f10 hoặc #ffffff, row gap 8px giữa các link."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #ff5065 làm màu sắc chromatic filled duy nhất cho primary actions, active states và icon accents"
      - "Áp dụng border-radius 100px cho tất cả button, badge và ảnh nhỏ để tạo hình dạng pill đặc trưng"
      - "Đặt display headlines ở 56px Gilroy weight 700 với line-height 0.80 để tạo khối xếp chồng chặt"
      - "Dùng #0e0f10 (không phải #000000) cho primary text để giữ độ ấm trong các tông màu tối"
      - "Áp dụng token shadow duy nhất 0 5px 25px rgba(38,42,62,0.06) cho tất cả card được nâng lên"
      - "Tạo khoảng cách section ở 80px vertical gaps với card padding 24px làm nhịp điệu nội thất mặc định"
      - "Giữ pattern floating webinar widget ở góc dưới-bên trái làm persistent lead-capture anchor"

    không_nên_làm:
      - "Không thêm màu chromatic nào khác ngoài coral, ember, persimmon và pink wash"
      - "Không dùng shadow nặng hoặc tối — toàn bộ hệ thống elevation chỉ dựa vào alpha 0.06"
      - "Không làm mềm body text dưới weight 500 — các weight nhẹ hơn của Gilroy không được dùng ở đây"
      - "Không dùng góc nhọn (0–4px) trên bất kỳ bề mặt nào người dùng tương tác, ngoại trừ chi tiết nav nhỏ"
      - "Không thêm background colors vào body copy sections — khoảng trắng tĩnh lặng CHÍNH LÀ thiết kế"
      - "Không áp dụng letter-spacing adjustments — tracking giữ nguyên normal ở mọi cỡ chữ"
      - "Không dùng photography làm hero imagery — product UI screenshots và illustration đảm nhận trọng lượng thị giác"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Canvas | `#ffffff` | Primary page background — phần lớn site là nền trắng trần |"
    info: "| 1 | Fog | `#f4f4f8` | Section bands nhẹ nhàng và tertiary containers |"
    info: "| 2 | Card | `#ffffff` | Testimonial cards, feature cards, floating widget — giống canvas nhưng được xác định bằng shadow và border |"
    info: "| 3 | Accent Wash | `#ffe9eb` | Decorative backgrounds và banner areas pha coral |"
    info: "| 4 | Dark Surface | `#0e0f10` | Inverted sections, filled dark buttons, dark nav blocks |"

  elevation:

    - "**Cards và floating panels:** `0 5px 25px rgba(38, 42, 62, 0.06)`"

  imagery:

    info: "Product UI screenshots là tài sản thị giác chính, được hiển thị bên trong card trắng bo tròn với soft shadows. Photography không xuất hiện trên các bề mặt marketing — sản phẩm CHÍNH LÀ hero. Illustrated icons sử dụng nét vẽ coral và persimmon trên nền trắng. Một floating widget cố định (webinar thumbnail) ở góc dưới-bên trái tạo thêm một điểm neo thị giác cố định. Decorative diagonal 'new' marquee ribbon cung cấp kết cấu thị giác phi sản phẩm duy nhất."

  layout:

    info: "Max-width 1200px canh giữa, vertical rhythm rộng rãi với section gaps ~80px. Hero là một headline stack canh giữa với hai CTA bên dưới. Nội dung xen kẽ giữa các headline block full-bleed canh giữa và lưới card nhiều cột (3-column testimonials, 4-column logo marquee). Một floating webinar widget cố định ở góc dưới-bên trái xuyên suốt khi cuộn. Một diagonal coral 'new' marquee band xuất hiện như một decorative section divider. Navigation là một sticky white top bar với logo-trái, links-giữa, actions-phải."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #0e0f10"
    - "background: #ffffff"
    - "border: #000000 hoặc #7a7b7c"
    - "accent: #ff5065"
    - "muted text: #7a7b7c"
    - "primary action: #ff5065 (filled action)"

    info: "Ví dụ Component Prompts:"

    - "Tạo một Primary Action Button: background #ff5065, text #000000, radius 9999px, padding pill gọn. Dùng treatment filled này cho CTA chính."

    - "Tạo một testimonial card: bề mặt trắng #ffffff, border-radius 24px, shadow 0 5px 25px rgba(38,42,62,0.06), padding 24px. Năm ngôi sao coral #ff5065 ở trên cùng, quote ở 16px Gilroy weight 500, #0e0f10, hàng tác giả với avatar tròn 100px-radius, tên ở 14px weight 600 và vai trò ở 14px weight 500 màu #7a7b7c."

    - "Tạo một floating webinar widget: fixed góc dưới-bên trái, border-radius 16px, bề mặt trắng, soft shadow rgba(38,42,62,0.06). Label 'Upcoming webinar' ở 14px weight 600 màu #0e0f10, webinar thumbnail ở radius 100px, title ở 16px weight 600, CTA coral full-width (#ff5065, chữ trắng, radius 100px, padding 12px)."

    - "Tạo một feature screenshot card: background trắng, border-radius 16px, shadow 0 5px 25px rgba(38,42,62,0.06), product UI screenshot lấp đầy phần trên card với top radius 100px, label text ở 16px Gilroy weight 500 màu #0e0f10 bên dưới."

    - "Tạo một navigation bar: sticky white top bar, logo bên trái, nav links canh giữa ở 16px Gilroy weight 500 màu #0e0f10 (một link có badge 'new' inline màu coral), actions bên phải với button 'Log in' tối (#0e0f10 fill, chữ trắng, radius 100px) và button 'Start for free' coral (#ff5065 fill, chữ trắng, radius 100px)."

  similar_brands:

    - "**Cal.com** — Cùng single-accent coral trên nền trắng tĩnh lặng, pill-shaped buttons, heavy display headlines và soft-shadow card approach"
    - "**Loom** — Restrained white canvas với một accent color rực rỡ duy nhất dẫn dắt CTAs, rounded card chrome, geometric sans display type"
    - "**Webflow** — Layout sạch sẽ, whitespace-dominant, bold geometric type, radii rộng rãi và shadow elevation tối giản nhưng chính xác"
    - "**Pitch** — High-contrast black text trên nền trắng với một warm accent duy nhất, pill buttons, tight headline leading và confident display weight"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-coral: #ff5065;
          --color-ember-wash: #ff7a59;
          --color-persimmon: #ff5c35;
          --color-coral-mist: #ffe9eb;
          --color-carbon-ink: #0e0f10;
          --color-pure-white: #ffffff;
          --color-fog: #f4f4f8;
          --color-graphite: #2f3133;
          --color-slate: #7a7b7c;
          --color-smoke: #666666;
        
          /* Typography — Font Families */
          --font-gilroy: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.6;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 48px;
          --leading-heading: 1.11;
          --text-display: 56px;
          --leading-display: 0.8;
        
          /* Typography — Weights */
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
          --radius-full-2: 120px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-cards: 24px;
          --radius-badges: 100px;
          --radius-images: 100px;
          --radius-buttons: 100px;
          --radius-largecards: 40px;
          --radius-smallcards: 16px;
          --radius-extralargecards: 120px;
        
          /* Shadows */
          --shadow-xl: rgba(38, 42, 62, 0.06) 0px 5px 25px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-fog: #f4f4f8;
          --surface-card: #ffffff;
          --surface-accent-wash: #ffe9eb;
          --surface-dark-surface: #0e0f10;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-coral: #ff5065;
          --color-ember-wash: #ff7a59;
          --color-persimmon: #ff5c35;
          --color-coral-mist: #ffe9eb;
          --color-carbon-ink: #0e0f10;
          --color-pure-white: #ffffff;
          --color-fog: #f4f4f8;
          --color-graphite: #2f3133;
          --color-slate: #7a7b7c;
          --color-smoke: #666666;
        
          /* Typography */
          --font-gilroy: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.6;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 48px;
          --leading-heading: 1.11;
          --text-display: 56px;
          --leading-display: 0.8;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
          --radius-full-2: 120px;
        
          /* Shadows */
          --shadow-xl: rgba(38, 42, 62, 0.06) 0px 5px 25px 0px;
        }