Handsome Frank Agency Landing Page

Overview

Handsome Frank is an illustration agency portfolio that uses a bold, split-background hero and high-impact vector graphics to showcase artistic talent. It is an exceptional reference for builders who want to balance minimalist navigation with a saturated, vibrant color story and large-scale media integration.

Design System

• Color Palette & Visual Hierarchy: The site uses high-contrast, atmospheric colors with a deep midnight blue (rgb(21, 4, 125)) h1 section against a cream-colored base. Individual sections use high-saturation background colors like forest green (rgb(4, 59, 51)), vibrant red (rgb(234, 7, 6)), and soft blue (rgb(165, 195, 239)) to delineate content shifts as the user scrolls.
• Typography: The system relies on a bold serif typeface for headings (h1, h2, h3) which provides a classic, editorial feel against the modern vector art. Smaller headings use a cleaner sans-serif or smaller serif variant, often utilizing bright accent colors like mint green (rgb(39, 213, 180)) for secondary callouts.
• Page Structure & Flow:
  1. Hero Section: A vertical split-layout featuring overlapping bold text and large vector character illustrations.
  2. Grid Teaser: A simplified artist showcase with dynamic image stacking.
  3. Alternating Feature Sections: Single-column blocks with media and text wrappers using a zigzag pattern (image left/text right and vice versa).
  4. Horizontal Scroll/Marquee: A carousel for blog insights and a continuous ticker for social proof/links.
• Reusable Components:
  1. Split-Background Hero: A full-height section where the background color changes halfway through the viewport.
  2. LinkWithArrow: A text link paired with a distinct arrow icon inside a container, styled to match specific section colors.
  3. Animated Eye Icon: A unique cursor-following or state-based navigational element used for the "View all" CTA.
  4. Stacked Image Cards: Portfolio cards that reveal multiple images on hover (DiscoverArtistsTeaser__Card).
• Implementation Clues: The site is built with Next.js, utilizing a component-based structure. Media is served via Sanity.io (CDN) and Mux for video streaming, suggesting a headless CMS approach for managing a high volume of visual assets.

Use Cases

• Creative Portfolios: Agencies or luxury studios looking for a design-forward way to display diverse artistic styles without the interface feeling cluttered.
• Brand Campaigns: Small landing pages for product launches (e.g., beverages or fashion) that need to emphasize "vibe" and storytelling over heavy text content.
• Remix Directions: Swap the illustration style for high-resolution photography to create a fashion editorial look. Builders can reuse the alternating SingleColumnSection pattern for long-form case studies or service breakdowns while maintaining the distinct background color shifts.
• Suggested Clone Scope: A quick section clone of the Hero Layout is recommended for those needing an immediate high-impact splash page. A full-page clone is ideal for agencies needing a robust, media-heavy content architecture that supports video, audio (podcasts), and blogs.