Forest Variant - Hiking Community Platform Components
Forest earth tones inspired by nature • Dark mode respects OS preferences
Primary BG
Light: #f0f4f0
Dark: #161d16
Secondary BG
Light: #fafcfa
Dark: #1d251d
Accent
Light: #3a7050
Dark: #5a9070
Border
Light: #c4d4c4
Dark: #2d3d2d
Text Primary
Light: #1e2e1e
Dark: #e0e8e0
Text Secondary
Light: #4a5a4a
Dark: #8a9a8a
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