WKDZIK

Overview

WKDZIK is a Polish performance brand merging sports nutrition supplements with athletic apparel and accessories. The design system embodies 'Athletic Minimalism'—a stark, high-contrast aesthetic rooted in gym culture and competitive bodybuilding, where clarity and directness dominate. The brand serves fitness enthusiasts and athletes who demand no-nonsense product presentation paired with vibrant cyan accents that signal energy, progress, and performance. The visual language is deliberately austere: deep blacks (#121212) and pure whites create maximum legibility and authority, while the signature cyan (#2ebcd4) punctuates CTAs, hover states, and key interactive moments to evoke electricity and forward momentum. Voice: direct, motivational, unapologetic. Vocabulary leans into performance metrics, progress language, and Polish cultural pride. Example sentence: 'Kreatyna DZIK White — 500ml czystej mocy dla Twojego treningu.'

Colors

The color system operates on a principle of 'aggressive contrast with surgical accents.' Primary (#121212) is the dominant brand color—used on all primary CTAs, headers, and structural elements—creating an authoritative, gym-floor aesthetic. On-primary (#ffffff) ensures maximum legibility at all sizes. Secondary (#2ebcd4), the signature cyan, is reserved for hover states, active navigation, badges, and secondary CTAs; it appears sparingly but memorably, creating visual punctuation across the interface. Tertiary (#e62019) is a bold red used for promotional badges, discount tags, and error states, reinforcing urgency and action. The surface stack progresses from pure white (#ffffff, surface) through carefully calibrated grays (surface-container at #f2f2f2, surface-container-high at #e6e6e6)

Typography

Poppins is the sole typeface, chosen for its geometric clarity and athletic personality—no serifs, no flourishes, pure functional form. The type hierarchy is built on weight contrast rather than size variation: display (60px, 700 weight) anchors hero sections with -0.04em letter-spacing to tighten the letterforms; headline-lg (40px, 700) commands section breaks; headline-md (28px, 700) introduces subsections with authority. Body-lg (18px, 400) and body-md (16px, 400) maintain readability at standard line-height of 24–28px. Label-md (14px, 600) and label-sm (12px, 600) are reserved for UI labels, badges, and micro-copy; apply 0.01–0.05em letter-spacing to reinforce their technical role. On small labels over busy product imagery, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legi

Layout

The layout operates on a 12-column fluid grid with a max-width of 1360px, centered on the viewport. Spacing follows a strict 8px unit system: xs (4px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for section gutters and standard padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Container padding is 24px on desktop, reducing to 15px on tablets and mobile to preserve real estate. Product grids use 3 columns on desktop (calc(33% - 20px) per item with 20px gap), 2 columns on tablets, and 1 column on mobile. White-space is aggressive: section breaks use lg spacing (40px) minimum to create visual breathing room between hero, product carousels, and footer. The gutter between grid items is consistently 20px, enforced via C

Elevation & Depth

Depth is conveyed through a three-tier shadow system and strategic use of inverse surfaces. Level 1 (Base): flat surfaces with no shadow (cards on white background). Level 2 (Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, modals, and dropdowns—a subtle lift that separates from the background without drama. Level 3 (Maximum): box-shadow: 0 60px 60px rgba(0, 0, 0, 0.25) reserved for full-screen overlays, cookie consent modals, and hero image overlays. Hover states on cards transition from Level 1 to Level 2 over 200ms (ease-out timing). Dark overlays use inverse-surface (

Shapes

The shape philosophy is 'Functional Sharpness'—minimal rounding that signals precision and control without softness. Buttons use rounded.md (8px) for a subtle, modern edge; inputs use rounded.DEFAULT (4px) for a tighter, more technical appearance. Cards and containers use rounded.DEFAULT (4px) or rounded.md (8px) depending on context: product tiles use 4px, modal dialogs use 8px. Badges and tags use rounded.full (9999px) for pill-shaped emphasis, creating visual distinction from rectangular UI elements. The 2px radius (rounded.sm) is used sparingly for micro-interactions like checkbox borders

Components

Action Elements Buttons are the primary interaction surface. Primary buttons (button-primary) use backgroundColor: rgb(18, 18, 18), textColor: rgb(255, 255, 255), padding: 7px 20px, height: 40px, rounded: 8px, fontWeight: 600. On hover (button-primary-hover), shift backgroundColor to rgb(51, 51, 51) with a 200ms ease-out transition. Secondary buttons (button-secondary) use transparent background with a 1px solid border at rgba(153, 153, 153, 1), same padding and height; on hover, fill with surface-container-high (#e6e6e6). Tertiary buttons (button-tertiary) use the signature cyan (#2ebcd4) as backgroundColor with black text; on hover, darken to #1f8fa3. All buttons use label-md typography (14px, 600 weight, 0.01em letter-spacing). Apply a 2px focus ring at rgba(46, 188, 212, 0.3) for k

Do's and Don'ts

**Do**

• Do use primary black (#121212) for all structural elements, headers, and primary CTAs to maintain the athletic, no-nonsense aesthetic.
• Do apply the secondary cyan (#2ebcd4) exclusively to hover states, active navigation, and secondary CTAs—reserve it for moments of interactivity.
• Do maintain 24px (md spacing) as the default gutter between sections; use lg (40px) for major visual breaks between hero and content.
• Do use Poppins 600–700 weight for all UI labels and buttons; never use weights below 400 for body text.
• Do apply a 200ms ease-out transition to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do enforce the 1360px container max-width on desktop; allow horizontal scroll on mobile rather than cramping content.

**Don't**

• Don't use rounded corners larger than 12px on standard UI elements; reserve 16px+ for hero sections only.
• Don't apply shadows larger than 0 3px 8px rgba(0, 0, 0, 0.15) to cards; reserve 0 60px 60px rgba(0, 0, 0, 0.25) for modals and overlays only.
• Don't mix typefaces; Poppins is the sole font family across all contexts—no fallbacks to system fonts.
• Don't use the secondary cyan (#2ebcd4) as a background color for large surfaces; it is an accent for interactive moments only.
• Don't reduce padding below 7px on buttons or inputs; maintain minimum 40px height for touch targets.
• Don't apply opacity or transparency to primary text; use the on-surface color stack (#121212, #454545, #999) for hierarchy instead.