Eindhoven Design District Landing Page

Overview

This landing page is a high-impact, typography-driven showcase for the Eindhoven Design District, blending brutalist aesthetics with professional Swiss-style layouts. It serves as an excellent reference for builders looking to implement bold, editorial-style scrolling experiences and asymmetrically balanced grids that prioritize readability and visual grit.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast foundation of stark white backgrounds and solid black text. It introduces vibrancy through section-specific 'data-themes' (pink, blue, red) that change the background color during scroll, creating a clear visual rhythm between different projects.
• Typography System: The design is dominated by a heavy, tightly-spaced Sans-Serif font (likely a custom variant of Helvetica or Inter). It utilizes massive heading scales for the hero area, with vertical text-orientation for the word "Design," creating a layered, architectural feel. Subheadings use a smaller but weighted scale for information density.
• Page Structure: The flow consists of a dynamic hero with overlapping image figures, followed by a text-heavy intro, a "Projecten" (Projects) section featuring split-screen sticky scrolling, a horizontal article slider ("Artikelen"), and finally a full-width footer CTA.
• Reusable Components:
  • Split-Screen Project Cards: A layout where text is pinned on one side while the image scrolls or transitions based on the pin-spacer logic.
  • Horizontal Sliders: Implemented via flickity, featuring a custom fraction-based pagination (e.g., "1/6").
  • Rounded Buttons: Outlined and filled pill-shaped buttons that provide a soft contrast to the rigid typography.
• Interaction & Motion: The site uses GSAP and ScrollTrigger (evident from pin-spacer and transform: translate3d classes) to create sticky sections where images reveal or change as the user scrolls. Images utilize a reveal-image wrapper that scales or slides the content into view.
• Implementation Clues: The HTML uses data-barba="wrapper" for smooth AJAX page transitions and flickity for touch-responsive sliders. The structure relies on a 12-column grid system with specialized container and grid utility classes.

Use Cases

• Who should clone this: Creative agencies, architecture firms, or urban development projects that need to present a mix of long-form articles and visual portfolios in a prestigious, modern format.
• Effective Remixes: This pattern works well for luxury fashion lookbooks or tech portfolios where the brand identity relies on bold, oversized messaging.
• Remix Directions:
  • Style Swap: Keep the split-screen scroll logic but replace the high-contrast black/white with a more organic or pastel palette for a different brand mood.
  • Info Architecture: Adapt the "Projecten" vertical scroll section into a service listing for a B2B consultancy.
• Suggested Scope: Developers should prioritize cloning the Sticky Project Section first, as its split-screen scroll logic is the most technically distinct and visually rewarding part of the experience.