clickup____style_reference:
  info: "> Buồng lái năng suất ánh tím trên nền trắng"

  theme: "light"

  info: "ClickUp trình bày một trung tâm chỉ huy năng suất trên nền canvas trắng tinh — một thương hiệu SaaS dùng một màu tím rực rỡ duy nhất làm giọng nói chính, đặt trên giao diện gần như không màu. Nhịp điệu thị giác dày đặc và giàu thông tin: headline display cỡ lớn, tự tin (Plus Jakarta Sans ở 60-76px, weight 800) chiếm khoảng trắng rộng rãi, kết hợp với body text nhỏ gọn và UI sản phẩm được xếp chặt chẽ, đóng vai trò chính trong hero. Các bề mặt phẳng với bóng đổ pha xanh lam nhẹ thay vì độ nâng cao rõ rệt, và màu tím thương hiệu (#7b68ee) xuất hiện tiết kiệm trên các hành động chính, logo, và một vài điểm nhấn. Tổng thể mang cảm giác thực dụng nhưng cao cấp — một buổi trình diễn sản phẩm nơi phần mềm CHÍNH LÀ ngôi sao, được đóng khung bởi hệ thống phân cấp kiểu chữ sạch sẽ và bảng màu hạn chế, điểm xuyết bằng màu tím đặc trưng duy nhất đó."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Brand Violet | `#7b68ee` | `--color-brand-violet` | Màu thương hiệu chính cho logo, CTA chính, trạng thái active, và điểm nhấn thương hiệu — một màu tím duy nhất này mang 90% bản sắc sắc độ |"
    info: "| Signal Blue | `#0091ff` | `--color-signal-blue` | Điểm nhấn phụ cho badge, icon, và các điểm nổi bật của tính năng Agents/Brain — một điểm đối lập mát mẻ với tím, thường xuất hiện trong các dải conic-gradient |"
    info: "| Ultra Violet | `#6647f0` | `--color-ultra-violet` | Biến thể tím đậm hơn cho trạng thái hover và bề mặt selected/active — tạo chiều sâu tối hơn cho thương hiệu khi cần |"
    info: "| Muted Violet | `#514b81` | `--color-muted-violet` | Tím bão hòa thấp cho secondary text, border nhẹ, và nền có tông màu khi cần sự hiện diện của thương hiệu mà không cần bão hòa hoàn toàn |"
    info: "| Midnight Ink | `#090c1d` | `--color-midnight-ink` | Màu chính cho heading và body text — gần như đen với tông xanh lam mát mẻ, hài hòa với bảng màu tím |"
    info: "| Charcoal | `#292d34` | `--color-charcoal` | Secondary text, icon stroke, và màu border tần suất cao — màu trung tính chủ lực định hình hầu hết UI chrome |"
    info: "| Carbon | `#202023` | `--color-carbon` | Màu nền action trung tính, tương phản cao cho primary button trên bề mặt sáng |"
    info: "| Graphite | `#1a202c` | `--color-graphite` | Biến thể màu heading nhẹ cho các heading ít nổi bật hơn và tương phản tối-trên-tối |"
    info: "| Slate | `#646464` | `--color-slate` | Body text nhẹ, placeholder copy, và secondary navigation text |"
    info: "| Steel | `#7c828d` | `--color-steel` | Tertiary text và label ở trạng thái disabled — xám mát, lùi lại mà không biến mất |"
    info: "| Fog | `#b3b3b3` | `--color-fog` | Border nhẹ, icon không hoạt động, và divider trên bề mặt sáng |"
    info: "| Ash | `#838383` | `--color-ash` | Xám trung bình cho badge, secondary icon, và chú thích văn bản tinh tế |"
    info: "| Mist | `#d9d9d9` | `--color-mist` | Hairline divider và table row separator |"
    info: "| Cloud | `#e8e8e8` | `--color-cloud` | Border card nhẹ, ghost-button border, và lớp phủ bề mặt sáng |"
    info: "| Paper | `#f8f9fa` | `--color-paper` | Nền bề mặt thay thế cho các phần có sọc và card lõm |"
    info: "| Frost | `#edf6fd` | `--color-frost` | Màu nền action trung tính sáng cho button trên bề mặt tối |"
    info: "| Linen | `#e9ebf0` | `--color-linen` | Màu nền phần cho các dải xen kẽ — xám ấm gần như vô hình tạo sự phân cách tinh tế |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, bề mặt card, và văn bản trên filled button |"
    info: "| True Black | `#000000` | `--color-true-black` | Dành riêng cho icon fill tương phản cao, SVG stroke, và các yếu tố nhấn mạnh hiếm |"
    info: "| Abyss | `#090909` | `--color-abyss` | Nền card gần như đen cho dark surface card trên trang sáng |"
    info: "| Violet Glow | `#b38cff` | `--color-violet-glow` | Tím nhạt cho stroke trang trí, code highlighting, và lớp phủ điểm nhấn |"

  tokens___typography:

    plus_jakarta_sans___kiểu_chữ_chính_cho_tất_cả_văn_bản_ui___từ_display_headline_weight_800_ở_60_76px_xuống_đến_navigation_và_body__weight_650_giữa_600_và_700_là_một_trọng_số_trung_gian_tùy_chỉnh__tạo_cho_button_và_subheading_mật_độ_dày_tự_tin_đặc_biệt__tracking_âm_chặt_chẽ_thay_đổi_theo_kích_thước___0_05em_ở_76px_nén_headline_để_tạo_tác_động_mạnh_____font_plus_jakarta_sans:
      - "**Thay thế:** DM Sans hoặc Manrope"
      - "**Weights:** 400, 500, 650, 700, 800"
      - "**Kích thước:** 14, 16, 26, 34, 40, 42, 48, 52, 60, 76"
      - "**Line height:** 1.05, 1.10, 1.12, 1.14, 1.18, 1.20, 1.25, 1.43, 1.50"
      - "**Letter spacing:** -3.8px ở 76px, -2.0px ở 48px, -0.18px ở 16px, -0.14px ở 14px"
      - "**OpenType features:** `\"calt\" 0`"
      - "**Vai trò:** Kiểu chữ chính cho tất cả văn bản UI — từ display headline (weight 800 ở 60-76px) xuống đến navigation và body. Weight 650 (giữa 600 và 700) là một trọng số trung gian tùy chỉnh, tạo cho button và subheading mật độ dày tự tin đặc biệt. Tracking âm chặt chẽ thay đổi theo kích thước: -0.05em ở 76px nén headline để tạo tác động mạnh."

    inter___kiểu_chữ_phụ_cho_văn_bản_hỗ_trợ__chữ_nhỏ__badge__và_label_ui_dày_đặc_ở_12_19px__inter_xuất_hiện_ở_những_nơi_mật_độ_thông_tin_quan_trọng_hơn_biểu_đạt_thương_hiệu___tooltip__chú_thích_nhỏ__và_trường_biểu_mẫu_____font_inter:
      - "**Thay thế:** system-ui hoặc IBM Plex Sans"
      - "**Weights:** 400, 500, 600, 650, 700"
      - "**Kích thước:** 8, 9, 12, 13, 14, 15, 16, 17, 18, 19"
      - "**Line height:** 1.00, 1.14, 1.33, 1.37, 1.38, 1.43, 1.50"
      - "**Letter spacing:** -0.76px ở 19px, -0.32px ở 16px, -0.18px ở 14px, -0.16px ở 12px"
      - "**OpenType features:** `\"calt\" 0, \"clig\" 0, \"liga\" 0`"
      - "**Vai trò:** Kiểu chữ phụ cho văn bản hỗ trợ, chữ nhỏ, badge, và label UI dày đặc ở 12-19px. Inter xuất hiện ở những nơi mật độ thông tin quan trọng hơn biểu đạt thương hiệu — tooltip, chú thích nhỏ, và trường biểu mẫu."

    sometype_mono___kiểu_chữ_monospaced_cho_badge_label__feature_tag__và_micro_copy_viết_hoa_toàn_bộ_đánh_dấu_label_danh_mục_ví_dụ___introducing_clickup_4_0__tracking_dương_0_06em_tạo_ra_một_đặc_tính_kỹ_thuật__có_khoảng_cách__tương_phản_với_plus_jakarta_sans_hình_học_____font_sometype_mono:
      - "**Thay thế:** JetBrains Mono hoặc IBM Plex Mono"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 12, 14, 16, 24, 40"
      - "**Line height:** 1.25, 1.29, 1.38, 1.43"
      - "**Letter spacing:** 0.72px ở 12px, 0.84px ở 14px, 2.4px ở 40px"
      - "**Vai trò:** Kiểu chữ monospaced cho badge label, feature tag, và micro-copy viết hoa toàn bộ đánh dấu label danh mục (ví dụ: 'Introducing ClickUp 4.0'). Tracking dương 0.06em tạo ra một đặc tính kỹ thuật, có khoảng cách, tương phản với Plus Jakarta Sans hình học."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | -0.14px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | -0.18px | `--text-body-sm` |"
      info: "| body | 18px | 1.43 | -0.18px | `--text-body` |"
      info: "| subheading | 26px | 1.25 | -0.52px | `--text-subheading` |"
      info: "| heading-sm | 40px | 1.18 | -1.6px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.14 | -2px | `--text-heading` |"
      info: "| heading-lg | 60px | 1.1 | -3px | `--text-heading-lg` |"
      info: "| display | 76px | 1.05 | -3.8px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "compact"

    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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 12px |"
      info: "| pills | 54px |"
      info: "| badges | 12px |"
      info: "| buttons | 9px |"
      info: "| largeCards | 24px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle` |"
      info: "| xl | `rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset, rgba(...` | `--shadow-xl` |"
      info: "| subtle-2 | `rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, ...` | `--shadow-subtle-2` |"
      info: "| sm | `rgba(13, 21, 48, 0.04) 0px 4px 4px 0px` | `--shadow-sm` |"
      info: "| xl-2 | `rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset` | `--shadow-xl-2` |"

    layout:

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

  components:

    primary_filled_button:
      vai_trò: "Main call-to-action"

      info: "Nền #202023 (carbon black), chữ trắng Plus Jakarta Sans weight 650 ở 16px, border-radius 9px, padding 9px 18px. Bóng đổ pha xanh lam nhẹ (rgba(13,21,48,0.04) 0px 4px 4px 0px) nâng nó lên vừa đủ để cảm thấy có thể nhấn được. Không có nền tím thương hiệu — hành động chính cố tình trung tính, để màu tím sống trong logo và các điểm nhấn."

    violet_brand_button:
      vai_trò: "Hành động có thương hiệu hoặc điểm nổi bật tính năng"

      info: "Nền #7b68ee, chữ trắng, radius 9px, padding 9px 18px. Được sử dụng có chọn lọc cho các CTA cụ thể của sản phẩm gắn với màu tím thương hiệu, thay vì các hành động trang chung chung."

    pill_tag_button:
      vai_trò: "Bộ lọc danh mục hoặc feature tag"

      info: "Hình dạng rất tròn với border-radius 54px, padding 3px 12px, nền sáng (#f8f9fa hoặc #ffffff), border 1px màu #e8e8e8 hoặc #d9d9d9, Plus Jakarta Sans 14px weight 500. Radius cực lớn (54px) khiến chúng trông giống như tag có thể tháo rời hơn là button."

    ghost_button:
      vai_trò: "Secondary action hoặc nav item"

      info: "Không nền, background trong suốt, border 1px màu #e8e8e8, chữ #292d34 ở 16px weight 500, radius 9px, padding 9px 18px. Hiển thị như một hình chữ nhật có viền mỏng, lùi lại trên nền canvas trắng."

    navigation_link:
      vai_trò: "Nav item cấp cao nhất"

      info: "Chỉ văn bản Plus Jakarta Sans 15-16px weight 500, màu #292d34, không gạch chân. Đi kèm với icon chevron nhỏ cho dropdown. Padding 8px 12px với khoảng cách dọc 4px."

    feature_badge:
      vai_trò: "Label sản phẩm hoặc danh mục (ví dụ: 'Super Agents')"

      info: "Hình pill với radius 12px, nền trắng hoặc pha tím, Plus Jakarta Sans nhỏ 13-14px weight 500 hoặc Sometype Mono viết hoa. Thường đi kèm với icon và chevron mũi tên phải. Padding 3px 12px."

    product_icon_tile:
      vai_trò: "Mục lưới tính năng trong phần '100+ products'"

      info: "Ô vuông không nền, icon outline căn giữa (stroke #7b68ee hoặc #292d34), label Plus Jakarta Sans 14px bên dưới. Được sắp xếp trong lưới 7 cột với khoảng cách đều nhau, tạo cảm giác danh mục đồng nhất."

    product_ui_card:
      vai_trò: "Hero visual hoặc container ảnh chụp màn hình sản phẩm"

      info: "Bề mặt trắng, border-radius 12px, chồng bóng đổ nhẹ (rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px), padding 0px (ảnh chụp màn hình phủ kín cạnh với góc bo tròn qua overflow:hidden). Chứa giao diện ứng dụng mô phỏng."

    feature_highlight_card:
      vai_trò: "Value prop ba cột (Context Switching/Missing/Stitching)"

      info: "Bề mặt trắng với bóng đổ pha xanh lam rất nhẹ, radius 12px, padding 24px. Chứa hình minh họa trang trí ở trên, sau đó là heading 26px Plus Jakarta Sans weight 700, rồi body text 16px màu #646464."

    context_problem_card:
      vai_trò: "Card minh họa pain-point"

      info: "Nền xám nhạt (#f8f9fa), radius 12px, padding 16px, chứa icon ứng dụng nổi được kết nối bằng đường minh họa màu xám rối. Thể hiện trực quan quy trình làm việc phân mảnh."

    announcement_banner:
      vai_trò: "Dải quảng cáo đầu trang"

      info: "Nền #f8f9fa hoặc trắng toàn chiều rộng, chữ căn giữa Plus Jakarta Sans 14-15px weight 500, link chevron nhỏ ở cuối. Padding dọc rất mỏng (8-12px)."

    hero_headline:
      vai_trò: "Headline chính của trang"

      info: "Plus Jakarta Sans weight 800 ở 60-76px, màu #090c1d, letter-spacing -3.0 đến -3.8px, line-height 1.05-1.10. Trọng số cực lớn kết hợp với tracking rất chặt tạo ra một headline cô đọng, mật độ cao, chiếm ưu thế trong hero mà không cần màu sắc."

    checklist_item:
      vai_trò: "Bullet value prop (Save money, Save time, Create infinite productivity)"

      info: "Inline flex với icon checkmark tím nhỏ (#7b68ee), label đậm màu #090c1d, sau đó là văn bản mô tả nhẹ hơn màu #292d34 ở 16px. Không có bullet point — checkmark là điểm đánh dấu duy nhất."

    section_divider:
      vai_trò: "Ngắt trực quan giữa các phần nội dung"

      info: "Bộ tách dựa trên khoảng trắng với khoảng cách section 80px. Thỉnh thoảng có đường kẻ ngang 1px #e8e8e8. Không có yếu tố trang trí — khoảng thở CHÍNH LÀ divider."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng Plus Jakarta Sans weight 800 với letter-spacing -0.05em cho tất cả display headline trên 48px"
      - "Dành màu tím #7b68ee cho logo, các khoảnh khắc thương hiệu, và điểm nổi bật tính năng — không dùng cho CTA trang chung chung"
      - "Sử dụng #202023 (carbon) làm nền cho primary filled button — hệ thống tin tưởng màu trung tính hơn màu sắc cho bề mặt hành động"
      - "Áp dụng border-radius 9px cho button và 12px cho card — chênh lệch 3px tạo ra hệ thống phân cấp component rõ ràng"
      - "Sử dụng #e9ebf0 (linen) cho các dải section xen kẽ để tạo nhịp điệu mà không gây nhiễu màu"
      - "Ghép mỗi headline value prop với một icon checkmark tím nhỏ (#7b68ee) — checkmark là motif đặc trưng"
      - "Giữ body text ở 16-18px Plus Jakarta Sans 400 với tracking -0.011em để có trải nghiệm đọc dày đặc, dễ quét"

    không_nên_làm:
      - "Không dùng #7b68ee làm nền filled cho CTA trang chung chung — chỉ dành cho các khoảnh khắc gắn với thương hiệu"
      - "Không áp dụng bóng đổ nặng hơn rgba(0,0,0,0.1) — hệ thống dùng micro-shadow pha xanh lam, không phải độ nâng cao rõ rệt"
      - "Không dùng border-radius lớn hơn 24px cho card — 54px chỉ dành riêng cho pill tag, và 12px là tiêu chuẩn card"
      - "Không thêm màu nhấn mới — bảng màu cố tình hạn chế: một tím, một xanh lam, và các màu xám"
      - "Không dùng weight 400 cho headline — display text phải từ 700+ để mang mật độ tự tin của thương hiệu"
      - "Không lấp đầy trang bằng conic gradient — nó là thiết bị hero/showcase, không phải pattern nền"
      - "Không dùng letter-spacing rộng hơn -0.01em trên bất kỳ văn bản nào lớn hơn 14px — hệ thống tracking chặt hơn khi kích thước tăng"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang — bề mặt chiếm ưu thế cho hầu hết nội dung |"
    info: "| 1 | Linen Band | `#e9ebf0` | Nền section xen kẽ để tạo nhịp điệu thị giác |"
    info: "| 2 | Paper | `#f8f9fa` | Bề mặt card lõm và panel nâng cao tinh tế |"
    info: "| 3 | Frost | `#edf6fd` | Vùng thông tin tông màu mát và trạng thái selected/highlighted |"
    info: "| 4 | Carbon | `#202023` | Card bề mặt tối và section đảo ngược |"

  elevation:

    - "**Product UI Card:** `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`"
    - "**Elevated Card:** `rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px`"
    - "**Dark Card Inset Highlight:** `rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset`"
    - "**Button:** `rgba(13, 21, 48, 0.04) 0px 4px 4px 0px`"

  imagery:

    info: "Ảnh chụp màn hình UI sản phẩm là ngôn ngữ hình ảnh chiếm ưu thế — hero là một ảnh chụp màn hình thực tế của ứng dụng ClickUp, hiển thị không gian làm việc nhiều khung với sidebar navigation, task list, và badge ưu tiên có màu. Những ảnh chụp màn hình này được trình bày như bằng chứng sản phẩm sống động thay vì hình minh họa tiếp thị. Hình ảnh hỗ trợ bao gồm: lưới icon outline (bố cục 7 cột đồng nhất của icon tính năng sản phẩm), minh họa đường rối thể hiện sự phân mảnh quy trình làm việc, và cụm logo ứng dụng nổi với các đường kết nối màu xám. Không có nhiếp ảnh — không có người, không có ảnh văn phòng, không có hình ảnh lối sống. Các vòng xoáy conic-gradient trang trí xuất hiện tiết kiệm để báo hiệu tính năng AI/agent. Icon là outline với stroke mảnh (1.5-2px), đơn sắc, và được hiển thị ở kích thước đồng nhất trong lưới."

  layout:

    info: "Mô hình trang là max-width 1200px căn giữa với padding hai bên rộng rãi. Hero sử dụng bố cục chia đôi: cột trái chứa headline + CTA + checklist (khoảng 45% chiều rộng), cột phải chứa ảnh chụp màn hình UI sản phẩm (khoảng 55% chiều rộng). Bên dưới hero, các section xen kẽ giữa khối văn bản căn giữa toàn chiều rộng và lưới card ba cột. Nhịp điệu section nhất quán với khoảng cách dọc 80px, với nền #ffffff và #e9ebf0 xen kẽ tạo ra các dải thị giác tinh tế. Navigation là một thanh trên cùng cố định với logo căn trái, nav link căn giữa (Brain AI, Product, Solutions, Learn, Pricing, Enterprise), và action button căn phải (Get a Demo, Login, Sign Up). Một announcement banner nằm phía trên nav. Phần '100+ products' là lưới icon 7 cột dày đặc, lấp đầy chiều rộng viewport. Mật độ nội dung nhỏ gọn — thiết kế ưu tiên các section giàu thông tin với khoảng cách chặt chẽ hơn là không gian thở rộng rãi."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "Primary text: #090c1d (Midnight Ink)"
    - "Secondary text: #292d34 (Charcoal)"
    - "Muted text: #646464 (Slate)"
    - "Page background: #ffffff (Pure White)"
    - "Brand accent: #7b68ee (Brand Violet)"
    - "primary action: #202023 (filled action)"

    ví_dụ_prompt_component:

    - "**Hero Section**: Nền trắng (#ffffff). Headline ở 60px Plus Jakarta Sans weight 800, #090c1d, letter-spacing -3.0px, line-height 1.10. Subtext ở 18px weight 400, #646464. Primary CTA: button nền carbon (#202023), chữ trắng weight 650, radius 9px, padding 9px 18px. Bên phải: card ảnh chụp màn hình UI sản phẩm với radius 12px và bóng đổ pha xanh lam nhẹ."

    - "**Feature Grid Tile**: Ô vuông căn giữa, không nền, icon outline ở 32px màu #7b68ee với stroke 1.5px. Label bên dưới Plus Jakarta Sans 14px weight 500, #292d34. Sắp xếp trong lưới 7 cột với khoảng cách 24px."

    - "**Pill Tag Button**: Nền #f8f9fa, border 1px #d9d9d9, border-radius 54px, padding 3px 12px. Chữ Plus Jakarta Sans 14px weight 500, #292d34. Không bóng đổ."

    - "**Three-Column Value Prop Card**: Bề mặt trắng, radius 12px, padding 24px, bóng đổ nhẹ (rgba(0,0,0,0.1) 0px 1px 3px 0px). Heading 26px Plus Jakarta Sans weight 700, #090c1d. Body 16px weight 400, #646464."

    - "**Announcement Banner**: Nền #f8f9fa toàn chiều rộng, chữ căn giữa 14px Plus Jakarta Sans weight 500, #292d34, với link chevron mũi tên phải. Padding dọc 8px."

  similar_brands:

    - "**Linear** — Cùng cách tiếp cận product-UI-as-hero với một màu nhấn rực rỡ duy nhất (màu tím/tía của Linear song song với #7b68ee của ClickUp) trên nền giao diện trắng gần như đơn sắc"
    - "**Notion** — Mật độ nhỏ gọn tương tự, ảnh chụp màn hình sản phẩm làm hero, và bảng màu hạn chế với ít nhiễu màu — mặc dù Notion dùng màu gần đen ấm hơn"
    - "**Asana** — Cả hai đều đặt ảnh chụp màn hình UI sản phẩm làm hero visual và sử dụng hệ thống phân cấp kiểu chữ chặt chẽ với headline display weight trên nền trắng sạch"
    - "**Monday.com** — Phần lưới danh mục sản phẩm có thể so sánh hiển thị icon tính năng, và cách sử dụng màu nhấn rực rỡ tương tự (bảng màu đa sắc của Monday.com so với một màu tím duy nhất của ClickUp) trên nền trắng"
    - "**Airtable** — Cùng cách tiếp cận hiển thị giao diện sản phẩm thực tế trong bối cảnh tiếp thị, với sự tự tin về kiểu chữ tương đương và ngôn ngữ thiết kế phẳng, ít bóng đổ"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-brand-violet: #7b68ee;
          --color-signal-blue: #0091ff;
          --color-ultra-violet: #6647f0;
          --color-muted-violet: #514b81;
          --color-midnight-ink: #090c1d;
          --color-charcoal: #292d34;
          --color-carbon: #202023;
          --color-graphite: #1a202c;
          --color-slate: #646464;
          --color-steel: #7c828d;
          --color-fog: #b3b3b3;
          --color-ash: #838383;
          --color-mist: #d9d9d9;
          --color-cloud: #e8e8e8;
          --color-paper: #f8f9fa;
          --color-frost: #edf6fd;
          --color-linen: #e9ebf0;
          --color-pure-white: #ffffff;
          --color-true-black: #000000;
          --color-abyss: #090909;
          --color-violet-glow: #b38cff;
        
          /* Typography — Font Families */
          --font-plus-jakarta-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sometype-mono: 'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.14px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.18px;
          --text-body: 18px;
          --leading-body: 1.43;
          --tracking-body: -0.18px;
          --text-subheading: 26px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.52px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -1.6px;
          --text-heading: 48px;
          --leading-heading: 1.14;
          --tracking-heading: -2px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -3px;
          --text-display: 76px;
          --leading-display: 1.05;
          --tracking-display: -3.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-w650: 650;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-3xl-4: 39px;
          --radius-3xl-5: 45px;
          --radius-full: 54px;
          --radius-full-2: 653px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 54px;
          --radius-badges: 12px;
          --radius-buttons: 9px;
          --radius-largecards: 24px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
          --shadow-xl: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset, rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
          --shadow-subtle-2: rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px;
          --shadow-sm: rgba(13, 21, 48, 0.04) 0px 4px 4px 0px;
          --shadow-xl-2: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-linen-band: #e9ebf0;
          --surface-paper: #f8f9fa;
          --surface-frost: #edf6fd;
          --surface-carbon: #202023;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-brand-violet: #7b68ee;
          --color-signal-blue: #0091ff;
          --color-ultra-violet: #6647f0;
          --color-muted-violet: #514b81;
          --color-midnight-ink: #090c1d;
          --color-charcoal: #292d34;
          --color-carbon: #202023;
          --color-graphite: #1a202c;
          --color-slate: #646464;
          --color-steel: #7c828d;
          --color-fog: #b3b3b3;
          --color-ash: #838383;
          --color-mist: #d9d9d9;
          --color-cloud: #e8e8e8;
          --color-paper: #f8f9fa;
          --color-frost: #edf6fd;
          --color-linen: #e9ebf0;
          --color-pure-white: #ffffff;
          --color-true-black: #000000;
          --color-abyss: #090909;
          --color-violet-glow: #b38cff;
        
          /* Typography */
          --font-plus-jakarta-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sometype-mono: 'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.14px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.18px;
          --text-body: 18px;
          --leading-body: 1.43;
          --tracking-body: -0.18px;
          --text-subheading: 26px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.52px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -1.6px;
          --text-heading: 48px;
          --leading-heading: 1.14;
          --tracking-heading: -2px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -3px;
          --text-display: 76px;
          --leading-display: 1.05;
          --tracking-display: -3.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-3xl-4: 39px;
          --radius-3xl-5: 45px;
          --radius-full: 54px;
          --radius-full-2: 653px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
          --shadow-xl: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset, rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
          --shadow-subtle-2: rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px;
          --shadow-sm: rgba(13, 21, 48, 0.04) 0px 4px 4px 0px;
          --shadow-xl-2: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
        }