depot___style_reference:
  info: "> Một terminal dark server-rack. Giao diện developer console gần như đen tuyền, nơi một đèn LED xanh báo hiệu hành động và phần còn lại của UI chỉ thì thầm trong tông graphite."

  theme: "dark"

  info: "Depot sử dụng ngôn ngữ developer console: một canvas gần như đen, đường viền mảnh pha xanh lục, và một điểm nhấn xanh lục duy nhất thắp sáng nút bấm duy nhất trên trang. Giao diện giống như một terminal đã trưởng thành thành một marketing site — nhỏ gọn, gần monospace, và tự tin trong sự tiết chế. Typography chia thành ba họ Red Hat: Display cho headline bó chặt với tracking âm, Text cho body copy có letter-spacing nhẹ, và Mono cho code và label kiểu terminal, tạo nên một hệ thống typographic ba tông màu. Các bề mặt xếp chồng với những nâng cấp gần như không thể nhận thấy của tông gần đen, được phân cách bằng đường viền mảnh 1px với ánh sáng xanh lục ambient nhẹ — không có drop shadow, chỉ có inset top highlight. Màu sắc xuất hiện một cách tiết kiệm: xanh lục cho hành động và trạng thái, xanh dương cho inline link, và một tông violet nhẹ cho điểm nhấn trang trí thứ cấp. Toàn bộ hệ thống mang phong cách 'cơ sở hạ tầng đáng tin cậy' hơn là 'ứng dụng tiêu dùng thú vị'."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Signal Green | `#71d083` | `--color-signal-green` | Điểm nhấn xanh lục hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |"
    info: "| LED Green | `#366740` | `--color-led-green` | Điểm nhấn xanh lục hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp lên màu CTA chính |"
    info: "| Moss Border | `#2d5736` | `--color-moss-border` | Đường viền xanh lục nhẹ cho card được làm nổi bật và trạng thái thông báo — giữ chủ đề xanh lục ở cường độ thấp |"
    info: "| Forest Wash | `#1d3a24` | `--color-forest-wash` | Nền card pha màu cho panel nổi bật/đặc trưng — bề mặt xanh đậm làm nổi bật nội dung được chú ý |"
    info: "| Fern Ground | `#1b2a1e` | `--color-fern-ground` | Màu trung tính hỗ trợ cho UI thứ cấp, divider và label mờ. Không nâng cấp lên màu CTA chính |"
    info: "| Link Blue | `#70b8ff` | `--color-link-blue` | Điểm nhấn xanh dương hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp lên màu CTA chính |"
    info: "| Lilac Accent | `#baa7ff` | `--color-lilac-accent` | Điểm nhấn icon trang trí và highlight thứ cấp — violet nhẹ cho sự đa dạng thị giác trong icon tính năng và điểm nhấn UI tinh tế |"
    info: "| Plum Edge | `#291f43` | `--color-plum-edge` | Đường viền violet nhẹ cho tag/label — màu viền thứ cấp cho metadata được nhóm |"
    info: "| Iris Border | `#473876` | `--color-iris-border` | Điểm nhấn link và body violet trung bình — dùng cho inline code link và viền label được nhóm |"
    info: "| Lavender Mist | `#e2ddfe` | `--color-lavender-mist` | Điểm nhấn văn bản oải hương nhạt cho inline label được làm nổi bật và chạm typography trang trí |"
    info: "| Carbon | `#04040b` | `--color-carbon` | Canvas trang — nền gần đen sâu nhất mà mọi thứ đặt trên đó |"
    info: "| Graphite | `#121113` | `--color-graphite` | Nâng cấp bề mặt đầu tiên — nền card, bề mặt nav header, panel nâng cao |"
    info: "| Obsidian | `#1a191b` | `--color-obsidian` | Nâng cấp bề mặt thứ hai — card lồng nhau, panel thứ cấp, bề mặt footer |"
    info: "| Slate | `#232225` | `--color-slate` | Màu trung tính hỗ trợ cho UI thứ cấp, divider và label mờ. Không nâng cấp lên màu CTA chính |"
    info: "| Basalt | `#2b292d` | `--color-basalt` | Đường viền và divider — màu hairline chính phân cách bề mặt và xác định cạnh card |"
    info: "| Iron | `#323035` | `--color-iron` | Màu trung tính hỗ trợ cho UI thứ cấp, divider và label mờ. Không nâng cấp lên màu CTA chính |"
    info: "| Pewter | `#3c393f` | `--color-pewter` | Màu trung tính hỗ trợ cho UI thứ cấp, divider và label mờ. Không nâng cấp lên màu CTA chính |"
    info: "| Steel | `#49474e` | `--color-steel` | Đường viền xám trung bình và nét icon mờ — đường cấu trúc tinh tế |"
    info: "| Fog | `#7c7a85` | `--color-fog` | Văn bản body mờ, văn bản footer, mục nav không hoạt động, bản sao thứ cấp |"
    info: "| Silver | `#b5b2bc` | `--color-silver` | Văn bản thứ cấp, văn bản placeholder, văn bản nút trên nền tối, đường viền icon |"
    info: "| Ash | `#eeeef0` | `--color-ash` | Văn bản body chính — màu trắng ngà tương phản cao cho bản sao đọc |"
    info: "| Chalk | `#e5e5e5` | `--color-chalk` | Heading và primary heading — văn bản sáng nhất cho display type |"

  tokens___typography:

    red_hat_display_variable___display_và_heading_type___dùng_ở_48_60px_cho_hero_headline_với_weight_700__ở_36px_cho_section_heading_với_weight_600__tracking_âm_ở_kích_thước_display__0_025em_thắt_chặt_chữ_cái_cho_vẻ_ngoài_nén__công_nghiệp__weight_giảm_xuống_400_500_cho_subheading_và_tiêu_đề_feature_card__thay_thế__inter__space_grotesk____font_red_hat_display_variable:
      - "**Thay thế:** Inter, Space Grotesk"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 14, 16, 18, 20, 36, 48, 60"
      - "**Line height:** 1.00, 1.11, 1.38, 1.40, 1.50"
      - "**Letter spacing:** -0.0250em ở kích thước display (36-60px), 0 ở kích thước body"
      - "**Vai trò:** Display và heading type — dùng ở 48-60px cho hero headline với weight 700, ở 36px cho section heading với weight 600. Tracking âm ở kích thước display (-0.025em) thắt chặt chữ cái cho vẻ ngoài nén, công nghiệp. Weight giảm xuống 400-500 cho subheading và tiêu đề feature card. Thay thế: Inter, Space Grotesk"

    red_hat_text_variable___body_và_ui_text___họ_chữ_chính_cho_đoạn_văn__mục_nav__nhãn_nút_và_tất_cả_văn_bản_chức_năng__tracking_dương_0_025em_ở_mọi_kích_thước_là_một_lựa_chọn_đặc_trưng__body_copy_thở_với_letter_spacing_hơi_lỏng__mang_lại_cho_ui_tối_dày_đặc_một_chất_lượng_thoáng_đãng__dễ_đọc__weight_500_600_để_nhấn_mạnh__400_cho_body_mặc_định__thay_thế__inter__ibm_plex_sans____font_red_hat_text_variable:
      - "**Thay thế:** Inter, IBM Plex Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 10, 12, 14, 15, 16, 18, 20"
      - "**Line height:** 1.00, 1.33, 1.40, 1.43, 1.50, 1.56, 1.63"
      - "**Letter spacing:** 0.0250em trên tất cả kích thước"
      - "**Vai trò:** Body và UI text — họ chữ chính cho đoạn văn, mục nav, nhãn nút và tất cả văn bản chức năng. Tracking dương (0.025em) ở mọi kích thước là một lựa chọn đặc trưng: body copy thở với letter-spacing hơi lỏng, mang lại cho UI tối dày đặc một chất lượng thoáng đãng, dễ đọc. Weight 500-600 để nhấn mạnh, 400 cho body mặc định. Thay thế: Inter, IBM Plex Sans"

    red_hat_mono_variable___code_snippet__label_kiểu_terminal__chỉ_báo_trạng_thái_build___giọng_monospace_cho_nội_dung_ngữ_cảnh_developer__xuất_hiện_trong_phần_so_sánh_workflow_ci_cho_tên_job_như__job_picked_up___install_dependencies__thay_thế__jetbrains_mono__ibm_plex_mono____font_red_hat_mono_variable:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 14, 18"
      - "**Line height:** 1.43, 1.56"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Code snippet, label kiểu terminal, chỉ báo trạng thái build — giọng monospace cho nội dung ngữ cảnh developer. Xuất hiện trong phần so sánh workflow CI cho tên job như 'Job picked up', 'Install dependencies'. Thay thế: JetBrains Mono, IBM Plex Mono"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.025px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | 0.025px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.025px | `--text-body` |"
      info: "| subheading | 18px | 1.56 | 0.025px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | 0.025px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.11 | -0.9px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.11 | -1.2px | `--text-heading-lg` |"
      info: "| display | 60px | 1 | -1.5px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "8px"

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

    spacing_scale:

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

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 2px |"
      info: "| tags | 2px |"
      info: "| cards | 6px |"
      info: "| icons | 2px |"
      info: "| inputs | 6px |"
      info: "| buttons | 6px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Nút được tô màu duy nhất trên trang — thúc đẩy đăng ký và dùng thử"

      info: "Tô màu Signal Green (#71d083), viền LED Green (#366740) 1px, chữ Carbon (#04040b) weight 500, radius 6px, padding 10px 20px. Cỡ chữ nhỏ (14px) với tracking 0.025em từ Red Hat Text. Chữ tối trên nền xanh sáng tạo độ tương phản tối đa — nút phát sáng trên canvas tối."

    ghost_outline_button:
      vai_trò: "Hành động thứ cấp — 'Talk to a human', các đường dẫn thay thế"

      info: "Nền trong suốt, viền 1px Basalt (#2b292d), chữ Ash (#eeeef0) weight 500, radius 6px, padding 10px 20px. Khi hover, viền sáng lên Pewter (#3c393f). Cùng kích thước và typography với primary button để chúng kết hợp đồng đều."

    navigation_button_inactive:
      vai_trò: "Nút đăng nhập và tiện ích trong header"

      info: "Nền tối nhẹ Obsidian (#1a191b), viền 1px Basalt (#2b292d), chữ Ash (#eeeef0) 14px weight 500, radius 6px, padding 8px 16px. Gần như vô hình — được thiết kế để lùi lại để CTA 'Get started' chiếm ưu thế."

    top_notification_banner:
      vai_trò: "Thanh thông báo toàn trang (ví dụ: ra mắt sản phẩm mới)"

      info: "Dải full-bleed Carbon (#04040b) với viền dưới 1px Moss Border (#2d5736). Chữ 13-14px Ash với tiền tố emoji lấp lánh. Link bên trong dùng Link Blue (#70b8ff). Chiều cao ~40px, nội dung căn giữa."

    feature_card:
      vai_trò: "Card khả năng sản phẩm (Depot CI, Container Builds, GitHub Actions)"

      info: "Nền Graphite (#121113), viền 1px Basalt (#2b292d), radius 6px, padding 24px. Label trên cùng ở dạng chữ hoa caption (12px, letter-spacing 0.025em, weight 500) màu Signal Green cho card đang hoạt động/nổi bật hoặc Fog xám cho card thứ cấp. Tiêu đề Chalk 18-20px weight 600. Nội dung body Silver 14-15px. Card đang hoạt động có thể có viền Moss Border (#2d5736) thay vì Basalt."

    ci_workflow_comparison_panel:
      vai_trò: "So sánh build log song song (GitHub Actions vs Depot CI)"

      info: "Container tối Graphite (#121113) với viền 1px Basalt, radius 6px. Thanh header Obsidian với label section Red Hat Mono 14px. Mỗi cột workflow được phân cách bằng hairline 1px Iron (#323035). Hàng job dùng Red Hat Mono cho tên job, Silver cho văn bản trạng thái, và Signal Green hoặc Fog cho chỉ báo trạng thái (đang chờ/thành công)."

    customer_logo_grid:
      vai_trò: "Bằng chứng xã hội — logo công ty trong lưới 5 cột"

      info: "Logo hiển thị bằng Chalk (#e5e5e5) hoặc Silver (#b5b2bc) trên nền Carbon, mỗi logo trong một ô lưới có chiều rộng gần bằng nhau. Dải phân cách ô là hairline 1px Basalt (#2b292d) hoặc trong suốt. Logo nằm ở tỷ lệ tự nhiên, căn giữa theo chiều dọc. Không có card container — lưới phẳng."

    section_header:
      vai_trò: "Headline khẩu hiệu và tiêu đề phần"

      info: "Display type Red Hat Display weight 700, kích thước 48-60px, letter-spacing -0.025em (-1.2px đến -1.5px), line-height 1.0-1.11. Chữ Chalk (#e5e5e5). Không có văn bản lông mày hoặc trang trí phụ đề — headline đứng một mình với tác động tối đa."

    inline_link:
      vai_trò: "Link văn bản trong đoạn văn và mô tả tính năng"

      info: "Chữ Link Blue (#70b8ff) ở kích thước body (16px), weight 400-500, không gạch chân mặc định. Có thể bao gồm ký tự mũi tên nhẹ (→). Trong ngữ cảnh code/mono, xuất hiện ở Iris Border (#473876) hoặc Lilac Accent (#baa7ff)."

    tag_label:
      vai_trò: "Label danh mục, huy hiệu trạng thái, metadata pill"

      info: "Chữ hoa nhỏ Red Hat Text 12px weight 500, letter-spacing 0.025em. Nền Fern Ground (#1b2a1e) hoặc trong suốt, viền 1px Moss Border (#2d5736) hoặc Plum Edge (#291f43), radius 2px, padding 4px 8px. Chữ Signal Green hoặc Lavender Mist tùy loại tag."

    nav_menu_item:
      vai_trò: "Link điều hướng chính trong header"

      info: "Red Hat Text 14px weight 500 Ash (#eeeef0), không nền mặc định. Trạng thái đang hoạt động/hover có thể hiển thị chỉ báo dropdown tinh tế (chevron). Menu dropdown xuất hiện dưới dạng panel tối Graphite với viền Basalt, radius 6px."

    status_indicator:
      vai_trò: "Chấm trạng thái build và chỉ báo trạng thái hệ thống"

      info: "Vòng tròn nhỏ 6-8px Signal Green (#71d083) cho thành công/đang hoạt động, Fog (#7c7a85) cho đang chờ, hoặc đỏ nhẹ cho trạng thái lỗi. Dùng inline với văn bản Red Hat Mono trong panel workflow CI."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng Signal Green (#71d083) cho primary CTA — đây là phần tử duy nhất nên thu hút sự chú ý thị giác trên bất kỳ màn hình nào"
      - "Duy trì hệ thống ba typographic: Red Hat Display cho headline, Red Hat Text cho body, Red Hat Mono cho code/trạng thái — không bao giờ thay thế cái này bằng cái khác"
      - "Áp dụng -0.025em letter-spacing cho tất cả kích thước display (36px+) và +0.025em cho tất cả kích thước body (10-20px) — sự tương phản tracking xác định cá tính typographic"
      - "Xếp chồng bề mặt bằng thang năm cấp trung tính: Carbon (#04040b) → Graphite (#121113) → Obsidian (#1a191b) → Slate (#232225), mỗi cấp viền 1-2px Basalt (#2b292d)"
      - "Dùng radius 6px cho button và card, 2px cho tag và nav item — bán kính nhỏ là lựa chọn hình học xác định, không phải sơ suất"
      - "Phân cách section bằng viền hairline 1px Basalt (#2b292d) thay vì chỉ spacing — hairline tạo cảm giác developer console"
      - "Loại bỏ hoàn toàn shadow — dùng inset white highlight (rgba(255,255,255,0.06) 0px 1px 0px 0px inset) để xác định cạnh bề mặt thay vì drop shadow"

    không_nên_làm:
      - "Không bao giờ dùng Signal Green (#71d083) cho bất kỳ thứ gì khác ngoài fill primary CTA — pha loãng qua thang xanh lục (#366740, #2d5736, #1d3a24, #1b2a1e) cho mục đích sử dụng thứ cấp"
      - "Không bao giờ áp dụng drop shadow — hệ thống thiết kế cố tình dựa vào viền hairline và thay đổi cấp bề mặt, không phải shadow độ cao"
      - "Không bao giờ dùng border radius lớn (12px+) — bán kính tối đa trong hệ thống là 6px, và thậm chí 10px chỉ xuất hiện hiếm khi. Hình pill lớn hoặc card bo tròn phá vỡ bản sắc"
      - "Không bao giờ trộn hướng letter-spacing — body text luôn có tracking dương (+0.025em) và display text luôn có tracking âm (-0.025em). Không bao giờ làm phẳng cả hai về normal"
      - "Không bao giờ dùng Link Blue (#70b8ff) cho button hoặc CTA — nó được dành riêng cho inline reading link. Phần tử hành động phải là xanh lục hoặc trung tính"
      - "Không bao giờ giới thiệu màu nhấn mới mà không có lý do chính đáng — hệ thống được xây dựng trên sự thống trị của xanh lục với xanh dương cho link và violet cho trang trí cấp ba. Thêm màu sắc thứ tư phá vỡ bản sắc 3 màu"
      - "Không bao giờ dùng trắng tinh khiết (#ffffff) cho văn bản — luôn dùng Chalk (#e5e5e5) hoặc Ash (#eeeef0) để có độ ấm nhẹ và giảm độ chói tương phản"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Carbon Canvas | `#04040b` | Nền trang — màu gần đen sâu nhất mà mọi nội dung đặt trên đó |"
    info: "| 1 | Graphite Card | `#121113` | Bề mặt nâng cao đầu tiên — feature card, content panel, nav dropdown |"
    info: "| 2 | Obsidian Panel | `#1a191b` | Bề mặt thứ cấp — panel lồng nhau, divider section, bề mặt footer |"
    info: "| 3 | Slate Interactive | `#232225` | Bề mặt tương tác — fill button, trường nhập liệu, trạng thái hover |"
    info: "| 4 | Fern Ground | `#1b2a1` | Bề mặt highlight pha màu — nền card nổi bật/đang hoạt động với bản sắc xanh lục |"

  elevation:

    info: "Hệ thống thiết kế cố tình tránh drop shadow. Độ cao được truyền đạt qua ba kỹ thuật duy nhất: (1) ngăn xếp bề mặt năm cấp, mỗi cấp sáng hơn cấp trước 3-8%, (2) viền hairline 1px Basalt (#2b292d) xác định cạnh bề mặt, và (3) một inset top highlight duy nhất (rgba(255,255,255,0.06) 0px 1px 0px 0px inset) trên các phần tử chọn lọc để gợi ý nguồn sáng từ trên xuống. Điều này tạo cảm giác của một terminal tối phẳng thay vì hệ thống card skeuomorphic."

  imagery:

    info: "Hình ảnh tối giản và tập trung vào sản phẩm. Trang web dựa vào ảnh chụp màn hình UI và code block kiểu terminal thay vì nhiếp ảnh hoặc minh họa. Panel so sánh workflow CI là tài sản trực quan chính — nó hiển thị dữ liệu build log thực ở định dạng song song, biến sản phẩm thành hero. Logo khách hàng xuất hiện dưới dạng wordmark đơn sắc phẳng Chalk/Silver trên canvas tối, được sắp xếp trong lưới 5 cột sạch sẽ với dải phân cách hairline. Không có nhiếp ảnh trang trí, không có hình ảnh lối sống, không có 3D render. Icon có nét mảnh và tối giản, dùng Signal Green, Lilac Accent hoặc Silver. Mật độ trực quan tổng thể là văn bản chiếm ưu thế với ảnh chụp màn hình UI sản phẩm thực hiện công việc trực quan nặng nhọc."

  layout:

    info: "Section toàn chiều rộng với nội dung được giới hạn trong container căn giữa ~1200px max-width. Hero là văn bản căn trái không có hình ảnh hero — headline 'Build faster. Waste less time.' neo bên trái với CTA bên dưới, để panel so sánh sản phẩm nằm trực tiếp bên dưới làm bằng chứng trực quan. Nhịp điệu section được xác định bằng khoảng cách dọc 64px rộng rãi giữa các section chính, với mỗi section chảy liền mạch vào section tiếp theo trên cùng một canvas Carbon (không có dải sáng/tối xen kẽ). Feature card xuất hiện trong lưới 3 cột cho điểm nổi bật khả năng, sau đó panel workflow CI trải dài toàn chiều rộng cho bản demo sản phẩm. Phần logo khách hàng sử dụng lưới 5 cột phẳng với dải phân cách hairline dọc và ngang tạo ra các ô riêng lẻ. Điều hướng là thanh trên cùng cố định với logo bên trái, menu ở giữa và nút xác thực bên phải. Mật độ tổng thể thoải mái — các section thở, nhưng bề mặt tối và bán kính chặt chẽ ngăn nó cảm thấy thưa thớt."

  agent_prompt_guide:

    primary_action: "không có màu CTA riêng biệt"
  quick_color_reference:

    - "**Nền (canvas)**: #04040b (Carbon)"
    - "**Bề mặt card**: #121113 (Graphite)"
    - "**Viền/hairline**: #2b292d (Basalt)"
    - "**Văn bản chính**: #e5e5e5 (Chalk) cho heading, #eeeef0 (Ash) cho body"
    - "**Văn bản mờ**: #7c7a85 (Fog)"
    - "**Điểm nhấn/thương hiệu**: #71d083 (Signal Green)"
    - "**Link**: #70b8ff (Link Blue)"
    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý nút trung tính đã trích xuất thay vì phát minh ra màu CTA được tô."

  example_component_prompts:


    - "**Feature Card**: Nền Graphite (#121113), viền 1px Basalt (#2b292d), radius 6px, padding 24px. Label trên cùng ở dạng chữ hoa 12px Red Hat Text weight 500, letter-spacing 0.3px, màu Signal Green. Tiêu đề 20px Red Hat Display weight 600, màu Chalk. Body 14px Red Hat Text weight 400, màu Silver, line-height 1.43."

    - "**CI Workflow Panel**: Nền Graphite (#121113), viền 1px Basalt, radius 6px. Thanh header Obsidian (#1a191b) với label 'CI WORKFLOW' Red Hat Mono 14px chữ hoa. Hai cột được phân cách bằng hairline 1px Iron (#323035). Hàng job: Red Hat Mono 14px cho tên job Ash, văn bản trạng thái Silver, chấm Signal Green cho đã hoàn thành, chấm Fog cho đang chờ."

    - "**Customer Logo Grid**: Lưới 5 cột trên canvas Carbon. Mỗi ô có viền 1px Basalt ở bên phải và dưới cùng. Logo hiển thị bằng Chalk (#e5e5e5) ở kích thước tự nhiên, căn giữa theo chiều dọc. Không có nền card — các ô lưới trong suốt. Section padding 64px dọc."

    - "**Tag/Label**: Radius 2px, viền 1px Moss Border (#2d5736), nền Fern Ground (#1b2a1e), padding 4px 8px. Chữ Red Hat Text 12px weight 500, chữ hoa, letter-spacing 0.3px, màu Signal Green."

  typographic_tracking_philosophy:

    info: "Hệ thống sử dụng cách tiếp cận tracking hai hướng đặc biệt tạo ra sự tương phản typographic: body text (10-20px) chạy ở +0.025em (tracking dương) mang lại cho UI tối dày đặc một chất lượng thoáng đãng, dễ đọc — chữ cái thở hơi xa nhau. Display text (36px+) chạy ở -0.025em (tracking âm) thắt chặt headline thành một khối nén, công nghiệp. Sự đảo ngược này ngược lại với hầu hết các hệ thống thiết kế và là lựa chọn đặc trưng của Depot. Không bao giờ làm phẳng cả hai về tracking normal — sự tương phản giữa body mở và display chặt chẽ là điều làm cho typography có chủ đích thay vì mặc định."

  similar_brands:

    - "**Vercel** — Cùng canvas gần đen với phân cách viền hairline, một màu nhấn duy nhất thúc đẩy CTA, và chủ nghĩa tối giản tập trung vào developer với khoảng cách section rộng rãi"
    - "**Linear** — UI sản phẩm developer dark-mode với bán kính nhỏ chính xác (4-8px), hệ thống màu nhấn đơn sắc sống động, và viền hairline siêu chính xác thay thế shadow"
    - "**Railway** — Thẩm mỹ công cụ cơ sở hạ tầng với ngăn xếp bề mặt tối, màu nhấn xanh lục/terminal, và văn bản monospace trong so sánh tính năng"
    - "**PlanetScale** — Marketing cơ sở dữ liệu developer tối với cách tiếp cận đơn nhấn hạn chế, hero căn trái không có hình ảnh, và ảnh chụp màn hình sản phẩm kiểu terminal làm bằng chứng xã hội"
    - "**Fly.io** — Thương hiệu cơ sở hạ tầng dark-mode với các phần tử UI monospace, lưới logo phẳng cho khách hàng, và ngôn ngữ trực quan developer console"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-green: #71d083;
          --color-led-green: #366740;
          --color-moss-border: #2d5736;
          --color-forest-wash: #1d3a24;
          --color-fern-ground: #1b2a1e;
          --color-link-blue: #70b8ff;
          --color-lilac-accent: #baa7ff;
          --color-plum-edge: #291f43;
          --color-iris-border: #473876;
          --color-lavender-mist: #e2ddfe;
          --color-carbon: #04040b;
          --color-graphite: #121113;
          --color-obsidian: #1a191b;
          --color-slate: #232225;
          --color-basalt: #2b292d;
          --color-iron: #323035;
          --color-pewter: #3c393f;
          --color-steel: #49474e;
          --color-fog: #7c7a85;
          --color-silver: #b5b2bc;
          --color-ash: #eeeef0;
          --color-chalk: #e5e5e5;
        
          /* Typography — Font Families */
          --font-red-hat-display-variable: 'Red Hat Display Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-red-hat-text-variable: 'Red Hat Text Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-red-hat-mono-variable: 'Red Hat Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.025px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: 0.025px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.025px;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --tracking-subheading: 0.025px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.025px;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -1.2px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -1.5px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-nav: 2px;
          --radius-tags: 2px;
          --radius-cards: 6px;
          --radius-icons: 2px;
          --radius-inputs: 6px;
          --radius-buttons: 6px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset;
        
          /* Surfaces */
          --surface-carbon-canvas: #04040b;
          --surface-graphite-card: #121113;
          --surface-obsidian-panel: #1a191b;
          --surface-slate-interactive: #232225;
          --surface-fern-ground: #1b2a1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-green: #71d083;
          --color-led-green: #366740;
          --color-moss-border: #2d5736;
          --color-forest-wash: #1d3a24;
          --color-fern-ground: #1b2a1e;
          --color-link-blue: #70b8ff;
          --color-lilac-accent: #baa7ff;
          --color-plum-edge: #291f43;
          --color-iris-border: #473876;
          --color-lavender-mist: #e2ddfe;
          --color-carbon: #04040b;
          --color-graphite: #121113;
          --color-obsidian: #1a191b;
          --color-slate: #232225;
          --color-basalt: #2b292d;
          --color-iron: #323035;
          --color-pewter: #3c393f;
          --color-steel: #49474e;
          --color-fog: #7c7a85;
          --color-silver: #b5b2bc;
          --color-ash: #eeeef0;
          --color-chalk: #e5e5e5;
        
          /* Typography */
          --font-red-hat-display-variable: 'Red Hat Display Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-red-hat-text-variable: 'Red Hat Text Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-red-hat-mono-variable: 'Red Hat Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.025px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: 0.025px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.025px;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --tracking-subheading: 0.025px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.025px;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -1.2px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -1.5px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset;
        }