UI color system + Sora Heading Font

[johneliud]

Summary

• Apply accent color (#0369A1) consistently across all pages: skill chips, XLM amounts, milestone numbers, and feature icons now use accent blue instead of gray/navy
• Add Sora (geometric sans-serif) as a dedicated heading font paired with Plus Jakarta Sans for body text, creating clear typographic hierarchy
• Landing page: colored icon containers on feature cards, visible accent step numbers (01–04), and eyebrow labels on section headings

Changed files

• app/layout.tsx — load Sora from Google Fonts, inject --font-sora CSS variable
• app/globals.css — register --font-heading token, apply to all h1/h2/h3
• app/page.tsx — feature section eyebrows, accent icon wrappers, accent step numbers
• app/projects/page.tsx + app/projects/[id]/ListingDetail.tsx — accent skill chips, XLM, milestone circles
• app/freelancers/page.tsx + app/freelancers/[address]/FreelancerProfile.tsx — accent skill chips
• app/freelancer/profile/page.tsx — accent skill chips in tag editor
• app/client/page.tsx + app/freelancer/page.tsx — accent XLM totals in dashboard cards
• app/client/projects/[id]/ProjectManage.tsx + app/freelancer/projects/[id]/ProjectDetail.tsx — accent milestone numbers and totals

Test plan

• Visit / — step numbers 01–04 are accent blue; feature icons have blue background tint
• Visit /projects — skill chips and XLM amounts are accent blue
• Visit /freelancers — skill chips and "View profile →" are accent blue
• Visit /client and /freelancer dashboards — XLM totals are accent blue
• Open any project detail — milestone number circles are accent blue
• Check heading font renders as Sora (geometric) vs body text (Plus Jakarta Sans)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mile-stack	Ready	Preview, Comment	Jun 7, 2026 3:01pm