Lundqvist & Dallyn Studio Portfolio

Overview

This website is a sophisticated, minimalist portfolio for Lundqvist & Dallyn Studio, characterized by high-contrast typography and a dynamic, fluid masonry layout. It serves as an excellent reference for builders looking to implement a premium aesthetic that balances massive display symbols with a clean, functional navigation system.

Design System

• Color Palette & Visual Hierarchy: A strict monochrome foundation (pure black and white) with a subtle off-white background (#f0f0f0 visible in screenshots). Hierarchy is driven by scale rather than color, using oversized vector-style graphics and thin-line borders.
• Typography: The system leans heavily on a high-end serif for headlines and a stark, monospaced or refined sans-serif for utility text. The navigation and metadata (e.g., "WORK", "ABOUT", "CONTACT") use a small, all-caps, tracked-out sans-serif to maintain a "gallery" feel.
• Page Structure:
  1. Custom Loader: A full-screen transition overlay (c-loader).
  2. Masthead: Features a world clock (Oxford/NY/PDX) and large-scale video backgrounds (c-masthead-home__video).
  3. Fluid Grid: A non-uniform, masonry-style gallery of work featured as large image blocks with varying aspect ratios.
  4. Contextual About Brief: An inline text block integrated directly into the project grid rather than a separate section.
  5. Categorization Filter: A sticky or secondary navigation for filtering work by type (Logo, Brand, Digital).
• Reusable Components:
  • World Clock Nav: A unique utility located in the header that adds a global studio feel.
  • Interactive Image Cards: Cards that use picture tags with complex srcset for high-resolution photography.
  • Fluid Grid System: The specific CSS implementation of c-work-listing-featured__item which allows for mixed portrait and landscape images in a cohesive flow.
• Interaction & Motion: The HTML indicates a transition-fade class on the main container, suggesting smooth PJAX-style page transitions. There is a specific "horse" icon/video trigger and a custom video loader that creates a high-performance, cinematic entrance.
• Implementation Clues: The site uses BEM naming conventions (c- for components, js- for hooks) and is powered by DatoCMS for content, with Mux handling high-bandwidth video streaming.

Use Cases

• Who should clone this: Creative agencies, architectural firms, and high-fashion photographers who need their visual assets to be the primary focus of the UI.
• Effective Remixes:
  • E-commerce: Adapt the masonry grid for a "Lookbook" feature where images link to product pages.
  • Type Foundries: Use the oversized character display (like the 'K' in the screenshot) to showcase font families.
• Practical Directions: Remixers should consider swapping the off-white background for deep navy or charcoal to create a "dark mode" luxury feel. The info architecture can be adapted by placing the world-clock logic into a footer if the header becomes too crowded with links.
• Suggested Scope: A full-page clone is recommended to capture the sophisticated interplay between the custom loader, the fluid grid, and the typography-heavy navigation.