Bibliothèque Design Portfolio Landing Page

Overview

Bibliothèque is a London-based design studio portfolio that utilizes a high-impact, editorial-first landing page. It is an excellent clone reference for creatives who want to balance minimal typography with bold video backgrounds and experimental graphic overlays.

Design System

• Color Palette & Visual Hierarchy: The site uses a monochrome base (black/white) for maximum contrast, allowing hero imagery and golden textured overlays to define the focal point. The metallic gold overlays (.Landing with abstract shapes) create a premium, tactile feel against the digital background.
• Typography: A clean, geometric sans-serif (resembling Helvetica or similar architectural fonts) is used. The logo at the top left is treated as a letter-spaced character chain (.Site-logo .Link .char1, .char2...), emphasizing the studio's focus on type and layout.
• Page Structure:
  1. Intro/Hero: A full-screen video background (.Landing-video) with static geometric gold graphics centered.
  2. Project Index: An alphabetical client list (.Client-list) that reveals project cards when expanded.
  3. Information/About: Accordion-based sections (.ui-accordion) for "Recognition," "Selected Clients" (a logo grid), and "Services."
• Reusable Components:
  • The Client List: A highly scalable vertical list where each item acts as a toggle to show specific projects.
  • The Logo Chain: A CSS-driven logo treatment that splits characters for individual animation or styling.
  • Project Cards: Landscape-oriented .Item--tile components with clear image-to-text hierarchy.
• Interaction Patterns: Uses a "toggle state" system (.ui-toggleState) for search and menus. Navigation involves smooth transitions between a cinematic intro and structured content. From the HTML classes like ui-watchScroll and ui-masonry, it's clear the site relies on custom scroll triggers and a grid-based secondary layout.
• Implementation Clues: Built with a custom UI framework (ui- prefix classes), standard HTML5 video, and a data-driven approach for project lists and masonry results.

Use Cases

• Cloning Targets: Fine artists, fashion labels, or high-end architectural studios should clone this to emphasize visual sophistication over heavy copy.
• Effective Remixes: This pattern works for high-fashion lookbooks by swapping the gold overlays for dynamic product photography, or for film production agencies where the video background can be a showreel.
• Remixing Strategy:
  • Information Architecture: Adapt the alphabetical client list into a "Services" or "Capabilities" list.
  • Graphic Styles: Replace the gold geometric shapes with brand-specific SVG patterns or glassmorphic elements.
• Scope: A quick section clone of the interactive alphabetical client list is valuable for large portfolios. A full-page clone is recommended for those wanting a complete "portfolio-as-art-direction" experience.