air___style_reference:
  info: "> sky canvas, frosted glass"

  theme: "light"

  info: "Hệ thống thị giác của Air gợi lên trải nghiệm thanh bình, tựa như mây, với chủ đề nền bầu trời xanh chủ đạo. Typography cân bằng giữa font display custom biểu cảm để tạo ấn tượng và font chức năng tinh tế để đảm bảo rõ ràng. UI elements phần lớn là đơn sắc, duy trì sự tập trung thông qua các biến thể bề mặt tinh tế và các thành phần dạng ghost. Một màu xanh dương accent duy nhất được dành riêng cho trạng thái tương tác, dẫn dắt sự chú ý của người dùng và làm nổi bật các hành động chính trên nền trời rộng lớn, thoáng đãng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Sky Canvas | `#426188` | `--color-sky-canvas` | Background trang chủ đạo, tạo chiều sâu và bầu không khí như bầu trời. Cũng được dùng cho màu headline trang trí và border |"
    info: "| Action Blue | `#2b7fff` | `--color-action-blue` | Accent chính cho interactive elements, như outlined buttons và links, dẫn dắt hành động người dùng |"
    info: "| Midnight Ink | `#000000` | `--color-midnight-ink` | Màu chữ chính cho headlines và body copy, đảm bảo độ tương phản cao trên bề mặt sáng. Dùng cho border của các phần tử được chọn |"
    info: "| Cloud White | `#ffffff` | `--color-cloud-white` | Background cho bề mặt UI chính, header, và text nơi cần độ tương phản với các phần tử tối hơn. Cũng dùng cho ghost button border và text |"
    info: "| Charcoal Text | `#1b1b1b` | `--color-charcoal-text` | Màu chữ phụ, tương phản mạnh nhưng mềm hơn đen tuyền. Dùng cho body text và một số border |"
    info: "| Haze Grey | `#f5f5f5` | `--color-haze-grey` | Background nhẹ cho input fields và bề mặt card ít nổi bật, tạo sự phân cách thị giác |"

  tokens___typography:

    control___functional_text_trên_các_ui_elements_bao_gồm_buttons__body_text__links__và_navigation_items__đóng_vai_trò_là_font_chính_cho_khả_năng_đọc_____font_control:
      - "**Substitute:** Inter"
      - "**Weights:** 500"
      - "**Sizes:** 12px, 13px, 14px, 16px, 20px"
      - "**Line height:** 1.10, 1.40, 1.50"
      - "**Vai trò:** Functional text trên các UI elements bao gồm buttons, body text, links, và navigation items. Đóng vai trò là font chính cho khả năng đọc."

    control_compressed___headlines_cực_lớn__đậm_dùng_để_tạo_ấn_tượng_mạnh_và_xây_dựng_thương_hiệu__tạo_tuyên_bố_qua_kích_thước_và_trọng_lượng_____font_control_compressed:
      - "**Substitute:** Oswald Bold"
      - "**Weights:** 900"
      - "**Sizes:** 259px"
      - "**Line height:** 0.85"
      - "**Vai trò:** Headlines cực lớn, đậm dùng để tạo ấn tượng mạnh và xây dựng thương hiệu, tạo tuyên bố qua kích thước và trọng lượng."

    control_cursive___headlines_biểu_cảm__trang_trí__thêm_nét_cá_tính_riêng_biệt__dùng_cho_một_số_section_titles_để_làm_mềm_tính_kỹ_thuật_của_thương_hiệu_____font_control_cursive:
      - "**Substitute:** Dancing Script"
      - "**Weights:** 400, 500"
      - "**Sizes:** 20px, 32px, 56px"
      - "**Line height:** 1.00, 1.10, 1.50"
      - "**Vai trò:** Headlines biểu cảm, trang trí, thêm nét cá tính riêng biệt. Dùng cho một số section titles để làm mềm tính kỹ thuật của thương hiệu."

    control_tnt___font_biểu_cảm_phụ_cho_headlines_không_thường_xuyên_và_body_text_accents_nổi_bật__mang_lại_kết_cấu_thị_giác_riêng_biệt_____font_control_tnt:
      - "**Substitute:** Space Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 20px, 32px, 56px"
      - "**Line height:** 1.00, 1.10, 1.50"
      - "**Vai trò:** Font biểu cảm phụ cho headlines không thường xuyên và body text accents nổi bật, mang lại kết cấu thị giác riêng biệt."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| heading-sm | 20px | 1.1 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 56px | 1 | — | `--text-heading-lg` |"
      info: "| display | 259px | 0.85 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 14px |"
      info: "| links | 8px |"
      info: "| images | 11px |"
      info: "| inputs | 4px |"
      info: "| buttons | 8px |"

    layout:

      - "**Section gap:** 48px"
      - "**Card padding:** 20px"
      - "**Element gap:** 8px"

  components:

    ghost_button:
      vai_trò: "Button hành động phụ, tinh tế."

      background: "transparent (rgba(0, 0, 0, 0)), Text: Cloud White (#ffffff), Border: 1px solid Cloud White (#ffffff), Padding: 0px 8px, Radius: 0px. Thường dùng trong navigation."

    navigational_button_ghost:
      vai_trò: "Navigation button, tương tự ghost button về mặt thị giác."

      background: "transparent (rgba(0, 0, 0, 0)), Text: Charcoal Text (#1b1b1b), Border: 1px solid Charcoal Text (#1b1b1b), Radius: 8px, Padding: 0px."

    content_card_transparent:
      vai_trò: "Card thông tin, thường dùng cho client logos hoặc features không cần background riêng biệt."

      background: "transparent (rgba(0, 0, 0, 0)), Padding: 0px, Radius: 0px, Shadow: none."

    feature_card:
      vai_trò: "Card nổi bật để giới thiệu features hoặc các khối nội dung cụ thể."

      background: "Haze Grey (#f5f5f5), Padding: 20px, Radius: 12px, Shadow: none."

    image_card:
      vai_trò: "Card chuyên để đóng khung hình ảnh, với radius riêng biệt."

      background: "transparent (rgba(0, 0, 0, 0)), Padding: 0px, Radius: 14px, Shadow: none."

    input_field:
      vai_trò: "Input field tiêu chuẩn cho người dùng nhập dữ liệu."

      background: "Haze Grey (#f5f5f5), Text: Charcoal Text (#1b1b1b), Border: 1px solid rgba(0, 0, 0, 0.1), Radius: 4px, Padding: 10px."

  do_s_and_don_ts:

    do:
      - "Ưu tiên dùng Cloud White (#ffffff) cho text trên nền Sky Canvas (#426188) cho headlines và thông tin quan trọng."
      - "Chỉ dùng Action Blue (#2b7fff) cho outlined interactive elements như links và primary action buttons."
      - "Dành Control Compressed (weight 900, size 259px) cho hero-level headlines để tối đa hiệu ứng thị giác."
      - "Áp dụng Haze Grey (#f5f5f5) làm background cho input fields và bề mặt card tinh tế để tạo sự khác biệt."
      - "Sử dụng spacing unit 8px nhất quán cho element gaps, và 48px cho vertical section spacing."
      - "Dùng border radius 14px cho content cards và 8px cho buttons để duy trì độ mềm mại nhất quán."
      - "Sử dụng Control, weight 500, kích thước 12-20px cho tất cả functional text để đảm bảo khả năng đọc và tính nhất quán."

    don_t:
      - "Không dùng Action Blue (#2b7fff) làm background cho filled content blocks hoặc decorative elements."
      - "Tránh dùng nhiều màu sắc; giới hạn bảng màu ở Sky Canvas (#426188) và Action Blue (#2b7fff) làm màu thương hiệu chính."
      - "Không dùng các phần tử có cạnh sắc; áp dụng border radii đã định nghĩa là 4px, 8px, 11px, hoặc 14px cho tất cả interactive và container elements."
      - "Tránh lạm dụng drop shadows; thiết kế dựa vào sự khác biệt màu sắc bề mặt thay vì độ cao để tạo phân cấp thị giác."
      - "Không đặt body text trực tiếp trên nền Sky Canvas (#426188); độ tương phản quá thấp. Dùng neutral surfaces thay thế."
      - "Không thay đổi line heights ngẫu nhiên; tuân thủ các tỷ lệ 1.0, 1.1, 1.4, và 1.5 đã chỉ định để có nhịp điệu dọc nhất quán."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Sky Canvas | `#426188` | Background chính của trang, tạo tông màu tổng thể cho bầu không khí. |"
    info: "| 2 | Haze Grey | `#f5f5f5` | Background cho input fields và feature cards tinh tế, tạo bề mặt hơi nâng lên. |"
    info: "| 3 | Cloud White | `#ffffff` | Background cho UI elements chính như headers và navigation, mang lại độ tương phản sạch sẽ. |"

  elevation:

    info: "Thiết kế hạn chế tối đa shadows, thay vào đó dùng background blur (`backdrop-filter: blur(12px)`) và màu sắc bề mặt riêng biệt để thể hiện chiều sâu và phân cấp. Việc không có shadows nặng góp phần tạo nên thẩm mỹ 'thoáng đãng' và nhẹ nhàng."

  imagery:

    info: "Imagery chủ yếu là các concept sản phẩm, thường có các biểu diễn trừu tượng hoặc cách điệu của dữ liệu và quy trình làm việc. Cũng có các ảnh chụp sản phẩm của nhiều thiết bị kỹ thuật số khác nhau, thường được đặt trong cards. Icons tinh tế, đơn sắc, và thường là outlined. Tổng thể imagery thưa thớt, tập trung giải thích chức năng sản phẩm thay vì lối sống; khi có mặt, hình ảnh thường sử dụng backdrop-filter blurring để tạo hiệu ứng 'frosted glass', tích hợp liền mạch với sky canvas background."

  layout:

    info: "Bố cục trang chủ yếu là full-bleed, kéo dài nội dung đến các cạnh viewport, với sự nhấn mạnh mạnh vào khoảng cách dọc nhất quán. Hero section là full-bleed, có các yếu tố typographic lớn được căn giữa trên nền. Các section tiếp theo thường có các khối nội dung xen kẽ (ví dụ: text bên trái, image bên phải) và sắp xếp dạng grid cho features. Navigation là thanh top bar cố định với ghost buttons và một nút 'Start for free' outlined nổi bật, gợi ý tính khả dụng trên toàn bộ trải nghiệm. Các section duy trì mật độ thoải mái, ngăn ngừa quá tải thông tin trong background rộng lớn."

  agent_prompt_guide:

    tạo_outlined_primary_action: "Background transparent, border và text #2b7fff, radius 9999px, padding pill nhỏ gọn. Dùng cho CTA chính thay vì filled button."

    info: "Ví dụ Component Prompts:"
    - "Tạo một primary outlined button: Background transparent, text Action Blue (#2b7fff), border 1px solid Action Blue (#2b7fff), radius 8px, padding 10px 20px. Text 'Get started' dùng Control font, weight 500, size 16px."
    - "Tạo một heading section: Background Sky Canvas (#426188), headline 'Human creativity. AI scale.' dùng Control Cursive, weight 500, size 56px, color Cloud White (#ffffff). Bên dưới, một ghost button với border Cloud White (#ffffff), text Cloud White (#ffffff), radius 8px, 'Get some Air' dùng Control font, weight 500, size 16px."
    - "Tạo một feature card: Background Haze Grey (#f5f5f5), padding 20px, radius 12px. Bên trong, một heading 'Understand your library' dùng Control font, weight 500, size 20px, color Charcoal Text (#1b1b1b), tiếp theo là body text dùng Control font, weight 500, size 14px, color Charcoal Text (#1b1b1b)."

  similar_brands:

    - "**Figma** — Typography rõ ràng, chức năng kết hợp với UI tối giản và một màu accent chính duy nhất."
    - "**Notion** — Dựa vào các biến thể bề mặt xám tinh tế và interactive elements dạng ghost để tạo cảm giác rộng rãi."
    - "**Webflow** — Sử dụng display typography lớn, biểu cảm trong hero sections kết hợp với body text sạch sẽ."
    - "**Linear** — Tập trung vào text tương phản cao và interactive elements trên nền phần lớn đơn sắc, với việc sử dụng màu sắc hạn chế."
    - "**Dropbox** — UI sạch sẽ, rộng rãi với sự nhấn mạnh vào nội dung và call-to-actions rõ ràng mà không có trang trí nặng nề."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-sky-canvas: #426188;
          --color-action-blue: #2b7fff;
          --color-midnight-ink: #000000;
          --color-cloud-white: #ffffff;
          --color-charcoal-text: #1b1b1b;
          --color-haze-grey: #f5f5f5;
        
          /* Typography — Font Families */
          --font-control: 'Control', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-compressed: 'Control Compressed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-cursive: 'Control Cursive', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-tnt: 'Control TNT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.1;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1;
          --text-display: 259px;
          --leading-display: 0.85;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --section-gap: 48px;
          --card-padding: 20px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-xl: 14px;
        
          /* Named Radii */
          --radius-cards: 14px;
          --radius-links: 8px;
          --radius-images: 11px;
          --radius-inputs: 4px;
          --radius-buttons: 8px;
        
          /* Surfaces */
          --surface-sky-canvas: #426188;
          --surface-haze-grey: #f5f5f5;
          --surface-cloud-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-sky-canvas: #426188;
          --color-action-blue: #2b7fff;
          --color-midnight-ink: #000000;
          --color-cloud-white: #ffffff;
          --color-charcoal-text: #1b1b1b;
          --color-haze-grey: #f5f5f5;
        
          /* Typography */
          --font-control: 'Control', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-compressed: 'Control Compressed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-cursive: 'Control Cursive', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-tnt: 'Control TNT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.1;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1;
          --text-display: 259px;
          --leading-display: 0.85;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-xl: 14px;
        }