OneOS-V2/.agents/skills/stitch-extract-design-md/examples/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Alpine Peak	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #fcf8fa #dcd9db #fcf8fa #ffffff #f6f3f5 #f0edef #eae7e9 #e4e2e4 #1b1b1d #45464d #303032 #f3f0f2 #76777d #c6c6cd #565e74 #000000 #ffffff #131b2e #7c839b #bec6e0 #5c5f61 #ffffff #e0e3e5 #626567 #000000 #ffffff #161c22 #7e848c #ba1a1a #ffffff #ffdad6 #93000a #dae2fd #bec6e0 #131b2e #3f465c #e0e3e5 #c4c7c9 #191c1e #444749 #dde3eb #c1c7cf #161c22 #41474e #fcf8fa #1b1b1d #e4e2e4	display-lg headline-md body-base body-bold label-caps stat-lg fontFamily fontSize fontWeight lineHeight letterSpacing Inter 48px 800 56px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 24px 700 32px -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 16px 400 24px 0 fontFamily fontSize fontWeight lineHeight letterSpacing Inter 16px 600 24px 0 fontFamily fontSize fontWeight lineHeight letterSpacing Lexend 12px 700 16px 0.05em fontFamily fontSize fontWeight lineHeight letterSpacing Lexend 32px 600 40px -0.02em	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	unit xs sm md lg xl gutter margin-mobile margin-desktop 4px 4px 8px 16px 24px 32px 16px 20px 40px

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:

1. Base Layer: Solid 'Powder White' or 'Deep Peak Blue'.
2. Middle Layer (Cards/Modals): 70% opacity white with a 20px backdrop blur and a thin 1px 'Ice' border (white at 40% opacity).
3. 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.