Mishmash Stationery E-commerce Layout

Overview

Mishmash is a minimalist stationery e-commerce site that balances high-end editorial photography with a clean, functional UI. It serves as an excellent reference for cloning because it demonstrates how to use large border radii, punchy accent colors, and structured horizontal scrolling to create a modern retail experience.

Design System

• Color Palette & Visual Hierarchy: The design uses a sophisticated neutral base (Whites and Light Greys like #DFDED6) contrasted with vibrant, solid-color product photography. Accent badges use a "candy-color" palette (Salmon, Sun, Sky, Teal, and Orange) to categorize products and promotions without cluttering the interface.
• Typography: The system relies on a clean sans-serif (Inter-like) with strong weight contrasts. Headings use text-4xl to text-6xl for impact, while product details utilize text-xl and text-lg font-medium styles to maintain high legibility.
• Page Structure: The layout follows a modular flow: a hero grid of variable-width cards (first:basis-full for the top banner), followed by a large-scale brand statement, a multi-item carousel for social proof, and a detailed three-column product comparison section.
• Reusable Components:
  • Rounded Cards: Images use rounded-2xl (approx. 16px) creating a soft, friendly aesthetic.
  • Comparison Cards: These feature custom iconography for specifications (gsm, page count, size) separated by dashed dividers (border-dashed).
  • Floating Call-to-Action: A "Want 15% off?" button is fixed to the bottom-right for lead generation.
  • Carousel Sliders: Horizontal snap-scroll regions (snap-x snap-mandatory) with custom dot indicators that expand on hover.
• Interaction & Motion: The HTML reveals a group/slider pattern where navigation dots and arrows appear or enlarge on hover. Buttons use motion-safe:transition-all with high-contrast state changes (black background to subtle opacity shifts).
• Responsive Behavior: The layout uses Tailwind-style utility classes (sm:min-w-[19rem], lg:grid-cols-3) to transition from single-column vertical stacks on mobile to horizontal grids on desktop.

Use Cases

• Target Audience: Designers building boutique retail stores, digital product catalogs, or portfolio sites that require a balance between "white space" and high-impact imagery.
• Effective Remixes: This layout is ideal for physical goods with strong visual identities like home decor, independent magazines, or high-end apparel.
• Remix Directions: Replace the dashed specification dividers with solid lines for a more corporate look, or swap the rounded corners to rounded-none to shift from "playful" to "brutalist" architecture while keeping the robust grid logic.
• Clone Scope: A full-page clone is recommended for those needing a complete Shopify or Headless CMS front-end. Alternatively, the "Which notebook are you?" comparison grid is a perfect individual section clone for adding technical product specs to a landing page.