More Studio Creative Agency Portfolio

Overview

More Studio’s portfolio is a masterclass in experimental, high-impact creative direction, blending brutalist typography with sophisticated interactive elements. It serves as a premier reference for developers looking to build immersive agency sites that prioritize visual storytelling over traditional grid layouts. Key highlights include the massive headline typography that serves as both content and structure, combined with seamless video transitions.

Design System

• Color Palette & Visual Hierarchy: A high-contrast monochrome base (black and white) allows photography and video content to pop. Layout emphasis is achieved through scale—specifically the massive "MORE" lettering—rather than color.
• Typography System: The site uses a clean, grotesque sans-serif (likely a variant of Akzidenz-Grotesk or a similar bold Swiss style). It features a distinct hierarchy of extreme opposites: oversized headline characters (hundreds of pixels tall) versus small, functional metadata and nav items (12-14px).
• Page Structure: The layout follows a non-linear flow: a heavy typographic hero section, followed by a dense text intro, then a staggered gallery of project media, and finally a comprehensive accordion-based list of all work.
• Reusable Components:
  • The Accordion List: A minimal Project__Wrapper containing collapsible headers with metadata that expand to reveal project details.
  • Video Modals: A high-end viewport-filling video overlay (Modal__Wrapper) with a distinct "Close" button trigger.
  • Floating Cursor Callouts: Absolute-positioned elements (Cursor__CursorWrapper) that simulate team presence by showing "is sleeping" statuses throughout the studio section.
• Interaction & Motion: The site utilizes complex hover states where images track the cursor position or swap dynamically. The central "MORE" hero uses a vertical sliding modal that overlaps the typography.
• Implementation Clues: Built with Next.js and Styled-Components (evidenced by class names like pages__Wrapper-sc-1cvwks4-3). It relies heavily on absolute positioning and CSS transforms for its overlapping layout effects.

Use Cases

• Creative Agencies & Studios: Ideal for those wanting to signal an "experimental" or "design-first" ethos through brutalist typography.
• Exhibition & Event Sites: The large-scale text and immersive media modals are perfect for digital art galleries or high-concept event landing pages.
• Portfolio Remixes: Developers can clone the Accordion Project List to handle large volumes of work cleanly, or the Hero Typography structure to create a bold landing experience.
• Remix Strategy: Swap the monochrome palette for a vibrant duo-tone style or replace the sans-serif font with a high-contrast serif for a luxury fashion feel while maintaining the structural layout.
• Scope: A full-page clone is recommended for high-end creative work, while the accordion list and video modal are best for modular section-based reuse.