arcade___style_reference:
  info: "> Gợn sóng xanh điện trên nền giấy trắng. Một editorial canvas sạch sẽ, nơi một mảng xanh dương đậm duy nhất chảy như chất lỏng từ góc này sang góc khác, khiến mọi phần tử tương tác đều có cảm giác như đang bật sáng."

  theme: "light"

  info: "Hệ thống thị giác của Arcade là một bề mặt sản phẩm trên nền canvas trắng, được điểm nhấn bằng một màu xanh điện bão hòa (#2142e7) và một gradient xanh chảy đặc trưng làm neo cho hero. Typography sử dụng Inter trên mọi kích thước, với trọng lượng tập trung ở dải 400–700 và tracking âm chặt trên các display size giúp chữ co lại một cách quang học khi phóng to. Giao diện mang phong cách chức năng và yên tĩnh: các khối nội dung xám trên nền trắng, border mảnh, border-radius nhỏ gọn 12–16px, và bóng đổ pha xám lạnh dựa trên rgba(17,24,39,...) giữ cho mọi bề mặt nâng lên luôn đúng thương hiệu. Màu sắc được phân bổ có chủ đích — một màu xanh duy nhất đảm nhận vai trò accent, CTA và focus — mọi thứ còn lại đều là thang màu trung tính. Mật độ thoải mái nhưng không quá rộng: khoảng cách vi mô chủ yếu là 8px và 12px, khoảng cách giữa các section là 32–48px."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Voltage Blue | `#2142e7` | `--color-voltage-blue` | Accent xanh tím hỗ trợ cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp thành màu CTA chính |"
    info: "| Deep Voltage | `#182fa5` | `--color-deep-voltage` | Accent xanh tím hỗ trợ cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp thành màu CTA chính |"
    info: "| Midnight Ink | `#111827` | `--color-midnight-ink` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp thành màu CTA chính |"
    info: "| Slate 600 | `#4b5563` | `--color-slate-600` | Body text, nav links, icon fills, card secondary copy — màu chữ chủ đạo trên toàn trang |"
    info: "| Slate 700 | `#374151` | `--color-slate-700` | Nav link hover, body text nhấn mạnh, secondary headings |"
    info: "| Slate 500 | `#70747d` | `--color-slate-500` | Helper text mờ, placeholder copy, label ưu tiên thấp |"
    info: "| Graphite | `#414652` | `--color-graphite` | Subheading và section title nằm giữa body và display weight |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, button text, input fields, nav bar background — bề mặt nâng lên chính |"
    info: "| Fog 50 | `#f9fafb` | `--color-fog-50` | Page canvas, section backgrounds, lớp nền cơ sở cho mọi thứ |"
    info: "| Fog 100 | `#f3f4f6` | `--color-fog-100` | Section background thay thế, hover fill nhẹ, tag backgrounds |"
    info: "| Mist 200 | `#e5e7eb` | `--color-mist-200` | Hairline borders, input borders, card outlines, divider lines |"
    info: "| Smoke 300 | `#d9dadc` | `--color-smoke-300` | Border mạnh hơn, checkbox frames, cạnh cấu trúc có thể nhìn thấy |"

  tokens___typography:

    inter___kiểu_chữ_duy_nhất_trong_toàn_hệ_thống__display_sizes_36_64px_dùng_weight_700_với_tracking__0_020_đến__0_025em_để_siết_chặt_các_letterform_hình_học_một_cách_quang_học__body_và_ui_sizes_14_18px_ở_weight_400_500_với_tracking_gần_như_bình_thường__weight_600_dành_cho_section_titles__weight_700_cho_hero_headline__bộ_khung_hình_học_nhất_quán_đồng_nghĩa_với_việc_không_có_sự_thay_đổi_tâm_trạng_font_giữa_headline_và_body___hệ_thống_nói_bằng_một_giọng_nói_ở_mọi_kích_thước_____font_inter:
      - "**Thay thế:** system-ui, -apple-system, 'Segoe UI', sans-serif"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 28px, 30px, 36px, 40px, 48px, 64px"
      - "**Line height:** 1.22–1.71"
      - "**Letter spacing:** -0.025em ở 64px, -0.020em ở 48px, -0.015em ở 30px, -0.010em ở 24px, -0.007em ở 20px, normal dưới 20px"
      - "**OpenType features:** `'cv11', 'ss01' on (biến thể stylistic của Inter cho các terminal hình học sạch hơn)`"
      - "**Vai trò:** Kiểu chữ duy nhất trong toàn hệ thống. Display sizes (36–64px) dùng weight 700 với tracking -0.020 đến -0.025em để siết chặt các letterform hình học một cách quang học. Body và UI sizes (14–18px) ở weight 400–500 với tracking gần như bình thường. Weight 600 dành cho section titles, weight 700 cho hero headline. Bộ khung hình học nhất quán đồng nghĩa với việc không có sự thay đổi tâm trạng font giữa headline và body — hệ thống nói bằng một giọng nói ở mọi kích thước."

    balig_script___balig_script___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_balig_script:
      - "**Weights:** 400"
      - "**Sizes:** 40px"
      - "**Line height:** 1"
      - "**Vai trò:** Balig Script — đượ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 | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.56 | — | `--text-body` |"
      info: "| subheading | 18px | 1.5 | -0.126px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | -0.14px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.33 | -0.24px | `--text-heading` |"
      info: "| heading-lg | 30px | 1.29 | -0.45px | `--text-heading-lg` |"
      info: "| display | 48px | 1.14 | -0.96px | `--text-display` |"
      info: "| display-lg | 64px | 1.06 | -1.6px | `--text-display-lg` |"

  tokens___spacing___shapes:

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

    mật_độ: "thoải mái"

    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: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      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: "| 96 | 96px | `--spacing-96` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 108 | 108px | `--spacing-108` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 240 | 240px | `--spacing-240` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tabs | 12px |"
      info: "| cards | 16px |"
      info: "| pills | 9999px |"
      info: "| inputs | 16px |"
      info: "| buttons | 12px |"
      info: "| hero-frame | 24px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|------|"
      info: "| sm | `rgba(17, 24, 39, 0.2) 0px 8px 8px 0px, rgba(17, 24, 39, 0...` | `--shadow-sm` |"
      info: "| subtle | `rgba(17, 24, 39, 0.12) 0px 0px 0px 1px, rgba(17, 24, 39, ...` | `--shadow-subtle` |"
      info: "| xl | `rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39...` | `--shadow-xl` |"
      info: "| subtle-2 | `rgba(17, 24, 39, 0.12) 0px 0px 0px 1px` | `--shadow-subtle-2` |"
      info: "| xl-2 | `rgba(17, 24, 39, 0.05) 0px 32px 32px 0px, rgba(17, 24, 39...` | `--shadow-xl-2` |"
      info: "| xl-3 | `rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39...` | `--shadow-xl-3` |"
      info: "| subtle-3 | `rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, rgba(17, 24, 39, 0...` | `--shadow-subtle-3` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 8px"

  components:

    primary_cta_button:
      vai_trò: "Hành động thương hiệu dạng fill — trigger chuyển đổi chính của hệ thống"

      info: "Nền #2142e7 (Voltage Blue), chữ trắng 16px weight 600, radius 12px, padding ngang 20px, padding dọc 10px. Chồng bóng mềm sáu lớp pha màu rgba(17,24,39,0.04) cộng với vòng inset 1px #182fa5 (Deep Voltage) làm đậm cạnh. Các bóng đổ độ mờ thấp xếp chồng tạo hiệu ứng quầng sáng khuếch tán thay vì đổ bóng cứng, khiến nút có cảm giác như phát sáng từ bên trong."

    ghost_button:
      vai_trò: "Hành động thứ cấp đặt cạnh primary CTA"

      info: "Nền trắng, chữ #111827 16px weight 600, radius 12px, padding 20px/10px. Cùng chồng bóng sáu lớp như primary nhưng với vòng border 1px rgba(17,24,39,0.16) thay vì inset màu sắc. Tạo sự tương đồng về độ nâng với primary button mà không cạnh tranh sự chú ý."

    pill_tab:
      vai_trò: "Bộ chuyển đổi section cho nội dung được nhóm"

      trạng_thái_active: "nền trắng, chữ #111827 weight 600, radius 12px, padding 16px/10px, vòng bóng mềm. Trạng thái inactive: nền trong suốt, chữ #4b5563 weight 500, không bóng. Tab active nâng lên khỏi tab strip nhờ bóng đổ thay vì màu nền, giữ cho tông màu tổng thể của nhóm luôn trung tính."

    url_input_with_submit_arrow:
      vai_trò: "Trường nhập liệu hero — nhập URL với hành động tích hợp"

      info: "Nền trắng, radius 16px, full-width với max ~480px. Placeholder text màu #70747d 16px weight 400. Border 1px #e5e7eb, không có focus ring nhìn thấy được (nút submit tròn màu xanh bên trong đóng vai trò là điểm thu hút). Nút submit hình tròn #2142e7 ở cuối, đường kính 40px, icon mũi tên trắng căn giữa."

    toggle_button_group:
      vai_trò: "Bộ chuyển đổi nhị phân (ví dụ: Demo vs Video)"

      info: "Hai nút pill kề nhau bên trong track #f3f4f6 với radius 8px. Nút active: nền trắng, chữ #111827, bóng nhẹ. Nút inactive: trong suốt, chữ #4b5563. Mỗi pill 14px weight 500 với icon nhỏ dẫn đầu. Bản thân track được bo tròn và không có border — nhóm đọc như một segmented control duy nhất."

    feature_checkmark_list:
      vai_trờ: "Danh sách gạch đầu dòng nhỏ gọn về các tính năng trong một feature panel"

      info: "Grid hai cột các mục, row gap 8px, column gap 12px. Mỗi mục: badge checkmark hình tròn nhỏ #e5e7eb (20px) với dấu check màu xanh bên trong, theo sau là chữ 16px weight 400 #4b5563. Badge check đóng vai trò là một điểm nhấn màu thương hiệu nhẹ nhàng trong một danh sách vốn xám."

    metric_badge:
      vai_trò: "Callout bằng chứng nổi bên cạnh một feature panel"

      info: "Card trắng, radius 12px, padding 16px/12px, chữ 14px weight 500 #4b2563 với icon mũi tên lên nhỏ. Được nâng lên với chồng bóng floating-card. Nằm lệch về bên phải của một feature block, phá vỡ grid để thu hút mắt."

    trust_logo_strip:
      vai_trò: "Dải logo khách hàng để chứng minh xã hội"

      info: "Một hàng ngang duy nhất, canvas trắng, logo được render ở màu xám nhẹ #70747d với chiều cao đồng nhất (~24px). Không border, không background, padding dọc rộng rãi 48px. Việc giảm bão hòa logo thương hiệu là có chủ đích — nó loại bỏ nhiễu thị giác và để màu thương hiệu của trang tự chiếm ưu thế."

    top_navigation_bar:
      vai_trò: "Điều hướng trang web cố định"

      info: "Nền trắng, chiều cao 64px, max-width 1200px căn giữa, border dưới 1px #e5e7eb tinh tế. Logo bên trái cao 24px, nav links ở giữa-trái 16px weight 500 #4b5563 với dropdown chevrons, cụm bên phải có ghost button 'Talk to sales' và filled blue CTA 'Sign up for free'. Nav rất yên tĩnh — không gradient hay bóng đổ, chỉ có một hairline."

    announcement_banner:
      vai_trò: "Quảng bá sự kiện hình pill phía trên hero"

      info: "Hình pill (radius 9999px), nền trắng, border 1px #e5e7eb, padding 16px/8px. Chữ trọng lượng hỗn hợp: tên sự kiện 14px weight 600 #111827, CTA link 14px weight 500 #2142e7 được phân cách bằng một divider dọc mảnh. Nổi phía trên hero không có bóng, neo vào đầu trang với margin 16px."

    hero_gradient_banner:
      vai_trò: "Trường màu thương hiệu full-bleed phía sau hero headline"

      info: "Gradient xanh chảy từ gần trắng góc trên-bên trái qua các tông trung bão hòa đến #2142e7 đậm góc dưới-bên phải, lấp đầy toàn bộ chiều rộng viewport và chiều cao ~600px. Chứa một vùng highlight xuyên tâm ở trung tâm giúp headline dễ đọc trong khi các cạnh hòa vào màu thương hiệu. Gradient là chữ ký của hệ thống — đây là nơi duy nhất trên trang có màu sắc quy mô lớn."

    product_mockup_frame:
      vai_trò: "Khung kiểu trình duyệt bao quanh ảnh chụp màn hình demo tương tác"

      info: "Bề mặt trắng, radius 16px, bóng floating-card nhẹ. Thanh trên cùng mô phỏng browser chrome với nền #f9f4f6, 3 chấm tròn cửa sổ nhỏ và tab labels 12px weight 500 #4b5563. Vùng nội dung là ảnh chụp màn hình. Khung bán sản phẩm như một artifact đã được chụp lại, không phải một live embed."

    section_heading_block:
      vai_trò: "Tiêu đề + phụ đề căn giữa phía trên bất kỳ section nội dung nào"

      info: "Heading display size 36–48px weight 700 #111827 với tracking -0.020em, căn giữa, max-width 720px. Phụ đề bên dưới 18px weight 400 #4b5563, line-height 1.56, cũng căn giữa. Khoảng cách 32px giữa heading và phụ đề, 48–64px gap bên dưới block trước khi nội dung bắt đầu."

    section_content_card:
      vai_trò: "Panel trắng nhóm một feature column hoặc testimonial"

      info: "Nền trắng, border 1px #e5e7eb, radius 16px, padding 32px. Không có drop shadow nào ngoài vòng hairline — độ nâng đến từ border và độ tương phản với nền trang #f9fafb. Nội dung bên trong sử dụng type scale tiêu chuẩn, với section title 24px weight 700 và body 16px weight 400 #4b5563."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng #2142e7 (Voltage Blue) cho chính xác một phần tử trên mỗi viewport: primary CTA, active tab hoặc focused input — không bao giờ có hai blue fill cạnh tranh cùng trọng lượng thị giác."
      - "Áp dụng hero gradient chỉ cho trường thương hiệu ở đầu trang; lặp lại ở tỷ lệ nhỏ hơn chỉ cho các feature hero panels."
      - "Đặt display sizes (36–64px) ở weight 700 với tracking từ -0.020em đến -0.025em để siết chặt chữ một cách quang học."
      - "Sử dụng radius 12px cho buttons và tabs, 16px cho inputs và cards, 9999px cho tags và announcement pills — không trộn lẫn các tỷ lệ này trên cùng một loại component."
      - "Xây dựng độ nâng với chồng bóng sáu lớp rgba(17,24,39,0.04) và vòng border 1px thay vì một drop shadow cứng duy nhất."
      - "Giữ body text ở #4b5563 trên nền trắng — dành #111827 cho headings và các bề mặt tối để duy trì hệ thống phân cấp yên tĩnh-đến-ồn ào."
      - "Neo bất kỳ bề mặt tối nào (#111827) bằng linear gradient 92–102deg về phía rgba(30,43,72,0.9) để tránh màu đen phẳng."

    không_nên_làm:
      - "Không đưa vào màu bão hòa thứ hai — hệ thống là đơn sắc cộng với một màu xanh; thêm xanh lá, đỏ hoặc cam sẽ phá vỡ sự phân bổ."
      - "Không sử dụng drop shadow cứng 1px hoặc 2px trên cards — ngôn ngữ độ nâng của thiết kế là chồng nhiều lớp khuếch tán."
      - "Không bo tròn buttons trên 12px hoặc dưới 8px — radius 12px là độ mềm đặc trưng của hệ thống, không phải pill và không phải hình vuông sắc cạnh."
      - "Không sử dụng weight 500 cho headings hoặc weight 400 cho display — thang weight type phải di chuyển theo bước nhảy hai (400, 600, 700)."
      - "Không áp dụng hero gradient cho navigation, cards hoặc body sections — nó chỉ thuộc về các khoảnh khắc thương hiệu full-bleed."
      - "Không đặt chữ trắng trên nền trắng ở bất kỳ độ mờ nào dưới 0.9 — các cặp tương phản của hệ thống đều là AAA và nên giữ như vậy."
      - "Không sử dụng #e5e7eb làm fill cho các phần tử tương tác — nó chỉ là border token, không phải bề mặt."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f9fafb` | Nền trang cơ sở, các dải section |"
    info: "| 1 | Card Surface | `#ffffff` | Content cards, nav bar, các panel nâng lên |"
    info: "| 2 | Nested Surface | `#f3f4f6` | Tab bodies, input wells, tag backgrounds |"
    info: "| 3 | Ink Surface | `#111827` | Dark CTA buttons, dark gradient anchors, inverted panels |"

  elevation:

    - "**Primary CTA button:** `rgba(17, 24, 39, 0.04) 0px 2px 2px -1px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgb(24, 47, 165) 0px 0px 0px 1px`"
    - "**Ghost/outlined button:** `rgba(17, 24, 39, 0.04) 0px 2px 2px -1px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.16) 0px 0px 0px 1px`"
    - "**Floating card / metric badge:** `rgba(17, 24, 39, 0.2) 0px 8px 8px 0px, rgba(17, 24, 39, 0.1) 0px 4px 4px 0px, rgba(17, 24, 39, 0.1) 0px 2px 2px 0px, rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, inset rgba(255, 255, 255, 0.06) 0px 1px 0px 0px`"
    - "**Content section card:** `rgba(17, 24, 39, 0.12) 0px 0px 0px 1px, rgba(17, 24, 39, 0.03) 0px 2px 2px -2px, rgba(17, 24, 39, 0.03) 0px 4px 4px 0px, rgba(17, 24, 39, 0.03) 0px 8px 8px 0px, rgba(17, 24, 39, 0.03) 0px 16px 16px 0px`"

  imagery:

    info: "Hình ảnh tập trung vào sản phẩm: các ảnh chụp màn hình hiển thị các bản chụp sản phẩm được đóng khung trình duyệt bên trong các mockup frame chân thực với faux window chrome và tab bars. Hero có một trường gradient xanh chảy không có nhiếp ảnh hoặc minh họa — bản thân màu sắc làm công việc tạo bầu không khí. Logo khách hàng trong trust strip được giảm bão hòa thành màu xám #70747d, loại bỏ nhiễu thương hiệu để màu xanh của trang tự chiếm ưu thế. Icons là line-style tối giản với stroke ~16px, xuất hiện dưới dạng check marks trong feature lists, chevrons trong nav, và arrow glyphs trong CTAs. Không có lifestyle photography, không có 3D trừu tượng, và không có decorative illustration — ngôn ngữ thị giác là UI artifact thuần túy (screenshots, gradients, icons, type)."

  layout:

    info: "Mô hình trang là max-width 1200px căn giữa, full-bleed ở hero và footer. Hero là một dải gradient full-viewport-width (~600px cao) với headline, subtitle, toggle group và URL input xếp chồng theo chiều dọc được căn giữa. Bên dưới hero, các section xen kẽ giữa các dải trắng và #f9fafb, cách nhau bởi gap 64px. Content sections sử dụng section heading block căn giữa (max 720px) theo sau là một product mockup frame đơn hoặc bố cục hai cột (text-left / visual-right hoặc text-left / checklist-right). Tab navigation nằm căn giữa giữa heading và content. Nav là thanh trên cùng sticky 64px với một hairline border duy nhất — không bóng, không background blur. Mật độ thoải mái: cards thở bên trong padding 32px, section gaps là 48–64px, và micro-spacing giữ ở các bước tăng 8/12/16px."

  gradient_system:

    info: "Hai họ gradient. (1) Hero brand gradient: một trường xanh chảy từ gần trắng ở trung tâm đến các cạnh #2142e7, chỉ được sử dụng ở tỷ lệ full-bleed. (2) Dark surface gradient: linear 92–102deg từ #111827 đến rgba(30,43,72,0.9), được sử dụng cho dark CTA buttons, dark cards và inverted sections. Một accent gradient thứ ba (linear 90deg, #111827 → #2142e7 → #03b5ed → #111827) xuất hiện dưới dạng border động mảnh trên các CTA cao cấp — điểm dừng cyan #03b5ed là nơi duy nhất màu xanh thứ hai này xuất hiện, vì vậy nó được đọc như một highlight sự kiện đặc biệt, không phải một system token."

  agent_prompt_guide:

  quick_color_reference:
    - "text (primary heading): #111827"
    - "text (body): #4b5563"
    - "background (canvas): #f9fafb"
    - "background (card): #ffffff"
    - "border: #e5e7eb"
    - "accent: #2142e7"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:
    - "**Hero section**: Gradient xanh chảy full-bleed (trung tâm trắng → các cạnh #2142e7), chiều cao 600px. Headline 48px Inter weight 700 #111827, tracking -0.96px, căn giữa. Subtitle 18px Inter weight 400 #4b5563. Ghost toggle group với các pill Demo/Video. URL input: trắng, radius 16px, placeholder #70747d, nút submit tròn #2142e7 ở cuối đường kính 40px."

    - "**Feature column card**: Bề mặt trắng, border 1px #e5e7eb, radius 16px, padding 32px. Section title 24px Inter weight 700 #111827. Body 16px Inter weight 400 #4b5563. Grid checkmark hai cột: badge tròn 20px #e5e7eb với check xanh, chữ 16px #4b5563, row gap 8px, column gap 12px."

    - "**Tab switcher group**: Track #f3f4f6 radius 8px, padding pill 16px/10px. Pill active: nền trắng, chữ #111827 weight 600, vòng bóng mềm. Pill inactive: trong suốt, chữ #4b5563 weight 500. 16px Inter xuyên suốt."

    - "**Product mockup frame**: Card trắng radius 16px, chồng bóng floating-card (rgba(17,24,39,0.2) 0px 8px 8px + inner highlight). Thanh trên #f9f4f6 với 3 chấm tròn cửa sổ (8px, xám). Tab labels 12px Inter weight 500 #4b5563. Vùng nội dung: ảnh chụp màn hình sản phẩm hoặc khung video."

    - "**Navigation bar**: Nền trắng, chiều cao 64px, max-width 1200px căn giữa, border dưới 1px #e5e7eb. Logo 24px bên trái. Nav links 16px Inter weight 500 #4b5563 với dropdown chevrons. Cụm bên phải: ghost button 'Talk to sales' (trắng, border 1px, radius 12px) bên cạnh filled blue 'Sign up for free' (#2142e7, chữ trắng, radius 12px, chồng bóng sáu lớp với vòng inset #182fa5)."

  similar_brands:

    - "**Linear** — Cùng kỷ luật đơn sắc-cộng-một-accent-bão-hòa và hệ thống kiểu chữ Inter, mặc dù accent của Linear là tím và sử dụng radii sắc hơn"
    - "**Vercel** — Typography chỉ Inter, hairline borders, radius button 12px và một màu thương hiệu duy nhất mang mọi trọng lượng tương tác"
    - "**Attio** — Bề mặt sản phẩm canvas trắng thoải mái với một accent sống động duy nhất, bóng nổi mềm và tracking chặt trên display sizes"
    - "**Loom** — SaaS thân thiện với inputs bo tròn, hero gradient treatments và bảng màu được phân bổ có chủ đích nơi một hue làm tất cả công việc tương tác"
    - "**Pitch** — Nhịp điệu editorial layout sạch sẽ với section headings căn giữa, các dải trung tính xen kẽ và Inter ở các weight hạn chế"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-voltage-blue: #2142e7;
          --color-deep-voltage: #182fa5;
          --color-midnight-ink: #111827;
          --color-slate-600: #4b5563;
          --color-slate-700: #374151;
          --color-slate-500: #70747d;
          --color-graphite: #414652;
          --color-paper-white: #ffffff;
          --color-fog-50: #f9fafb;
          --color-fog-100: #f3f4f6;
          --color-mist-200: #e5e7eb;
          --color-smoke-300: #d9dadc;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-balig-script: 'Balig Script', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.126px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.14px;
          --text-heading: 24px;
          --leading-heading: 1.33;
          --tracking-heading: -0.24px;
          --text-heading-lg: 30px;
          --leading-heading-lg: 1.29;
          --tracking-heading-lg: -0.45px;
          --text-display: 48px;
          --leading-display: 1.14;
          --tracking-display: -0.96px;
          --text-display-lg: 64px;
          --leading-display-lg: 1.06;
          --tracking-display-lg: -1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-108: 108px;
          --spacing-112: 112px;
          --spacing-240: 240px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 72px;
        
          /* Named Radii */
          --radius-tabs: 12px;
          --radius-cards: 16px;
          --radius-pills: 9999px;
          --radius-inputs: 16px;
          --radius-buttons: 12px;
          --radius-hero-frame: 24px;
        
          /* Shadows */
          --shadow-sm: rgba(17, 24, 39, 0.2) 0px 8px 8px 0px, rgba(17, 24, 39, 0.1) 0px 4px 4px 0px, rgba(17, 24, 39, 0.1) 0px 2px 2px 0px, rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset;
          --shadow-subtle: rgba(17, 24, 39, 0.12) 0px 0px 0px 1px, rgba(17, 24, 39, 0.03) 0px 2px 2px -2px, rgba(17, 24, 39, 0.03) 0px 4px 4px 0px, rgba(17, 24, 39, 0.03) 0px 8px 8px 0px, rgba(17, 24, 39, 0.03) 0px 16px 16px 0px;
          --shadow-xl: rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 2px 2px -1px, rgba(17, 24, 39, 0.16) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(17, 24, 39, 0.12) 0px 0px 0px 1px;
          --shadow-xl-2: rgba(17, 24, 39, 0.05) 0px 32px 32px 0px, rgba(17, 24, 39, 0.05) 0px 16px 16px 0px, rgba(17, 24, 39, 0.05) 0px 8px 8px 0px, rgba(17, 24, 39, 0.05) 0px 4px 4px 0px, rgba(17, 24, 39, 0.05) 0px 2px 2px -2px, rgba(17, 24, 39, 0.1) 0px 0px 0px 1px;
          --shadow-xl-3: rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 2px 2px -1px, rgb(24, 47, 165) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, rgba(17, 24, 39, 0.04) 0px 1px 1px -0.5px, rgba(17, 24, 39, 0.04) 0px 3px 3px -1.5px, rgba(17, 24, 39, 0.04) 0px 6px 6px -3px, rgba(17, 24, 39, 0.04) 0px 12px 12px -6px, rgba(17, 24, 39, 0.04) 0px 24px 24px -12px;
        
          /* Surfaces */
          --surface-page-canvas: #f9fafb;
          --surface-card-surface: #ffffff;
          --surface-nested-surface: #f3f4f6;
          --surface-ink-surface: #111827;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-voltage-blue: #2142e7;
          --color-deep-voltage: #182fa5;
          --color-midnight-ink: #111827;
          --color-slate-600: #4b5563;
          --color-slate-700: #374151;
          --color-slate-500: #70747d;
          --color-graphite: #414652;
          --color-paper-white: #ffffff;
          --color-fog-50: #f9fafb;
          --color-fog-100: #f3f4f6;
          --color-mist-200: #e5e7eb;
          --color-smoke-300: #d9dadc;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-balig-script: 'Balig Script', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.126px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.14px;
          --text-heading: 24px;
          --leading-heading: 1.33;
          --tracking-heading: -0.24px;
          --text-heading-lg: 30px;
          --leading-heading-lg: 1.29;
          --tracking-heading-lg: -0.45px;
          --text-display: 48px;
          --leading-display: 1.14;
          --tracking-display: -0.96px;
          --text-display-lg: 64px;
          --leading-display-lg: 1.06;
          --tracking-display-lg: -1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-108: 108px;
          --spacing-112: 112px;
          --spacing-240: 240px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 72px;
        
          /* Shadows */
          --shadow-sm: rgba(17, 24, 39, 0.2) 0px 8px 8px 0px, rgba(17, 24, 39, 0.1) 0px 4px 4px 0px, rgba(17, 24, 39, 0.1) 0px 2px 2px 0px, rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset;
          --shadow-subtle: rgba(17, 24, 39, 0.12) 0px 0px 0px 1px, rgba(17, 24, 39, 0.03) 0px 2px 2px -2px, rgba(17, 24, 39, 0.03) 0px 4px 4px 0px, rgba(17, 24, 39, 0.03) 0px 8px 8px 0px, rgba(17, 24, 39, 0.03) 0px 16px 16px 0px;
          --shadow-xl: rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 2px 2px -1px, rgba(17, 24, 39, 0.16) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(17, 24, 39, 0.12) 0px 0px 0px 1px;
          --shadow-xl-2: rgba(17, 24, 39, 0.05) 0px 32px 32px 0px, rgba(17, 24, 39, 0.05) 0px 16px 16px 0px, rgba(17, 24, 39, 0.05) 0px 8px 8px 0px, rgba(17, 24, 39, 0.05) 0px 4px 4px 0px, rgba(17, 24, 39, 0.05) 0px 2px 2px -2px, rgba(17, 24, 39, 0.1) 0px 0px 0px 1px;
          --shadow-xl-3: rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 2px 2px -1px, rgb(24, 47, 165) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, rgba(17, 24, 39, 0.04) 0px 1px 1px -0.5px, rgba(17, 24, 39, 0.04) 0px 3px 3px -1.5px, rgba(17, 24, 39, 0.04) 0px 6px 6px -3px, rgba(17, 24, 39, 0.04) 0px 12px 12px -6px, rgba(17, 24, 39, 0.04) 0px 24px 24px -12px;
        }