Portfolio
Tokens, typography, and reusable UI components.
This design system was built specifically for my portfolio to create a cohesive, memorable experience across every page. The goal was to balance professionalism with warmth — a system that feels approachable yet confident.
Orange (#F97316) — chosen for energy, creativity, and warmth. It draws attention to CTAs and active states without overwhelming the clean aesthetic.
Neutral grays & pure black — provide strong contrast and readability. The near-black headings feel bold and modern while softer grays keep body text easy on the eyes.
Poppins + Lato — a geometric sans for impactful headlines paired with a humanist sans for readable body copy. This contrast creates clear visual hierarchy.
Rounded-full everything — pills, buttons, and badges use fully rounded shapes to feel friendly and contemporary, softening the overall visual tone.
#F97316
#FFF7ED
#000000
#111827
#374151
#9CA3AF
#FFFFFF
#F9FAFB
Aa
Poppins
Headings, buttons, UI labels
Aa
Lato
Body text, descriptions, captions
Buttons
Cards
Project Card
Hover to see scale + shadow lift
Elevated Card
Stronger shadow on hover
Badges & Tags
More design system documentation and component libraries are on the way.