KYNStore

Case study · Web · 2026Scroll to expand

KYN Store[01 / 07] — Web · 2026

A custom storefront for KYN Studio’s signature collection. Expressive typography, apparel and accessory previews, three visual themes and an image-based jacket viewer bring the studio’s identity into a merchandise experience. The live catalog is currently coming soon, with purchasing disabled.

Explore the storefront

Role

UI design & front-end engineering

Sector

Studio merchandise · Apparel & accessories

Platform

Web · Coming-soon catalog

Year

2026

Context

Software, carefully worn.

An internal KYN Studio project

The store extends KYN’s identity beyond software into a collection of apparel, accessories and everyday objects. This case covers the branded interface, front-end architecture and AI-assisted product presentation. It does not document manufactured stock, a photo shoot or an operational sales channel.

What is live

Catalog

14 previewsA local catalog of apparel, accessories and everyday objects.

Appearance

3 themesDark, light and red, with a persisted desktop selection.

Product exploration

8 generated viewsAn image-based jacket rotation sequence with inferred sides and back.

Commerce status

Coming soonPurchasing is disabled. No operational payment or fulfillment flow is demonstrated.

These are delivered interface capabilities and catalog scope, not sales or conversion results.

The brief

A studio collection should feel like the studio, not a generic shop template.

The challenge was to make a merchandise catalog unmistakably KYN: expressive enough to stand as a brand experience, structured enough to browse, and honest about a collection that is not yet available to buy.

Make the collection tangible. Keep its status clear.

What we built

A brand-led catalog, built around the product.

A large KYN wordmark opens into apparel, accessories and a graphic lookbook. Product pages pair lifestyle imagery with isolated views, concise descriptions and clear availability. The technical jacket adds an eight-angle, image-based viewer with rotation controls and magnification. Dark, light and red themes give the same interface three distinct moods.

What we built[01—06]

01A distinctive storefrontOversized typography, a restrained grid and motion-led transitions carry the KYN identity through the homepage, product pages and bag.

02One structured catalogFourteen local product records supply titles, descriptions, imagery, options and availability across apparel, accessories and desk/lifestyle goods.

03Three visual modesDark, light and red themes share the same interface. Desktop theme controls save the selected appearance between visits.

04An eight-angle jacket viewerDrag, arrow controls and an angle selector step through eight generated product views. A magnifier helps visitors inspect image details. This is an image sequence, not a 3D model.

05Clear coming-soon behaviorProduct pages display Coming soon and disable add-to-bag. A local persisted bag implementation exists in the front end, but the inspected checkout button has no payment action.

06AI-assisted visual productionThe documented image workflow combines supplied references, product cutouts and generated views. The jacket’s side and back details are inferred, with that limitation stated in the viewer.

Inside the product11 screens

The storefront & visual system

6 screens

The storefrontThe desktop store in its default dark theme.

KYN apparel catalog with hoodie, jacket, windbreaker and polo preview cards marked Coming soon. — **The apparel collection**Lifestyle imagery introduces the first apparel pieces.

Store catalog showing accessory previews including a cap, bottle, tote and notebook. — **Beyond apparel**Accessories and everyday objects continue the collection.

KYN graphic lookbook arrangement of isolated apparel and accessory visuals. — **A graphic lookbook**A second composition mixes isolated product views across the catalog.

KYN Store desktop homepage in light mode. — **In the light**The same storefront with its light palette.

KYN Store desktop homepage in the red theme. — **Electric red**A third visual mode keeps the layout and changes its tone.

Inside the product pages

3 screens

KYN Essential Hoodie detail page showing a cream product visual, description and disabled Coming soon control. — **The product page**Product imagery, a concise description and explicit coming-soon status.

Technical jacket image-sequence viewer at the front angle, with rotation controls and generated-view disclosure. — **Eight views, one jacket**The image-based viewer adds rotation and angle controls.

Jacket viewer with the magnifying glass enabled over the generated rear view. — **Inspect the details**A magnifier explores an inferred generated rear view, not a 3D model.

On a narrower screen

2 screens

KYN Store homepage in a narrow 390-pixel layout. — **A narrower storefront**The live homepage at 390 CSS pixels wide.

Image-based technical jacket viewer in a 390-pixel narrow layout with its generated-view disclaimer. — **Product exploration, stacked**The jacket viewer and imagery in a narrow-screen layout.

Context

About the product visuals

The project repository documents AI-assisted processing and generation of product imagery. The jacket viewer uses eight separately generated images, with side and back details inferred from a front reference. The case study screenshots show the actual website UI; the product imagery inside that UI is not evidence of a physical shoot, 3D scan or final manufactured garment.

Built with

Static pages. Focused interactive components.

Astro provides the storefront structure, with React components for interactive interface state. Tailwind CSS and shared tokens define the visual system; GSAP supports the motion layer. Nanostores persists the local bag in the browser. Product data is local JSON, not a verified Shopify or Stripe integration. Catalog-aware metadata avoids presenting placeholder zero prices as purchasable offers.

Built with

Stack

AstroReactTypeScriptTailwind CSSGSAPNanostores

Next up

Back to all works

Want something like this?

Start a project Explore the storefront Next case ↗