home___style_reference:
  info: "> Khu rừng bạch đàn ngập nắng trên nền giấy ấm — thiết kế nằm trên một trang giấy cream nơi chữ đen mực và một điểm nhấn vàng điện duy nhất làm tất cả công việc kể chuyện."

  theme: "light"

  info: "Ngôn ngữ thiết kế của Airtree mang phong cách một trang editorial ngập nắng trên nền giấy ấm: một canvas cream (#f7f6e3) nâng đỡ chữ than đậm tự tin, với một điểm nhấn vàng điện duy nhất — đánh dấu chứ không trang trí. Prody display serif cỡ 131px là giọng nói lớn nhất của thương hiệu — mọi thứ còn lại là khoảng trắng có chủ đích và một grotesque sạch sẽ. Các component giữ cảm giác nhẹ và giống giấy: card bo tròn 37px, ghost controls dạng outline, pill-shaped CTA màu vàng, và hairline borders định hình cấu trúc mà không tạo trọng lượng. Hệ thống tránh elevation nặng, gradient, hoặc các trường màu bão hòa; nó dựa vào khoảng cách rộng rãi, bán kính lớn, và bảng màu hai tông yên tĩnh để ảnh chụp và lời trích dẫn của founder mang trọng lượng cảm xúc. Màu sắc được phân bổ tiết kiệm: một trang cream, chữ đen mực, và một tia vàng — không có gradient trang trí, không có branding đa sắc."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Parchment Cream | `#f7f6e3` | `--color-parchment-cream` | Canvas trang, bề mặt card, bordered containers — cream gần xám làm ấm toàn bộ giao diện và mang lại cho toàn bộ site cảm giác giấy yên tĩnh; Outlined/ghost action borders, pill outlines, và interactive rings hòa vào tông canvas — chỉ hiện rõ khi đặt trên overlay tối |"
    info: "| Ink Black | `#262d29` | `--color-ink-black` | Text chính, navigation, body copy, card borders, icon strokes — màu cấu trúc duy nhất, dùng cho hairline definition và mọi nội dung có thể đọc |"
    info: "| Electric Lemon | `#ffff48` | `--color-electric-lemon` | Filled CTA buttons, active states, standout badges — một màu vàng bão hòa duy nhất phá vỡ sự yên tĩnh cream/ink để báo hiệu hành động; tỷ lệ tương phản với #262d29 là 13.2:1 AAA |"

  tokens___typography:

    prody___display_headlines___giọng_nói_đặc_trưng__dùng_ở_131px_cho_hero_statement_và_42px_cho_secondary_display__serif_nặng_tạo_sự_đối_lập_với_body_grotesque_phẳng_để_tạo_tension_editorial__weight_giữ_ở_400__kích_thước_tự_nó_mang_thẩm_quyền_____font_prody:
      - "**Thay thế:** GT Sectra Display, Tiempos Headline, Canela, Playfair Display"
      - "**Weights:** 400"
      - "**Sizes:** 42px, 131px"
      - "**Line height:** 1.15"
      - "**Vai trò:** Display headlines — giọng nói đặc trưng. Dùng ở 131px cho hero statement và 42px cho secondary display; serif nặng tạo sự đối lập với body grotesque phẳng để tạo tension editorial. Weight giữ ở 400; kích thước tự nó mang thẩm quyền."

    suisseintl___body_copy__card_titles__subheadings__ui_labels___typeface_làm_việc_chính__weight_500_cho_text_nhấn_mạnh__600_cho_card_titles__400_mặc_định__kích_thước_theo_bước_13_14_16_19_21_33_42_bao_phủ_từ_caption_đến_heading_____font_suisseintl:
      - "**Thay thế:** Inter, Söhne, Neue Haas Grotesk, Switzer"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 13px, 14px, 16px, 19px, 21px, 33px, 42px"
      - "**Line height:** 1.15"
      - "**Vai trò:** Body copy, card titles, subheadings, UI labels — typeface làm việc chính. Weight 500 cho text nhấn mạnh, 600 cho card titles, 400 mặc định. Kích thước theo bước 13→14→16→19→21→33→42 bao phủ từ caption đến heading."

    suisseintl_book___navigation_links__form_input_text__small_button_labels___một_phiên_bản_nhẹ_hơn_của_cùng_family_cho_các_bề_mặt_tương_tác_yên_tĩnh____font_suisseintl_book:
      - "**Thay thế:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 13px, 28px"
      - "**Line height:** 1.15"
      - "**Vai trò:** Navigation links, form input text, small button labels — một phiên bản nhẹ hơn của cùng family cho các bề mặt tương tác yên tĩnh"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.15 | — | `--text-caption` |"
      info: "| body | 16px | 1.15 | — | `--text-body` |"
      info: "| subheading | 19px | 1.15 | — | `--text-subheading` |"
      info: "| heading-sm | 21px | 1.15 | — | `--text-heading-sm` |"
      info: "| heading | 33px | 1.15 | — | `--text-heading` |"
      info: "| heading-lg | 42px | 1.15 | — | `--text-heading-lg` |"
      info: "| display | 131px | 1.15 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 8px |"
      info: "| cards | 37px |"
      info: "| pills | 9999px |"
      info: "| buttons | 18px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 75-112px"
      - "**Card padding:** 37px"
      - "**Element gap:** 9-20px"

  components:

    hero_statement:
      vai_trò: "Khối headline mở đầu trang"

      info: "Canvas cream với Prody display headline căn giữa ở 131px, line-height 1.15, màu #262d29. Subtext tùy chọn ở 19px SuisseIntl 400. Nằm trong container max-width ~960px với padding trên/dưới rộng (~112px). Không có background fill — cream chính là hero."

    pill_cta___filled:
      vai_trò: "Primary action button"

      info: "Background #ffff48, text #262d29, border-radius 9999px (pill). Padding 8px 18px. SuisseIntl 400 ở 14px. Button filled duy nhất trong hệ thống — dành riêng cho các hành động ưu tiên cao nhất. Tương phản 13.2:1 so với yellow fill."

    pill_cta___ghost:
      vai_trò: "Secondary action button"

      info: "Background trong suốt, border 1px màu #f7f6e3 hoặc #262d29 ở độ mờ thấp, border-radius 9999px, padding 8px 18px, SuisseIntl Book 400 ở 13px, text màu #262d29. Dùng cho các hành động gần navigation như 'Get in touch'."

    portfolio_card:
      vai_trò: "Card nội dung ưu tiên hình ảnh trong carousel ngang"

      info: "Border-radius 37px, không border hiện, cream background hoặc image fill. Ảnh phủ kín card edge-to-edge với cùng clip 37px. Overlay label ở góc dưới bên trái bằng SuisseIntl 400 ở 14px #f7f6e3 (trên ảnh) hoặc #262d29 (trên nền đặc). Cards nằm trong một hàng có thể cuộn ngang với arrow controls."

    carousel_arrow_button:
      vai_trò: "Navigation control cho card carousels"

      info: "Button vuông 40×40px, border-radius 8px, border 1px màu #262d29, fill trong suốt. Arrow icon căn giữa, stroke 1.5px. Hover: background #262d29, arrow chuyển sang #f7f6e3."

    logo_strip:
      vai_trò: "Wordmarks của các công ty trong portfolio"

      info: "Một hàng ngang duy nhất các logo công ty grayscale màu #262d29 với visual weight đồng nhất. Logo có chiều cao cap khoảng 40px với khoảng cách ngang ~75px. Không lockups, không logo màu — tất cả đều được render bằng một tông ink duy nhất."

    testimonial_block:
      vai_trò: "Trích dẫn founder với attribution"

      info: "Khối text căn giữa, max-width ~720px. Dòng attribution ở 13px SuisseIntl 400 #262d29, khoảng trắng, sau đó là quote ở 28px SuisseIntl Book 400 #262d29 với dấu ngoặc kép typographic. Tên công ty + heart icon bên dưới ở 14px. Hai carousel arrows căn giữa bên dưới."

    top_navigation:
      vai_trò: "Nav chính toàn site"

      info: "Top bar cố định, cream background, không border hoặc shadow. Logo 'airtree' ở ngoài cùng bên trái bằng SuisseIntl 400 ~21px #262d29. Nhóm link ba cột căn giữa hoặc căn phải ở 13px SuisseIntl Book 400, gap 9px, mỗi link là một chấm tròn nhỏ + label. CTA button ở ngoài cùng bên phải."

    nav_link_item:
      vai_trò: "Mục nhập navigation riêng lẻ"

      info: "SuisseIntl Book 400 ở 13px #262d29, đứng trước bởi một dot hình tròn outline 4px màu #262d29. Không underline, không hover background change ngoài opacity nhẹ. Padding 8px dọc."

    portfolio_program_card:
      vai_trò: "Card quảng cáo text-and-button"

      info: "Cream background, border-radius 37px, padding 37px. Headline bằng SuisseIntl 600 21-33px #262d29. Yellow pill CTA bên dưới. Không image — đây là biến thể card text cho các chương trình/sáng kiến."

    footer:
      vai_trò: "Site footer với links và legal"

      info: "Cream background, padding 37px, một hàng text links duy nhất ở 13px SuisseIntl Book 400 #262d29 cách nhau bằng spacing. Không dividers, không social icons ngoài wordmark lặp lại đơn giản."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng #ffff48 cho filled primary CTAs — đây là màu bão hòa duy nhất của hệ thống và sức mạnh của nó đến từ sự khan hiếm."
      - "Đặt hero headlines bằng Prody ở 131px với line-height 1.15; để kích thước làm việc, không bao giờ bold weight."
      - "Áp dụng border-radius 37px cho tất cả content cards; 18px cho buttons; 8px cho inputs và nav — bộ ba radius này là hệ thống."
      - "Xây dựng tất cả các trang nhiều text trên canvas #f7f6e3 với type #262d29; không bao giờ đảo ngược page background trong một light-mode page."
      - "Dùng SuisseIntl Book ở 13px cho nav, links, và input text; dành SuisseIntl 500/600 cho emphasized body và card titles."
      - "Tạo khoảng cách giữa các section với vertical gaps 75–112px để cream có không gian thở; các block dày đặc phá vỡ ngôn ngữ editorial."
      - "Render tất cả portfolio company logos ở monochrome #262d29 — color logos phá vỡ kỷ luật hai tông của hệ thống."

    không_nên_làm:
      - "Không bao giờ giới thiệu màu bão hòa thứ hai; nếu cần nhấn mạnh, dùng màu vàng hoặc thay đổi weight, không dùng hue mới."
      - "Không bao giờ dùng #ffff48 cho body text, icons, hoặc decorative fills — nó chỉ là màu button."
      - "Không bao giờ đặt display type dưới 80px; Prody ở 33px trở xuống mất đi đặc tính editorial và đọc như body text."
      - "Đừng thêm box-shadow vào cards hoặc buttons; hệ thống dựa vào border-radius và background contrast, không phải elevation."
      - "Đừng đặt ảnh trên nền trắng — luôn mang hơi ấm #f7f6e3 phía sau ảnh để duy trì cảm giác giấy."
      - "Đừng dùng gradients trên buttons, cards, hoặc page backgrounds; gradient duy nhất trong hệ thống là lớp rửa bầu trời sang cream nhẹ của hero."
      - "Đừng bold Prody ở 131px — weight 400 của nó là giọng nói thương hiệu; thêm weight làm phẳng sự tương phản với body grotesque."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Canvas | `#f7f6e3` | Page background, section fills, card surfaces |"
    info: "| 1 | Card Surface | `#f7f6e3` | Portfolio cards, program cards, testimonial blocks — cùng tông với canvas, được định nghĩa bởi radius và padding |"
    info: "| 2 | Ink Surface | `#262d29` | Dark mode blocks, navigation bars, footer trên dark sections — dùng tiết kiệm như một full-bleed invert |"
    info: "| 3 | Accent Surface | `#ffff48` | Chỉ dùng cho filled CTA buttons — không bao giờ dùng làm section hoặc card background |"

  imagery:

    info: "Ảnh chụp mang tính tài liệu và tự nhiên: founder đi dạo trong khung cảnh thực vật, nhóm team trong môi trường thực tế, không studio lighting hoặc lifestyle staging. Ảnh được đặt trong card bo tròn 37px, edge-to-edge, không có text overlays cạnh tranh. Hero sử dụng lớp rửa bầu trời sang cream nhẹ với các chấm tròn hữu cơ rải rác. Không illustrations, không 3D renders, không abstract graphics — tất cả năng lượng thị giác đến từ ảnh thật và Prody type cỡ lớn. Logo chỉ là wordmark, monochrome, được đặt kích thước để đọc như một dải ngang yên tĩnh thay vì một bức tường đối tác."

  layout:

    info: "Max-width 1280px căn giữa, với các section sử dụng vertical gaps 75–112px để tạo không gian thở editorial. Hero là một dải full-bleed atmospheric (rửa xanh nhạt sang cream) với Prody headline căn giữa ở 131px, sau đó là card carousel có thể cuộn ngang. Phần portfolio xen kẽ giữa image carousel full-width với ảnh clip cạnh và logo strip monochrome căn giữa bên dưới. Program/promotional cards là các khối text một cột xếp chồng dọc với internal padding rộng (37px). Phần testimonial là một cột text căn giữa duy nhất, max-width ~720px, với carousel arrows ngay bên dưới. Navigation là top bar tối giản với wordmark căn trái, nhóm link căn giữa, và pill CTA căn phải — không sidebar, không mega-menu, không sticky shadow."

  agent_prompt_guide:

  quick_color_reference:
    - "Canvas / page background: #f7f6e3"
    - "Primary text / ink: #262d29"
    - "Card / content borders: #f7f6e3 (trên cream) hoặc #262d29 (trên dark)"
    - "Accent: #ffff48 (tiết kiệm)"
    - "primary action: #ffff48 (filled action)"

  example_component_prompts:
    - "**Hero Statement** — Cream canvas (#f7f6e3) với overlay rửa bầu trời sang cream tùy chọn. Headline căn giữa: Prody 400 ở 131px, line-height 1.15, màu #262d29. Subtext tùy chọn: SuisseIntl 400 ở 19px, #262d29. Max-width 960px, vertical padding 112px trên/dưới."

    - "**Portfolio Card** — Ảnh phủ kín card edge-to-edge, border-radius 37px, không border. Overlay label góc dưới bên trái: SuisseIntl 400 ở 14px, text #f7f6e3 với shadow nhẹ trên ảnh. Cards nằm trong hàng cuộn ngang, gap 28px."

    - "**Pill CTA (filled)** — Background #ffff48, text #262d29, border-radius 9999px, padding 8px 18px, font SuisseIntl 400 ở 14px. Tối đa một cái mỗi section."

    - "**Testimonial Block** — Căn giữa, max-width 720px. Dòng attribution: SuisseIntl 400 ở 13px #262d29. Quote: SuisseIntl Book 400 ở 28px #262d29 với dấu ngoặc kép typographic. Tên công ty + heart icon 12px bên dưới màu #262d29. Hai ghost arrow buttons 40×40px (radius 8px, border 1px #262d29) căn giữa cách 37px bên dưới."

    - "Tạo Primary Action Button: background #ffff48, text #262d29, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA."

  decorative_dot_system:

    info: "Các chấm tròn hữu cơ rải rác xuất hiện trên hero và các chuyển tiếp section như một lớp trang trí ambient. Chúng trôi nổi ở nhiều kích thước khác nhau (đường kính 4–12px) trong một tông accent ấm duy nhất, phân bố bất đối xứng để tạo nhịp điệu thị giác mà không có pattern. Các chấm hoàn toàn mang tính atmospheric — chúng không mang dữ liệu, không link, không tương tác. Trên cream canvas, chúng đọc như confetti hoặc phấn hoa bắt ánh sáng; sự ngẫu nhiên của chúng là điểm chính. Xem chúng như page-layer decoration, không phải component, và không bao giờ lặp lại pattern trên mọi trang — chỉ giới hạn chúng ở hero và transitional sections."

  similar_brands:

    - "**Blackbird VC** — Cùng cream-paper canvas, oversized editorial display type, và bảng màu monochrome hai tông với một saturated accent duy nhất"
    - "**Index Ventures** — Editorial layout rộng rãi với display serifs lớn, photographic content cards, và bảng màu cream-and-ink tiết chế"
    - "**Accel** — Whitespace rộng, card border-radius lớn, và cách tiếp cận single-accent tự tin cho CTA buttons"
    - "**Crane Venture Partners** — Editorial typography với oversized display heads, kỷ luật màu cream/ink, và nav bar tối giản với wordmark + link columns"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-cream: #f7f6e3;
          --color-ink-black: #262d29;
          --color-electric-lemon: #ffff48;
        
          /* Typography — Font Families */
          --font-prody: 'Prody', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisseintl-book: 'SuisseIntl Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.15;
          --text-body: 16px;
          --leading-body: 1.15;
          --text-subheading: 19px;
          --leading-subheading: 1.15;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.15;
          --text-heading: 33px;
          --leading-heading: 1.15;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.15;
          --text-display: 131px;
          --leading-display: 1.15;
        
          /* 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-20: 20px;
          --spacing-28: 28px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 75-112px;
          --card-padding: 37px;
          --element-gap: 9-20px;
        
          /* Border Radius */
          --radius-lg: 8.424px;
          --radius-2xl: 18.72px;
          --radius-3xl: 37.44px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 37px;
          --radius-pills: 9999px;
          --radius-buttons: 18px;
        
          /* Surfaces */
          --surface-canvas: #f7f6e3;
          --surface-card-surface: #f7f6e3;
          --surface-ink-surface: #262d29;
          --surface-accent-surface: #ffff48;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-cream: #f7f6e3;
          --color-ink-black: #262d29;
          --color-electric-lemon: #ffff48;
        
          /* Typography */
          --font-prody: 'Prody', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisseintl-book: 'SuisseIntl Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.15;
          --text-body: 16px;
          --leading-body: 1.15;
          --text-subheading: 19px;
          --leading-subheading: 1.15;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.15;
          --text-heading: 33px;
          --leading-heading: 1.15;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.15;
          --text-display: 131px;
          --leading-display: 1.15;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-lg: 8.424px;
          --radius-2xl: 18.72px;
          --radius-3xl: 37.44px;
        }