Vanth | Case Study | João Marcos

Overview

Vanth is a concept gothic couture house from Berlin. Its site presents the Autumn Winter 2026 season in eight lines, and each line has its own looks, pieces and eau de parfum. I created the brand, art directed every photograph with AI, and designed and built the store.

A visitor opens a piece from a dot on the photograph, picks a size, fills a bag and places a test order. The house, the lines, the names and the prices are fictional.

Role: Art direction, UX/UI design and front-end development
Scope: 74 pages, eight lines, eight fragrances and a shop flow
Tools: HTML, CSS, JavaScript, GSAP
Industry: Fashion, E-Commerce

The Problem

A couture house sells through its photographs. The visitor sees a gown on a staircase and wants its name, its material and its price in that moment. The store has to answer on the photograph itself and keep the campaign on screen.

The photography had a second job. Eight lines had to read as eight different worlds, and all of them had to belong to one house.

Art Direction with AI

Each line dresses a different tribe, with its own setting, fabric and color, and each one had a full photoshoot. A campaign photograph opens the line with its whole cast. The looks follow on location, one at a time. Each piece then appears alone, and the fragrance bottle rests on a surface taken from the world of its line.

Line	Fragrance	The world
01 Iron Court	Slate	Armour cut as eveningwear, in silver, black satin and camel wool
02 Night Office	Amethyst	Evening clothes for the hours after work
03 High Rise	Asphalt	The street, at couture scale
04 Machine	Halide	Studs and crystals over silk that turns from petrol blue to gold
05 Lost Paradise	Gilt	Black satin and emerald silk under hammered gold
06 Lacquer	Vermilion	Black leather over red and black satin
07 Riot	Feedback	Punk in couture tailoring
08 Old Blood	Sanguine	Blood red satin and black lace, in rooms lit by candles

Every photograph of the season sits on one grid below. Seen together, the eight worlds keep one light, one grain and one house.

Every photograph generated for the Vanth season, on one diagonal grid

Identity

The palette is paper, black and one red, and the red appears as a single accent on each screen. Headlines are set in Anton, in uppercase and at giant size. Inter Tight carries the body text and JetBrains Mono carries the labels. Corners are square. Most of the site sits on black, with sections in paper for breathing room, and a film grain runs over every page.

Scroll Interactions

The Home opens pinned. The campaign photograph grows until it fills the screen, and the word Vanth enters over it.
The manifesto lights up word by word with the scroll.
On desktop the eight lines pass sideways while the section holds. On a phone the row moves with a swipe.
Two rows of giant names run in opposite directions at the speed of the scroll.
On a fragrance page the bottle holds while the top, heart and base notes light up one at a time.
Each look photograph opens out of a narrow band into the full frame as it arrives.
Every scroll interaction follows the scroll in both directions, and the scroll itself is smooth.

Shop the Look

Each look photograph carries a dot on every piece for sale in it. Hover or keyboard focus opens a card with the name, the material and the price of the piece. One card stays open at a time, and Escape closes it. A click leads to the page of the piece. On a phone the first tap opens the card and the second tap opens the piece.

The Shop Flow

A piece page shows its sizes in six systems, EU, FR, IT, UK, US and JP. The size guide opens over the page and switches between centimetres and inches. Add to bag says which piece went in, and the count in the menu survives a reload.

The bag lists each piece with its quantity and the total in euros. The checkout arrives filled in with a test order, is free of charge and confirms the order in a dialog.

Build

The 74 pages are the Home, the lists of lines and fragrances, eight line pages, eight fragrance pages, 52 piece pages, the bag, the checkout and a 404.
The interactions run on GSAP with ScrollTrigger and SplitText, loaded after the first screen is drawn, so the page shows before the animation code arrives.
Pages change with a view transition, and a photograph that is still loading keeps its frame, so the move from page to page stays smooth.
The three typefaces are hosted on the site, with fallback fonts measured to the same size, so the text shows at once and keeps its place when the fonts arrive.
Every photograph comes in several sizes, so a phone downloads a smaller file.
Every page has its own title and description.
The photographs were generated with Higgsfield and Gemini.

Results

96-99performance on mobile
99-100performance on desktop
100accessibility and best practices

Home 99

Line 96

Piece 99

Fragrance 99

Lighthouse on mobile, published site, October 15, 2026.

Vanth

Styleguide

Colors & Buttons

#ECEAE4 · Paper

#0B0B0B · Black

#E5261F · Red

#8C8A84 · Grey

#FFFFFF · White

Typography · Anton, Inter Tight, JetBrains Mono

For the ones who dress after dark.

ExampleNameWeightSizeLine heightLetter spacing

A couture houseH1 · AntonRegular136px125px0

The eight linesH2 · AntonRegular80px76px0

Eight linesH3 · AntonRegular48px48px0

Iron CourtH5 · AntonRegular24px26.4px0

Armour as eveningwearBody · Inter TightRegular18px27px0

Autumn Winter 2026Label · JetBrains MonoRegular12px18px8%

Mobile

Made in

Design and build by joaomob