Yung Studio Creative Agency Portfolio

Overview

This website is a minimalist, high-impact creative agency portfolio for Yung Studio. It excels as a clone/remix reference due to its masterful use of negative space, oversized typography, and a unique "Logo Shuffle" hero animation that establishes brand personality without clutter.

Design System

• Color Palette & Visual Hierarchy: A strict high-contrast dark theme utilizing a black background (#000000) and white text. Color is used sparingly as an accent on interactive elements, such as the diverse hover states for buttons (e.g., btnTiger, btnUbe, btnWater).
• Typography: The system relies on a clean, modern sans-serif. It features a dramatic scale contrast: body text is set around 40px (mainFont--40), while section headers like "Featured Work" and "Memos" use oversized, uppercase 160px type (mainFont400--160).
• Page Structure: The flow follows a "Story-then-Result" logic:
  1. Hero statement and animated logo shuffle.
  2. Vertical scroll of large-scale featured work tiles.
  3. A "Memos" list for editorial content.
  4. A grid-based "Our Services" list.
  5. A footer-integrated navigation grid ("Jump to").
• Reusable Components:
  • Logo Shuffle: A stack of centered SVG logos that cycle or shuffle.
  • Work Cards: Large figure containers with lazy-loaded, blurred placeholder images and high-contrast titles.
  • Interaction Buttons: A collection of blocky, pill-shaped buttons with distinct class-based color variations.
• Interaction & Motion: The site uses scroll-triggered fade-ins (opacity: 0 to 1) and upward translations (translateY(60px)) to create a smooth, cinematic reveal as the user scrolls. The HTML reveals an animatable class used globally for these transitions.
• Implementation Clues: Built with Next.js (noted by __next ID and _next/image paths) and styled using CSS Modules. The layout uses a fixed-width container system (px--container) to maintain consistent horizontal gutters.

Use Cases

• Who should clone this: Independent designers, boutique creative agencies, or architectural firms looking for a "brutalist-light" aesthetic that prioritizes visual portfolio work over dense text.
• Product Remixes: This pattern effectively translates to high-end fashion lookbooks, experimental tech labs, or landing pages for luxury products where the brand identity is the primary selling point.
• Practical Remix Directions:
  • Brand Swap: Replace the black/white palette with a two-tone brand color (e.g., Deep Navy / Cream) while keeping the 160px typography.
  • Architecture Adaptation: Use the "Services" list grid for a dynamic FAQ or pricing feature section.
• Suggested Clone Scope: The "Jump to" footer and the oversized headers are excellent quick-clones to elevate an existing simple site. A full-page clone is recommended for anyone wanting to achieve a premium, motion-heavy feel using a standard vertical scroll hook.