The problem
A capability proof at the standard of Vogue.com and Wallpaper* — built to be defended, not just admired.
13-page luxury magazine SPA in 111 KB. Cormorant Garamond + Libre Baskerville + DM Sans. 30 lines of router. 86 editorially-curated images.
Market context: Luxury editorial · benchmarked against Condé Nast and The Economist · print-heritage typography · no-border-radius discipline.
Duration · ~1 week
See the live buildThe result · in numbers
13
Pages in one HTML file
111 KB
Total file weight · self-contained
86
Editorially-curated images
30
Lines of SPA router · zero frameworks
The brief
What the client actually needed.
A capability proof at the top of the category — a luxury magazine SPA that holds up against Vogue.com, Wallpaper*, The Economist, and Monocle. The brief I set myself: build a portfolio piece that, when a prospect opens it after seeing those references, sits in the same tier — not aspiring to it. Most Indian web agencies don’t have a portfolio piece in this category. Clicknify needed one that prospects could open and immediately calibrate against international premium standards.
The problem
What was broken — in numbers.
Luxury editorial web design is arguably the most demanding category in web design. The typography has to work as hard as Vogue, the curation as intentional as Wallpaper*, the IA as deep as The FT.
- Reference benchmark
- Vogue · Wallpaper* · The Economist · Monocle
- Pages required
- 13 (Home + 8 categories + Article + About + Contact + Careers)
- Technical constraint
- One self-contained HTML file · no frameworks
- Acceptance bar
- "Could ship as a product" — not "looks good for a portfolio"
The approach
What we did. Why.
Reference, don’t guess. 40 minutes of benchmarking across Vogue, Wallpaper*, Monocle, and The Economist — what makes their typography feel authoritative, how they handle the cover-story hierarchy, what structural decisions separate editorial from corporate. The design system was written before any HTML.
- Three-font hierarchy — Libre Baskerville (display), DM Sans (body), Cormorant Garamond (italic pull quotes). Each font with one job, doing only that job.
- Five colour decisions — Ink #0D0B08 (warmer than pure black), Bordeaux #5A1422 (aged auction red, not wine-barrel), Champagne #B59868 (aged-paper gold, not new-jewellery gold).
- No border-radius anywhere — luxury print has sharp corners. The moment you add border-radius to a luxury card, it starts looking like a SaaS dashboard.
- 25 CSS tokens written before a single HTML element — every later decision becomes "which token applies here," not "what colour should this be."
The execution
Inside the work.
The 30-line SPA router
Every element with a data-p attribute is a navigation link. One click handler covers all 116 links. The router hashes the URL (#fashion, #article) so browser back/forward work correctly. The complete router — pages array, show function, click handler, popstate — fits in 30 lines of vanilla JavaScript.
Six different image hover speeds
Cover story: 0.9s ease. Article cards: 0.65s ease. Lifestyle main: 0.9s ease. Full-bleed editorial: 1.2s ease. Larger images move slower. Smaller cards move faster. This mimics how physical objects work — a small card flips quickly, a large painting rotates slowly. No client ever names this detail; every client feels it when they say "it just feels premium."
Editorial image curation, not random fetching
Every one of the 86 images was chosen for its specific editorial role. The watches category hero is a close-up of a luxury watch. The interiors category hero is a high-design living space. A portfolio piece with a jewellery article illustrated by a rock-climbing photo doesn’t demonstrate editorial judgment — it demonstrates that you used a placeholder.
The outcome
What moved. And why.
13 pages in 111 KB. Reads at the tier the brief required.
- 116 navigation links — all functional, zero broken
- 8 category pages generated from one Python template — structural consistency with content uniqueness
- Drop caps, reading progress bar (article page only), hash-routing with browser-history support
What didn’t work
Every honest case study has one. This builds more trust than ten testimonials.
The CSS shorthand naming system (<code>.ac</code>, <code>.ai</code>, <code>.aitg</code>) kept the file under the size budget — but it creates a barrier to entry for any developer joining the project cold. In a team project I’d use BEM or scoped naming with a dictionary. The 86 images depend on external Unsplash URLs — fine for a portfolio demonstration, brittle for a live magazine. And the hash-based routing works as a client-side SPA, but search engines don’t always index hash-fragment URLs correctly — a production Maison.com would need clean URL paths and SSR.
Building a brand that needs to sit in the premium tier? The Clarity Call is where it starts.
Book the Clarity Call
Bring one problem.
Leave with one framework.
The Clarity Audit is how every Clicknify engagement starts. 30 minutes, live, with the Founder. We diagnose one thing — a stuck channel, a leaky funnel, a brand decision that keeps slipping — and leave you with the framework to fix it. Yours to keep, regardless.
- 30 minutes · live diagnostic
- One channel, one funnel, or one brand decision
- Yours to keep — no pitch unless you ask for one
- Founder on every call
Ashwani Srivastava, Founder, on every call. Responses within 2 hours during IST business hours · same-day for international enquiries.