Solohike

Overview

Solohike is a minimalist, trust-focused design system for outdoor adventure and hiking platforms. It serves solo travelers and adventure enthusiasts who value clarity, accessibility, and purposeful design. The aesthetic is 'Functional Minimalism'—a deliberate rejection of visual noise in favor of clean typography, generous whitespace, and a single accent color (#6366f1, a confident indigo) that guides user attention to critical actions and status indicators. The UI evokes a sense of calm competence: the interface recedes, letting the adventure take center stage. Voice: direct, encouraging, and grounded. The brand speaks in active verbs and concrete details—never flowery, never vague. Example: 'Your next trail awaits. Load the map, check conditions, go.'

Colors

The color palette is built on a foundation of pure white (#ffffff) and near-black (#1a1a1a), with a carefully curated accent system. Primary (#6366f1) is the signature indigo used exclusively on interactive elements—the loading spinner's active arc, focus states, and future CTAs. It is never used for passive content. Secondary (#505050) is a warm mid-gray reserved for disabled states and secondary text. The surface stack ranges from pure white (surface) through subtle grays (#f5f5f5 for surface-dim, #e9ecef for surface-container) to a pale lavender (#e5e4ff) for primary-container backgrounds. On-surface (#1a1a1a) is the primary text color, while on-surface-variant (#666666) is used for supporting copy and metadata. The tertiary color (#f0f9fa, a pale cyan) provides a soft accent for hover

Typography

The type system is anchored in DM Sans, a geometric sans-serif that balances warmth with precision. Display (56px, 700 weight, -0.02em tracking) is reserved for hero moments and rarely used; Headline-lg (32px, 600 weight) is the primary page title; Headline-md (24px, 600 weight) is used for section headers and the main loading message. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) serve body copy and descriptions. Label-md (14px, 600 weight, 0.02em tracking) is the workhorse for UI labels, button text, and supporting information. Label-sm (12px, 500 weight, 0.03em tracking) is used sparingly for metadata and tertiary information. All text uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale to ensure crisp rendering on macOS and Windows. Line-heights

Layout

The layout philosophy is 'centered and constrained'—a single-column, centered container (max-width: 600px) ensures focus and readability on all screen sizes. The page uses flexbox (display: flex, justify-content: center, align-items: center, min-height: 100vh) to vertically and horizontally center the loading state, creating a meditative, full-screen experience. Horizontal padding is 20px (gutter spacing) on all viewports, collapsing to 16px on mobile (max-width: 480px) to preserve screen real estate. Vertical rhythm is maintained through consistent spacing: the spinner sits 32px above the headline (margin: 0 auto 32px), the headline sits 16px above the body text (margin-bottom: 16px), and body text uses 1.5 line-height for comfortable reading. The grid is 12 columns, though this layout us

Elevation & Depth

Elevation is achieved through subtle shadows and color shifts rather than dramatic depth. The design uses a three-level shadow system: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for micro-interactions like hover states on select options, md (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdown panels and cards, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces. The loading spinner uses no shadow—it floats on the white background, separated only by whitespace. Dropdown panels (select-dropdown) apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border at #d0d0d0 to create subtle sep

Shapes

The shape philosophy is 'Geometric Precision'—a deliberate balance between sharp and soft. Border-radius follows a minimal scale: DEFAULT (0.5rem / 8px) for most interactive elements like select dropdowns and option items, md (0.75rem / 12px) for slightly larger containers, and full (9999px) for the loading spinner's circular form. The spinner's 50% border-radius creates a perfect circle (64px × 64px), while the dropdown panel uses 4px (0.25rem) for a subtle, technical appearance. This restraint in rounding reinforces the brand's minimalist, functional aesthetic—curves are purposeful, not deco

Components

Loading & Feedback The spinner-loading component is the hero of this system. It uses a 64px × 64px circle with a 4px border: border-color: #e5e4ff (primary-container, the pale lavender) and border-top-color: #6366f1 (primary, the indigo accent). The animation is spin 1s linear infinite, rotating the border continuously. On smaller screens (max-width: 480px), spinner-loading-sm reduces to 48px × 48px with a 3px border, maintaining visual weight. The spinner has no shadow and no background—it is pure geometry on white, evoking clarity and motion.

Typography & Messaging The heading-primary component (Headline-md, 24px, 600 weight, line-height: 1.4, color: #1a1a1a) displays the main message. The domain name is emphasized with font-weight: 600 (already applied via the .domain class). B

Do's and Don'ts

**Do**

• Do use the primary indigo (#6366f1) exclusively on interactive elements—spinners, focus states, and future CTAs—to create a clear visual hierarchy.
• Do maintain the 600px max-width container on all screen sizes to ensure focused, readable layouts.
• Do apply DM Sans at 400 weight for body text and 600 weight for labels and headings to create clear typographic distinction.
• Do use the surface-container-high (#f0f9fa) for hover states on dropdowns and interactive elements to signal interactivity without harsh contrast.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to dropdown panels and elevated surfaces to create subtle depth.
• Do use the full border-radius (9999px) for circular elements like spinners to evoke motion and progress.

**Don't**

• Don't use primary (#6366f1) for passive content, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states.
• Don't apply shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.12)) to avoid visual clutter and maintain the minimalist aesthetic.
• Don't use border-radius values larger than 1.5rem (xl) for interactive elements; excessive rounding contradicts the geometric precision philosophy.
• Don't mix font families; DM Sans is the sole typeface across the system—no fallbacks to system fonts in component definitions.
• Don't apply color to text below 14px without sufficient contrast; always verify WCAG AA compliance (4.5:1 minimum for normal text).
• Don't exceed the 600px container max-width on desktop; wider layouts dilute focus and readability.