Spring/Summer Design Agency Landing Page

Overview

Spring/Summer is a Copenhagen-based design agency website that utilizes a minimalist "High-Fashion" digital aesthetic to showcase its portfolio. It is an excellent reference for builders looking to implement "Big Bang" typography, complex parallax video overlays, and a sophisticated horizontal scrolling case study carousel using lightweight modern frameworks.

Design System

• Color Palette & Visual Hierarchy: The site uses a muted, sophisticated base with a sage/off-white background (#E1E5D5 feel) paired with deep plum/charcoal typography. Visual hierarchy is driven by extreme scale; the landing page is dominated by massive headlines that act more as graphic elements than mere text.
• Typography: The system relies heavily on high-contrast sans-serifs. The "Big Bang" headline (ts-h1-exception) uses an ultra-bold, condensed sans-serif at massive point sizes (34vw or higher). Body text is divided into ts-body-l for high-impact descriptions and mono-spaced labels for metadata, creating a technical yet artistic feel.
• Page Structure:
  1. Dynamic Hero: Massive "NEW WORK" typography layered behind/beside a floating, parallax-driven video thumbnail.
  2. Strategic Intro: Large-scale body text for agency mission.
  3. Case Carousel: A swiper-horizontal module featuring immersive cards with video hover states and mono-spaced tags.
  4. Client Logo Grid: A flexible 6-column grid with grayscale SVGs.
  5. Split Secondary Content: Mixed media modules combining team imagery, award badges, and clean text columns.
• Reusable Components:
  • The Widget Bar: Floating contact/newsletter containers (widget-bg) that pin to the side with clean borders and circular arrow icons.
  • Case Teaser Cards: Immersive is-hoverable frames that transition from static images to video on hover.
  • Monospaced Tag System: Categories like "Websites" and "Brand Identities" use a consistent mono-font for a "built-in" aesthetic.
• Interaction & Motion: The site uses Nuxt-specific cursor followers and smooth parallax transitions. Elements are positioned with translateX/Y controlled by scroll position, giving the floating media a sense of depth against the background text.
• Implementation Clues: Built with Nuxt.js (verified by id="__nuxt") and utilizing Swiper.js for horizontal interactions. Video content is delivered via Mux, ensuring high-performance playback of the background loops.

Use Cases

• Who should clone this: Creative agencies, luxury portfolios, or technical startups wanting to appear established, design-forward, and premium.
• Effective Remixes: Perfect for high-end commerce brands where product shots can replace case study videos. The "Big Bang" hero is specifically effective for landing pages with short, punchy titles (e.g., "SPRING 24" or "THE FUTURE").
• Remix Directions: Swap the muted sage background for a dark mode (Midnight/Gold) to shift from "Design Agency" to "Crypto/Fintech" aesthetics. Keep the horizontal carousel but replace the content with product categories or team profiles.
• Suggested Scope: A full-page clone is ideal for those wanting the complete parallax-scrolling experience, but the Horizontal Swiper Carousel and Floating Sign-up Widget are the most versatile single-section extraction candidates.