Extract Studio Design Agency Portfolio

Overview

Extract Studio's website is a masterclass in high-contrast, minimalist branding that uses oversized typography to establish immediate authority. It is an excellent clone reference for creatives who want to showcase high-quality imagery within a clean, rigorous layout that prioritizes content over complex UI elements.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic base (pure black #000000 on pure white) with functional background shifts, such as the bg-extract-green section for secondary content. Hierarchy is defined by extreme scale differences between the massive hero wordmark and the refined body text.
• Typography: The system relies on two distinct styles: a bold, wide sans-serif for the brand identity (visible in the "Extract" logo) and a sophisticated serif (likely a custom variation of ABC Caslon or similar) for headings and body copy. The HTML reveals a fluid-text-xl utility, suggesting a responsive type scale that shrinks gracefully for mobile.
• Page Structure: The layout flows from a massive branding block to a focused mission statement, followed by a dense 2-column project grid. It concludes with a three-column "Newsworthy" section and a minimal footer, maintaining a strict 11/12 width container.
• Reusable Components:
  • Floating Navigation: A bottom-fixed, rounded-pill navigation bar (Projects, Latest, About us, Contact) that stays accessible without obscuring the top-heavy typography.
  • Image Hover Grid: Project cards (aspect-4/3) featuring a sophisticated stack of absolute-positioned images. On hover, these rotate visibility to create a "flipbook" preview effect.
  • Animated Underline Links: Links use CSS transitions (AnimatedUnderlineLink_animatedLink) that animate a border-bottom on hover.
• Interactions: The site uses a custom cursor and smooth page transitions (page-transition-overlay). The project grid uses opacity: 0 and visibility: hidden states to toggle preview images during user interaction.
• Implementation Clues: Built with Next.js and Tailwind CSS (visible via xl:w-11/12, grid-cols-1, and flex classes). Sanity.io is used as the headless CMS for dynamic image and video assets.

Use Cases

• Who should clone this: Independent design studios, architects, or high-end photographers who need a portfolio that feels "expensive" but remains functionally simple.
• Remix Directions: Swap the monochromatic scheme for a bold duo-tone palette to match a different brand identity. The project grid can be easily adapted to a single-column layout for more immersive case study previews.
• Suggested Scope: A full-page clone is ideal for those needing a complete brand overhaul. Alternatively, the bottom-fixed floating nav and the hover-flip image cards are standout components that can be integrated into existing React/Tailwind projects.