notion___style_reference:
  info: "> Trung tâm chỉ huy làm việc đêm khuya — một studio tối lúc 2 giờ sáng, nơi những chiếc bàn màu kem mềm mại đỡ những tấm thẻ trắng phát sáng, được chiếu sáng bởi các bảng điều khiển màu xanh coban."

  theme: "mixed"

  info: "Notion vận hành như một trung tâm chỉ huy làm việc về đêm: một hero xanh navy nửa đêm bão hòa sâu chuyển dần vào các bề mặt nội dung màu kem ấm áp, với các hành động màu xanh coban nổi bật như những bảng điều khiển vừa được bật sáng. Thiết kế tự tin về mặt typography, sử dụng một sans humanist tùy chỉnh (Notion Inter) ở mọi cấp độ UI, kết hợp với các điểm nhấn serif Lyon Text thỉnh thoảng để tạo cảm giác ấm áp biên tập. Màu sắc được phân bổ có chừng mực — phần lớn trang sống trong mực gần như đen và trắng kem ấm, dành năng lượng màu sắc cho các phần tô CTA, điểm nhấn emoji-icon, highlight badge và đường viền thẻ trang trí. Các component mềm mại và bo tròn (thẻ 12px, input 5px, pill badges) hầu như không có drop shadow; chiều sâu đến từ độ tương phản bề mặt (navy đậm → kem → thẻ trắng) chứ không phải từ độ cao. Cảm giác tổng thể là một studio làm việc vẫn mở cửa sau giờ hành chính — chức năng, yên tĩnh, hơi mang hơi hướng về đêm."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Midnight Navy | `#02093a` | `--color-midnight-navy` | Canvas cho hero và feature section — bề mặt tối đặc trưng khiến headline trắng và CTA xanh coban trông như những bảng phát sáng trong phòng điều khiển ca đêm |"
    info: "| Cobalt Blue | `#455dd3` | `--color-cobalt-blue` | Màu hành động tím cho filled buttons, trạng thái navigation được chọn và các khoảnh khắc chuyển đổi tập trung. |"
    info: "| Signal Blue | `#0075de` | `--color-signal-blue` | Đường viền hành động dạng outlined, inline text links và trạng thái hover có màu — một màu xanh mát hơn cho tính tương tác thứ cấp |"
    info: "| Ice Blue | `#62aef0` | `--color-ice-blue` | Điểm nhấn đường viền xanh cho tag, divider và cạnh UI đang focus |"
    info: "| Info Blue | `#097fe8` | `--color-info-blue` | Badge thông tin ngữ nghĩa và đường viền điểm nhấn trên bề mặt tối |"
    info: "| Indigo | `#2537b1` | `--color-indigo` | Nét vẽ minh họa trang trí, tô màu SVG accent, điểm chuyển tiếp gradient |"
    info: "| Deep Indigo | `#213183` | `--color-deep-indigo` | Trạng thái hover/pressed của Cobalt Blue trên bề mặt tối |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Văn bản chính, đường viền đậm, nét vẽ tương phản cao |"
    info: "| Ink | `#0b0b0b` | `--color-ink` | Văn bản chính trên bề mặt sáng, đường viền thẻ, divider mạnh |"
    info: "| Charcoal | `#31302e` | `--color-charcoal` | Văn bản navigation, khối văn bản có viền dày đặc, màu heading cấp ba |"
    info: "| Warm Gray | `#615d59` | `--color-warm-gray` | Body text nhẹ nhàng, nét vẽ icon, chú thích trợ giúp trên nền sáng |"
    info: "| Stone | `#a39e98` | `--color-stone` | Trạng thái disabled, tô màu icon thứ cấp, đường viền ít nhấn mạnh |"
    info: "| Silver | `#c6c6c5` | `--color-silver` | Đường viền tinh tế, placeholder, divider dạng sợi tóc trên bề mặt sáng |"
    info: "| Cream | `#f6f5f4` | `--color-cream` | Nền trang, canvas nội dung trắng kem ấm, màu trung tính ấm khiến các section navy có chủ đích |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt thẻ, văn bản nút, trường input — bề mặt đọc sạch sẽ |"
    info: "| Ice Wash | `#f2f9ff` | `--color-ice-wash` | Nền badge thông tin mềm mại kết hợp với văn bản Info Blue |"

  tokens___typography:

    notion_inter___họ_chữ_interface_và_heading_chính___sans_duy_nhất_được_sử_dụng_trên_toàn_bộ_bề_mặt_sản_phẩm__từ_helper_text_12px_đến_hero_headline_64px__tabular_lining_numerals_và_localized_forms_luôn_được_bật__weight_600_700_đảm_nhận_heading_và_button_label__weight_400_đảm_nhận_body_và_mô_tả_____font_notion_inter:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 12, 14, 15, 16, 20, 22, 24, 26, 40, 42, 54, 64"
      - "**Line height:** 1.14–1.50 (UI), 1.20 (headings), 1.04–1.14 (display)"
      - "**Letter spacing:** -0.0360em ở 64px, -0.0350em ở 54px, -0.0330em ở 42px, -0.0240em ở 40px, -0.0110em ở 26px, -0.0060em ở 24px, 0.0100em ở 12px"
      - "**OpenType features:** `\"lnum\" 0, \"locl\" 0`"
      - "**Vai trò:** Họ chữ interface và heading chính — sans duy nhất được sử dụng trên toàn bộ bề mặt sản phẩm, từ helper text 12px đến hero headline 64px. Tabular lining numerals và localized forms luôn được bật. Weight 600–700 đảm nhận heading và button label; weight 400 đảm nhận body và mô tả."

    lyon_text___serif_biên_tập_được_sử_dụng_một_cách_tiết_kiệm_ở_32px_cho_những_khoảnh_khắc_cần_cảm_giác_trang_bìa_tạp_chí___không_bao_giờ_lặp_lại_trong_ui_dày_đặc__sự_xuất_hiện_của_nó_là_một_điểm_đối_trọng_có_chủ_đích_với_hệ_thống_toàn_sans_còn_lại_____font_lyon_text:
      - "**Thay thế:** Source Serif Pro"
      - "**Weights:** 400"
      - "**Kích thước:** 32"
      - "**Line height:** 1.25"
      - "**Vai trò:** Serif biên tập được sử dụng một cách tiết kiệm ở 32px cho những khoảnh khắc cần cảm giác trang bìa tạp chí — không bao giờ lặp lại trong UI dày đặc. Sự xuất hiện của nó là một điểm đối trọng có chủ đích với hệ thống toàn sans còn lại."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.22px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.27 | -0.14px | `--text-heading-sm` |"
      info: "| heading | 26px | 1.23 | -0.29px | `--text-heading` |"
      info: "| heading-lg | 42px | 1.14 | -1.39px | `--text-heading-lg` |"
      info: "| display | 64px | 1.04 | -2.3px | `--text-display` |"

  tokens___spacing___shapes:

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

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

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 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: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| images | 12px |"
      info: "| inputs | 5px |"
      info: "| buttons | 5px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button_cobalt_fill:
      vai_trò: "Hành động có độ nhấn mạnh cao nhất — filled button màu sắc duy nhất trong hệ thống"

      info: "Nền #455dd3, văn bản trắng ở 14px/600, radius 5px, padding dọc 8px × ngang 16px. Luôn đi kèm với một ghost secondary bên cạnh. Màu cobalt được thiết kế mát hơn so với indigo SaaS thông thường — nó mang cảm giác 'đang bật' hơn là 'quan trọng'."

    ghost_text_link_button:
      vai_trò: "Hành động thứ cấp nhường chỗ trực quan cho primary CTA"

      info: "Không có nền, không có viền. Văn bản trắng ở 14px/500 trên bề mặt tối, văn bản Ink (#0b0b0b) trên bề mặt sáng. Tùy chọn gạch chân khi hover. Được sử dụng cho 'Request a demo' và tất cả navigation có cam kết thấp."

    outlined_action_button_signal_blue:
      vai_trò: "Hành động cấp ba với viền màu sắc để phân biệt với ghost buttons trung tính"

      info: "Nền trong suốt, viền 1.5px #0075de, văn bản #0075de ở 14px/500, radius 5px, padding 8px × 16px. Được sử dụng khi ghost button cần nhiều sự hiện diện hơn mà không cạnh tranh với primary cobalt."

    pill_badge_info:
      vai_trò: "Chỉ báo trạng thái nhỏ — 'New', 'Beta', tag danh mục"

      info: "Nền xanh nhạt (#f2f9ff) với văn bản Info Blue (#097fe8) ở 12px/500, radius 9999px, padding 2px × 8px. Hình học pill được dành riêng cho badge và tag nhỏ — không bao giờ dùng cho button."

    announcement_banner:
      vai_trò: "Thanh mỏng trên cùng trang cho các chương trình khuyến mãi nhạy cảm về thời gian (sự kiện dành cho developer, ra mắt)"

      info: "Dải mỏng phía trên navigation chính, nền Ink đậm (#0b0b0b), văn bản trắng ở 13px/500, có thể đóng bằng icon × ở cạnh phải. Padding dọc 8px."

    top_navigation_bar:
      vai_trò: "Navigation trang cố định"

      info: "Trong suốt trên hero xanh nửa đêm, dropdown menu với radius 8px, mục nav 14px/500 màu trắng trên nền tối và Ink trên nền sáng. 'Get Notion free' nằm ở góc trên bên phải dưới dạng nút Cobalt radius 5px."

    product_ui_screenshot_card:
      vai_trò: "Hình ảnh hero — nhúng một mockup sản phẩm chân thực chiếm ưu thế trên canvas tối"

      info: "Bề mặt trắng với radius 12px, chồng bóng đổ năm lớp, viền 1px Ink. Đặt ở trung tâm, chồng lên nền xanh nửa đêm. Khung sản phẩm là một không gian làm việc Notion thực tế — không có minh họa trừu tượng."

    feature_card_paper_white:
      vai_trò: "Thẻ nội dung mặc định trên nền trang kem"

      info: "Bề mặt trắng (#ffffff), radius 12px, padding 24px, không có shadow. Tùy chọn viền 1px Silver (#c6c6c5). Chứa emoji hoặc icon nhỏ ở trên cùng, tiêu đề đậm, mô tả hỗ trợ."

    accent_bordered_feature_card:
      vai_trò: "Thẻ tính năng được đánh dấu cần nổi bật so với các thẻ lân cận"

      info: "Bề mặt trắng, radius 12px, padding 24px, nhưng có viền trên cùng dày 4px màu đồng nhất (hồng đào, vàng, bạc hà — một trong nhiều màu nhấn). Được sử dụng để neo thẻ đầu tiên trong một hàng tính năng."

    dark_feature_card_midnight:
      vai_trò: "Thẻ đảo ngược cho các phần nhấn mạnh trên trang kem"

      info: "Nền #02093a, văn bản trắng, radius 12px, padding 24px, không có shadow. Chứa icon emoji và một link CTA ngắn màu Cobalt Blue."

    emoji_icon_tile:
      vai_trò: "Thẻ icon+label nhỏ gọn cho các phần dạng lưới"

      info: "Bề mặt trắng, radius 12px, padding 16px, emoji 36px hiển thị màu ở góc trên bên trái, tiêu đề 14px/600 và mũi tên link tùy chọn. Được sử dụng trong các hàng 5 cột chặt chẽ."

    section_heading:
      vai_trò: "Tiêu đề đầu section bằng Ink hoặc trắng tùy theo bề mặt"

      info: "Notion Inter weight 700 ở 40–42px, tracking chặt (-1.39px ở 42px), line-height 1.14. Kết thúc bằng dấu chấm trên hero/feature headings — 'Meet the night shift.', 'Keep work moving 24/7.' — dấu chấm ở cuối là một đặc điểm nhận dạng."

    logo_trust_bar:
      vai_trò: "Hàng logo bằng chứng xã hội"

      info: "Các wordmark đơn sắc cách đều nhau màu trắng (trên section tối) hoặc Charcoal (trên section sáng), cao 14–16px, có tùy chọn chú thích 'Trusted by 98% of the Forbes Cloud 100' phía trên. Logo được làm giảm bão hòa — không có rò rỉ màu thương hiệu."

    input_field:
      vai_trò: "Trường nhập liệu biểu mẫu và tìm kiếm"

      info: "Bề mặt trắng, radius 5px, padding dọc 6px × ngang 12px, viền 1px Silver (#c6c6c5), văn bản Ink ở 14px. Focus ring sử dụng Cobalt Blue (#455dd3) với outline 2px."

    footer:
      vai_trò: "Footer trang với các cột link và văn bản pháp lý"

      info: "Nền Midnight Navy trên trang tối, Cream trên trang sáng. Văn bản trắng hoặc Charcoal, cột link 14px, chú thích pháp lý 12px/500. Không có drop shadow."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ sử dụng Cobalt Blue (#455dd3) cho một primary CTA duy nhất trên mỗi view — không bao giờ đặt hai filled button màu sắc cạnh nhau"
      - "Xen kẽ các section Midnight Navy và Cream để tạo nhịp điệu tối-sáng; toàn bộ trang cream cũng sai như toàn bộ trang navy"
      - "Kết thúc hero và section headline bằng dấu chấm — 'Meet the night shift.', 'Keep work moving 24/7.'"
      - "Chỉ áp dụng radius pill (9999px) cho badge và tag nhỏ; dùng 12px cho tất cả thẻ và 5px cho tất cả button và input"
      - "Sử dụng emoji icon với màu gốc đầy đủ trên thẻ tính năng trắng — chúng là hệ thống màu nhấn cho lưới, không phải minh họa trang trí"
      - "Ghép mỗi primary CTA với một ghost text link ở bên phải — 'Get Notion free' + 'Request a demo' là cặp hành động tiêu chuẩn"
      - "Dành Lyon Text cho một khoảnh khắc biên tập duy nhất trên mỗi trang (một pull quote hoặc tiêu đề section kiểu tạp chí); không bao giờ sử dụng nó trong UI dày đặc"

    không_nên_làm:
      - "Không sử dụng drop shadow trên thẻ tiêu chuẩn — chiều sâu phải đến từ độ tương phản bề mặt (navy → cream → white), không phải từ blur"
      - "Không đưa vào các màu sắc mới ngoài họ Midnight Navy / Cobalt / Signal Blue / Ice Blue; bảng màu được phân bổ có chừng mực"
      - "Không sử dụng radius 8px cho thẻ (nó thuộc về nav) hoặc radius 12px cho button (nó thuộc về thẻ) — radius có vai trò cụ thể"
      - "Không xếp chồng primary CTA cobalt lên trên secondary filled button; luôn hạ cấp secondary xuống ghost hoặc outlined"
      - "Không hiển thị logo khách hàng với màu thương hiệu của họ — giảm bão hòa thành trắng trên nền tối và Charcoal trên nền sáng"
      - "Không sử dụng Lyon Text ở kích thước khác ngoài 32px — nó là điểm nhấn biên tập, không phải mặt chữ body"
      - "Không phá vỡ mẫu headline kết thúc bằng dấu chấm; đó là đặc điểm nhận dạng bằng lời nói dễ nhận biết nhất và việc loại bỏ nó sẽ giết chết giọng điệu"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Midnight Canvas | `#02093a` | Hero và dark feature section — bề mặt về đêm đặc trưng |"
    info: "| 1 | Cream Page | `#f6f5f4` | Nền nội dung body mặc định — ấm áp, hơi ngả trắng để tránh sự lạnh lẽo lâm sàng |"
    info: "| 2 | Paper Card | `#ffffff` | Bề mặt thẻ nâng cao cho tính năng, lời chứng thực, nhúng UI sản phẩm |"
    info: "| 3 | Dark Card | `#02093a` | Thẻ đảo ngược trên nền sáng để tạo độ tương phản và nhấn mạnh |"

  elevation:

    - "**Product UI Embed Card:** `rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px`"

  imagery:

    info: "Hình ảnh chủ yếu là các ảnh chụp màn hình UI sản phẩm chân thực — các bản chụp không gian làm việc Notion thực tế (kanban Ramp HQ, bảng Q&A, cửa sổ chat) được nhúng dưới dạng thẻ bo tròn lớn trên hero xanh nửa đêm và các section nội dung kem. Không có ảnh stock, không có hình ảnh lối sống, không có nền minh họa trừu tượng. Các yếu tố đồ họa duy nhất ngoài UI sản phẩm là các emoji icon nhỏ đầy màu sắc (🤖 🛠️ 🧑‍🚒 🏗️ 🦺) được sử dụng làm icon chức năng trong lưới thẻ tính năng — chúng cung cấp năng lượng màu sắc duy nhất trong các hàng thẻ trắng. Đồ họa nền trên hero tối bao gồm các đường cong mảnh, hơi phát sáng và các minh họa emoji nổi nhỏ với màu cobalt và ice blue nhẹ nhàng — giàn giáo tạo không khí, không phải nội dung trọng tâm. Ngôn ngữ thiết kế chủ yếu tập trung vào ảnh chụp màn hình sản phẩm: không gian làm việc CHÍNH LÀ hoạt động tiếp thị."

  layout:

    info: "Hero tối full-bleed chuyển tiếp vào cột nội dung trung tâm max-width 1200px trên nền Cream (#f6f5f4). Hero xếp chồng theo chiều dọc: announcement banner ở trên cùng, thanh nav trong suốt, headline trung tâm + subhead + dual CTA, sau đó là ảnh chụp màn hình UI sản phẩm rộng kéo dài gần đến các cạnh viewport. Bên dưới hero, một logo trust bar trải dài toàn chiều rộng với văn bản trắng trên nền xanh nửa đêm. Các section nội dung xen kẽ: section heading lớn căn trái (40–42px weight 700), tiếp theo là bố cục 2 cột hoặc dạng lưới các thẻ tính năng. Section 'Custom Agents' sử dụng bố cục 1+1 — một thẻ được đánh dấu duy nhất với viền trên cùng màu ở bên trái, một thẻ sản phẩm minh họa rộng hơn ở bên phải. Hàng 'See what Custom Agents can do' là một lưới chặt chẽ 5 cột gồm các icon tile. Section 'Ask your on-demand assistants' quay lại bố cục 2 cột với thẻ Midnight tối ở bên trái và thẻ minh họa pha vàng ở bên phải. Nhịp điệu dọc rộng rãi — 80px giữa các section chính — cho phép sự xen kẽ tối-sáng có không gian để thở."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #0b0b0b (trên nền sáng) / #ffffff (trên nền tối)"
    - "background: #f6f5f4 (trang) / #02093a (section tối) / #ffffff (thẻ)"
    - "border: #c6c6c5 (sợi tóc) / #0b0b0b (đậm)"
    - "accent: #62aef0 (Ice Blue)"
    - "primary action: #ffffff (filled action)"
    - "link: #0075de (Signal Blue)"

    3_5_prompt_component_mẫu:

    - "**Hero Section**: Nền Midnight Navy (#02093a) trải dài toàn viewport. Headline căn giữa ở 64px Notion Inter weight 700, màu trắng, letter-spacing -2.30px, kết thúc bằng dấu chấm. Subtext ở 16px weight 400, màu warm-gray (#a39e98). Hai hành động: nút filled Cobalt (#455dd3) 'Get Notion free' (14px/600 trắng, radius 5px, padding 8px×16px) + ghost text link 'Request a demo' (trắng, 14px/500). Bên dưới: một thẻ trắng radius 12px chứa ảnh chụp màn hình UI sản phẩm chân thực, với chồng bóng đổ năm lớp (rgba 0.01→0.05, các bước blur 1px→23px)."

    - "**Hàng Feature Card trên Cream Page**: Nền trang Cream (#f6f5f4). Section heading ở 42px Notion Inter weight 700, Ink (#0b0b0b), letter-spacing -1.39px, kết thúc bằng dấu chấm. Bên dưới: lưới 5 cột gồm các emoji icon tile trắng (#ffffff), mỗi tile radius 12px, padding 16px, chứa emoji màu 36px + tiêu đề Ink 14px/600 + mô tả Warm Gray 14px/400. Tile đầu tiên có viền trên cùng màu hồng đào đặc 4px."

    - "**Pill Badge + Outlined Action**: Một Pill Badge với radius 9999px, nền #f2f9ff, văn bản #097fe8 ở 12px/500, được gắn nhãn 'New'. Bên cạnh, một Outlined Action Button: nền trong suốt, viền 1.5px #0075de, văn bản #0075de ở 14px/500, radius 5px, padding 8px×16px."

    - "**Dark Inverted Feature Card**: Thẻ Midnight Navy (#02093a), radius 12px, padding 24px, không có shadow. Icon emoji 36px ở trên cùng, tiêu đề trắng ở 20px/600, mô tả trắng ở 14px/400, link văn bản Cobalt Blue (#455dd3) ở 14px/500 với mũi tên phải."

    - "**Logo Trust Bar**: Thanh full-width trên nền Midnight Navy. Phía trên: chú thích 'Trusted by 98% of the Forbes Cloud 100' ở 12px/500 trắng. Bên dưới: một hàng duy nhất gồm 8–9 wordmark khách hàng hiển thị màu trắng ở độ cao ~16px, phân bố đều trên max-width 1200px với khoảng cách 32px."

  visual_identity_notes:

    info: "Headline 'Meet the night shift.' là mẫu lời nói dễ nhận biết nhất trong hệ thống — ngắn, kết thúc bằng dấu chấm và ở thì hiện tại. Cách tiếp cận emoji-as-icon (🤖 🛠️ 🦺) có chủ đích là giản dị: nó báo hiệu sự dễ tiếp cận theo cách mà line-icons không thể. Ảnh chụp màn hình sản phẩm hero không bao giờ là một render tiếp thị — đó là một bản chụp literal giao diện của Notion chứa đầy nội dung không gian làm việc hư cấu nhưng chân thực, để sản phẩm luôn tự chứng minh chính nó. Sự xen kẽ xanh nửa đêm và kem là xương sống cấu trúc: mọi section nội dung chính hoặc nằm trên Midnight Navy hoặc trên Cream, không bao giờ trên một màu trung tính thứ ba, để mắt luôn có thể biết nó đang ở 'chế độ' nào."

  similar_brands:

    - "**Linear** — Cùng sự xen kẽ hero navy tối → nội dung sáng, cùng letter-spacing chặt trên display heading, cùng cách xử lý thẻ không shadow với radius 12px"
    - "**Stripe** — Cùng editorial headline kết thúc bằng dấu chấm, cùng kỷ luật single-accent-blue CTA, cùng triết lý product-screenshot-as-hero thay vì minh họa trừu tượng"
    - "**Vercel** — Cùng canvas đen/navy với điểm nhấn màu tối thiểu, cùng custom humanist sans cấp Notion Inter ở mọi cấp độ UI"
    - "**Figma** — Cùng cách tiếp cận emoji-as-functional-icon trong lưới tính năng, cùng thẻ radius 12px mềm mại trên nền trang trắng kem ấm"
    - "**Arc Browser** — Cùng nhịp điệu hero tối + nội dung kem pha trộn tự tin, cùng sự phân bổ màu sắc có chừng mực nơi các điểm nhấn màu chỉ xuất hiện trên các yếu tố tương tác cụ thể"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-navy: #02093a;
          --color-cobalt-blue: #455dd3;
          --color-signal-blue: #0075de;
          --color-ice-blue: #62aef0;
          --color-info-blue: #097fe8;
          --color-indigo: #2537b1;
          --color-deep-indigo: #213183;
          --color-obsidian: #000000;
          --color-ink: #0b0b0b;
          --color-charcoal: #31302e;
          --color-warm-gray: #615d59;
          --color-stone: #a39e98;
          --color-silver: #c6c6c5;
          --color-cream: #f6f5f4;
          --color-paper-white: #ffffff;
          --color-ice-wash: #f2f9ff;
        
          /* Typography — Font Families */
          --font-notion-inter: 'Notion Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lyon-text: 'Lyon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.22px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: -0.14px;
          --text-heading: 26px;
          --leading-heading: 1.23;
          --tracking-heading: -0.29px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.39px;
          --text-display: 64px;
          --leading-display: 1.04;
          --tracking-display: -2.3px;
        
          /* 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-64: 64px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-images: 12px;
          --radius-inputs: 5px;
          --radius-buttons: 5px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px;
        
          /* Surfaces */
          --surface-midnight-canvas: #02093a;
          --surface-cream-page: #f6f5f4;
          --surface-paper-card: #ffffff;
          --surface-dark-card: #02093a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-navy: #02093a;
          --color-cobalt-blue: #455dd3;
          --color-signal-blue: #0075de;
          --color-ice-blue: #62aef0;
          --color-info-blue: #097fe8;
          --color-indigo: #2537b1;
          --color-deep-indigo: #213183;
          --color-obsidian: #000000;
          --color-ink: #0b0b0b;
          --color-charcoal: #31302e;
          --color-warm-gray: #615d59;
          --color-stone: #a39e98;
          --color-silver: #c6c6c5;
          --color-cream: #f6f5f4;
          --color-paper-white: #ffffff;
          --color-ice-wash: #f2f9ff;
        
          /* Typography */
          --font-notion-inter: 'Notion Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lyon-text: 'Lyon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.22px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: -0.14px;
          --text-heading: 26px;
          --leading-heading: 1.23;
          --tracking-heading: -0.29px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.39px;
          --text-display: 64px;
          --leading-display: 1.04;
          --tracking-display: -2.3px;
        
          /* 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-64: 64px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px;
        }