Hệ thống thiết kế công cụ lập trình
Các hệ thống thiết kế được trích xuất từ website công cụ lập trình và hạ tầng: hosting, cơ sở dữ liệu, API, IDE và sản phẩm DevOps. Nhiều trang dựa vào bề mặt tối, điểm nhấn monospace và khối code được thiết kế như component chính, cùng kiểu chữ gọn gàng, mang tính kỹ thuật.
3 mẫu DESIGN.md trong danh mục này, từ Neon, Railway và Supabase. Được trích xuất từ các trang công khai của từng website, không phải hướng dẫn thương hiệu chính thức. Mới làm quen với định dạng này? Đọc DESIGN.md là gì.
Neon
Hệ thống thiết kế của Neon là một thương hiệu dành cho nhà phát triển, ưu tiên giao diện tối, xây dựng trên nền gần như đen (#000000, #18191b) với màu xanh neon rực rỡ làm màu chủ đạo (#00e599) và màu xanh lá trung gian (#34d59a) làm màu bổ trợ. Hệ thống chữ kết hợp Inter cho giao diện và nội dung chính với GeistMono cho mã nguồn và dữ liệu, cả hai đều dùng khoảng cách chữ âm và chặt. Khoảng cách theo lưới cơ sở 4px. Bo góc được giữ tối giản và đồng nhất ở mức 4px. Độ nổi được tạo bằng độ tương phản của viền thay vì bóng đổ, với một bóng đổ môi trường duy nhất được dùng tiết chế. Phần hero có nền trực quan hóa dữ liệu động toàn màn hình, củng cố bản sắc thương hiệu về cơ sở dữ liệu và hạ tầng.
Railway
Hệ thống thiết kế của Railway là giao diện nền tối ưu tiên cho nền tảng dành cho nhà phát triển, được neo bởi các bề mặt xanh navy gần như đen sâu (#13111c, #0b0b0f), chữ off-white độ tương phản cao (#f7f7f8), và màu nhấn thương hiệu tím đặc trưng (#853bce / #553f83). Phần hero sử dụng IBM Plex Serif để tạo độ đậm mang phong cách biên tập, trong khi Inter đảm nhiệm toàn bộ nội dung giao diện, còn JetBrains Mono và SF Mono phục vụ các ngữ cảnh mã nguồn. Độ nổi khối được tạo bằng viền phát sáng trắng inset (rgba(255,255,255,0.2) 1.5px inset) thay vì bóng đổ, mang lại phong cách bảng kính mờ. Hệ thống khoảng cách dựa trên bội số 4px với nhịp điệu 8/12/16/24/32 rõ rệt. Bo góc chủ yếu là 4px, kết hợp có chọn lọc 8px và 16px cho thẻ và khung hero.
Supabase
Supabase sử dụng một hệ thống thiết kế ưu tiên giao diện tối, lấy nền gần đen sâu (oklch ~0.19) làm nền tảng, kết hợp với màu nhấn xanh lá rực rỡ (#3ecf8e / #3fcf8e). Bố cục được xây dựng quanh lưới thẻ tính năng đáp ứng, với Manrope cho tiêu đề hiển thị và Inter cho văn bản nội dung cũng như giao diện. Source Code Pro được dùng cho mọi ngữ cảnh monospace và mã nguồn. Hệ thống màu dựa trên các custom property oklch với cách đặt tên theo ngữ nghĩa. Thẻ có bo góc 12px và viền mỏng tinh tế, nút bo góc 6–8px, mật độ nội dung vừa phải và lưới khoảng cách cơ sở 8px.
Không thấy trang web bạn cần?
Dán bất kỳ URL nào để lấy DESIGN.md từ mọi trang web. Màu sắc, kiểu chữ, khoảng cách và token, sẵn sàng cho quy trình làm việc với AI của bạn.