Back to portfolio
AI-assisted concept · Claude Code
Case Study 001

Neural
Studio

A futuristic landing page for a product design studio, shaped through visual direction, UX/UI structure and a full design system, then brought to life with AI-assisted coding.

Role
Design system, visual direction, UX/UI
Coding support
Claude Code
Format
Product design studio landing page
Neural Studio landing page hero
Concept

A high impact studio website built around neural aesthetics, polished 3D inspired imagery, dark editorial sections, and clean service storytelling.

My part

I shaped the art direction, section flow, visual hierarchy, responsive experience, interaction ideas, and the design system behind the page.

AI support

Claude Code helped translate the concept into a working front end so motion, hover states and interactive sections could be explored quickly.

Design system
The visual system uses a sharp contrast between black cinematic sections and pale interface sections. Red acts as the main signal color, while electric lime appears as a secondary accent for active states and service moments.
Black
Pale
Signal Red
Electric Lime
Typography
NEURAL
STUDIO

The type system uses heavy rounded display headlines for impact, compact uppercase labels for navigation, and smaller functional text for cards and metadata.

Buttons & actions
Catalog Our services

The action language mixes pill shaped CTAs, small circular controls, and sharp hover feedback so the experience feels interactive even in a static case study presentation.

Inside the Neural Interface

Scroll
Neural Studio hero screen

The hero creates the first impression with a large neural character, structured grid lines, and bold studio typography that instantly sets the futuristic tone.

Neural Studio selected work gallery

The project gallery uses oversized cards, hover reveals, and red/lime accent lines to make browsing feel interactive and cinematic.

Neural Studio gallery hover state

The alternate card state shows how the interface can switch from visual first browsing to project information without leaving the section.

Neural Studio services section

The service system shifts into a bright editorial mode, using huge section numbers, minimal copy, and category chips for clarity.

Neural Studio closing section

The closing section returns to a darker cinematic world, using glass cards and red light to connect back to the neural brand atmosphere.

Neural Studio in Motion

Hero focused recording — highlighting the opening visual system, navigation, and cinematic first impression.

Full website recording — showing the full landing page flow, interaction states, and section transitions.

The Full Neural Build

Neural Studio full landing page

© 2026. All rights reserved.