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
Decoding Plantar Fasciitis — Product Experience
#071A2B
#03182B
#20A4F3
#0E5EA8
#6EDAF2
#84D8E8
#C8D4E0
#8896AB
#F4F8FC
#FFFFFF
Aa
Montserrat
Headings, UI labels, nav
Aa
Lato
Body text, descriptions
Buttons
Cards
Pillar Card
Hover to see glow lift
Elevated Card
Stronger glow on hover
Badges & Tags
Solar Homeowner Acquisition — Ad, Web & Email
