Hiking Community Platform Components
Stone grays with yellow accents • Dark mode respects OS preferences
Primary BG
Light: #fafaf9 (stone-50)
Dark: #0c0a09 (stone-950)
Secondary BG
Light: #f5f5f4 (stone-100)
Dark: #1c1917 (stone-900)
Accent
Light: #eab308 (yellow-500)
Dark: #facc15 (yellow-400)
Border
Light: #e7e5e4 (stone-200)
Dark: #292524 (stone-800)
Text Primary
Light: #1c1917 (stone-900)
Dark: #fafaf9 (stone-50)
Text Secondary
Light: #78716c (stone-500)
Dark: #a8a29e (stone-400)
Text on Accent
#ffffff
Both themes
Font Family: Tiempos (Regular & Italic)
Body Text Large - Used for important paragraphs and lead text about hiking trails and outdoor adventures.
Body Text Regular - The quick brown fox jumps over the lazy dog. This is the standard body text used throughout the hiking community platform.
Small Text - Used for captions, hints, trail metadata, and secondary information.
Extra Small - Timestamps, metadata, difficulty ratings, and fine print.
Italic variant - Beautiful serif italics for emphasis and special content.
Primary Actions
Secondary Actions
Icon Buttons
Text Inputs
Selects & Checkboxes
Range Slider
This is a standard card component with hover effect for general content.
12 km • 4-5 hours • Elevation gain: 300m
Share your favorite hiking route
@arjunhikes
23
Trails
156
Followers
89
Following
Difficulty Badges
Trail Feature Tags
Status Labels
Tab content appears here...
Popular sunrise point near Bangalore...
Weather Update
Clear skies expected for tomorrow's hike.
Are you sure you want to cancel your registration for the Savandurga trek on Saturday?
Spinner
Dots
Skeleton
4px (1)
8px (2)
12px (3)
16px (4)
20px (5)
24px (6)
32px (8)
48px (12)
Default
Base state
Hover
Border color + lift
Active/Selected
Filled accent