warp___style_reference:
  info: "> Deep-space command shell — một buồng lái obsidian mờ đục, nơi mỗi pixel đều có giá trị và màu sắc là một tín hiệu hiếm hoi, mang ý nghĩa."

  theme: "dark"

  info: "Warp vận hành trong một vũ trụ than chì sâu thẳm: canvas gần như đen (#121212) được xếp lớp với các bề mặt sáng hơn một cách tinh tế (#1e1e1d, #353534) và không có shadow — độ cao được truyền tải hoàn toàn qua các bước màu nền. Typeface chính, Matter, đảm nhận toàn bộ trọng trách biểu cảm: negative tracking dày đặc ở kích thước display (-0.04em ở 56-64px) thì thầm sự tự tin thay vì la hét, và các tính năng OpenType tùy chỉnh (cv03, cv04, cv09, cv11) mang đến cảm giác được thiết kế chính xác đến từng chi tiết mà các sans-serif thông thường không có. Màu sắc gần như vắng bóng hoàn toàn — ngoại lệ màu sắc duy nhất, một màu xanh xô thơm dịu (#799c92), chỉ xuất hiện làm điểm nhấn trên các tiêu đề phụ của section, khiến nó trông giống như màu prompt của terminal vô tình lọt vào UI. Ảnh chụp màn hình sản phẩm terminal là hero; giao diện tự tái hiện chính nó như một tài liệu tiếp thị, xóa nhòa ranh giới giữa sản phẩm và trang web."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Void Canvas | `#121212` | `--color-void-canvas` | Nền trang chính, bề mặt chiếm ưu thế bên dưới mọi nội dung |"
    info: "| Obsidian Deep | `#090909` | `--color-obsidian-deep` | Lớp sâu nhất — nav overlays, nền announcement bar |"
    info: "| Charcoal Surface | `#1e1e1d` | `--color-charcoal-surface` | Nền footer, bề mặt hơi nâng cao hơn canvas |"
    info: "| Iron Surface | `#353534` | `--color-iron-surface` | Bề mặt card được nâng lên, nền pill button, interactive containers |"
    info: "| Graphite Lift | `#2f2f2f` | `--color-graphite-lift` | Nav borders, nền dark filled button — interactive fill chính |"
    info: "| Slate Hover | `#40403f` | `--color-slate-hover` | Bề mặt trạng thái hover, overlays hơi nâng cao |"
    info: "| Ash Text | `#868684` | `--color-ash-text` | Body text phụ, link text mờ, hairline borders |"
    info: "| Fog Text | `#afaeac` | `--color-fog-text` | Body text cấp ba, label bị vô hiệu hóa hoặc giảm nhấn mạnh |"
    info: "| Smoke Text | `#e3e2e0` | `--color-smoke-text` | Announcement bar text, code snippet text, subheading ở mức giảm nhấn mạnh |"
    info: "| Warm White | `#faf9f6` | `--color-warm-white` | Text có độ tương phản cao nhất trên nền tối, nền light filled button |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Nav background khi cuộn, download button fill, icon fills |"
    info: "| Terminal Sage | `#799c92` | `--color-terminal-sage` | Gray outline accent cho tags, dividers và các cạnh UI được focus. |"

  tokens___typography:

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    matter___giọng_nói_chính_của_hệ_thống___tất_cả_headings__body_copy__buttons_và_nav_labels__các_tính_năng_opentype_tùy_chỉnh_mang_đến_cho_ký_tự_những_góc_cắt_chính_xác_mà_các_lựa_chọn_thay_thế_thông_thường_không_có__negative_tracking_thay_đổi_từ__0_04em_ở_64px_xuống__0_01em_ở_20px__siết_chặt_display_headline_thành_một_khối_nguyên_khối__weight_400_xử_lý_mọi_thứ_từ_caption_đến_headline_lớn___600_được_sử_dụng_một_cách_tiết_kiệm_để_nhấn_mạnh_____font_matter:
      - "**Thay thế:** General Sans, Manrope hoặc DM Sans"
      - "**Weights:** 400, 600"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px, 56px, 64px"
      - "**Line height:** 0.90–1.56 (dày ở display: 0.90–1.00; thoải mái ở body: 1.40–1.56)"
      - "**Letter spacing:** -0.04em ở 64px, -0.03em ở 56px, -0.02em ở 32-48px, -0.01em ở 20-24px, 0.01em ở 12-14px (tracking hơi mở cho label nhỏ)"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Vai trò:** Giọng nói chính của hệ thống — tất cả headings, body copy, buttons và nav labels. Các tính năng OpenType tùy chỉnh mang đến cho ký tự những góc cắt chính xác mà các lựa chọn thay thế thông thường không có. Negative tracking thay đổi từ -0.04em ở 64px xuống -0.01em ở 20px, siết chặt display headline thành một khối nguyên khối. Weight 400 xử lý mọi thứ từ caption đến headline lớn — 600 được sử dụng một cách tiết kiệm để nhấn mạnh."

    inter___secondary_ui_text___xuất_hiện_trong_body_descriptions_và_headings_bên_trong_ảnh_chụp_màn_hình_ui_sản_phẩm__mang_các_tính_năng_opentype_giống_như_matter_để_duy_trì_sự_hài_hòa_thị_giác__được_sử_dụng_khi_matter_không_có_sẵn_trong_ngữ_cảnh_nhúng_____font_inter:
      - "**Thay thế:** Inter (đã là Google font)"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.00–1.38"
      - "**Letter spacing:** -0.02em ở 16px, -0.014em ở 16px, -0.012em ở 14px"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Vai trò:** Secondary UI text — xuất hiện trong body descriptions và headings bên trong ảnh chụp màn hình UI sản phẩm. Mang các tính năng OpenType giống như Matter để duy trì sự hài hòa thị giác. Được sử dụng khi Matter không có sẵn trong ngữ cảnh nhúng."

    geist_mono___terminal_commands_và_code_snippets____brew_install__cask_warp__được_hiển_thị_trong_hero__kết_xuất_monospaced_củng_cố_bản_sắc_terminal_của_sản_phẩm_____font_geist_mono:
      - "**Thay thế:** JetBrains Mono, Fira Code"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.00"
      - "**Vai trò:** Terminal commands và code snippets — 'brew install --cask warp' được hiển thị trong hero. Kết xuất monospaced củng cố bản sắc terminal của sản phẩm."

    matter_mono_regular___inline_code_và_terminal_output_text_trong_ngữ_cảnh_văn_xuôi___khác_biệt_với_geist_mono_nhờ_tinh_chỉnh_quang_học_tùy_chỉnh_phù_hợp_với_họ_matter_____font_matter_mono_regular:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.012em"
      - "**Vai trò:** Inline code và terminal output text trong ngữ cảnh văn xuôi — khác biệt với Geist Mono nhờ tinh chỉnh quang học tùy chỉnh phù hợp với họ Matter."

    matter_regular___matter_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_matter_regular:
      - "**Weights:** 400, 600"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px, 56px, 64px"
      - "**Line height:** 0.9, 1, 1.1, 1.12, 1.15, 1.19, 1.2, 1.35, 1.38, 1.4, 1.5, 1.56"
      - "**Letter spacing:** -0.04, -0.03, -0.02, -0.01, 0.01, 0.1, 0.2"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Vai trò:** Matter Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    matter_medium___matter_medium___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_matter_medium:
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 20px, 22px"
      - "**Line height:** 1, 1.14, 1.2"
      - "**Letter spacing:** 0.001"
      - "**Vai trò:** Matter Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    dm_mono___dm_mono___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_dm_mono:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.4"
      - "**Vai trò:** DM Mono — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 1.2px | `--text-caption` |"
      info: "| body-sm | 14px | 1.38 | -0.2px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.19px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.35 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.1 | -0.96px | `--text-heading-lg` |"
      info: "| display | 64px | 0.9 | -2.56px | `--text-display` |"

  tokens___spacing___shapes:

    density: "thoải mái"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| badges | 200px |"
      info: "| images | 10px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"
      info: "| largeCards | 20px |"
      info: "| pillButtons | 50px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(18, 18, 18, 0.2) 0px 0px 16px 0px` | `--shadow-md` |"

    layout:

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

  components:

    primary_download_button:
      vai_trò: "CTA có mức độ ưu tiên cao nhất — hành động tải xuống"

      info: "Nền #ffffff, text #121212 (hoặc gần đen), border-radius 6px, padding 12px 20px. Matter weight 600 ở 16px. Xuất hiện trong nav và hero. Màu trắng trên nền gần đen khiến đây là interactive element có độ tương phản cao duy nhất có thể nhìn thấy ngay lập tức."

    dark_filled_button:
      vai_trò: "Các hành động phụ trong bảng UI tối"

      info: "Nền #2f2f2f, text #faf9f6, không có border nhìn thấy được, border-radius 4px, padding 8px 12px. Matter weight 400 ở 14px. Được sử dụng bên trong terminal product UI cho các hành động phụ. Subtle box-shadow: rgba(18,18,18,0.2) 0 0 16px."

    ghost_surface_button:
      vai_trò: "Các hành động cấp ba trên nền tối"

      info: "Nền rgba(255,255,255,0.04), fill gần như vô hình, border-radius 4px, padding 8px 12px. Text #faf9f6. Được sử dụng cho các hành động có mức độ nhấn mạnh thấp cần vùng click target mà không có trọng lượng thị giác."

    pill_icon_button:
      vai_trò: "Điều khiển chuyển đổi hoặc chế độ"

      info: "Nền #353534, text/icon #afaeac, border-radius 50px, padding 10px. Các nút tròn hoặc tỷ lệ khung hình hẹp cho các điều khiển UI chrome như view toggles. Icon đơn sắc ở độ sáng giảm."

    code_snippet_block:
      vai_trò: "Hiển thị lệnh inline trong hero"

      info: "Nền #353534, text #e3e2e0, font Geist Mono 400 16px, border-radius 10px, padding 12px 16px. Hiển thị 'brew install --cask warp' dưới dạng lệnh có thể sao chép. Icon button cho hành động copy ở cạnh cuối."

    primary_feature_card:
      vai_trò: "Card nội dung chính trong suốt các feature sections"

      info: "Nền #121212, border-radius 16px, không border, không shadow, padding 0 (nội dung bên trong tự xử lý padding riêng). Được sử dụng trong 12+ trường hợp. Nội dung tràn ra các cạnh card — hình ảnh được giới hạn bởi radius, không phải inset padding."

    elevated_content_card:
      vai_trò: "Container nâng cao phụ trong một section"

      info: "Nền #353534, border-radius 20px, không shadow, không border. Cao hơn canvas một bậc trong ngăn xếp bề mặt — được sử dụng cho dropdown/panel containers trong ảnh chụp màn hình sản phẩm."

    padded_inner_card:
      vai_trò: "Sub-container nội dung văn bản"

      info: "Nền #1e1e1d, border-radius 10px, padding 16px tất cả các cạnh. Được sử dụng cho các khối văn bản có cấu trúc như panel 'Problem Statement' trong giao diện ảnh chụp màn hình sản phẩm."

    announcement_bar:
      vai_trò: "Thanh thông báo đầu trang"

      info: "Nền #090909 (gần như đen tuyền), text #e3e2e0 ở 14px Matter weight 400, link ở #faf9f6 có gạch chân. Full-width, chiều cao 40px. Một dòng văn bản và link duy nhất tạo ra footprint tối thiểu."

    navigation_bar:
      vai_trò: "Điều hướng trang chính"

      info: "Nền #ffffff (khi cuộn) hoặc trong suốt, chiều cao ~48px. Logo bên trái, nav links ở giữa bằng Matter Medium 16px màu #868684, CTA buttons bên phải. Nav links sử dụng 'Book a demo' dưới dạng ghost text và 'Download for Mac' dưới dạng primary white-fill. backdrop-filter: blur(20px) khi cuộn."

    section_eyebrow_label:
      vai_trò: "Đánh dấu danh mục feature section"

      info: "Text #799c92, Matter weight 400, 14-16px, letter-spacing 0.1em (tracking rộng). Được đặt phía trên section headings. Màu sắc duy nhất trong hệ thống — hoạt động giống như con trỏ terminal prompt chảy vào bản sao."

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

      info: "Nền #121212 (canvas), logo ở #868684 đến #afaeac (desaturated, fill độ tương phản thấp). Full-width horizontal flex, logo căn giữa, không có borders hoặc dividers. Density: nhỏ gọn, khoảng cách 12-16px giữa các logo."

  do_s_and_don_ts:

    do:
      - "Sử dụng #121212 làm canvas trang mặc định — mọi section thiếu override cụ thể sẽ kế thừa nền này."
      - "Chỉ áp dụng Terminal Sage (#799c92) cho eyebrow/subheading text phía trên tiêu đề section — không bao giờ dùng làm màu button, nền hoặc trang trí."
      - "Đặt display headings (48px+) ở Matter weight 400 với letter-spacing -0.03em đến -0.04em — negative tracking ở các kích thước này là bắt buộc, không phải tùy chọn."
      - "Nâng cấp bề mặt theo từng bước chỉ bằng màu nền: #121212 → #1e1e1d → #353534. Không bao giờ sử dụng borders hoặc shadows để phân cách các section đồng phẳng."
      - "Sử dụng border-radius 16px cho tất cả feature cards, 4px cho tất cả rectangular buttons và 50px cho pill/circular controls — ba radius này bao phủ 90% UI components."
      - "Kết xuất tất cả terminal commands và code samples bằng Geist Mono 400 16px trên nền #353534 với text #e3e2e0."
      - "Giữ nút tải xuống màu trắng (#ffffff) chỉ dành riêng cho primary navigation CTAs — đây là element có độ tương phản tối đa duy nhất và sẽ bị loãng nếu tái sử dụng."

    don_t:
      - "Không bao giờ giới thiệu thêm màu sắc nào ngoài Terminal Sage (#799c92) — hệ thống có chủ đích gần như đơn sắc và một hue thứ hai phá vỡ sự kiềm chế lấy cảm hứng từ terminal."
      - "Không sử dụng box shadows hoặc drop shadows trên cards hoặc sections — chiều sâu được truyền tải qua các bước màu bề mặt, không phải hiệu ứng độ cao."
      - "Tránh font weights trên 600 cho Matter — hệ thống type sống trong phạm vi 400-600; weights nặng hơn tạo ra nhiễu thị giác trên nền tối."
      - "Không sử dụng border-radius trên 20px cho cards và không bao giờ áp dụng góc tròn (50px+) cho rectangular content containers — pill radius được dành riêng cho icon-button controls."
      - "Không bao giờ đặt nền sáng (#faf9f6 hoặc #ffffff) phía sau toàn bộ sections như một lựa chọn thiết kế — nền sáng chỉ xuất hiện trên nav bar khi cuộn và primary download button fill."
      - "Không thêm decorative gradients, glows hoặc colored backgrounds vào content sections — ảnh aurora trong hero là màu sắc không khí duy nhất; UI components vẫn giữ achromatic."
      - "Tránh đặt body hoặc paragraph text trên 18px — Matter ở 16px là kích thước đọc thoải mái; body text lớn hơn phá vỡ mật độ dày đặc, hướng đến thông tin của bố cục."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Deep Base | `#090909` | Sàn tuyệt đối — nav overlay backgrounds, announcement bar |"
    info: "| 1 | Canvas | `#121212` | Nền trang chính được sử dụng trên hầu hết các section |"
    info: "| 2 | Elevated Card | `#1e1e1d` | Nền footer, vùng nội dung hơi nâng cao |"
    info: "| 3 | Raised Surface | `#353534` | Card backgrounds, pill button fills, dropdown containers |"
    info: "| 4 | Interactive Surface | `#40403f` | Trạng thái hover, focused overlay containers |"

  elevation:

    - "**Button (dark filled):** `rgba(18, 18, 18, 0.2) 0px 0px 16px 0px`"

  imagery:

    info: "Warp sử dụng sự pha trộn chặt chẽ giữa ảnh chụp màn hình sản phẩm và nhiếp ảnh không khí. Hero có nền tối full-bleed với nhiếp ảnh phong cách cực quang (xanh đậm, xanh lục, đỏ trên nền trời đen) đóng vai trò là tâm trạng môi trường — không phải nội dung theo nghĩa đen. Cửa sổ terminal sản phẩm là đối tượng hero thực sự, được kết xuất dưới dạng ảnh chụp màn hình macOS chrome thực tế với traffic-light controls, tab bars và trạng thái UI thực tế. Điều này xóa nhòa ranh giới giữa tiếp thị và sản phẩm: giao diện chính là hero. Bên dưới fold, ảnh chụp màn hình sản phẩm được chứa trong các card bo tròn tối (16px radius) và được hiển thị ở góc nhẹ hoặc dưới dạng panel cắt. Video thumbnails xuất hiện với lớp phủ nút play ở giữa trên mặt nạ gradient tối. Không có ảnh chụp lối sống, không có minh họa trừu tượng — hoặc UI sản phẩm thực tế hoặc phong cảnh tối không khí. Icons tối giản, được outline ở ~16-20px, đơn sắc (#868684), kiểu nét đơn trọng lượng. Logo đối tác tích hợp (Docker, GitHub, Asana, v.v.) được desaturated thành tông màu Ash Text (#868684)."

  layout:

    info: "Max-width ~1200px căn giữa, nhưng hero sections là full-bleed tối. Màn hình đầu tiên là hero tối full-viewport với ngăn xếp headline căn giữa, một hàng CTA hai nút (white filled + code snippet block cạnh nhau) và ảnh chụp màn hình sản phẩm bên dưới cạnh fold. Các section xen kẽ giữa vùng canvas #121212 full-bleed và vùng footer #1e1e1d có sự khác biệt nhẹ — không có dải sáng/tối xen kẽ. Sắp xếp nội dung chủ yếu là các ngăn xếp căn giữa cho nhóm headline+body+CTA, chuyển sang bố cục hai cột text-left / product-right không đối xứng cho feature sections (tỷ lệ 55/45). Feature detail sections sử dụng danh sách đánh số bên trái với panel ảnh chụp màn hình sản phẩm bên phải. Nhịp điệu dọc của section sử dụng khoảng cách ~80px. Điều hướng là thanh trên cùng cố định cao ~48px với logo, nav links ở giữa và CTA buttons kép bên phải. Một announcement bar full-width nằm phía trên nav, thêm ~32px vào chrome trên cùng."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #faf9f6"
    - "text (secondary): #868684"
    - "text (muted): #afaeac"
    - "background (canvas): #121212"
    - "border / divider: #2f2f2f"
    - "accent (eyebrow): #799c92"
    - "primary action: #2f2f2f (filled action)"

    example_component_prompts:

    - "**Hero Section**: Full-bleed nền #121212. Headline căn giữa 'The best terminal to build with agents' ở 56px Matter weight 400 màu #faf9f6 letter-spacing -0.03em line-height 1.0. Subtext ở 18px Matter weight 400 #868684. Bên dưới: white button (nền #ffffff, text #121212, radius 6px, padding 12px 20px, 'Download for Mac') cạnh một code block (nền #353534, text #e3e2e0, Geist Mono 16px, radius 10px, padding 12px 16px)."

    - "**Feature Section Opener**: Eyebrow label 'Prompt to shippable feature' ở #799c92, Matter 400 14px, letter-spacing 0.1em. Bên dưới là heading 'The editor features you need to work with agents' ở 40px Matter weight 400 #faf9f6 letter-spacing -0.02em. Nền section #121212."

    - "**Feature Card**: Nền #121212, border-radius 16px, không shadow, không border. Hình ảnh lấp đầy card đến các cạnh (được che bởi radius). Nội dung văn bản bên dưới hình ảnh: heading 16px Matter weight 600 #faf9f6, body 14px Matter weight 400 #868684, element gap 8px."

    - "**Pill Control Button**: Nền #353534, icon/text #afaeac, border-radius 50px, padding 10px. Không border. Được sử dụng cho view-toggle hoặc mode-switch controls trong terminal chrome."

    - "**Trust Logo Bar**: Nền #121212, full-width flex row, logo được kết xuất ở #868684 fill. Text label phía trên: 'Trusted by over 700,000 developers' ở 14px Matter 400 #868684, căn giữa. Khoảng cách hàng logo 24px, không có borders."

  motion_system:

    info: "Transitions chạy ở 0.4s cho các thay đổi trạng thái (màu sắc, độ mờ) sử dụng cubic-bezier(0.44, 0, 0.56, 1) — một ease-in-out giảm tốc nhẹ, cảm giác cơ học hơn là nảy. Các microinteractions nhanh (thay đổi màu hover trên links) sử dụng 0.15s ease. Thời lượng 0.4s dài bất thường cho trạng thái hover, mang lại cho các tương tác một chất lượng có chủ đích, nặng nề phù hợp với nhịp điệu của ứng dụng terminal. Chỉ transition màu sắc, độ mờ, text-decoration-color và text-underline-offset — không bao giờ transform hoặc scale khi hover cho các phần tử điều hướng."

  similar_brands:

    - "**Vercel** — Bảng màu tối achromatic gần như giống hệt với canvas #000000/#111111, white primary CTA và ảnh chụp màn hình sản phẩm làm hero object"
    - "**Linear** — Cùng UI tối độ tương phản cao với display type negative tracking dày đặc và màu nhấn chromatic đơn trên hệ thống đơn sắc"
    - "**Railway** — Chủ đề tối dành cho developer tool với terminal product UI làm hero tiếp thị và sử dụng brand color tối thiểu"
    - "**Fig / Warp competitors** — Thẩm mỹ terminal/devtool: canvas tối, code blocks monospaced được inline vào marketing copy và lưới logo desaturated để làm bằng chứng xã hội"
    - "**Raycast** — Cùng mẫu sử dụng typeface Matter, bề mặt tối với độ sâu surface-color-step (không shadow) và chính sách chromatic accent hạn chế"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-canvas: #121212;
          --color-obsidian-deep: #090909;
          --color-charcoal-surface: #1e1e1d;
          --color-iron-surface: #353534;
          --color-graphite-lift: #2f2f2f;
          --color-slate-hover: #40403f;
          --color-ash-text: #868684;
          --color-fog-text: #afaeac;
          --color-smoke-text: #e3e2e0;
          --color-warm-white: #faf9f6;
          --color-pure-white: #ffffff;
          --color-terminal-sage: #799c92;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter: 'Matter', 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-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-matter-mono-regular: 'Matter Mono Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-matter-regular: 'Matter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter-medium: 'Matter Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 1.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --tracking-body-sm: -0.2px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.19px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.96px;
          --text-display: 64px;
          --leading-display: 0.9;
          --tracking-display: -2.56px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16.1px;
          --radius-2xl-2: 20px;
          --radius-full: 50px;
          --radius-full-2: 200px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-badges: 200px;
          --radius-images: 10px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
          --radius-largecards: 20px;
          --radius-pillbuttons: 50px;
        
          /* Shadows */
          --shadow-md: rgba(18, 18, 18, 0.2) 0px 0px 16px 0px;
        
          /* Surfaces */
          --surface-deep-base: #090909;
          --surface-canvas: #121212;
          --surface-elevated-card: #1e1e1d;
          --surface-raised-surface: #353534;
          --surface-interactive-surface: #40403f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-canvas: #121212;
          --color-obsidian-deep: #090909;
          --color-charcoal-surface: #1e1e1d;
          --color-iron-surface: #353534;
          --color-graphite-lift: #2f2f2f;
          --color-slate-hover: #40403f;
          --color-ash-text: #868684;
          --color-fog-text: #afaeac;
          --color-smoke-text: #e3e2e0;
          --color-warm-white: #faf9f6;
          --color-pure-white: #ffffff;
          --color-terminal-sage: #799c92;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter: 'Matter', 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-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-matter-mono-regular: 'Matter Mono Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-matter-regular: 'Matter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter-medium: 'Matter Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 1.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --tracking-body-sm: -0.2px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.19px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.96px;
          --text-display: 64px;
          --leading-display: 0.9;
          --tracking-display: -2.56px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16.1px;
          --radius-2xl-2: 20px;
          --radius-full: 50px;
          --radius-full-2: 200px;
        
          /* Shadows */
          --shadow-md: rgba(18, 18, 18, 0.2) 0px 0px 16px 0px;
        }