# Depot > # Depot — Style Reference ## Prompt Content ``` # Depot — Style Reference > 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 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 | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | 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 | | 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 | | 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 | | 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ú ý | | 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 | | 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 | | 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ế | | 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 | | 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 | | 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í | | Carbon | `#04040b` | `--color-carbon` | Canvas trang — nền gần đen sâu nhất mà mọi thứ đặt trên đó | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | Steel | `#49474e` | `--color-steel` | Đường viền xám trung bình và nét icon mờ — đường cấu trúc tinh tế | | 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 | | 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 | | 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 | | 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 | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 12px | 1.5 | 0.025px | `--text-caption` | | body-sm | 14px | 1.43 | 0.025px | `--text-body-sm` | | body | 16px | 1.5 | 0.025px | `--text-body` | | subheading | 18px | 1.56 | 0.025px | `--text-subheading` | | heading-sm | 20px | 1.4 | 0.025px | `--text-heading-sm` | | heading | 36px | 1.11 | -0.9px | `--text-heading` | | heading-lg | 48px | 1.11 | -1.2px | `--text-heading-lg` | | display | 60px | 1 | -1.5px | `--text-display` | ## Tokens — Spacing & Shapes **Đơn vị cơ sở:** 8px **Mật độ:** thoải mái ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 8 | 8px | `--spacing-8` | | 16 | 16px | `--spacing-16` | | 24 | 24px | `--spacing-24` | | 32 | 32px | `--spacing-32` | | 48 | 48px | `--spacing-48` | | 64 | 64px | `--spacing-64` | | 128 | 128px | `--spacing-128` | ### Border Radius | Phần tử | Giá trị | |---------|-------| | nav | 2px | | tags | 2px | | cards | 6px | | icons | 2px | | inputs | 6px | | buttons | 6px | ### Shadows | Tên | Giá trị | Token | |------|-------|-------| | 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ử 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ế 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 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) 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) 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) 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 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 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 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 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 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 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 | Cấp | Tên | Giá trị | Mục đích | |-------|------|-------|---------| | 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 đó | | 1 | Graphite Card | `#121113` | Bề mặt nâng cao đầu tiên — feature card, content panel, nav dropdown | | 2 | Obsidian Panel | `#1a191b` | Bề mặt thứ cấp — panel lồng nhau, divider section, bề mặt footer | | 3 | Slate Interactive | `#232225` | Bề mặt tương tác — fill button, trường nhập liệu, trạng thái hover | | 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 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 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 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) 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 2. **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. 3. **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ờ. 4. **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. 5. **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 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; } ```