Components
Living style guide: design tokens, color palette, typography, and every UI building block.
Color tokens
Semantic tokens drive both themes. Always use tokens — never raw hex values.
Opacity scale
Semantic colors × opacity modifiers 10 / 20 / 40 / 60 / 80.
Typography
Gilroy — headings, Inter — body/UI, JetBrains Mono — data/labels.
Hero headlines
The mountains are calling
Page titles
Pack light, hike far
Section headings
Your gear collection
Card titles, subsections
Sleeping system
Widget headings
Base weight
Micro headings
Items · 12
Intro paragraphs
Build the lightest kit for your next adventure.
Body copy
Regular body text. Pack light, hike far. The trail rewards those who plan ahead.
Secondary body, descriptions
Additional context, labels, descriptions.
Timestamps, helpers
Updated 2 hours ago · 4 items
Section labels, eyebrows
Form labels, tags
Data, numbers, codes
Big KPI numbers
Medium stats
Compact stats
Gradients & shadows
Badges
Avatars
Sizes and fallback.
Kbd
Toggle
Inputs & textarea
Default
Placeholder
Disabled
With error
Invalid email address
With icon
Checkbox / Radio / Switch
Unchecked
Checked
Disabled
Option 1 — Ultralight
Option 2 — Standard
Option 3 — Expedition
Off
On
Disabled
Select
Gear category
Select gear type…
Slider
Alerts
Heads up!
Your gear set has been saved. You can edit it any time from My Sets.
Saved
Your changes are live for the community.
Heavy load
Estimated weight exceeds 15 kg.
Something went wrong
We could not load your closet. Please refresh or try again.
Progress
Skeleton loaders
Toasts
Empty state
No sets yet
Your saved sets will appear here. Start by creating one or browsing the community.
No favorites
Tap the heart on any card to save it here.
Nothing matches
Try clearing filters or changing the search query.
Dialog
Delete gear set?
This action cannot be undone. The set and all its items will be permanently removed from your account.
Popover / Tooltip
Tabs
Accordion
PageHeader
Custom page header with breadcrumbs, icon, and actions.
Hiking gear
Curated kits and reference lists for multi-day treks.
FiltersBar
Search input + sort dropdown + filter popover.
StatTile
across 6 activities
sets > 15 kg
SectionTitle
Pack smart, hike far
Editorial section heading with eyebrow, subtitle and trailing actions.
Centered variant
Use for hero-like splits inside content sections.
PriorityBadge
SuggestCategoryDialog
Suggest a category
Describe the new category you'd like to see on Gearbase.