Technical stack, design tokens, and inspirations behind Phong Phan • Frontend Engineer. An interactive portfolio and UI component sandbox.
Framework & SSR
TanStack Start
Component Engine
React
Styling & Tokens
Tailwind CSS
Technology
Core Architecture & RuntimeFRAMEWORK
Styling & Visual DesignDESIGN SYSTEM
Data Layer & InfrastructureDATA & HOSTING
Design Tokens
01. Color token
Brand Accent
var(--pp-primary)Main signature brand red accent
#dc2626 / oklch(0.55 0.22 27)
Canvas Backdrop
var(--background)Default page background color
#09090b / oklch(0.12 0 0)
Surface Card
var(--card)Surface card container level
#121215 / oklch(0.15 0 0)
Muted Background
var(--muted)Secondary subdued panels and chips
#18181b / oklch(0.20 0 0)
Accent Hover
var(--accent)Interactive hover surfaces
#27272a / oklch(0.25 0 0)
Dividing Border
var(--border)Grid lines, dividers, and card borders
oklch(1 0 0 / 12%)
Destructive Alert
var(--destructive)Error states, destructive actions
#ef4444 / oklch(0.60 0.20 25)
Online / Success
var(--success)Status indicators, active telemetry
#10b981 / oklch(0.65 0.17 160)
02. Typography
Mulish
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Geist Mono
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm