IceGear Arctic embodies a “Premium Tech-Alpine” aesthetic, blending the clinical precision of high-performance outdoor gear with a sophisticated, modern retail experience. The brand personality is professional, resilient, and cold-weather focused, evoking a sense of reliability in extreme conditions.
The design style is a hybrid of Glassmorphism and Minimalism. It uses translucent, blurred surfaces to mimic ice and frost, paired with a rigid, high-contrast typographic hierarchy. The visual language emphasizes clarity and technical data (specs, history charts, availability) to appeal to serious adventurers who value both form and function.
The palette is rooted in an “Arctic Industrial” theme. The primary Frost Navy (#111D23) provides deep, readable contrast against a background of Ice White (#F9F9F9).
The system relies exclusively on Inter to maintain a utilitarian, Swiss-inspired clarity.
Hierarchy is established through extreme weight variations. Headlines use Bold (700) or ExtraBold (800) to feel like architectural pillars. Body text remains at Regular (400) for high legibility in dense technical descriptions. Labels and metadata use SemiBold (600) with slight letter spacing to differentiate them from standard body copy. A specialized 10px caption size is utilized for data visualization and micro-labels within charts.
The system uses a Fixed Grid approach for desktop, centering a 1200px container with generous side margins (64px). On mobile, the system transitions to a fluid single-column layout with 16px horizontal margins.
Spacing follows a strict 4px base unit. Internal card padding is typically 24px (lg) to allow the “Glassmorphism” effects breathing room. Section vertical rhythm is controlled by the xl (48px) spacing token to create a clean, editorial flow between disparate content types (e.g., Hero to Technical Specs).
Depth is primarily achieved through Glassmorphism and material layering rather than traditional drop shadows.
shadow-lg for elements like maps or sticky headers that need to pop significantly from the background.The shape language is highly varied to create visual interest.
rounded-xl (1.5rem) for technical spec blocks and product lists.rounded-full) for central visual anchors like product canvases to create a soft, lens-like focus.rounded-full for a pill-shaped appearance, contrasting with the structural grid.backdrop-blur-md and a thin primary-colored border at low opacity.outline-variant) with a white background. Internal layout uses a “Split-Justified” pattern: Left side for location details, right side for stock status.rounded-t-lg. Use primary-fixed-dim/40 for historical data and the solid primary color for the current/highlighted data point.tertiary-fixed for new items, error-container for discounts). Text should be label-sm.on-surface/10). Key on the left (neutral/variant), value on the right (bold/primary).