Design system dùng cho bất kỳ sản phẩm nào
Bộ token, component và bố cục đã chuẩn hoá: màu sắc, typography, khoảng cách, nút bấm, thẻ, badge. Copy nguyên file, đổi nội dung và màu nhấn, dùng được ngay cho dự án của bạn.
Copy file vào dự án của bạn
- >
cp DESIGN_SYSTEM.md your-project/docs/ - >
cp demo.html your-project/index.html
Tương thích với
[01/02]·Tính năng
// Dành cho mọi dự án\\
Một bộ token, nhiều sản phẩm
Đổi màu `--color-primary` và nội dung, phần còn lại của hệ thống tự khớp theo.
-
Sẵn dùng
/components/core
Bộ component lõi
Nút bấm, badge, chip, thẻ, ô nhập lệnh — đủ để dựng landing page hoặc trang tài liệu mà không cần viết CSS từ đầu.
- Light + dark token
- Không phụ thuộc framework
- Thuần CSS biến số
-
Chỗ trống
Tính năng của bạn
Thay ô này bằng tính năng thứ hai của sản phẩm bạn.
-
Chỗ trống
Tính năng của bạn
Thay ô này bằng tính năng thứ ba của sản phẩm bạn.
[02/02]·Nguyên tắc
// Vì sao chọn hệ thống này\\
Token trước, giao diện sau
Ba nguyên tắc giữ hệ thống nhất quán dù nội dung thay đổi.
-
Mọi màu là biến số. Không hard-code hex trong component — đổi 1 biến ở `:root`, toàn trang đổi theo, kể cả dark mode.
-
Bố cục có quy tắc rõ. Container kẻ viền, khoảng cách section, lưới card — tất cả theo cùng một thang đo, không tuỳ hứng từng trang.
-
Copy được ngay. Không cần build step hay framework — mở file HTML này ra là chạy, ghép vào dự án nào cũng được.
// Bắt đầu\\
Dùng cho dự án của bạn
Không có bước build. Mở `demo.html`, sửa text/màu theo nhu cầu, hoặc tách từng class trong `DESIGN_SYSTEM.md` sang hệ thống hiện có của bạn.
- >
cp DESIGN_SYSTEM.md your-project/docs/ - >
cp demo.html your-project/index.html