←home
Design system
The tokens, type and components that make up this site. Built with CSS variables — themes flip by toggling a single attribute on <html>.
Color
--bg
Page background
--bg-elev
Cards, inputs
--bg-subtle
Hover, code
--border
Default border
--border-strong
Hover/focus
--fg
Primary text
--fg-muted
Secondary text
--fg-subtle
Captions, dates
--accent
Links, focus
--accent-soft
Accent backgrounds
Type
Geist Sans for body and display, Geist Mono for labels, dates and code.
Display
30px · 500
Tong Quoc Bao
Section
12px mono · 500
TECH STACK
Body
15px · 400
Frontend Developer based in Lam Dong.
Small
13px · 400
Carabala Studio · Full-time
Mono
12px · 400
2024 — Now
Label
11px · 400
2025 · Featured
Radius
--radius-sm
6px
--radius
8px
--radius-lg
14px
pill
9999px
Buttons
Tags & badges
Next.jsTypeScriptTailwindSideFeatured
List rows
Sample project Featured
A short description of what the project is, who it's for, and the role I played.
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);