outseta___style_reference:
  info: "> Chợ chiều lúc hoàng hôn — bầu trời gradient ấm áp buông xuống màn đêm màu mận chín."

  theme: "light"

  info: "Outseta sử dụng ngôn ngữ chợ chiều ấm áp: một hero gradient ánh hoàng hôn (hồng → kem → vàng) neo giữ trang, kết hợp với văn bản màu tím đậm (#240029) tạo cảm giác chắc chắn, cao cấp cho giao diện. Câu chuyện màu sắc thương hiệu thiên về tím — gần như mọi đường viền, body text và icon stroke đều mang sắc thái #240029 thay vì đen trung tính, khiến ngay cả chrome chức năng cũng mang đậm chất thương hiệu. Màu hồng neon (#df37a7) duy nhất đảm nhận vai trò màu hành động chính, giữ cho các khoảnh khắc thương mại chặt chẽ và rõ ràng. Font mono-spaced cho eyebrow (JetBrains Mono với tracking rộng) mở đầu mỗi section, và các chú thích Permanent Marker tự do nổi trên hero, mang lại cho bề mặt marketing cá tính như một cuốn sổ tay thủ công. Các component có góc bo tròn mềm (6-14px), shadow thấp, nằm trên nền trắng với shadow pha tím thay vì xám."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Aubergine | `#240029` | `--color-aubergine` | Primary text, icon strokes, hairline borders, và fill cho section tối — mực cấu trúc của hệ thống; mọi đường viền chức năng đều mang sắc thái này thay vì xám trung tính |"
    info: "| Fuchsia Signal | `#df37a7` | `--color-fuchsia-signal` | Primary action fill (Sign up CTA, active states) — màu sắc nóng duy nhất trong hệ thống, chỉ dành riêng cho khoảnh khắc chuyển đổi |"
    info: "| Heather | `#6d526d` | `--color-heather` | Điểm nhấn hồng cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ |"
    info: "| Glowstick | `#ffcc11` | `--color-glowstick` | Màu kết thúc của hero gradient và điểm nhấn trang trí — một màu vàng ấm chỉ dùng cho khoảnh khắc ăn mừng và gradient hoàng hôn |"
    info: "| Plum Tinted | `#d4ccd4` | `--color-plum-tinted` | Đường viền nhạt pha tím, hairline mặc định — luôn mang một chút tím thương hiệu thay vì xám thuần |"
    info: "| Ink | `#222222` | `--color-ink` | Icon strokes và link text khi màu tím thương hiệu quá bão hòa; màu gần trung tính, đồng hành cùng Aubergine |"
    info: "| Smoke | `#bbadbb` | `--color-smoke` | Đường viền mềm và điểm nhấn heading mờ — phiên bản nhạt hơn của Plum Tinted cho divider phụ |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Body text fallback và fill sâu cho hình ảnh |"
    info: "| Frost | `#767676` | `--color-frost` | Input border, trạng thái nghỉ của form field |"
    info: "| Forest | `#15803d` | `--color-forest` | Success badge text và inline success state — màu xanh rừng thực sự cho xác nhận và phản hồi tích cực |"
    info: "| Mint | `#bbf7d0` | `--color-mint` | Điểm nhấn đường viền xanh cho tag, divider, và cạnh UI được focus. Dùng làm điểm nhấn hỗ trợ, không phải màu trạng thái |"
    info: "| Honeydew | `#dcfce7` | `--color-honeydew` | Success badge background — lớp nền mint nhạt phía sau pill trạng thái tích cực |"
    info: "| Strawberry | `#ef4444` | `--color-strawberry` | Điểm nhấn đường viền đỏ cho tag, divider, và cạnh UI được focus. Dùng làm điểm nhấn hỗ trợ, không phải màu trạng thái |"
    info: "| Mango | `#22c55e` | `--color-mango` | Điểm nhấn đường viền xanh cho tag, divider, và cạnh UI được focus. Dùng làm điểm nhấn hỗ trợ, không phải màu trạng thái |"
    info: "| Canvas | `#ffffff` | `--color-canvas` | Nền trang, bề mặt card, button text trên fill tối |"
    info: "| Hero Glow | `linear-gradient(145deg, #ffbdd3, #fff1bd 40%, #fff1bd 60%, #ffcb0f)` | `--color-hero-glow` | Điểm dừng cuối của hero gradient — một màu hồng nhẹ mở ra lớp sơn hoàng hôn |"

  tokens___typography:

    inter_var___workhorse_ui_và_body_font___biến_thể_một_trục_duy_nhất_cắt_tracking_ở_mọi_kích_cỡ__0_02em_ở_10px_đến__0_004em_ở_36px__giúp_body_text_và_heading_dùng_chung_một_họ_font_không_có_bước_nhảy_weight_gây_khó_chịu_____font_inter_var:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích cỡ:** 10px, 12px, 14px, 16px, 20px, 24px, 36px"
      - "**Line height:** 1.20-1.50"
      - "**Letter spacing:** -0.20px ở 10px, -0.16px ở 12px, -0.14px ở 14px, -0.16px ở 16px, -0.16px ở 20px, -0.20px ở 36px"
      - "**OpenType features:** `\"calt\" on, \"cv11\" on, \"ss02\" on, \"ss03\" on`"
      - "**Vai trò:** Workhorse UI và body font — biến thể một trục duy nhất cắt tracking ở mọi kích cỡ (-0.02em ở 10px đến -0.004em ở 36px), giúp body text và heading dùng chung một họ font không có bước nhảy weight gây khó chịu."

    kaio___display_headlines___sans_đậm__siêu_nén_với_cá_tính_mạnh__dùng_ở_56_80px_cho_tuyên_bố_hero__việc_chọn_một_weight_đậm_duy_nhất_với_tracking_chặt_là_phá_vỡ_quy_ước__hầu_hết_các_site_saas_ghép_weight_300_thì_thầm_với_700_hét_to__kaio_cam_kết_hoàn_toàn_với_một_âm_lượng_duy_nhất_____font_kaio:
      - "**Thay thế:** Boldonse, Inter Tight 800, hoặc General Sans Bold"
      - "**Weights:** 700"
      - "**Kích cỡ:** 36px, 56px, 80px"
      - "**Line height:** 1.00-1.20"
      - "**Letter spacing:** -0.0200em, -0.0040em"
      - "**OpenType features:** `\"ss03\", \"calt\", \"cv11\", \"ss02\"`"
      - "**Vai trò:** Display headlines — sans đậm, siêu nén với cá tính mạnh, dùng ở 56-80px cho tuyên bố hero. Việc chọn một weight đậm duy nhất với tracking chặt là phá vỡ quy ước; hầu hết các site SaaS ghép weight 300 thì thầm với 700 hét to. Kaio cam kết hoàn toàn với một âm lượng duy nhất."

    jetbrains_mono___section_eyebrows_và_nhãn_kỹ_thuật_ví_dụ__stripe_verified_partner___all_in_one_membership_stack____tracking_rộng_0_04_0_10em_biến_mono_thành_giọng_nhãn_nhân_văn__không_phải_code_____font_jetbrains_mono:
      - "**Thay thế:** IBM Plex Mono, JetBrains Mono"
      - "**Weights:** 400"
      - "**Kích cỡ:** 12px, 14px, 16px"
      - "**Line height:** 1.20-1.50"
      - "**Letter spacing:** 0.04em ở 12-14px, 0.10em ở 16px"
      - "**OpenType features:** `\"calt\", \"cv11\", \"ss02\", \"ss03\"`"
      - "**Vai trò:** Section eyebrows và nhãn kỹ thuật (ví dụ 'STRIPE VERIFIED PARTNER', 'ALL-IN-ONE MEMBERSHIP STACK') — tracking rộng (0.04-0.10em) biến mono thành giọng nhãn nhân văn, không phải code."

    permanent_marker___chú_thích_viết_tay_xếp_lớp_trên_hero_gradient__see_what_our_customers_are_building___hook_in_the_first_90_minutes____đây_không_phải_body_text__mà_là_lớp_cá_tính__dùng_tiết_kiệm_để_đánh_dấu_section__không_phải_để_truyền_tải_ý_nghĩa_____font_permanent_marker:
      - "**Thay thế:** Permanent Marker (Google Fonts)"
      - "**Weights:** 400"
      - "**Kích cỡ:** 16px, 20px"
      - "**Line height:** 1.40-1.50"
      - "**Letter spacing:** -0.0100em, -0.0080em"
      - "**OpenType features:** `\"calt\", \"cv11\", \"ss02\"`"
      - "**Vai trò:** Chú thích viết tay xếp lớp trên hero gradient ('SEE WHAT OUR CUSTOMERS ARE BUILDING', 'HOOK IN THE FIRST 90 MINUTES') — đây không phải body text, mà là lớp cá tính; dùng tiết kiệm để đánh dấu section, không phải để truyền tải ý nghĩa."

    phosphor___hệ_thống_icon___một_weight__một_màu_aubergine_240029__stroke_tương_đương_1px__dùng_inline_với_body_copy_và_làm_glyph_độc_lập_____font_phosphor:
      - "**Thay thế:** Phosphor Icons (Regular)"
      - "**Weights:** 400"
      - "**Kích cỡ:** 24px"
      - "**Line height:** 1.00"
      - "**OpenType features:** `\"liga\"`"
      - "**Vai trò:** Hệ thống icon — một weight, một màu (Aubergine #240029), stroke tương đương 1px, dùng inline với body copy và làm glyph độc lập."

    font_awesome_6_brands___glyph_thương_hiệu_bên_thứ_ba_logo_tích_hợp__icon_mạng_xã_hội___giữ_tách_biệt_với_phosphor_để_hệ_thống_có_thể_pha_trộn_icon_line_riêng_với_dấu_hiệu_thương_hiệu_khách_hàng_mà_không_va_chạm_thị_giác_____font_font_awesome_6_brands:
      - "**Weights:** 400"
      - "**Kích cỡ:** 16px, 20px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0100em, -0.0090em, 0.0240em"
      - "**OpenType features:** `\"calt\", \"cv11\", \"ss02\"`"
      - "**Vai trò:** Glyph thương hiệu bên thứ ba (logo tích hợp, icon mạng xã hội) — giữ tách biệt với Phosphor để hệ thống có thể pha trộn icon line riêng với dấu hiệu thương hiệu khách hàng mà không va chạm thị giác."

    phosphor_bold___phosphor_bold___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_phosphor_bold:
      - "**Weights:** 400"
      - "**Kích cỡ:** 12px, 14px, 16px, 20px, 32px"
      - "**Line height:** 1"
      - "**OpenType features:** `\"liga\"`"
      - "**Vai trò:** Phosphor-Bold — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    phosphor_fill___phosphor_fill___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_phosphor_fill:
      - "**Weights:** 400"
      - "**Kích cỡ:** 12px, 20px, 32px"
      - "**Line height:** 1"
      - "**OpenType features:** `\"liga\"`"
      - "**Vai trò:** Phosphor-Fill — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    apple_system____apple_system___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_apple_system:
      - "**Weights:** 400"
      - "**Kích cỡ:** 14px"
      - "**Line height:** 1.43"
      - "**OpenType features:** `\"calt\", \"cv11\", \"ss02\"`"
      - "**Vai trò:** -apple-system — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    family___family___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_family:
      - "**Weights:** 400, 500, 700"
      - "**Kích cỡ:** 26px"
      - "**Line height:** 1.5"
      - "**Letter spacing:** -0.001"
      - "**OpenType features:** `\"calt\", \"cv11\", \"ss02\"`"
      - "**Vai trò:** Family — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    fraunces___fraunces___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_fraunces:
      - "**Weights:** 700"
      - "**Kích cỡ:** 36px"
      - "**Line height:** 1.2"
      - "**Letter spacing:** -0.004"
      - "**OpenType features:** `\"calt\", \"cv11\", \"ss02\"`"
      - "**Vai trò:** Fraunces — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    chakra_petch___chakra_petch___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_chakra_petch:
      - "**Weights:** 700"
      - "**Kích cỡ:** 36px"
      - "**Line height:** 1.2"
      - "**Letter spacing:** -0.004"
      - "**OpenType features:** `\"calt\", \"cv11\", \"ss02\"`"
      - "**Vai trò:** Chakra Petch — đượ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 cỡ | Line Height | Letter Spacing | Token |"
      info: "|---------|---------|-------------|----------------|-------|"
      info: "| micro | 10px | 1.4 | -0.2px | `--text-micro` |"
      info: "| caption | 12px | 1.5 | -0.16px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.16px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.1px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | -0.14px | `--text-heading` |"
      info: "| heading-lg | 56px | 1.1 | -1.12px | `--text-heading-lg` |"
      info: "| display | 80px | 1 | -1.6px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "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: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 14px |"
      info: "| pills | 999px |"
      info: "| badges | 999px |"
      info: "| images | 6px |"
      info: "| inputs | 3px |"
      info: "| buttons | 6px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| subtle | `rgba(41, 0, 41, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0....` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(41, 0, 41, 0.2) 0px 0px 0px 1px inset` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0....` | `--shadow-subtle-5` |"
      info: "| subtle-6 | `rgba(32, 0, 36, 0.01) 0px 1px 1.5px 0px, rgba(32, 0, 36, ...` | `--shadow-subtle-6` |"
      info: "| subtle-7 | `rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0....` | `--shadow-subtle-7` |"
      info: "| subtle-8 | `rgba(32, 0, 36, 0.11) 0px 0px 0px 1px` | `--shadow-subtle-8` |"
      info: "| subtle-9 | `rgba(41, 0, 41, 0.11) 0px 0px 0px 1px` | `--shadow-subtle-9` |"
      info: "| subtle-10 | `rgba(255, 255, 255, 0.11) 0px 0px 0px 1px` | `--shadow-subtle-10` |"
      info: "| subtle-11 | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle-11` |"
      info: "| subtle-12 | `rgba(32, 0, 36, 0.05) 0px 1px 2px 0px, rgba(255, 255, 255...` | `--shadow-subtle-12` |"

    layout:

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

  components:

    primary_filled_button:
      vai_trò: "Nút chuyển đổi duy nhất — Sign up, Start free trial, Get started"

      info: "Fill #df37a7 (Fuchsia Signal), text #ffffff, radius 6px, padding 12px 24px, Inter Var 16px weight 600. Box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05). Không có hover outline — sự chuyển màu là toàn bộ tín hiệu affordance."

    ghost_outlined_button:
      vai_trò: "Hành động phụ đặt cạnh CTA chính — Is Outseta for me?, Learn more"

      info: "Background trong suốt, border 1px solid #6d526d (Heather), text #240029, radius 6px, padding 12px 24px, Inter Var 16px weight 500. Đường viền tím nhạt báo hiệu 'hạng hai' mà không bao giờ chuyển sang xám."

    pill_tag___category:
      vai_trò: "Use-case chips và nhãn danh mục (NETS, CLUBS, ASSOCIATIONS, COURSES, COMMUNITIES)"

      info: "Background #ffffff, border 1px solid #6d526d, text #240029, radius 999px (full pill), padding 6px 12px, Inter Var 12px weight 500. Radius pill và đường viền Heather mỏng đọc như bộ lọc ít nhấn mạnh, không phải nút bấm."

    success_badge:
      vai_trò: "Xác nhận trạng thái inline — active, verified, connected"

      info: "Background #dcfce7 (Honeydew), border 1px solid #bbf7d0 (Mint), text #15803d (Forest), radius 999px, padding 4px 12px, Inter Var 12px weight 500. Hệ thống xanh ba cấp (border, fill, text) là nơi duy nhất màu xanh xuất hiện — nó không bao giờ rò rỉ vào icon hay hình minh họa."

    testimonial_card:
      vai_trò: "Lưới ba cột chứa quote khách hàng bên dưới hero"

      info: "Background #ffffff, radius 14px, padding 32px, shadow: 0 0 0 1px rgba(41,0,41,0.11), 0 2px 2px rgba(32,0,36,0.05). Chứa avatar hình tròn 40px (fill Aubergine, chữ cái đầu màu trắng), tên trong Inter Var 16px weight 600 #240029, vai trò trong Inter Var 14px weight 400 #6d526d, và quote trong Inter Var 14px line-height 1.5."

    showcase___logo_card:
      vai_trò: "Khách hàng nổi bật hoặc mockup sản phẩm trong hàng card hero"

      info: "Background #ffffff, radius 14px, padding 0 (ảnh tràn ra mép), radius ảnh bên trong 6px qua overflow:hidden. Ảnh lấp đầy card không có padding. Dùng trong lưới 3 cột bên dưới headline với gap 16px."

    numbered_step:
      vai_trò: "Trình giải thích quy trình ba bước (Create plan, Add script, Copy links)"

      info: "Vòng tròn Aubergine 24px với số 12px weight 600 màu trắng bên trong, theo sau là text Inter Var 16px weight 500 màu #240029. Không có background card — vòng tròn nổi inline với text bước, cách nhau 12px gap."

    hero_section:
      vai_trò: "Khối mở đầu trang — bầu trời gradient, headline khổng lồ, CTA kép, showcase cards"

      background_full_bleed: "linear-gradient(145deg, #ffbdd3, #fff1bd 40%, #fff1bd 60%, #ffcb0f). Stack căn giữa max-width 800px: JetBrains Mono 12px eyebrow ở 0.10em tracking, Kaio 80px weight 700 headline màu #240029, Inter Var 20px subhead, hàng CTA kép, sau đó hàng showcase card 3 cột đẩy lên trên vào gradient với gap 16px."

    dark_cta_section:
      vai_trò: "Dải chuyển đổi cuối cùng — Get started with Outseta today"

      info: "Background full-bleed #240029 (Aubergine), padding 80px dọc, text trắng. Kaio 56px weight 700 headline màu #ffffff, Inter Var 16px body màu #d4ccd4 (Plum Tinted), Primary Filled Button căn phải. Một card ảnh chụp màn hình sản phẩm phá vỡ cạnh phải với radius 14px và shadow tím tiêu chuẩn."

    navigation_bar:
      vai_trò: "Header đầu trang — logo, nav, auth"

      info: "Nền trắng, border dưới 1px #d4ccd4, max-width 1200px căn giữa, padding dọc 16px. Logo (mark vòng tròn đồng tâm + wordmark Kaio 20px 'Outseta') bên trái, nav link Inter Var 14px weight 500 với chevron dropdown, icon GitHub, link ghost Log in, và Primary Filled Button bên phải. Link nhỏ 'Migrating from Memberspace?' với mũi tên nằm dưới dạng sub-bar bên phải."

    eyebrow_label:
      vai_trò: "Text giới thiệu section phía trên mọi headline chính — 'ALL-IN-ONE MEMBERSHIP STACK', 'STRIPE VERIFIED PARTNER'"

      info: "JetBrains Mono 12px weight 400, letter-spacing 0.10em, text #240029, căn giữa, margin-bottom 16px. Tùy chọn icon Phosphor 16px nhỏ (filled hoặc outlined) bên trái với gap 8px. Font mono với tracking cực rộng là cách hệ thống nói 'tạm dừng, section mới'."

    hand_drawn_annotation:
      vai_trò: "Lớp cá tính trên hero — mũi tên và ghi chú chỉ vào showcase cards"

      info: "Permanent Marker 16-20px weight 400, text #df37a7 (Fuchsia Signal) hoặc #240029 (Aubergine), xoay nhẹ 2-4px để tạo cảm giác thoải mái, không có fixed positioning. Dùng 2-3 lần mỗi trang, luôn trên hero gradient, luôn chỉ vào một element cụ thể qua mũi tên SVG vẽ tay."

    input_field:
      vai_trò: "Thu thập email, form fields, search"

      info: "Background #ffffff, border 1px solid #767676 (Frost), radius 3px, padding 12px 16px, Inter Var 16px weight 400 text #240029, placeholder #6d526d. Radius 3px được cố tình sắc hơn cards/buttons (6-14px), đánh dấu input là một lớp vật liệu khác."

    integration_icon_tile:
      vai_trò: "Logo công cụ bên thứ ba trong hàng tích hợp"

      info: "Icon thang độ xám hình vuông 40px (xử lý một màu #222222 hoặc #240029), không background, gap 24px giữa các tile, căn giữa trong một hàng duy nhất bên dưới link 'View all'. Dấu hiệu thương hiệu khách hàng dùng Font Awesome 6 Brands; icon riêng của Outseta dùng Phosphor."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Kaio 700 cho mọi display headline ở 56-80px — đây là giọng nói duy nhất; không bao giờ ghép nó với font đậm thứ hai trong cùng một view."
      - "Dành #df37a7 (Fuchsia Signal) cho một element trên mỗi viewport — CTA chính — và để nó là màu hồng neon duy nhất trên trang."
      - "Pha màu tím thương hiệu rgba(32-41,0,36,x) vào mọi shadow; không bao giờ dùng shadow đen trung tính cho cards, buttons, hoặc modals."
      - "Dùng JetBrains Mono ở 0.10em tracking cho section eyebrows phía trên mọi H1/H2 — đây là tín hiệu ngắt section của hệ thống."
      - "Áp dụng gradient hoàng hôn 145deg (hồng → kem → vàng) cho dải hero full-bleed; không bao giờ dùng cho cards, buttons, hoặc bề mặt nhỏ."
      - "Mặc định radius 14px cho cards và 6px cho buttons; hệ thống phân cấp 14/6/3 (cards/buttons/inputs) là thứ làm cho các bề mặt cảm giác như các lớp vật liệu riêng biệt."
      - "Đặt 1-3 chú thích Permanent Marker chỉ trên hero, mỗi chú thích chỉ vào một element cụ thể với mũi tên SVG vẽ tay — chúng là chrome tiếp thị, không phải điều hướng."

    không_nên_làm:
      - "Không dùng #df37a7 cho bất cứ thứ gì khác ngoài fill CTA chính — không cho links, không cho borders, không cho text accents."
      - "Không ghép Kaio với display serif hoặc sans thứ hai trong cùng một màn hình — Fraunces và Chakra Petch xuất hiện trong dữ liệu là những khoảnh khắc trang trí biệt lập, không phải font hệ thống."
      - "Không giới thiệu border radius thứ tư — thang đo 999px/14px/6px/3px đã hoàn chỉnh; thêm 8px hoặc 10px làm phân mảnh hệ thống phân cấp vật liệu."
      - "Không đặt chú thích Permanent Marker bên ngoài dải hero gradient — chúng mất độ tương phản và đọc như text hỏng trên nền trắng."
      - "Không dùng đen trung tính (#000000) cho shadows, text, hoặc borders — Aubergine #240029 là mực cấu trúc; màu đen phá vỡ tính nhất quán sắc độ."
      - "Không xếp chồng nhiều hơn hai màu text trong một component — hệ thống chỉ dùng #240029 (chính) và #6d526d (phụ) cho text, cộng thêm #d4ccd4 cho helper mờ."
      - "Không áp dụng hero gradient cho buttons, badges, hoặc icons — nó là xử lý không khí cấp trang, không phải fill component."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang, bề mặt card mặc định, nền nav |"
    info: "| 1 | Warm Wash | `#fff1bd` | Điểm dừng giữa của hero gradient, dùng làm dải full-bleed phía sau headline và showcase cards |"
    info: "| 2 | Dark Plum | `#240029` | Dark CTA section full-bleed gần cuối trang — text trắng trên Aubergine cho khoảnh khắc chuyển đổi cuối cùng |"
    info: "| 3 | Success Wash | `#dcfce7` | Nền mint nhạt cho success badges và pill trạng thái tích cực |"

  elevation:

    - "**Card:** `0px 0px 0px 1px rgba(41,0,41,0.11), 0px 2px 2px 0px rgba(32,0,36,0.05)`"
    - "**Elevated Card:** `0px 0px 0px 1px rgba(32,0,36,0.11), 0px 1px 1.5px rgba(32,0,36,0.01), 0px 2px 3px rgba(32,0,36,0.02), 0px 4px 6px rgba(32,0,36,0.03), 0px 8px 12px rgba(32,0,36,0.04), 0px 16px 24px rgba(32,0,36,0.05)`"
    - "**Button:** `inset 0px 0px 0px 1px rgba(255,255,255,0.2), 0px 1px 2px 0px rgba(0,0,0,0.05)`"
    - "**Input:** `inset 0px 0px 0px 1px rgba(255,255,255,0.2), 0px 1px 2px 0px rgba(0,0,0,0.05)`"
    - "**Image:** `0px 1px 1.5px rgba(32,0,36,0.01), 0px 2px 3px rgba(32,0,36,0.02), 0px 4px 6px rgba(32,0,36,0.03), 0px 8px 12px rgba(32,0,36,0.04), 0px 16px 24px rgba(32,0,36,0.05)`"

  imagery:

    info: "Site thiên về UI, không nặng về hình ảnh — không có nhiếp ảnh, không ảnh phong cách sống, không hero render sản phẩm. Sự thú vị thị giác đến từ dải hero gradient và một hàng ba card ảnh chụp màn hình/showcase hoạt động như bằng chứng thuyết phục hơn là hình ảnh trang trí. Card ảnh chụp màn hình chứa UI sản phẩm thực (dashboard, course page, landing builder) được hiển thị theo phong cách riêng của thương hiệu. Một bộ nhỏ icon line Phosphor (stroke 1px, Aubergine) xử lý mọi iconography. Chú thích Permanent Marker là element 'thủ công' duy nhất và được cố tình thô — chúng phá vỡ UI trau chuốt để báo hiệu 'được xây dựng bởi con người, không phải tập đoàn'. Không có 3D, không có minh họa, không có đồ họa trừu tượng."

  layout:

    info: "Trang full-bleed với nội dung max-width 1200px căn giữa. Hero là dải gradient toàn chiều rộng với stack cột hẹp căn giữa (max 800px) cho headline và CTA kép, sau đó là hàng card 3 cột mở rộng hơn. Các section chảy liền mạch — không có divider, không có dải sáng/tối xen kẽ ngoại trừ một dark CTA section Aubergine full-bleed gần footer. Nhịp điệu nội dung: stack headline căn giữa → hàng card 3 cột → tường quote căn giữa (lưới testimonial 3 cột) → hàng tích hợp căn giữa với link chevron → trình giải thích quy trình 3 bước căn giữa → dark CTA full-bleed. Navigation là thanh trên cùng sticky không có mega-menu — nav phẳng với chevron dropdown, logo trái, auth phải. Mật độ tổng thể là comfortable, không compact — section gap 80px, card padding 24-32px, element gap 16px."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #240029 (Aubergine)"
    - "background: #ffffff (Canvas)"
    - "border: #d4ccd4 (Plum Tinted) cho hairline, #6d526d (Heather) cho tương tác"
    - "accent: #ffcc11 (Glowstick) chỉ cho hero gradient terminal"
    - "primary action: #df37a7 (filled action)"
    - "success: #15803d text, #dcfce7 background, #bbf7d0 border"

    ví_dụ_component_prompts:
    - "Tạo Primary Action Button: background #df37a7, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng xử lý filled này cho CTA chính."

    - "Tạo testimonial card: nền trắng, radius 14px, padding 32px, shadow 0 0 0 1px rgba(41,0,41,0.11) + 0 2px 2px rgba(32,0,36,0.05). Chứa avatar vòng tròn Aubergine 40px với chữ cái đầu màu trắng, tên trong Inter Var 16px weight 600 #240029, vai trò trong Inter Var 14px weight 400 #6d526d, body quote trong Inter Var 14px line-height 1.5 #240029."

    - "Tạo success badge: background #dcfce7, border 1px solid #bbf7d0, text #15803d, radius 999px, padding 4px 12px, Inter Var 12px weight 500. Chỉ dùng cho trạng thái active/verified/connected."

    - "Tạo dark CTA section: background full-bleed #240029, padding dọc 80px, max-width 1200px căn giữa. Kaio 56px weight 700 headline màu #ffffff, Inter Var 16px body màu #d4ccd4, Primary Filled Button (#df37a7/#ffffff) căn phải, card ảnh chụp màn hình sản phẩm với radius 14px ở cạnh phải."

    - "Tạo cặp section eyebrow + heading: JetBrains Mono 12px weight 400 ở letter-spacing 0.10em màu #240029, margin-bottom 16px. Bên dưới, Kaio 56px weight 700 màu #240029 ở letter-spacing -1.12px. Dùng stack này phía trên mọi section chính."

  similar_brands:

    - "**Stripe** — Cùng xử lý hero gradient ấm áp (Stripe dùng dải bầu trời cam sang hồng), cùng dark CTA section thiên về tím, và cùng sự tự tin để một display headline đậm duy nhất chiếm lĩnh viewport"
    - "**Linear** — Cùng cam kết display một weight đậm duy nhất (Linear dùng Inter Display độc quyền; Outseta dùng Kaio ở 700), cùng hành động phụ hình pill, cùng cách tiếp cận hairline-border-everywhere"
    - "**ConvertKit** — Cùng sự ấm áp của creator-economy với một màu nhấn sống động, cùng chú thích vẽ tay kiểu Permanent Marker trên hero, cùng giọng điệu dễ tiếp cận nhưng có chủ đích"
    - "**Notion** — Cùng nhãn eyebrow font mono phía trên mọi section, cùng bảng màu hạn chế nơi một điểm nhấn làm tất cả công việc, cùng nhịp điệu spacing comfortable-not-compact"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-aubergine: #240029;
          --color-fuchsia-signal: #df37a7;
          --color-heather: #6d526d;
          --color-glowstick: #ffcc11;
          --color-plum-tinted: #d4ccd4;
          --color-ink: #222222;
          --color-smoke: #bbadbb;
          --color-charcoal: #333333;
          --color-frost: #767676;
          --color-forest: #15803d;
          --color-mint: #bbf7d0;
          --color-honeydew: #dcfce7;
          --color-strawberry: #ef4444;
          --color-mango: #22c55e;
          --color-canvas: #ffffff;
          --color-hero-glow: #ffbdd3;
          --gradient-hero-glow: linear-gradient(145deg, #ffbdd3, #fff1bd 40%, #fff1bd 60%, #ffcb0f);
        
          /* Typography — Font Families */
          --font-inter-var: 'Inter Var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-kaio: 'Kaio', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-permanent-marker: 'Permanent Marker', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-phosphor: 'Phosphor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-6-brands: 'Font Awesome 6 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-phosphor-bold: 'Phosphor-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-phosphor-fill: 'Phosphor-Fill', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-family: 'Family', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-fraunces: 'Fraunces', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chakra-petch: 'Chakra Petch', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.4;
          --tracking-micro: -0.2px;
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.16px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.16px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.1px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.14px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.12px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -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-32: 32px;
          --spacing-48: 48px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-2xl: 18px;
          --radius-2xl-2: 22px;
          --radius-3xl: 32px;
          --radius-3xl-2: 46px;
          --radius-full: 64px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-cards: 14px;
          --radius-pills: 999px;
          --radius-badges: 999px;
          --radius-images: 6px;
          --radius-inputs: 3px;
          --radius-buttons: 6px;
        
          /* Shadows */
          --shadow-subtle: rgba(41, 0, 41, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-2: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px;
          --shadow-subtle-4: rgba(41, 0, 41, 0.2) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.01) 0px 1px 1.5px 0px, rgba(32, 0, 36, 0.02) 0px 2px 3px 0px, rgba(32, 0, 36, 0.03) 0px 4px 6px 0px, rgba(32, 0, 36, 0.04) 0px 8px 12px 0px, rgba(32, 0, 36, 0.05) 0px 16px 24px 0px, rgba(32, 0, 36, 0.06) 0px 24px 36px 0px, rgba(32, 0, 36, 0.07) 0px 36px 54px 0px, rgba(32, 0, 36, 0.08) 0px 54px 81px 0px;
          --shadow-subtle-6: rgba(32, 0, 36, 0.01) 0px 1px 1.5px 0px, rgba(32, 0, 36, 0.02) 0px 2px 3px 0px, rgba(32, 0, 36, 0.03) 0px 4px 6px 0px, rgba(32, 0, 36, 0.04) 0px 8px 12px 0px, rgba(32, 0, 36, 0.05) 0px 16px 24px 0px;
          --shadow-subtle-7: rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-8: rgba(32, 0, 36, 0.11) 0px 0px 0px 1px;
          --shadow-subtle-9: rgba(41, 0, 41, 0.11) 0px 0px 0px 1px;
          --shadow-subtle-10: rgba(255, 255, 255, 0.11) 0px 0px 0px 1px;
          --shadow-subtle-11: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-subtle-12: rgba(32, 0, 36, 0.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.4) 0px 10px 24px -10px inset;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-warm-wash: #fff1bd;
          --surface-dark-plum: #240029;
          --surface-success-wash: #dcfce7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-aubergine: #240029;
          --color-fuchsia-signal: #df37a7;
          --color-heather: #6d526d;
          --color-glowstick: #ffcc11;
          --color-plum-tinted: #d4ccd4;
          --color-ink: #222222;
          --color-smoke: #bbadbb;
          --color-charcoal: #333333;
          --color-frost: #767676;
          --color-forest: #15803d;
          --color-mint: #bbf7d0;
          --color-honeydew: #dcfce7;
          --color-strawberry: #ef4444;
          --color-mango: #22c55e;
          --color-canvas: #ffffff;
          --color-hero-glow: #ffbdd3;
        
          /* Typography */
          --font-inter-var: 'Inter Var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-kaio: 'Kaio', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-permanent-marker: 'Permanent Marker', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-phosphor: 'Phosphor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-6-brands: 'Font Awesome 6 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-phosphor-bold: 'Phosphor-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-phosphor-fill: 'Phosphor-Fill', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-family: 'Family', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-fraunces: 'Fraunces', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chakra-petch: 'Chakra Petch', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.4;
          --tracking-micro: -0.2px;
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.16px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.16px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.1px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.14px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.12px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-2xl: 18px;
          --radius-2xl-2: 22px;
          --radius-3xl: 32px;
          --radius-3xl-2: 46px;
          --radius-full: 64px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-subtle: rgba(41, 0, 41, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-2: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px;
          --shadow-subtle-4: rgba(41, 0, 41, 0.2) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.01) 0px 1px 1.5px 0px, rgba(32, 0, 36, 0.02) 0px 2px 3px 0px, rgba(32, 0, 36, 0.03) 0px 4px 6px 0px, rgba(32, 0, 36, 0.04) 0px 8px 12px 0px, rgba(32, 0, 36, 0.05) 0px 16px 24px 0px, rgba(32, 0, 36, 0.06) 0px 24px 36px 0px, rgba(32, 0, 36, 0.07) 0px 36px 54px 0px, rgba(32, 0, 36, 0.08) 0px 54px 81px 0px;
          --shadow-subtle-6: rgba(32, 0, 36, 0.01) 0px 1px 1.5px 0px, rgba(32, 0, 36, 0.02) 0px 2px 3px 0px, rgba(32, 0, 36, 0.03) 0px 4px 6px 0px, rgba(32, 0, 36, 0.04) 0px 8px 12px 0px, rgba(32, 0, 36, 0.05) 0px 16px 24px 0px;
          --shadow-subtle-7: rgba(32, 0, 36, 0.11) 0px 0px 0px 1px, rgba(32, 0, 36, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-8: rgba(32, 0, 36, 0.11) 0px 0px 0px 1px;
          --shadow-subtle-9: rgba(41, 0, 41, 0.11) 0px 0px 0px 1px;
          --shadow-subtle-10: rgba(255, 255, 255, 0.11) 0px 0px 0px 1px;
          --shadow-subtle-11: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-subtle-12: rgba(32, 0, 36, 0.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.4) 0px 10px 24px -10px inset;
        }