Sportshopen

Overview

Sportshopen is a Nordic sports retail platform serving active families across Scandinavia with outdoor apparel, footwear, and equipment. The design system embodies Scandinavian Functionalism—a philosophy that prioritizes clarity, directness, and purposeful simplicity over decoration. The aesthetic is clean and utilitarian, with a bright, accessible interface that guides users efficiently from discovery to purchase. The brand personality is approachable yet authoritative: knowledgeable about outdoor pursuits, honest about product function, and respectful of the user's time. Voice is conversational but precise, avoiding hype. Example: "Waterproof shell with 20k breathability rating—rated for Nordic winters and mountain conditions."

Colors

The color palette reflects Nordic minimalism with strategic accent usage. Primary (#0065e5) is a confident, accessible blue used exclusively on CTAs, active states, and key interactive elements—it commands attention without aggression. Secondary (#feb846) is a warm golden-yellow reserved for promotional badges, seasonal highlights, and secondary calls-to-action; it provides warmth against the cool primary. Tertiary (#70a15b) is a muted forest green used for success states, sustainability messaging, and eco-friendly product tags. The surface stack is anchored in pure white (#ffffff) for maximum clarity and product photography prominence, with subtle grays (surface-container-high: #e7e7e7, surface-container-lowest: #fafafa) for layering and depth. Error red (#f40000) is bold and unambiguous

Typography

The type system uses Poppins across all scales, a geometric sans-serif that conveys modern functionality while remaining warm and accessible. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) structures page titles and category headers; Headline-md (28px, 600 weight) breaks content into scannable sections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptions—the 28px line-height ensures readability over product imagery. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text and form labels. Label-md (14px, 600 weight) is applied to buttons, badges, and navigation items—the 600 weight ensures clickable elements stand out. Label-sm (12px, 500 weight, 0.02em tr

Layout

The layout uses a 12-column fluid grid with a max-width of 1440px, allowing responsive scaling from mobile (single column) to desktop (full-width). The gutter is consistently 24px, creating breathing room between sections without excessive whitespace. Container padding is 24px on tablet and desktop, 16px on mobile. Section separation uses lg spacing (40px) for major content blocks (hero, category sections, testimonials) and md spacing (24px) for subsections and card grids. The page rhythm follows a 8px baseline grid: all padding, margins, and heights are multiples of 8px (8, 16, 24, 32, 40, 48, 56, 64px). This creates visual harmony and simplifies responsive scaling. Product grids use a 3-column layout on desktop (1440px), 2 columns on tablet (768px), and 1 column on mobile. Cards maintain

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. Level 1 (Base): flat white surface with no shadow, representing the primary content plane. Level 2 (Cards, Inputs): 0 3px 8px rgba(0, 0, 0, 0.15)—a soft shadow that lifts elements 4-8px above the base, used for product cards, input fields, and modals. Level 3 (Hover/Active): 0 5px 10px rgba(0, 0, 0, 0.2)—a deeper shadow indicating interaction or focus, applied on card hover and modal overlays. Modals use a semi-transparent dark overlay (rgba(0, 0, 0, 0.5)) with a subtle blur (backdrop-filter: blur(4px)) to sepa

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the utilitarian aesthetic without introducing organic or playful curves. Buttons use 4px (0.25rem) border-radius, a subtle rounding that feels modern and clickable without being bubbly. Cards and containers use 8px (0.5rem) for a slightly more generous curve that creates visual distinction from buttons. Modals and dropdowns use 12px (0.75rem) to signal elevation and importance. Input fields use full-radius (border-radius: 9999px) to create a pill-shaped appearance—this signals 'search' or 'input' at a gla

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (0065e5 background, white text, 40px height, 8px 56px padding, 4px radius) are used for main CTAs like 'Add to Cart' and 'Checkout'. Hover state darkens to #0052cc with a 200ms transition; active state is #003d99. Secondary buttons (surface-container-high background, outline-variant border, 40px height) are used for 'Cancel', 'Learn More', and alternative actions. Ghost buttons (transparent background, primary text) are used for tertiary actions and navigation links. All buttons use label-md typography (14px, 600 weight) for consistency and scannability.

Containers & Surfaces Cards are the primary content container (1px outline-variant border, 8px radius, 24px padding, 0 3px 8px shadow). On hover, the sha

Do's and Don'ts

**Do**

• Do use primary (#0065e5) exclusively on CTAs, focus states, and active navigation—never on decorative elements or backgrounds.
• Do apply 24px gutter spacing consistently across all grid layouts and maintain 8px baseline alignment for all dimensions.
• Do use Poppins 600 weight for all interactive elements (buttons, links, form labels) to ensure they stand out from body text.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on any text overlaid on product photography or busy backgrounds.
• Do use the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition timing for all state changes (hover, focus, active) to maintain consistency.
• Do use secondary (#feb846) only for promotional badges, seasonal highlights, and secondary CTAs—never as a primary background.
• Do maintain the 1:1.2 aspect ratio for product card images to ensure visual consistency across the catalog.
• Do use the full-radius (9999px) border-radius exclusively for input fields and badges to signal their interactive nature.

**Don't**

• Don't use shadows darker than 0 5px 10px rgba(0, 0, 0, 0.2)—excessive shadows create visual clutter and reduce the clean aesthetic.
• Don't apply primary color to non-interactive elements like section backgrounds or decorative dividers.
• Don't mix border-radius values inconsistently—use the graduated scale (4px for buttons, 8px for cards, 12px for modals, 9999px for inputs).
• Don't use system fonts or fallback sans-serif—always load Poppins via Google Fonts to maintain brand consistency.
• Don't apply transitions longer than 300ms or use easing functions other than cubic-bezier(0.4, 0, 0.2, 1) for interactive states.
• Don't use opacity below 50% for disabled states—use outline-variant (#999999) at full opacity instead for better accessibility.
• Don't add decorative gradients or complex backgrounds—the brand relies on clean surfaces and strategic color accents.
• Don't use more than 3 colors in a single component—primary, secondary, and tertiary are sufficient for all UI patterns.