Black & White Variant - Hiking Community Platform Components
Minimalist monochrome • Sharp corners • Dark mode respects OS preferences
Primary BG
Light: #ffffff
Dark: #000000
Secondary BG
Light: #f5f5f5
Dark: #1a1a1a
Accent
Light: #000000
Dark: #ffffff
Border
Light: #d4d4d4
Dark: #333333
Text Primary
Light: #000000
Dark: #ffffff
Text Secondary
Light: #666666
Dark: #999999
Text on Accent
Light: #ffffff
Dark: #000000
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