HOODJOGGER

Overview

HOODJOGGER is an urban athleisure brand rooted in **Architectural Minimalism** — a design philosophy that prioritizes clean lines, functional geometry, and restrained color palettes to communicate premium quality and contemporary sophistication. The brand serves style-conscious European consumers aged 18–40 who value understated elegance over trend-chasing, seeking elevated basics that transition seamlessly from gym to street to social settings. The UI embodies this ethos through a monochromatic foundation (pure black #000000 and white #ffffff) punctuated by warm, deliberate accents (golden yellow #ffc300 and warm beige #f2f0ea), creating visual hierarchy without visual noise. The emotional response is one of calm confidence: the interface feels curated, intentional, and trustworthy—never chaotic or oversold.

The brand voice is direct, unpretentious, and grounded in European understatement. Vocabulary favors concrete nouns (hoodie, jogger, capsule, essential) over marketing hyperbole; tone is conversational but authoritative. Example sentence in brand voice: "Kapuzenpullover und Jogginghosen für Damen und Herren — designed to stay comfortable." The personality rejects both aggressive sales tactics and flowery lifestyle copy, instead positioning products as reliable wardrobe staples for people with refined taste and active lives.

Colors

The color system operates on a **high-contrast minimalist principle**: the primary surface is pure white (#ffffff) with deep charcoal text (#333333), ensuring maximum legibility and a premium, gallery-like aesthetic. Primary (#000000) is reserved exclusively for interactive elements—buttons, links, and focus states—making every clickable element unmistakable. The secondary palette introduces warmth through two supporting colors: a warm beige (#f2f0ea) used for secondary surfaces and subtle backgrounds, and a golden yellow (#ffc300) deployed sparingly on tertiary CTAs, badges, and accent highlights to draw attention without overwhelming. Error states use a deep burgundy (#8b0000) for critical warnings, while success uses a muted forest green (#006400). The surface stack progresses from pure

Typography

The type system reflects a **functional-elegant** hierarchy: Open Sans (400 weight, 56px, -0.02em tracking) anchors display-level headlines with generous leading (64px), communicating confidence and space. Roboto (400 weight, 28–32px) handles section headlines, maintaining the sans-serif family while introducing subtle weight variation. Body copy uses Arial (14px, 400 weight, 24px line-height) for maximum legibility at small sizes; this pragmatic choice prioritizes readability over distinctive personality, appropriate for product descriptions and instructional text. Inter (500 weight, 14px, 0.01em tracking) powers labels and UI microcopy, its geometric proportions lending precision to form fields and buttons. Letter-spacing is deliberately minimal across all sizes (ranging from 0em to -0.0

Layout

The page grid uses a **12-column fluid layout** with a maximum container width of 1200px (--normal-page-width), ensuring content remains readable on ultrawide displays while maintaining focus on product imagery. The spacing scale is semantic: gutter spacing (24px) separates major sections; lg spacing (40px) creates breathing room between hero and product grids; md spacing (24px) defines card padding and section margins; sm spacing (12px) governs internal component spacing (button padding, list item gaps). The design favors asymmetrical white space—larger gaps above headlines, tighter spacing below—to create visual rhythm and guide the eye downward through the page. Container max-width is enforced at 1200px to prevent text lines from exceeding optimal measure (32.5em for body copy, 19.5em f

Elevation & Depth

Depth is conveyed through **subtle shadow and surface layering** rather than dramatic drop shadows. The elevation system uses three levels: Level 1 (Base) is the white surface (#ffffff) with no shadow; Level 2 (Standard Card) applies a 1px solid border in light gray (#cccccc) plus a soft shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to create gentle separation from the background; Level 3 (Elevated/Modal) uses a 1px border plus a stronger shadow (0 16px 40px rgba(0, 0, 0, 0.12)) to indicate modal prominence. Hover states on cards transition the shadow from md to lg over 125ms (--animation-speed) usi

Shapes

The shape philosophy is **Architectural Sharpness with Functional Softness**: corners are predominantly sharp (border-radius: 0px or 4px) on primary buttons and major containers to reinforce the geometric, minimalist aesthetic, while secondary interactive elements use slightly rounded corners (8px) to soften the interface and improve touch usability. Specifically: primary buttons use 0px radius (--style-border-radius-buttons-primary: 0px) for maximum architectural impact; input fields use 4px radius (--style-border-radius-inputs: 4px) to distinguish them from buttons while maintaining crispnes

Components

Action Elements Buttons follow a strict two-state system: **button-primary** (black background #000000, white text #ffffff, 16px 24px padding, 48px height, 0px radius) is used exclusively for primary CTAs ("Add to Cart", "Checkout"). On hover, the background transitions to primary-container (#262626) over 125ms with cubic-bezier(0.25, 0.46, 0.45, 0.94) easing, creating a perceptible but subtle darkening. **button-secondary** (transparent background, black text #000000, 1px black border, 0px radius) is used for tertiary actions ("View Details", "Learn More"); on hover, the background fills with surface-container-high (#e0e0e0) while maintaining the border. Both button states maintain 48px minimum height for touch accessibility. Focus states add a 2px outline in primary (#000000) with 2p

Do's and Don'ts

**Do**

• Do use black (#000000) exclusively for primary CTAs and interactive elements—never for body text or backgrounds, which dilutes its signal strength.
• Do maintain the 24px gutter spacing between major sections and the 12px internal spacing within components to preserve the minimalist rhythm.
• Do apply the golden yellow (#ffc300) accent sparingly—only on tertiary CTAs, sale badges, or critical highlights—to preserve its impact and prevent visual chaos.
• Do use Open Sans for display-level headlines (56px+) and Roboto for section headlines (28–32px) to establish a clear typographic hierarchy.
• Do enforce 48px minimum height on all touch targets (buttons, list items, form fields) to meet accessibility and mobile usability standards.
• Do transition interactive states (hover, focus, active) over 125ms using cubic-bezier easing functions to create smooth, predictable feedback.

**Don't**

• Don't use the warm beige (#f2f0ea) as a primary background—it's a secondary accent for subtle surfaces and should never dominate the page.
• Don't apply rounded corners (border-radius > 8px) to primary buttons or major containers; the architectural aesthetic demands sharp edges on key elements.
• Don't mix typefaces within a single hierarchy level (e.g., don't use both Inter and Roboto for section headlines); each font family has a designated role.
• Don't add drop shadows to buttons or primary interactive elements; the flat aesthetic is intentional and shadows undermine the minimalist brand.
• Don't use color alone to convey status (e.g., red for error)—always pair with text labels or icons to ensure accessibility for color-blind users.
• Don't exceed 1200px container max-width on desktop; wider layouts dilute focus and violate the brand's architectural precision.