Hệ thống Thiết kế
Website này được xây dựng phù hợp theo Pageel Theme Kit và được phát triển hoàn toàn trên PARA Workspace.
01. Nhận Diện
Primary Logo
Standard horizontal lockup. Text: Black, Icon: Brand Purple.
Icon Specimen
Phiên bản nền tối (dark), sáng (light), và màu biểu trưng.
02. Màu Sắc
Cấu hình Thương hiệu
bg-brand-purple bg-brand-purple-dark bg-brand-blue bg-brand-blue-hover Bề mặt và Nền (Surface & Background)
bg-white bg-background-light bg-background-dark 03. Kiểu chữ
Display Heading
Section Title
Component Header
Con cáo nâu nhanh nhẹn nhảy qua con chó lười biếng. Phông chữ Inter được dùng cho việc hiển thị các trường văn bản nội dung thông thường, đảm bảo khả năng tối ưu tại kích thước nhỏ, và là phông tiêu chuẩn cho PARA Workspace.
04. Thành Phần UI
Button Variants
Badges / Nhãn dán
Antigravity Code Blocks (Mã Khối)
// Core initialization sequence...
async function bootstrap() {
const settings = await loadConfig('.para-workspace.yml');
if (!settings) {
console.error('Missing settings, falling back...');
return false;
}
return true;
}
bootstrap();
Mã khối sử dụng mã màu nền #1A1A1A đi kèm cơ chế bôi màu cú pháp ngữ nghĩa (Tím cho từ khóa cấu trúc điều kiện, Xanh Lơ cho chức năng/hàm, Xanh Lục cho văn bản string).
Feature Cards
Standard Card
Minimalist container for secondary actions.
Active State
check_circleHigh-emphasis container for primary selection.
Component Specifications
| Component | Variant | Utility Classes | Tokens |
|---|---|---|---|
| Button | Primary | bg-brand-purple text-white px-6 py-3 rounded-lg font-bold | action-p |
| Button | Control | bg-white border border-gray-200 rounded-full shadow-sm | cta-s |
| Card | Info | p-8 border border-gray-200 rounded-xl | surf-low |
| Card | Highlight | p-8 border-2 border-brand-purple bg-brand-purple/5 | surf-brand |
| Badge | Any | px-3 py-1 text-[9px] font-mono uppercase rounded-full font-bold border | tag-pill |
05. Giao diện Tương Tác
React Island: Hero3DCube
Ngữ cảnh Chế độ Tối
Thành phần tự động thích ứng với nền đen.
06. Cấu hình Lưới (Grid)
Tính nhất quán của Trục dọc
Để duy trì mạch thị giác thống nhất, đường kẻ gạch đứng tại mốc 280px phải **chạy liên tục trên tất cả các trang**, bao gồm cả khoảng đệm 80px của Header. Điều này giúp loại bỏ khoảng trống (gap) khi xem các trang con.
left-0 w-[280px] border-r
top-0 bottom-0 (Đảm bảo đường kẻ chạy xuyên qua Header)
Xóa bỏ lg:border-r cục bộ tại Logo
để tránh bị trùng lặp hoặc lệch 1px.
07. Thang đo Khoảng chênh lệch (Spacing)
08. Biểu Tượng (Iconography)
Chúng tôi sử dụng thẻ thư viện Material Symbols Outlined của hệ thống Google để duy trì mẫu logo mạch lạc.