Hiking Adventure — UI Kit

Visual source of truth for design tokens and reusable components. Edit a token in shared/tokens.css or a class in shared/components.css — every page in the project picks it up.

Tokens · Colors

Palette

Accent--color-accent
Accent deep--color-accent-deep
Accent soft--color-accent-soft
Ink--color-ink
Mute--color-mute
Paper--color-paper
Divider--color-divider
Success bg--color-success-bg
Success fg--color-success-fg
Violet bg--color-violet-bg
Warn bg--color-warn-bg
Warn fg--color-warn-fg
Tokens · Typography

Type scale (6 steps)

Display 56 / 700 The quick brown fox.
H2 32 / 600 Section heading goes here.
H3 20 / 600 Sub-block heading
Body 16 / 400 Body copy is the default reading size — paragraphs, descriptions, supporting text.
Small 14 / 500 Small text for bullets, footnotes, secondary labels.
Caption 12 / 500 Caption · meta · timestamps
Mono 11 / 500 123,456,789 · TABULAR NUMERALS
Tokens · Spacing

4px scale

--space-1 (4)
--space-2 (8)
--space-3 (12)
--space-4 (16)
--space-5 (20)
--space-6 (24)
--space-8 (32)
--space-10 (40)
--space-12 (48)
--space-16 (64)
--space-20 (80)
Tokens · Radii

Corner radius

--radius-sm · 4
--radius-md · 8
--radius-lg · 12
--radius-xl · 14
--radius-2xl · 16
--radius-pill
Tokens · Shadow

Elevation

--shadow-island
--shadow-card
--shadow-accent
--shadow-chip
Component

Buttons · .btn

Component

Chips & tags · .chip

Success Info Warning Accent VERIFIED Live · 12m ago Eyebrow label
Component

Icon tiles · .icon-tile

Patterns

Button states · .btn--primary

Default
Hover
Active
Focus
Disabled
Patterns

Motion primitives

Pulse
scale 0.85 ↔ 1.15 · 2.4s · ease-in-out · loop
Fade in
opacity 0 → 1 · 2s · ease-out · loop
Scale + fade
scale 0.85 → 1 · 2s · --ease-back · loop
Slide up
translateY 12 → 0 · 2s · --ease-out · loop
Shimmer
loading skeleton · 1.6s · linear · loop