Fashion · Light

Heavyweight

A fashion store treated like a gallery catalog: almost total white, warm photos in a diptych, a cut-out product floating over the void and pages that swap through a grid of squares.

Palette

--bg#FDFDFD
background of all pages
--surface#F4F3F1
half-screen of the loader, thumbnail background and hover states
--ink#141414
wordmark, titles, filled "add to bag" button
--text-2#6E6E6C
metadata, spec labels (≥4.5:1; the video's gray, ~#8A8A88, doesn't pass)
--line#E7E2DE
spec sheet dividers, selector outlines
--warm-dark#2F1B13
shadows of the cover photos (brown wall)
--warm#5A3D30
dominant earthy tone of the photos and hover accent

Typography

Display: light neo grotesque, weight 300, normal case (wordmark in lowercase), tracking -2%, product titles at clamp(32px, 3.4vw, 52px) — suggestions: Inter Tight Light / General Sans (Fontshare)
Body: the same grotesque, 400, 13–14px, line-height 1.45, narrow columns (~32ch)
Support/labels: 10–11px, 400, normal case, gray; breadcrumbs and "N items" counter aligned right — suggestions: Inter / Geist
Treatments: centered wordmark in the nav; price numbers without bold; spec sheet in label/value pairs with thin lines; sizes in squares.

Sections

Loader — screen split vertically (left half slightly grayed), lowercase wordmark in the center; opens onto the cover.
Nav — small links on the left, central wordmark, search/account/bag on the right; fixed translucent white background.
Diptych cover — two full-height photos side by side (half-length × full-length, same look), small pill button at the center of the bottom seam.
Catalog — light title on the left, counter on the right, 4-column grid with cut-out garments/models on white, name and price on 2 lines; hover reveals a size selector.
Product page (another route) — 3 columns: on the left a large title, price and description; in the center the cut-out garment/model at full height; on the right a size selector in squares, a filled "add" button, and the spec sheet below; view index (01 model, 02 front, 03 back) that swaps the central image; floating confirmation pill.
You may also like — grid of 4 with a "see catalog" link on the right.
Social feed — title with @, "follow" link on the right, mosaic of square photos in 6 columns × 2 rows.

Motion and interaction

Square transition: click on a route link → a grid of ~12×8 white squares appears in diagonal waves covering the page (stagger 15 ms per cell, 350 ms each), the route swaps, and the squares disappear in reverse order; during the swap the content is blurred/pixelated. GSAP + router.
Cover → catalog: scroll → the diptych photos rise with 0.8 parallax and the catalog docks in; Lenis.
Product view swap: the central column scrolls through the stacked views 01/02/03 while the side columns stay sticky; the index follows (dash advances) and also accepts clicks.
Add to bag: click → dark pill rises from the bottom with the garment name and size, disappears after 2.4 s; bag counter increments.
Card hover: image swaps to a second photo and the size row appears (fade 200 ms).
Feed: entrance → squares fade in with a slight 8px→0 blur in stagger.

Components

Lowercase wordmark, weight 400, centered.
Small pill button: 1px white outline over a photo, 11px.
Filled button: black #141414, 999px radius, 40px height, full column width, white 12px text with price.
Size selector: 48×28px squares, 1px --line border, selected one solid black.
Product card: cut-out image on --bg background, 12px name + 11px gray price.
Spec sheet: list of label (gray) / value (black) with a 1px divider.
Bag toast: 36px black pill with 11px white text.
Social feed tile: borderless square, 2px gap.