←trang chủ
Design system
Mấy token, kiểu chữ và component dựng nên trang này. Tất cả chạy bằng CSS variables — đổi theme chỉ cần lật một attribute trên <html>.
Color
--bg
Nền trang
--bg-elev
Card, input
--bg-subtle
Hover, code
--border
Border mặc định
--border-strong
Hover / focus
--fg
Chữ chính
--fg-muted
Chữ phụ
--fg-subtle
Caption, ngày
--accent
Link, focus
--accent-soft
Accent nền
Typography
Geist Sans cho phần body và display, Geist Mono cho label, ngày và code.
Display
30px · 500
Tống Quốc Bảo
Section
12px · 500
TECH STACK
Body
15px · 400
Frontend Engineer ở Lâm Đồng.
Small
13px · 400
Carabala Studio · Full-time
Mono
12px · 400
2024 — Nay
Label
11px · 400
2025 · Featured
Radius
--radius-sm
6px
--radius
8px
--radius-lg
14px
pill
9999px
Buttons
Tags & badges
Next.jsTypeScriptTailwindSideFeatured
List rows
Dự án mẫu Featured
Mô tả ngắn về dự án, ai dùng và vai trò của mình trong đó.
Next.jsTypeScript
2025
Tech tile
Next.js
React
TypeScript
Code
const theme = useTheme();
// inline tokens render in both light & dark
document.documentElement.setAttribute("data-theme", theme);