designmodo___style_reference:
  info: "> Rừng lúc bình minh — tán cây tối trên cao, ánh sáng lọt xuống dưới thấp, một tia xanh lục duy nhất đánh dấu lối đi phía trước."

  theme: "mixed"

  info: "Designmodo phân chia cá tính qua hai vùng riêng biệt: một hero xanh rừng đậm (#0e231c) tạo cảm giác uy quyền, sau đó mở ra một content canvas trắng sáng — tương đương với bước qua một ô cửa tối để vào một studio ngập nắng. Các section tối dùng chữ trắng và màu sage nhẹ #defaca, trong khi section sáng dùng màu gần đen #313942, tạo nên hệ thống màu hai phòng nơi ngữ cảnh luôn báo hiệu chế độ. Một màu xanh lục điện duy nhất (#27ae60) là màu tương tác duy nhất ở cả hai thế giới — CTA buttons, badges, và active states đều dùng chung một sắc thái, khiến mọi phần tử có thể click đều cảm thấy thuộc cùng một gia đình bất kể nó nằm ở phòng nào. InterVariable với letter-spacing âm (xuống tới -0.028em ở kích thước display) đảm nhiệm phần nặng về typography, với các feature flag nhận diện ligature 'cv03', 'cv04', 'cv06', 'cv09', 'ss03' khiến Inter tiêu chuẩn trở nên độc quyền. Border-radius 32px cho card và pill buttons 999px tạo nên hình học mềm duy nhất trong một hệ thống vốn vuông vức."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Forest Floor | `#0e231c` | `--color-forest-floor` | Nền hero section, nền dark nav — bề mặt sâu nhất trong hệ thống; chữ trắng đọc ở tỷ lệ 16.5:1 trên nền này |"
    info: "| Canopy Shadow | `#1a3029` | `--color-canopy-shadow` | Bề mặt tối thứ cấp, dùng làm dark card nâng cao hoặc section band trong vùng dark-mode hero |"
    info: "| Pine Border | `#233630` | `--color-pine-border` | Divider tinh tế trong các section tối — gần như không phân biệt với nền, đọc giống đường kẻ chìm hơn là separator |"
    info: "| Slate Ink | `#313942` | `--color-slate-ink` | Body text mặc định, icons, borders trên section sáng — màu gần đen đảm nhận hầu hết công việc trong vùng sáng |"
    info: "| Ash | `#656a75` | `--color-ash` | Body text thứ cấp, captions, labels nhẹ trên nền sáng |"
    info: "| Mist | `#c3cecb` | `--color-mist` | Text cấp ba, placeholder text, borders trang trí |"
    info: "| Fog | `#879b93` | `--color-fog` | Body copy nhẹ và metadata trong section tối |"
    info: "| Parchment | `#f4f7f2` | `--color-parchment` | Nền trang, section xen kẽ — màu trắng hơi ấm nhẹ giúp canvas không bị vô cảm |"
    info: "| Dew | `#e4ebe2` | `--color-dew` | Card borders, image frames, divider mềm trên bề mặt sáng |"
    info: "| Sprout | `#27ae60` | `--color-sprout` | Primary CTA buttons, active badges, success states — một màu xanh duy nhất xuất hiện ở cả vùng tối và sáng, khiến mọi phần tử tương tác đều nhận diện được ngay lập tức |"
    info: "| Sage Whisper | `#defaca` | `--color-sage-whisper` | Accent text trong dark hero section — dùng để highlight từng từ trong headline (ví dụ 'Level up' với tông tương phản), mang lại hơi ấm cho dark hero mà không cần chuyển sang cam hoặc vàng |"
    info: "| Mint Card | `#edf9f2` | `--color-mint-card` | Nền light product card (Postcards feature card), màu gần trắng pha xanh cùng họ với brand primary |"
    info: "| Iris | `#5c51e0` | `--color-iris` | Highlight từ ngữ trong heading section sáng ('beautiful' trong 'Simple products for beautiful designs') — chỉ xuất hiện ở cấp từ, không bao giờ làm nền |"
    info: "| Sky Link | `#186bff` | `--color-sky-link` | Inline links và phần tử tương tác thứ cấp trong ngữ cảnh danh sách |"
    info: "| Tangerine CTA | `#ff5722` | `--color-tangerine-cta` | Article category badges — thẻ cam rực trên blog/article cards để phân loại trực quan |"
    info: "| Amber Nav | `#f49a40` | `--color-amber-nav` | Sign Up button trong navigation bar — button duy nhất có tông ấm; độ tương phản với dark nav khiến nó nổi bật mà không cần dùng primary green |"
    info: "| Azure Action | `#2f80ed` | `--color-azure-action` | Icon fill và secondary action states — xuất hiện trong product UI screenshots và icon illustrations |"
    info: "| Lavender Tint | `#f1ebff` | `--color-lavender-tint` | Nền tím nhạt trên một số feature sections chọn lọc |"

  tokens___typography:

    intervariable___kiểu_chữ_duy_nhất_cho_toàn_bộ_hệ_thống__kích_thước_display_48_57px_dùng_weight_700_với_tracking_âm_chặt__0_028em_đến__0_022em__tạo_headline_dày_đặc__tự_tin__body_text_14_16px_dùng_weight_400_với_leading_1_5_1_6__weight_600_xử_lý_subheadings_và_ui_labels__năm_opentype_features_cv03__cv04__cv06__cv09__ss03_phân_biệt_font_này_với_inter_tiêu_chuẩn___các_dạng_chữ_thay_thế_cho__a___g__và__l__khiến_text_có_cảm_giác_hình_học_hơn_một_chút_so_với_inter_mặc_định_____font_intervariable:
      - "**Thay thế:** Inter (Google Fonts) với feature-settings được áp dụng"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 11px, 14px, 15px, 16px, 18px, 19px, 20px, 21px, 24px, 28px, 32px, 40px, 41px, 48px, 56px, 57px"
      - "**Line height:** 1.1–1.7 cho heading; 1.5–1.65 cho body; 1.0 cho display numerics"
      - "**Letter spacing:** -2.8px ở tỷ lệ 100px tương đương; cụ thể: -0.028em ở 57px (~-1.6px), -0.022em ở 48px (~-1.06px), -0.020em ở 40px (~-0.8px), -0.015em ở 28px (~-0.42px), -0.010em ở 21px (~-0.21px), normal ở 14-16px, +0.118em ở 11px (chỉ uppercase labels)"
      - "**OpenType features:** `\"cv03\" on, \"cv04\" on, \"cv06\" on, \"cv09\" on, \"ss03\" on`"
      - "**Vai trò:** Kiểu chữ duy nhất cho toàn bộ hệ thống. Kích thước display (48–57px) dùng weight 700 với tracking âm chặt (-0.028em đến -0.022em), tạo headline dày đặc, tự tin. Body text (14–16px) dùng weight 400 với leading 1.5–1.6. Weight 600 xử lý subheadings và UI labels. Năm OpenType features (cv03, cv04, cv06, cv09, ss03) phân biệt font này với Inter tiêu chuẩn — các dạng chữ thay thế cho 'a', 'g', và 'l' khiến text có cảm giác hình học hơn một chút so với Inter mặc định."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 11px | 2.29 | 1.3px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.6 | — | `--text-body` |"
      info: "| subheading | 18px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.35 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.3 | -0.48px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.1 | -1.06px | `--text-heading-lg` |"
      info: "| display | 57px | 1 | -1.6px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 136 | 136px | `--spacing-136` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 5px |"
      info: "| cards | 32px |"
      info: "| chips | 17px |"
      info: "| badges | 6px |"
      info: "| images | 12px |"
      info: "| buttons | 999px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| xl | `rgba(17, 50, 38, 0.14) 14px 17px 40px 0px` | `--shadow-xl` |"
      info: "| subtle | `rgb(236, 239, 243) 1px 0px 0px 0px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgb(236, 239, 243) 0px -1px 0px 0px inset` | `--shadow-subtle-2` |"
      info: "| xl-2 | `rgba(17, 50, 38, 0.14) 14px 48px 40px 0px` | `--shadow-xl-2` |"
      info: "| lg | `rgba(10, 33, 65, 0.05) 0px 10px 20px 0px, rgba(0, 0, 0, 0...` | `--shadow-lg` |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Main call-to-action, phần tử tương tác nổi bật nhất"

      info: "Nền #27ae60, chữ trắng, radius 999px (full pill), padding trên/dưới 13px, padding trái/phải 28px. Weight 600, 16px. Cùng hình dạng và màu sắc xuất hiện trên cả nền tối và sáng — màu xanh đọc rõ trên cả hai bề mặt. Arrow glyph được thêm inline (→)."

    ghost_green_button:
      vai_trò: "Secondary CTA bên cạnh primary button, thường là 'See more' hoặc 'Learn more'"

      info: "Nền trong suốt, text và border #27ae60, radius 999px, padding trên/dưới 0px (chiều cao do line-height quyết định), padding trái/phải 30px. Xuất hiện cặp với filled green button để tạo phân cấp primary/secondary mà không cần thêm màu thứ hai."

    outlined_dark_button:
      vai_trò: "Tertiary action trên section sáng, ví dụ 'Browse articles'"

      info: "Nền trắng, text và border #313942, radius 17px (không phải pill — khác biệt với CTA), padding trên/dưới 7px, padding trái/phải 19px. Radius non-pill trên variant này báo hiệu một bậc tương tác khác so với CTA bo tròn."

    ghost_white_button:
      vai_trò: "Navigation-level hoặc overlay actions trên section tối"

      info: "Nền trong suốt, text và border trắng, radius 999px (pill), padding dọc 0px, padding ngang 40px. Dùng trong ngữ cảnh dark-hero nơi không cần green primary."

    navigation_sign_up_button:
      vai_trò: "Primary conversion entry point trong sticky nav bar"

      info: "Nền #f49a40 (amber-orange), chữ trắng, radius 999px, padding tương ứng với ghost white button. Màu amber chỉ dùng riêng cho button này trên toàn site — không thuộc hệ thống CTA tiêu chuẩn, cố tình phân biệt account creation với feature CTAs."

    feature_product_card:
      vai_trò: "Large showcase card cho một sản phẩm cụ thể (Postcards, Slides, Startup)"

      info: "Nền #edf9f2 (Mint Card), border-radius 32px, không box-shadow, padding 50px tất cả các cạnh. Chứa product logo, headline 32px weight 700, body text 16px #313942, và ghost green button. Màu mint kết nối card với brand green mà không dùng #27ae60 toàn phần."

    stats_counter_card:
      vai_trò: "Metric callout block (97%, 7.2 hours, 500 hours)"

      info: "Nền trắng hoặc #f4f7f2, radius 20px, padding 32-40px. Display numeral 57px weight 700, tracking -1.6px, line-height 1.0. Descriptor text 14-16px weight 400 #313942. Ba card trong grid 3 cột, phân cách bằng border #e4ebe2 nhẹ."

    category_badge:
      vai_trò: "Article taxonomy tag trên blog cards"

      info: "Nền #ff5722 (cam), chữ trắng, radius 6px, padding dọc 4px, padding ngang 8px, font size 11px weight 500. Màu cam đọc rực rỡ trên cả nền dark article section và card thumbnail images."

    success_status_badge:
      vai_trò: "Status indicator, success label"

      info: "Nền #27ae60, chữ trắng, radius 6px, padding dọc 0px, padding ngang 6px. Cùng màu xanh với CTA button, giữ cho tín hiệu ngữ nghĩa và brand thống nhất."

    tab_navigation:
      vai_trò: "Product switcher (Postcards / Slides / Startup)"

      info: "Tab nền trong suốt với text 16px, active tab gạch chân bằng border-bottom #27ae60 2px, inactive tabs màu #879b93 (Fog). Đặt trên dark hero, tabs cung cấp chức năng chuyển sản phẩm mà không cần tải lại trang. Active label màu trắng, inactive màu Fog."

    product_screenshot_frame:
      vai_trò: "App UI screenshot trong hero hoặc feature sections"

      info: "Border-radius 12–32px trên image container. Drop shadow: rgba(17, 50, 38, 0.14) 14px 17px 40px 0px — shadow pha xanh lục giữ đúng brand ngay cả khi thể hiện độ cao. Screenshots hiển thị ở full card width, không bao giờ cắt thành icon."

    logo_bar_social_proof_strip:
      vai_trò: "Trust logos row — Twilio, Toptal, Vodafone, Yelp, v.v."

      info: "Full-width horizontal strip trên nền tối #0e231c, logo SVG trắng với độ mờ giảm. Không border hay separator giữa các logo. Hoạt động như một social proof divider thuần túy giữa hero và stats section."

  do_s_and_don_ts:

    do:
      - "Dùng #27ae60 cho tất cả primary interactive elements — CTA buttons, active states, success badges — ở cả section tối và sáng. Đây là màu xanh duy nhất được phép dùng làm button fill."
      - "Áp dụng border-radius 999px cho tất cả CTA pill buttons; dành radius 17px cho outlined secondary actions và nav chips; dùng 32px cho large product cards."
      - "Đặt display headlines (48–57px) ở weight 700 với letter-spacing -0.022em đến -0.028em và InterVariable feature-settings '\"cv03\" on, \"cv04\" on, \"cv06\" on, \"cv09\" on, \"ss03\" on'."
      - "Dùng #f49a40 riêng cho navigation Sign Up button — không phần tử nào khác trong hệ thống dùng màu amber. Không dùng lại màu này cho section CTAs."
      - "Áp dụng green-tinted shadow (rgba(17, 50, 38, 0.14) 14px 17px 40px 0px) chỉ cho product screenshot images — không bao giờ dùng cho cards, modals, hoặc buttons."
      - "Xen kẽ hero và footer giữa nền tối #0e231c và nền sáng #f4f7f2/#ffffff để đóng khung nội dung trang bằng cùng một bảng màu, khép kín vòng lặp thị giác."
      - "Dùng #5c51e0 (Iris) và #defaca (Sage Whisper) chỉ làm inline word-level accents trong headlines — không bao giờ dùng làm button fills hoặc background swatches."

    don_t:
      - "Không trộn amber nav button (#f49a40) vào body CTAs hoặc feature sections — nó chỉ thuộc về top navigation, nơi nó báo hiệu duy nhất cho account creation."
      - "Không áp dụng green-tinted drop shadow cho cards hoặc panels — ranh giới card được xác định bằng độ tương phản background-color (mint vs white vs page gray)."
      - "Không dùng Inter mà không có OpenType feature-settings — 'cv03', 'cv04', 'cv06', 'cv09', 'ss03' là bắt buộc để khớp với các biến thể letterform đặc trưng của brand."
      - "Không dùng positive letter-spacing (tracking) trên bất kỳ text nào lớn hơn 12px — giá trị +0.118em chỉ dành cho uppercase micro-labels ở 11px."
      - "Không thêm font weights ngoài 400, 500, 600, 700 — thang bốn weight là đủ; thêm 300 hoặc 800 sẽ phá vỡ thanh điệu typography."
      - "Không đặt article category badges ở màu nào khác ngoài #ff5722 — badges tím, xanh lục hoặc xanh lam sẽ xung đột với hệ thống phân cấp accent-color nơi các sắc thái đó mang ý nghĩa ngữ nghĩa."
      - "Không dùng card shadows hoặc borders trên Feature Product Cards — nền #edf9f2 mint trên nền trang trắng hoặc xám là cơ chế containment duy nhất."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 1 | Hero Dark | `#0e231c` | Full-bleed hero, dark nav bar, footer — bề mặt sâu nhất |"
    info: "| 2 | Elevated Dark | `#1a3029` | Bề mặt tối thứ cấp trong dark-zone, inner cards trong hero |"
    info: "| 3 | Page Light | `#f4f7f2` | Nền trang mặc định trong section sáng |"
    info: "| 4 | Card White | `#ffffff` | Blog cards, stats cards, white cards rõ ràng trên nền trang sáng |"
    info: "| 5 | Mint Card | `#edf9f2` | Product feature cards — pha màu nhẹ để kết nối card với brand green |"

  elevation:

    info: "Elevation được dùng một cách tiết kiệm và chỉ trên product screenshot images — không bao giờ dùng trên cards, panels, hoặc UI chrome. Shadow rgba(17, 50, 38, 0.14) 14px 17px 40px 0px có pha xanh lục (RGB gốc 17, 50, 38 khớp với forest-green brand palette), vì vậy ngay cả tín hiệu độ sâu cũng giữ đúng brand. Cards chỉ dùng radius để xác định ranh giới — không shadow, không border — dựa vào độ tương phản background-color giữa mint card (#edf9f2) và trang trắng để định nghĩa containment."

  imagery:

    info: "Ba loại hình ảnh cùng tồn tại mà không xung đột thị giác. Product screenshots là loại hình ảnh chủ đạo — được chụp dưới dạng app UI thực tế ở tỷ lệ màn hình tiêu chuẩn, đặt trong khung bo tròn với brand-green shadow, không bao giờ bị cắt hoặc thu nhỏ thành icon. Chúng mang tính giải thích, không trang trí. Photography xuất hiện trong blog/article cards: lifestyle-editorial — laptop trên bàn, điện thoại trong tay, phone mockups từ trên cao — xử lý với màu sắc tự nhiên, high-key, không desaturated hoặc duotoned. Một tầng thứ ba là các brand logo nhỏ (partner/client strip) xuất hiện dưới dạng flat white SVGs. Icons trong product UI (drag-and-drop icons, integration logos) là outlined, stroke weight 1.5px, đơn sắc. Mật độ hình ảnh tổng thể ở mức vừa phải — screenshots neo các feature sections, photos chỉ xuất hiện trong article carousel."

  layout:

    info: "Max-width khoảng 1200px, căn giữa trên canvas trắng hoặc gần trắng (#f4f7f2). Hero là full-bleed tối (#0e231c), trải rộng toàn bộ viewport width và khoảng 90vh, với bố cục hai cột: cột trái chứa headline + tab switcher + cụm CTA, cột phải chứa product screenshot frame. Bên dưới hero, một logo strip full-bleed đóng vai trò ngắt thị giác trước khi vùng nội dung sáng bắt đầu. Vùng sáng dùng các section band trắng và #f4f7f2 xen kẽ mà không có đường kẻ chia — chỉ riêng sự chuyển đổi nền tạo nhịp điệu. Feature product cards xuất hiện dưới dạng large single cards (một card mỗi section) trong bố cục một cột căn giữa với internal padding 50px. Stats section là grid 3 cột bằng nhau. Integrations và 'built for you' sections quay lại bố cục 2 cột text-plus-visual. Article carousel là card grid 4 cột với điều hướng mũi tên trái/phải. Footer là band tối #0e231c quay lại palette hero, khép kín vòng lặp thị giác."

  agent_prompt_guide:

    quick_color_reference:
    - "Page background (light): #f4f7f2"
    - "Page background (dark sections): #0e231c"
    - "Primary text: #313942"
    - "Primary CTA: #27ae60 (xanh lục, pill shape, radius 999px)"
    - "Nav Sign Up button: #f49a40 (amber, pill)"
    - "Accent headline word: #5c51e0 (tím, inline only)"
    - "Border / divider: #e4ebe2"

    example_component_prompts:

    - "**Dark Hero Section**: Full-bleed nền #0e231c. Cột trái: headline 57px InterVariable weight 700 trắng, letter-spacing -1.6px, line-height 1.0. Từ 'Level up' màu #defaca. Subtext 16px weight 400 #879b93. Hàng tab (Postcards, Slides, Startup) 16px, active tab trắng với gạch chân #27ae60 2px, inactive màu #879b93. Green pill CTA: fill #27ae60, chữ trắng, radius 999px, padding 13px/28px. Ghost secondary: trong suốt, border+text #27ae60, radius 999px, padding ngang 30px. Cột phải: app screenshot trong container bo tròn 32px với shadow rgba(17,50,38,0.14) 14px 17px 40px 0px."

    - "**Mint Feature Card**: Nền #edf9f2, radius 32px, không shadow, padding 50px tất cả các cạnh. Product logo SVG góc trên trái. Headline 32px weight 700 #313942, letter-spacing -0.48px. Body text 16px weight 400 #313942 line-height 1.6. Ghost green button bên dưới body text: trong suốt, border+text #27ae60, radius 999px, padding ngang 30px."

    - "**Stats Counter Card**: Nền trắng, radius 20px, padding ~32px. Numeral 57px weight 700 #313942, letter-spacing -1.6px, line-height 1.0. Descriptor text 14px weight 400 #313942. Ba card trong grid 3 cột. Border nhẹ #e4ebe2 trên mỗi card."

    - "**Article Blog Card**: Card trắng, image radius 12px. Phía trên: ảnh full-width. Phía dưới: orange badge (#ff5722, radius 6px, chữ trắng 11px weight 500, padding 4px/8px). Hàng tác giả: avatar 24px + tên 14px #313942. Headline 18px weight 600 #313942. Link 'Read more →' 14px #313942 weight 400."

    - "**Navigation Bar**: Nền #0e231c, full-width. Trái: Designmodo wordmark + icon. Giữa: dropdown 'Apps' và 'Articles' 15px weight 500 trắng. Phải: 'Log In' ghost text #ffffff 15px, sau đó Sign Up pill button fill #f49a40 chữ trắng radius 999px padding 7px/19px."

  color_accent_system:

    info: "Hệ thống dùng cách tiếp cận accent 3 tầng có chủ đích để tránh mệt mỏi màu nhấn. Tầng 1 (Interactive): #27ae60 xanh lục — màu duy nhất trên buttons, active states, và success indicators. Tầng 2 (Editorial): #5c51e0 tím chỉ xuất hiện dưới dạng inline headline word accents trên nền sáng; #defaca sage chỉ xuất hiện dưới dạng inline word accents trên nền tối. Không tầng accent nào được dùng làm button hoặc background. Tầng 3 (Taxonomy): #ff5722 cam dành riêng cho article category badges. Amber #f49a40 bị khóa vào nav Sign Up button. Điều này ngăn bất kỳ màu không phải xanh lục nào cạnh tranh với tín hiệu brand chính."

  similar_brands:

    - "**Webflow** — Cùng mô hình mixed dark-hero / light-content page với hệ thống CTA một brand-color duy nhất xuyên suốt cả hai vùng"
    - "**Mailchimp** — Design-tool SaaS nhắm đến non-coders, với bảng màu earthy/organic neo bởi primary không phải xanh lam chiếm ưu thế"
    - "**Unbounce** — Pill-button CTAs cộng với product screenshot frames có góc bo tròn làm hero imagery chính"
    - "**Beefree** — Email template builder với cùng cách tiếp cận hero dark UI xanh rừng và green primary CTA"
    - "**Framer** — Single variable font (họ Inter) với tracking âm chặt ở kích thước display, chuyển từ dark hero sang light body"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-forest-floor: #0e231c;
          --color-canopy-shadow: #1a3029;
          --color-pine-border: #233630;
          --color-slate-ink: #313942;
          --color-ash: #656a75;
          --color-mist: #c3cecb;
          --color-fog: #879b93;
          --color-parchment: #f4f7f2;
          --color-dew: #e4ebe2;
          --color-sprout: #27ae60;
          --color-sage-whisper: #defaca;
          --color-mint-card: #edf9f2;
          --color-iris: #5c51e0;
          --color-sky-link: #186bff;
          --color-tangerine-cta: #ff5722;
          --color-amber-nav: #f49a40;
          --color-azure-action: #2f80ed;
          --color-lavender-tint: #f1ebff;
        
          /* Typography — Font Families */
          --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 2.29;
          --tracking-caption: 1.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.48px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.06px;
          --text-display: 57px;
          --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-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-136: 136px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 50px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 5px;
          --radius-xl: 12px;
          --radius-2xl: 17px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 100px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-tags: 5px;
          --radius-cards: 32px;
          --radius-chips: 17px;
          --radius-badges: 6px;
          --radius-images: 12px;
          --radius-buttons: 999px;
        
          /* Shadows */
          --shadow-xl: rgba(17, 50, 38, 0.14) 14px 17px 40px 0px;
          --shadow-subtle: rgb(236, 239, 243) 1px 0px 0px 0px inset;
          --shadow-subtle-2: rgb(236, 239, 243) 0px -1px 0px 0px inset;
          --shadow-xl-2: rgba(17, 50, 38, 0.14) 14px 48px 40px 0px;
          --shadow-lg: rgba(10, 33, 65, 0.05) 0px 10px 20px 0px, rgba(0, 0, 0, 0.13) 0px 0px 2px 0px;
        
          /* Surfaces */
          --surface-hero-dark: #0e231c;
          --surface-elevated-dark: #1a3029;
          --surface-page-light: #f4f7f2;
          --surface-card-white: #ffffff;
          --surface-mint-card: #edf9f2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-forest-floor: #0e231c;
          --color-canopy-shadow: #1a3029;
          --color-pine-border: #233630;
          --color-slate-ink: #313942;
          --color-ash: #656a75;
          --color-mist: #c3cecb;
          --color-fog: #879b93;
          --color-parchment: #f4f7f2;
          --color-dew: #e4ebe2;
          --color-sprout: #27ae60;
          --color-sage-whisper: #defaca;
          --color-mint-card: #edf9f2;
          --color-iris: #5c51e0;
          --color-sky-link: #186bff;
          --color-tangerine-cta: #ff5722;
          --color-amber-nav: #f49a40;
          --color-azure-action: #2f80ed;
          --color-lavender-tint: #f1ebff;
        
          /* Typography */
          --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 2.29;
          --tracking-caption: 1.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.48px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.06px;
          --text-display: 57px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-136: 136px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 5px;
          --radius-xl: 12px;
          --radius-2xl: 17px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 100px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-xl: rgba(17, 50, 38, 0.14) 14px 17px 40px 0px;
          --shadow-subtle: rgb(236, 239, 243) 1px 0px 0px 0px inset;
          --shadow-subtle-2: rgb(236, 239, 243) 0px -1px 0px 0px inset;
          --shadow-xl-2: rgba(17, 50, 38, 0.14) 14px 48px 40px 0px;
          --shadow-lg: rgba(10, 33, 65, 0.05) 0px 10px 20px 0px, rgba(0, 0, 0, 0.13) 0px 0px 2px 0px;
        }