Color Palette
Green-prominent palette inspired by Soles4Souls branding, replacing the original Girls on the Run pink/violet theme.
Primary Colors (Green)
Green 50
bg-green-50
Green 100
bg-green-100
Green 200
bg-green-200
Green 300
bg-green-300
Green 400
bg-green-400
Primary (Green 500)
bg-primary
Green 600
bg-green-600
Green 700
bg-green-700
Green 800
bg-green-800
Green 900
bg-green-900
Green 950
bg-green-950
Secondary Colors (Teal)
Teal 50
bg-teal-50
Teal 100
bg-teal-100
Teal 200
bg-teal-200
Teal 300
bg-teal-300
Teal 400
bg-teal-400
Secondary (Teal 500)
bg-secondary
Teal 600
bg-teal-600
Teal 700
bg-teal-700
Teal 800
bg-teal-800
Teal 900
bg-teal-900
Teal 950
bg-teal-950
Background & UI Colors
Background
bg-background
Foreground
bg-foreground
Card
bg-card
Muted
bg-muted
Muted Foreground
text-muted-foreground
Border
bg-border
Input
bg-input
Ring
bg-ring
Typography
The typography system combines Oswald for headings and Lato for body content to create a clean, athletic, and approachable tone.
Heading Font: Oswald
Used for headings, navigation, and call-to-action labels.
Oswald Bold
Oswald Semibold
Oswald Medium
Oswald Regular
font-headingBody Font: Lato
Used for long-form reading, captions, and descriptive content.
Lato Regular
Lato Medium
Lato Semibold
Lato Bold
Lato Italic
font-bodyType Scale
Heading 1
text-4xl md:text-5xl lg:text-6xl font-heading font-bold
Heading 2
text-3xl md:text-4xl font-heading font-bold
Heading 3
text-2xl md:text-3xl font-heading font-bold
Heading 4
text-xl md:text-2xl font-heading font-bold
Body text is set in Lato with comfortable spacing to improve readability in long-form sections and story updates.
text-base font-body leading-relaxed
Small text is used for metadata, captions, and footnotes.
text-sm font-body text-muted-foreground
Components
UI components styled with the Soles4Souls green theme.
Buttons
Primary buttons use the green brand color. Secondary buttons use the teal accent. All buttons use the Oswald heading font in uppercase.
Badges
Cards
Journey Progress
Track the current running adventure
Donate
Support Soles4Souls through giving
Every $20 provides a new pair of athletic shoes to a child experiencing homelessness. Help turn "No" into "Yes" for a child in need.
Updates
Latest news from the journey
Follow along for daily updates, photos, and stories from the trail. Stay connected with the community.
Form Elements
Form labels use the Oswald heading font. Input text uses the Lato body font. Focus rings use the primary green color.
Navigation
Navigation uses the Oswald heading font in uppercase with wider tracking. The brand name is highlighted in the primary green. The donate CTA uses a filled primary button.
Alerts & Callouts
Success
Your donation has been processed successfully. Thank you for supporting Soles4Souls!
Info
The journey tracker updates every 24 hours with the latest mileage and location data.
Warning
Weather conditions may affect the planned route. Check back for updates.
Spacing
Use consistent spacing utilities to align content and create comfortable rhythm across sections.
4px
gap-1
8px
gap-2
12px
gap-3
16px
gap-4
20px
gap-5
24px
gap-6
32px
gap-8
40px
gap-10
48px
gap-12
CSS Variables Reference
Theme tokens are managed as CSS variables and mapped to Tailwind semantic utilities.
| Variable | Light | Dark | Description |
|---|---|---|---|
| --background | 140 20% 97% | 222 47% 11% | Page background color |
| --foreground | 222 47% 11% | 210 40% 98% | Primary text color |
| --primary | 152 73% 37% | 152 73% 37% | Primary green brand color |
| --secondary | 174 65% 26% | 174 65% 26% | Secondary teal brand color |
| --muted | 210 40% 96.1% | 217 33% 17.5% | Muted background color |
| --ring | 152 73% 37% | 152 73% 37% | Focus ring color |
| --radius | 0.5rem | 0.5rem | Border radius for UI elements |