Setting the file. One moment.
Skill 07 · Stitch::extract Design Md
Subchapter 7.6
examples/DESIGN.mdMarkdown7 KBView on GitHub
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 to achieve a “frozen” aesthetic, mimicking the properties of ice and packed snow. This is paired with a 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.
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.
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.
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.
Depth is conveyed through Glassmorphism and backdrop filters rather than traditional heavy shadows. Surfaces use a hierarchy of transparency:
This creates a “stacked ice” effect that maintains visual clarity while giving the UI a premium, modern feel.
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.
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 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.
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.
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.
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.