savvycal___style_reference:
  info: "> Sân khấu xanh rừng với trang giấy kem, headline serif và dấu câu xanh chanh"

  theme: "mixed"

  info: "SavvyCal vận hành theo hệ thống biên tập hai vùng: một sân khấu hero xanh rừng và phần body giấy kem ấm áp. Cá tính là sự giao thoa giữa tạp chí và sản phẩm: một condensed display serif (GT Alpina) làm headline với trọng lượng biên tập, trong khi một grotesk đa năng (GT America) đảm nhận body và UI. Một màu xanh chanh duy nhất tô điểm cho mọi khoảnh khắc tương tác, và màu đỏ san hô chỉ tồn tại như dấu câu trang trí — gạch chân lượn sóng, hình vẽ tay, viền khung mảnh. Thẩm mỹ vay mượn từ in ấn: trung tính ấm, giọng serif, khoảng trắng rộng rãi, và các điểm nhấn thủ công làm mềm đi tính tiện ích của công cụ lên lịch. Các màn hình nên xen kẽ giữa sân khấu tối (dùng có chừng mực cho hero, spotlight tính năng) và canvas kem (mặc định cho tính năng, giá, nội dung), không bao giờ pha trộn cả hai trong một view. Bề mặt giữ phẳng và mờ — không glassmorphism, không elevation nặng. Màu sắc xuất hiện như những chấm chức năng nhỏ, không phải mảng màu loang."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Forest Stage | `#0d542b` | `--color-forest-stage` | Nền hero section, spotlight tính năng tối — xanh đậm neo ấn tượng đầu tiên đầy kịch tính |"
    info: "| Lime Sprout | `#b9ff78` | `--color-lime-sprout` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |"
    info: "| Ember Coral | `#f54320` | `--color-ember-coral` | Accent stroke trang trí — gạch chân lượn sóng, hình vẽ tay, viền khung sản phẩm, đường phân cách section |"
    info: "| Coral Whisper | `#ffe3e3` | `--color-coral-whisper` | Lớp phủ bề mặt ấm mềm, điểm nhấn gradient hero, nền tint nhẹ phía sau các section biên tập |"
    info: "| Cream Paper | `#fcf7ed` | `--color-cream-paper` | Bề mặt nội dung chính, nền trang cho các section tính năng/giá/footer — canvas mặc định |"
    info: "| True Black | `#000000` | `--color-true-black` | Headline, body text chính, icon tối, logo mark trên bề mặt sáng |"
    info: "| Midnight Ink | `#1c1917` | `--color-midnight-ink` | Bề mặt tối (footer dark mode, inverse cards), text nút trên fill sáng, accent heading |"
    info: "| Stone | `#44403b` | `--color-stone` | Body paragraph text trên bề mặt kem, secondary heading, footer description copy |"
    info: "| Slate | `#292524` | `--color-slate` | Secondary text mạnh, nav links trên kem, meta labels |"
    info: "| Ash | `#d6d3d1` | `--color-ash` | Helper text mờ, border nhẹ trên kem, trạng thái disabled, tag outlines |"
    info: "| Fog | `#e5e7eb` | `--color-fog` | Hairline divider, border form field, table separator — màu trung tính cấu trúc |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surface lift trên kem, text nút trên fill tối, nền input field |"
    info: "| Moss | `#008236` | `--color-moss` | Logo green, icon strokes, secondary brand accent — màu xanh trung gian đồng hành cùng forest stage |"

  tokens___typography:

    gt_alpina_condensed___display_headlines___giọng_biên_tập__dùng_ở_tỉ_lệ_hero_96_136px_cho_những_khoảnh_khắc_serif_kịch_tính_neo_từng_section__các_condensed_cuts_và_line_height_chặt_chẽ_tạo_uy_lực_áp_phích__substitute___playfair_display__hoặc__bodoni_moda__condensed_ở_weight_tương_ứng____font_gt_alpina_condensed:
      - "**Substitute:** Playfair Display"
      - "**Weights:** 700"
      - "**Sizes:** 96px, 136px"
      - "**Line height:** 1.00-1.08"
      - "**Letter spacing:** 0 (tự nhiên)"
      - "**OpenType features:** `\"cv11\"`"
      - "**Vai trò:** Display headlines — giọng biên tập. Dùng ở tỉ lệ hero (96-136px) cho những khoảnh khắc serif kịch tính neo từng section. Các condensed cuts và line-height chặt chẽ tạo uy lực áp phích. Substitute: 'Playfair Display' hoặc 'Bodoni Moda' condensed ở weight tương ứng"

    gt_america_standard___body_text__subheading__heading_trọng_lượng_trung_bình__grotesk_đa_năng_cho_đoạn_văn_dài_và_section_sub_headline__siết_nhẹ__0_007em_tạo_cảm_giác_gọn_gàng__không_lỏng_lẻo__substitute___inter__hoặc__s_hne_____font_gt_america_standard:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 700"
      - "**Sizes:** 16px, 18px, 20px, 24px, 30px"
      - "**Line height:** 1.33-1.56"
      - "**Letter spacing:** -0.007em"
      - "**OpenType features:** `\"cv11\"`"
      - "**Vai trò:** Body text, subheading, heading trọng lượng trung bình. Grotesk đa năng cho đoạn văn dài và section sub-headline. Siết nhẹ -0.007em tạo cảm giác gọn gàng, không lỏng lẻo. Substitute: 'Inter' hoặc 'Söhne'"

    gt_america_extended___ui_chrome__button_labels__navigation_links__footer_column_headers__small_labels__tỉ_lệ_rộng_hơn_ở_kích_thước_nhỏ_cải_thiện_khả_năng_đọc_trong_ui_gọn__substitute___inter__ở_letter_spacing_0_02em____font_gt_america_extended:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 700"
      - "**Sizes:** 10px, 14px, 16px, 18px, 24px"
      - "**Line height:** 1.00-1.56"
      - "**Letter spacing:** 0 (tự nhiên cho UI)"
      - "**OpenType features:** `\"cv11\"`"
      - "**Vai trò:** UI chrome: button labels, navigation links, footer column headers, small labels. Tỉ lệ rộng hơn ở kích thước nhỏ cải thiện khả năng đọc trong UI gọn. Substitute: 'Inter' ở letter-spacing 0.02em"

    gt_america_condensed___section_eyebrows_và_secondary_display___các_label_small_caps_kiểu__scheduling_experience__với_tracking_rộng__0_05em_ở_18px__và_headline_condensed_chặt_hơn_ở_38px__0_025em__substitute__biến_thể_condensed_của__inter__hoặc__barlow_condensed_____font_gt_america_condensed:
      - "**Substitute:** Barlow Condensed"
      - "**Weights:** 400"
      - "**Sizes:** 18px, 38px"
      - "**Line height:** 1.38-1.56"
      - "**Letter spacing:** +0.05em ở 18px (uppercase tracking), -0.025em ở 38px"
      - "**OpenType features:** `\"cv11\"`"
      - "**Vai trò:** Section eyebrows và secondary display — các label small-caps kiểu 'SCHEDULING EXPERIENCE' với tracking rộng (+0.05em ở 18px), và headline condensed chặt hơn ở 38px (-0.025em). Substitute: biến thể condensed của 'Inter' hoặc 'Barlow Condensed'"

    intervariable___fallback_utility_text___xuất_hiện_trong_footer_fine_print_và_secondary_system_text__site_ưu_tiên_gt_america__inter_lấp_đầy_các_khoảng_trống_hệ_thống_chung____font_intervariable:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"cv11\"`"
      - "**Vai trò:** Fallback/utility text — xuất hiện trong footer fine print và secondary system text. Site ưu tiên GT-America; Inter lấp đầy các khoảng trống hệ thống chung"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.007px | `--text-body` |"
      info: "| subheading | 20px | 1.5 | -0.14px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.17px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.38 | -0.21px | `--text-heading` |"
      info: "| heading-lg | 38px | 1.38 | -0.95px | `--text-heading-lg` |"
      info: "| display | 96px | 1.08 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "thoải mái"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 104 | 104px | `--spacing-104` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 8px |"
      info: "| pills | 9999px |"
      info: "| buttons | 8px |"
      info: "| productFrames | 24px |"

    layout:

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

  components:

    lime_primary_button:
      vai_trò: "Main call-to-action xuyên suốt hero và feature sections"

      fill: "#b9ff78 (Lime Sprout). Text: #1c1917 (Midnight Ink), GT America Extended 400, 16px. Padding: 12px 24px. Border-radius: 8px. Không shadow. Box-shadow tùy chọn: 0 0 0 4px rgba(185,255,120,0.25) để tạo hiệu ứng halo. Hover: scale nhẹ hoặc thay đổi độ sáng, không đổi màu."

    outline_ghost_button:
      vai_trò: "Secondary action bên cạnh primary CTAs"

      fill: "transparent. Border: 1.5px solid #1c1917. Text: #1c1917, GT America Extended 400, 16px. Padding: 12px 24px. Border-radius: 8px. Hover: fill #1c1917, text #fcf7ed."

    top_nav_pill_tab:
      vai_trò: "Product switcher ở nav trung tâm phía trên (Meetings / Appointments)"

      pill_radius_9999px__active_tab: "fill #b9ff78, text #1c1917, padding 4px 12px. Inactive tab: text #000000, không fill. Inactive nằm trên dark bar (#0d542b) nên text màu trắng/sáng. Font: GT America Extended 400, 14px."

    sign_up_nav_button:
      vai_trò: "Nav action ngoài cùng bên phải"

      fill: "transparent. Border: 1.5px solid white (trên nav bar tối). Text: white, GT America Extended 400, 16px. Padding: 8px 20px. Border-radius: 8px. Trên các section sáng: border và text chuyển thành #1c1917."

    section_eyebrow_label:
      vai_trò: "Category marker small-caps phía trên section headlines"

      text: "GT America Condensed 400, 18px, uppercase, letter-spacing +0.05em, màu #1c1917 hoặc #44403b. Theo sau bởi một gạch chân lượn sóng/squiggly màu san hô (#f54320) — stroke vẽ tay 2-3px bên dưới text, rộng khoảng 60% chiều rộng text."

    editorial_display_headline:
      vai_trò: "Section-level dramatic headline trên bề mặt kem"

      info: "GT Alpina Condensed 700, 96px, line-height 1.08, màu #000000. Căn giữa hoặc căn trái. Không có yếu tố trang trí xung quanh — bản thân typeface ĐÃ LÀ trang trí. Ở 136px trong ngữ cảnh hero."

    hero_subhead_lime:
      vai_trò: "Secondary headline bên trong dark forest hero"

      info: "GT Alpina Condensed 700 ở 96px hoặc GT America Standard 700 ở 48-56px, màu #b9ff78 (Lime Sprout). Nằm dưới main display headline khi hero xếp chồng hai tầng headline. Màu xanh chanh trên nền xanh đậm là combo dễ nhận biết nhất của thương hiệu."

    product_screenshot_frame:
      vai_trò: "Container cho ảnh chụp app/sản phẩm trong feature sections"

      border: "2px solid #f54320 (Ember Coral). Border-radius: 24px. Background: UI sản phẩm bên trong. Drop shadow tùy chọn: 0 24px 48px rgba(245,67,32,0.15) — shadow pha màu san hô ấm, hợp thương hiệu hơn là trung tính. Padding: 0 (ảnh lấp đầy khung hình edge-to-edge bên trong border)."

    feature_section_card:
      vai_trò: "Content card trên bề mặt kem"

      background: "#ffffff. Border: 1px solid #e5e7eb (Fog). Border-radius: 8px. Padding: 24px. Không shadow mặc định; tùy chọn 0 4px 12px rgba(0,0,0,0.04) cho hiệu ứng hover lift. Typography: GT America Standard 400 cho body, 700 cho card titles."

    pricing_tier_card:
      vai_trò: "Plan option trong bảng so sánh giá"

      background: "#ffffff. Border: 1px solid #e5e7eb. Border-radius: 8px. Padding: 32px. Highlighted/recommended tier: border 2px solid #1c1917 kèm badge nhỏ 'Most popular' (fill #b9ff78, text #1c1917, GT America Extended 400 12px uppercase, 9999px radius, padding 4px 12px)."

    footer_column:
      vai_trò: "Multi-column link lists trong site footer"

      background: "tiếp nối cream #fcf7ed. Column header: GT America Extended 700, 14px, #1c1917, uppercase, letter-spacing 0.02em, margin-bottom 16px. Links: GT America Standard 400, 16px, #44403b (Stone), line-height 1.56. Links không có underline; hover đổi thành #000000."

    hero_background_spiral:
      vai_trò: "Decorative dark-hero background pattern"

      info: "Radial gradient từ #0d542b (trung tâm, tối hơn) đến #008236 (rìa, sáng hơn) phủ lên một pattern vòng tròn/cung tròn đồng tâm nhẹ trong rgba(13,84,43,0.3) đến #008236. Tạo cảm giác chiều sâu và tập trung về trung tâm. Không cần animation."

    hand_drawn_doodle_accent:
      vai_trò: "Decorative illustrations rải rác ở lề và footer"

      info: "Line art một màu trong #f54320 (Ember Coral), stroke weight 2-3px, không fill. Gợi hình mũi tên, nguệch ngoạc, hình lịch, xoắn ốc. Đặt ở ranh giới section và footer để làm mềm layout và thêm nét vui tươi biên tập."

  do_s_and_don_ts:

    do:
      - "Ghép hai type family có chủ đích: GT Alpina Condensed cho display, GT America family cho mọi thứ khác. Không bao giờ để chúng cạnh tranh ở cùng tầng kích thước."
      - "Chỉ dùng Lime Sprout (#b9ff78) làm interactive fill color duy nhất. Dành #f54320 (Ember Coral) cho decorative stroke — gạch chân, doodle, viền khung — không bao giờ dùng làm button fill."
      - "Duy trì nhịp điệu hai vùng: sân khấu xanh đậm cho hero/spotlight, Cream Paper (#fcf7ed) cho mọi content sections. Không bao giờ pha trộn cả hai trong một màn hình."
      - "Đặt section eyebrows ở 18px với +0.05em tracking và gạch chân san hô lượn sóng bên dưới — micro-pattern này báo hiệu giọng biên tập."
      - "Dùng radius 8px cho mọi functional components (buttons, cards, inputs) và radius 24px chỉ cho product imagery frames. Pills dùng 9999px."
      - "Giữ page ở max-width 1200px với section gaps 64px và card padding 24px. Base unit 8px nên chi phối mọi internal spacing (8, 16, 24, 32, 40, 48, 64)."
      - "Áp dụng font-feature-settings: 'cv11' toàn cục cho GT America và GT Alpina — nó thay đổi character variants định hình kết cấu typographic của thương hiệu."

    don_t:
      - "Không dùng #f54320 (Ember Coral) làm button background hoặc large surface fill — nó chỉ dành cho stroke/trang trí. Một CTA đầy màu san hô sẽ phá vỡ hợp đồng lime-equals-action."
      - "Không áp dụng heavy drop shadows. Bề mặt nên cảm thấy mờ và phẳng. Shadow duy nhất được phép là warm coral-tinted shadow trên product frames (rgba(245,67,32,0.15))."
      - "Không giới thiệu vùng màu mới. Hệ thống là forest green + cream paper + lime accent + coral decoration. Không xám, không xanh dương, không tím."
      - "Không đặt body text trong GT Alpina — condensed serif chỉ dành cho display. Đoạn văn dài trong Alpina sẽ không đọc được."
      - "Không căn giữa body paragraphs. Headlines có thể căn giữa, nhưng body text nên căn trái với max measure khoảng ~65-75 ký tự."
      - "Không dùng pure black (#000000) trên nền kem cho body text — nó tạo mệt mỏi do tương phản quá mức. Dùng Stone (#44403b) cho body, dành True Black cho headlines."
      - "Không bỏ qua gạch chân san hô lượn sóng bên dưới section eyebrows. Nếu thiếu nó, eyebrow label mất đi chữ ký biên tập và đọc như generic uppercase text."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Forest Stage | `#0d542b` | Nền hero section — vùng mở đầu tối kịch tính |"
    info: "| 1 | Cream Paper | `#fcf7ed` | Bề mặt nội dung chính cho tính năng, giá, footer — canvas mặc định |"
    info: "| 2 | Pure White Card | `#ffffff` | Bề mặt card nâng cao trên kem — lift nhẹ cho pricing, feature cards |"
    info: "| 3 | Coral Whisper | `#ffe3e3` | Lớp highlight ấm mềm phía sau các khoảnh khắc biên tập, gradient highlight trong hero |"

  elevation:

    - "**Product Screenshot Frame:** `0 24px 48px rgba(245, 67, 32, 0.15)`"
    - "**Feature Card (trạng thái hover):** `0 4px 12px rgba(0, 0, 0, 0.04)`"
    - "**Primary CTA (halo tùy chọn):** `0 0 0 4px rgba(185, 255, 120, 0.25)`"

  imagery:

    info: "Imagery tối giản và tập trung vào sản phẩm. Nội dung ảnh duy nhất là product screenshots của UI lên lịch SavvyCal, được trình bày bên trong khung viền san hô 2px với warm coral-tinted shadow. Không lifestyle photography, không stock imagery, không ảnh người. Decorative visuals là hand-drawn line doodles màu đỏ san hô — nguệch ngoạc, mũi tên, dấu lịch, xoắn ốc — xuất hiện ở ranh giới section và trong footer để thêm nét vui tươi biên tập. Hero background là radial gradient xanh với pattern cung tròn đồng tâm nhẹ (không người, không sản phẩm). Ngôn ngữ thị giác nói: đây là một công cụ, và bản thân công cụ là nội dung thị giác. Iconography là line art một weight trong #1c1917 trên bề mặt sáng, một weight trong white hoặc #b9ff78 trên hero tối."

  layout:

    info: "Trang tuân theo sự xen kẽ hai vùng nghiêm ngặt. Hero mở đầu như một dải xanh đậm full-bleed (Forest Stage) với headline + subhead + một CTA căn giữa. Bên dưới fold, layout chuyển sang Cream Paper với nội dung căn giữa max-width 1200px, section gaps 64px. Feature sections theo một pattern nhất quán: section eyebrow căn giữa (small-caps + gạch chân lượn sóng) → editorial headline lớn (96px serif) → body paragraph 2-3 câu → product screenshot trong khung san hô. Các section không xen kẽ vị trí ảnh trái/phải — mọi thứ căn giữa để tạo cảm giác tạp chí biên tập. Footer là lưới link 4 cột trên cùng bề mặt kem, với hand-drawn coral doodles tràn vào lề dưới. Navigation là một horizontal bar duy nhất ở phía trên: logo trái, product switcher (Meetings/Appointments) trung tâm dạng pills, Login + Sign Up phải. Hero là khoảnh khắc full-bleed duy nhất; mọi thứ khác ở trong container 1200px."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (headlines) / #44403b (body trên kem)"
    - "background: #fcf7ed (content) / #0d542b (hero)"
    - "border: #e5e7eb (hairline) / #f54320 (decorative accent)"
    - "accent: #b9ff78 (lime, interactive highlights)"
    - "primary action: không có màu CTA riêng biệt"

    example_component_prompts:

    - "Tạo một hero section: background #0d542b với radial gradient về phía #008236 ở rìa. Headline ở 96px GT Alpina Condensed 700, màu #b9ff78, căn giữa. Subtext ở 18px GT America Standard 400, màu #fcf7ed, max-width 600px căn giữa. Action button đầy màu xanh chanh (fill #b9ff78, text #1c1917, radius 8px, padding 12px 24px, GT America Extended 400 16px)."

    - "Tạo một feature section: background #fcf7ed. Eyebrow label ở 18px GT America Condensed 400, uppercase, letter-spacing +0.05em, màu #1c1917, với gạch chân lượn sóng 2px màu san hô (#f54320) bên dưới. Headline ở 96px GT Alpina Condensed 700, màu #000000, căn giữa. Body ở 20px GT America Standard 400, màu #44403b, max-width 640px căn giữa. Product screenshot bên dưới trong khung 2px solid #f54320 với radius 24px."

    - "Tạo một pricing card: background #ffffff, border 1px solid #e5e7eb, radius 8px, padding 32px. Tên plan ở 24px GT America Standard 700, màu #1c1917. Giá ở 38px GT America Condensed 400, màu #000000, letter-spacing -0.025em. Danh sách tính năng ở 16px GT America Standard 400, màu #44403b, line-height 16px giữa các mục. Action button: outline style, border 1.5px solid #1c1917, radius 8px, padding 12px 24px."

    - "Tạo một footer column: column header ở 14px GT America Extended 700, màu #1c1917, uppercase, letter-spacing 0.02em, margin-bottom 16px. Links ở 16px GT America Standard 400, màu #44403b, line-height 1.56, không underline. Background tiếp nối từ cream #fcf7ed."

    - "Tạo một product screenshot frame: border 2px solid #f54320, border-radius 24px, chứa product UI screenshot edge-to-edge. Box-shadow: 0 24px 48px rgba(245, 67, 32, 0.15) để tạo warm coral lift."

  typography_personality:

    info: "Động thái typographic định nghĩa là sự tương phản giữa GT Alpina Condensed (một serif biên tập tinh tế) và GT America family (một hệ thống grotesk sạch sẽ). Các serif headlines mang lại cho sản phẩm sự tự tin kiểu trang bìa tạp chí mà hầu hết các site SaaS thiếu. Kích thước display đẩy lên 96-136px với line-height gần 1.0, tạo ra sự xếp chồng dọc như áp phích. Grotesk xử lý mọi thứ chức năng ở 14-24px với tracking -0.007em chặt chẽ. Font feature 'cv11' được bật toàn cục — nó kích hoạt các dạng ký tự thay thế giúp GT America có cảm giác tinh tế hơn, ít generic hơn so với Inter hoặc Helvetica."

  color_zone_rules:

    info: "Site vận hành trên hai color zone không được phép trộn lẫn: ZONE A (Forest Stage) dùng background #0d542b với text #b9ff78 và #fcf7ed. ZONE B (Cream Paper) dùng background #fcf7ed với text #000000, #44403b, và #1c1917, cộng thêm #b9ff78 cho interactive elements. #f54320 (Ember Coral) đi qua cả hai zone nhưng luôn chỉ là stroke/trang trí — nó là sợi chỉ kết nối hero tối với content sáng thông qua nguệch ngoạc, gạch chân, và viền khung. Không bao giờ dùng #f54320 làm fill, không bao giờ dùng #b9ff78 trên kem làm bề mặt lớn (nó nên là một chấm màu cỡ button)."

  similar_brands:

    - "**Linear** — Cùng cách tiếp cận dual-mode color zone (hero tối, content sáng) với typography grotesk chặt chẽ, dù Linear dùng Inter và accent tím trong khi SavvyCal dùng GT America và xanh chanh"
    - "**Pitch** — Layout tạp chí biên tập với serif display headlines và sans body text sạch sẽ trên bề mặt giấy ấm; cùng cảm giác hand-drawn decorative accents"
    - "**Notion** — Density thoải mái, canvas trắng kem ấm, shadow tối thiểu, single accent color cho interactive elements"
    - "**ConvertKit** — Cá tính vui tươi-pha-biên tập với hand-drawn elements trang trí, bề mặt kem ấm, và một vivid accent color duy nhất (dù ConvertKit dùng tím)"
    - "**Arc Browser** — Sử dụng tự tin một vivid color duy nhất làm dấu câu chức năng trên nền trung tính ấm, với cá tính typographic pha trộn giữa tinh tế và giản dị"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-forest-stage: #0d542b;
          --color-lime-sprout: #b9ff78;
          --color-ember-coral: #f54320;
          --color-coral-whisper: #ffe3e3;
          --color-cream-paper: #fcf7ed;
          --color-true-black: #000000;
          --color-midnight-ink: #1c1917;
          --color-stone: #44403b;
          --color-slate: #292524;
          --color-ash: #d6d3d1;
          --color-fog: #e5e7eb;
          --color-pure-white: #ffffff;
          --color-moss: #008236;
        
          /* Typography — Font Families */
          --font-gt-alpina-condensed: 'GT Alpina Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-standard: 'GT America Standard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-extended: 'GT America Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-condensed: 'GT America Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.007px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.14px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.17px;
          --text-heading: 30px;
          --leading-heading: 1.38;
          --tracking-heading: -0.21px;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.38;
          --tracking-heading-lg: -0.95px;
          --text-display: 96px;
          --leading-display: 1.08;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-104: 104px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-pills: 9999px;
          --radius-buttons: 8px;
          --radius-productframes: 24px;
        
          /* Surfaces */
          --surface-forest-stage: #0d542b;
          --surface-cream-paper: #fcf7ed;
          --surface-pure-white-card: #ffffff;
          --surface-coral-whisper: #ffe3e3;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-forest-stage: #0d542b;
          --color-lime-sprout: #b9ff78;
          --color-ember-coral: #f54320;
          --color-coral-whisper: #ffe3e3;
          --color-cream-paper: #fcf7ed;
          --color-true-black: #000000;
          --color-midnight-ink: #1c1917;
          --color-stone: #44403b;
          --color-slate: #292524;
          --color-ash: #d6d3d1;
          --color-fog: #e5e7eb;
          --color-pure-white: #ffffff;
          --color-moss: #008236;
        
          /* Typography */
          --font-gt-alpina-condensed: 'GT Alpina Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-standard: 'GT America Standard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-extended: 'GT America Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-condensed: 'GT America Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.007px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.14px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.17px;
          --text-heading: 30px;
          --leading-heading: 1.38;
          --tracking-heading: -0.21px;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.38;
          --tracking-heading-lg: -0.95px;
          --text-display: 96px;
          --leading-display: 1.08;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-104: 104px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
        }