Brand & Style
The brand personality is high-performance, sophisticated, and dependable. It is designed for the modern skier who demands clarity and precision in harsh environments. The visual language evokes the crystalline beauty of a mountain peak while prioritizing the rugged utility required for outdoor navigation.
The design system utilizes Glassmorphism to achieve a "frozen" aesthetic, mimicking the properties of ice and packed snow. This is paired with a High-Contrast philosophy to ensure that critical data—like trail status and weather alerts—remains legible under intense mountain sunlight or the low-visibility conditions of a snowstorm.
Colors
The palette is anchored by Deep Peak Blue, a dark navy that provides a grounding contrast for white text and maps. Powder White serves as the primary canvas, ensuring the interface feels airy and cold.
Safety Orange is reserved strictly for primary calls to action, hazard warnings, and emergency trail closures, ensuring immediate eye-tracking. Electric Blue (the info status) is used for weather updates and general interactivity. For trail difficulty levels, standard industry colors (Green, Blue, Black) are used but rendered with high-saturation values to pop against the white backgrounds.
Typography
The typography system uses Inter for core functional text and body copy due to its exceptional x-height and legibility at small sizes. Lexend is introduced for labels and statistics; its hyper-readable, athletic character suits the "active" nature of skiing data like speed and vertical drop.
To combat outdoor glare, font weights are generally heavier than standard web applications. Display styles use tight tracking and heavy weights to create a sense of strength. Labels always utilize high-contrast coloring against their backgrounds.
Layout & Spacing
This design system uses a Fluid Grid model with generous safe areas. Elements are spaced using a strict 4px/8px baseline rhythm to maintain a disciplined, professional appearance.
Touch targets are intentionally oversized (minimum 48x48px) to accommodate users
wearing gloves. Padding within cards and containers is kept spacious (lg or
xl) to prevent the interface from feeling cluttered when displaying complex
trail data.
Elevation & Depth
Depth is conveyed through Glassmorphism and backdrop filters rather than traditional heavy shadows. Surfaces use a hierarchy of transparency:
- Base Layer: Solid 'Powder White' or 'Deep Peak Blue'.
- Middle Layer (Cards/Modals): 70% opacity white with a 20px backdrop blur and a thin 1px 'Ice' border (white at 40% opacity).
- Top Layer (Floating Actions): 90% opacity with a subtle 4px ambient shadow to separate the element from the blurred background.
This creates a "stacked ice" effect that maintains visual clarity while giving the UI a premium, modern feel.
Shapes
The shape language is defined by modern, organic rounded corners. This softens the high-contrast color palette and makes the app feel approachable.
Interactive elements like buttons and chips utilize rounded-lg (1rem) or
rounded-xl (1.5rem) to suggest a tactile, "pebble" feel. Large containers like
map overlays use 1rem corners, while small status indicators for trail
difficulty may use pill shapes for instant recognition.
Components
Buttons
Primary buttons use a solid 'Safety Orange' or 'Deep Peak Blue' fill with white text. High-contrast outlines are used for secondary actions. All buttons must feature a minimum height of 52px for gloved-hand accessibility.
Cards & Modals
Cards utilize the glassmorphism effect—semi-transparent backgrounds with a 1px white border. This ensures that map imagery or photos underneath remain slightly visible, maintaining the "frozen" aesthetic.
Trail Status Chips
Pill-shaped indicators with high-saturation icons. Green (Easy), Blue (Intermediate), Black (Expert), and Double Black (Extreme). These must include text labels alongside icons to ensure accessibility for colorblind users.
Input Fields
Fields feature a 'Cloud Gray' background with a thick bottom border that transforms into 'Electric Blue' on focus. Labels are always visible above the field to ensure the user doesn't lose context in bright environments.
Weather Widgets
Bold, thick-stroke iconography (minimum 2pt stroke) to represent sun, snow, or wind. These icons should be large and accompanied by 'Lexend' typography for temperature and wind speed.