Fashion storefront & identity

FOOLY COOLY

An experimental fashion storefront built around the FLCL identity. A moving wordmark, a quiet product grid, and a browsing experience that adapts from desktop to mobile.

Role: Visual identity, interface design & development
Built with: Next.js, React, TypeScript & SVG motion
Status: Prototype

A name in motion. A quiet storefront.

FOOLY COOLY brings identity design and web development together. The full name compresses into FLCL while the collection stays visible. A restrained interface gives the clothing, footwear, and accessories room to carry the page.

This is a storefront experiment with working search, filters, product details, and a demo cart. It explores the browsing experience before a real catalog and checkout.

Full name. Same identity.

The original vector outlines anchor the project. On entry, FOOLY COOLY contracts into FLCL; hovering or focusing the mark opens the name again. The lettering keeps its proportions, and reduced motion shows the settled identity.

The complete original lockup. The compact header uses the main mark.

Let the collection speak.

A fixed category sidebar sits beside four columns of product photography. Compact Manrope type, a monochrome palette, and generous spacing keep the collection clear. Search, size filters, and sorting help narrow the selection without leaving the page.

Desktop collection showing clothing and footwear, with Search, Filter, and Cart controls above — Front and alternate product views, with size previews on desktop hover and keyboard focus.

A closer look at each piece.

A product opens in a native dialog with its photograph, price, colour, and available sizes. Selecting a size adds the piece to a demo cart, where quantities, removal, and the subtotal make the browsing flow tangible.

Leather jacket product details in the FOOLY COOLY storefront, with a size picker and cart action — Product selection and a sample cart. Checkout is outside this prototype.

The same collection, closer to hand.

On a smaller screen, the grid becomes two columns and the controls share one header. Visitors swipe between product photographs. Menu, search, filters, and cart use the page body, returning to the collection with its scroll position preserved.

Mobile FOOLY COOLY collection with the FLCL mark and Search, Filter, Cart, and Menu controls over two columns of products — The actual mobile layout, captured at 390 pixels wide.

A personal storefront prototype by Thvgger. Sample product photography comes from Stüssy and Fear of God references; it illustrates the interface and is not an original FOOLY COOLY catalog.