Berner Kühl Minimalist Fashion E-commerce

Overview

Berner Kühl is a high-end minimalist e-commerce storefront that emphasizes editorial-style presentation and structural symmetry. It is a premier reference for a clone-and-remix workflow due to its clean execution of the 'split-screen' layout and an unconventional infinite marquee navigation system that gives the store a rhythmic, high-fashion feel.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic base (pure white #FFFFFF, jet black, and muted greys). Visual hierarchy is driven by large-scale imagery rather than heavy typography, with content blocks separated by generous whitespace (mb5, mb6 classes).
• Typography: A strictly uppercase sans-serif system is used for navigation and headings (found in the ttu and f4 classes). Body text utilizes a classic Serif font for brand storytelling, creating a tension between modern utility and artisanal heritage.
• Page Structure & Section Flow:
  1. Fixed Header: Minimal top-aligned navbar with split utility links.
  2. Hero Hero Grid: 50/50 split-screen images with floating white labels (.label.absolute).
  3. Marquee Slider: An auto-scrolling horizontal product reel (.marquee3k) displaying featured items with sequential numbering.
  4. Editorial Content: Right-aligned text blocks paired with multi-image product mosaics.
  5. Product Grid: A dense collection view using 4-5 columns on desktop with immediate image swaps on hover.
• Reusable Components:
  • Floating Label Item: A relative container with an absolute-positioned white badge for titles.
  • Split Content Block: A responsive flex container (.flex-row-l) that stacks text on mobile but mirrors content and imagery on desktop.
  • Numbering System: Hand-applied digital counters (01, 02, etc.) used consistently across all sections to provide a clinical, catalog-like feeling.
• Interaction Patterns: Hover states on the product grid trigger a swap between different image source files (.swap.relative), and the marquee3k component provides a continuous, low-speed motion that encourages eye scanning.
• Implementation Clues: The site is built on Shopify using Tachyons-like functional CSS utilities (e.g., w-100, flex-column, ph3, dn). This makes it highly modular and easy to extract specific grid patterns into other utility-first frameworks like Tailwind.

Use Cases

• Who should clone this: Designers building archival fashion stores, boutique furniture showrooms, or digital lookbooks for premium lifestyle brands.
• Effective Remixes: Swap the stark white background for a textured paper grain to achieve a 'print magazine' aesthetic, or replace the auto-marquee with a manual drag-scroll for a more tactile mobile experience.
• Practical Remix Directions: The dense product 'arrivals' grid can be cloned in isolation to showcase a large inventory without excessive page scrolling. Alternatively, the split-screen editorial section is excellent for 'About Us' or 'Process' pages.
• Clone Scope: A full-page clone is recommended for a high-impact landing page, but the marquee slider component and the numbered image labels are the most valuable individual units for smaller-scale remixes.