Yamauchi No.10 Pixel Art Landing Page

Overview

This website is the digital home for the Yamauchi No.10 Family Office, utilizing a sophisticated retro-gaming aesthetic to honor the legacy of Nintendo’s founding family. It is a premier reference for clone/remix projects because of its masterful use of a pixel-grid layout, custom block-type rendering, and a high-contrast dark mode interface that feels both nostalgic and modern.

Design System

• Color Palette & Visual Hierarchy: A strictly dark background (#000000 or deep charcoal) serves as a canvas for a vibrant, high-saturation pixel palette. Accents of 'Nintendo' red, bright yellow, cobalt blue, and forest green are used sparingly to highlight key navigation nodes and decorative 'doodle' elements, creating a clear focal point against the monolithic grey typography.
• Typography System: The site uses chunky, custom-rendered block typography that mimics 8-bit characters. Scale is significant; the primary 'N010' logo and section headers (01. STATEMENT, etc.) use large-scale pixel clusters, while body text is presented in a clean, legible sans-serif for functional readability in both Japanese and English.
• Page Structure & Section Flow: The layout is a single-page scrolling experience divided into clear thematic zones: Introduction (Hero), Statement (Vision), Legacy (History), Philosophy (Values), and About (Activities/Leadership). Navigation is locked in a sidebar/floating hybrid style that persists as the user scrolls through the grid.
• Reusable Components: Notable components include the pixel-art logo container with color-coded blocks, the 'cube board' headers that use data-doodle attributes for decorative icons, and the 'dots' dividers which serve as playful, low-fi section breaks. The floating 'Investment' widget in the bottom-right is a perfect example of a non-intrusive call-to-action (CTA).
• Interaction & Motion Patterns: The HTML implies an 'Intro' sequence (introLogo.png) and sound-based interactions. The UI uses 'hover' classes on nearly every interactive element (links, social icons, CTA buttons), suggesting subtle state changes with a 'high-click' tactile feedback loop. Transitions are likely snapped to a grid to maintain the architectural feel.
• Implementation Clues: The structure uses a custom cube and square class system for layout, with data-scale attributes (ranging from 4 to 32) power-scaling the pixel sizing. This suggests a custom CSS grid or canvas-based rendering engine designed specifically for pixel-perfect alignment.

Use Cases

• Who should clone this: Creative agencies, game studios, and family offices looking to project a distinct heritage while maintaining a tech-forward, 'nerd-culture' edge.
• Effective Remixes: This pattern can be effectively remixed for artist portfolios or technical documentation sites. Replacing the dark theme with a 'GameBoy' olive/grey palette or a high-contrast 'CGA' palette (magenta/cyan) would drastically change the mood while retaining the structural integrity.
• Practical Directions: Developers can reuse the sidebar navigation and floating CTA structure for any minimalist landing page. The 'Leadership' cards, which pair professional bios with pixel-art headers, are excellent for team pages that want to avoid traditional photography.
• Clone Scope: A full-page clone is recommended to capture the immersion of the grid system, but the individual 'Philosophy' list items (li.square.listtop) are highly modular and can be extracted for use in feature lists or service overviews.