Atlason Design Studio Portfolio Layout

Overview

Atlason’s portfolio features a high-impact, three-column layout that serves as a multi-functional hub for brand identity, project showcasing, and curated insights. It is a powerful reference for builders seeking a non-traditional, non-scrolling landing page that uses vertical masonry and oversized typography to create a luxury editorial feel.

Design System

• Color Palette & Visual Hierarchy: A high-contrast monochrome base (pure black and white) is accented by professional product photography. Hierarchy is established through extreme scale—large headers dominate the top third, while small-scale metadata provides utility at the bottom.
• Typography System: The design utilizes a bold Sans-Serif font (Inter-like). It features a diverse scale: massive display text for brand names (~16vw), medium text for navigation headers, and small, condensed sans-serif for contact details and image captions to maintain an architectural aesthetic.
• Page Structure & Section Flow: The layout is divided into three distinct vertical columns:
  1. Atlason: Brand identity with a large hero image and sticky contact details (Visit, Connect, Follow).
  2. Works: A vertical scrollable masonry grid using a b-masonry component to display project cards.
  3. More: Editorial links and a featured product showcase section.
• Reusable Components:
  • Masonry Grid: A two-wide project grid (grid-item) with variable aspect ratios (work-ratio-1 to work-ratio-3).
  • Split Headers: Consistent column-top headers ("Atlason", "Works", "More") that anchor the user’s location.
  • Contact Row: A structured footer grid within the first column for densifying navigation and business info.
• Interaction & Motion Patterns: The HTML reveals a barba-wrapper for seamless page transitions and a custom cursor element (b-cursor). Images use transparent .webp assets to allow background blending. Hover states are likely managed through scaling wrappers (the-menu-scale-down).
• Responsive Behavior: On mobile, the columns stack vertically or collapse into an accordion-style filter system (b-accordion) as evidenced by the md:hidden utility classes in the code.

Use Cases

• Who should clone this: Independent creative studios, industrial designers, architects, and high-end fashion brands who want to show history, projects, and philosophy on a single screen.
• Effective Remixes: This pattern works well for luxury e-commerce landing pages—remix the "Works" column into a featured product feed and the "More" column into a lookbook or blog archive.
• Practical Remix Directions: Swap the monochromatic color palette for a brand-specific duo-tone. Adapt the information architecture by changing the columns to "Services," "Portfolio," and "Testimonials."
• Clone Scope: A full-page clone is recommended to capture the synchronized column behavior, but the vertical masonry project grid is a high-value individual component for any portfolio project.