Atelier North
An editorial-first storefront concept where the lookbook is the shop
/ Overview
Atelier North is a self-initiated concept — an outerwear label whose customer reads the journal before they buy the jacket. We built it like a real product: type and color decisions, a working front-end, and an editorial system that earns the brand's tone.
/ What each case study includes
Brief: An outerwear label whose customer reads the journal before the jacket
Process: From lookbook studies to a working editorial system
Decisions: Type-led layout, full-bleed photography, and scroll-driven pacing
Build: A hand-built front-end where the lookbook is the interface
Status: Concept / spec work — not a shipped product
/ Challenge
Most fashion sites read like a catalog — product grid, filters, repeat. We wanted to design for the kind of brand whose story carries the same weight as the product itself. Atelier North is an outerwear label that needs to feel like a print issue first — a site you move through, not one you click around.
/ Provided Services
Brand identity
Mark, type system, and editorial voice built around the tension between function (technical outerwear) and form (gallery-grade presentation).
Editorial art direction
Typographic hierarchy, image pacing, and a grid that lets the brand pace itself slowly across the page — lookbook spreads sitting between collection grids.
Front-end development
Hand-built responsive front-end — semantic markup, a custom type and color system, and scroll-driven motion that keeps the editorial pacing intact on every screen size.
/ Solution
Type-led layout with hero typography that carries the season's voice. Photography runs full-bleed; navigation collapses out of the way. Scroll became the primary interaction — GSAP and ScrollTrigger pace each section so the page reads like a print issue you move through, not a store you click around.
/ Tech stack
HTML + CSS
Semantic, hand-written markup with a CSS type and color system built on custom properties — no framework, so the editorial layout stays exactly as art-directed.
GSAP + ScrollTrigger
Section pacing, type reveals, and the parallax behavior between editorial spreads — motion as a tool for tone, not decoration.
Vanilla JavaScript
Plain JavaScript for all interaction logic — menu, cursor, and component behavior — with no build-time framework layer between the design and the browser.
/ Keep exploring
