Built to endure. Designed to inspire.
A luxury architectural residences website combining Quiet Luxury, Swiss editorial precision, and Architectural Minimalism — built with Next.js, TypeScript, and Tailwind CSS.
The STONE homepage — massive architectural photography, Swiss grid precision, and quiet luxury typography.
Overview
STONE is a concept website for a luxury architectural residences firm. The design synthesises three distinct visual languages: Quiet Luxury establishes a calm, premium mood through restrained colour and texture; Swiss/International Style provides a rigid 12-column grid with typographic hierarchy; and Architectural Minimalism treats the webpage as a gallery where photography is the art.
"If you have to scream about being premium, you probably aren't."
The Design Challenge
The challenge was creating a luxury real estate site that doesn't feel like a real estate template. Most property websites rely on heavy UI chrome, flashy animations, and generic stock photography. STONE inverts this — the interface disappears, and the architecture speaks through massive photography, precise grid alignment, and razor-sharp typography.
Every element on screen must serve a functional or aesthetic purpose. If a line or box doesn't add value, it is stripped away. The result feels like opening a heavy-paper architecture book — not browsing a property listing.
Typography System
The typography pairs a high-contrast, deeply sophisticated display serif (Cormorant Garamond) with an ultra-structured geometric sans-serif (Inter) for technical data and UI elements.
Display headlines use weight 300 — never bold — letting the razor-thin serifs create luxury texture. Metadata uses uppercase with wide tracking, treating text like elements on a blueprint.
Colour as Material
The palette avoids pitch black and pure white, which feel sterile digitally. Instead, it uses organically muted tones that mimic real building materials — Italian travertine (#F9F8F6), raw concrete (#F1EFEA), matte powder-coated steel (#1A1A1A), oxidised metal (#6E6A64), and dark slate (#2C3531).
Technical Architecture
STONE is the first project in the portfolio built with a modern framework. Next.js App Router handles routing, static generation, and image optimisation. TypeScript provides type safety for the property data model. Tailwind CSS (v4) manages the design system through CSS-based configuration.
The property detail pages are dynamically generated from a centralised data layer. Each property carries structured data for location, specifications, materials, features, landmarks, and images — enabling consistent rendering across all five residences.
Interactive Features
The interactive floor plan uses inline SVG with hover states to reveal room names and areas — a digital equivalent of an architect's drawing. The Leaflet map integration uses CartoDB Positron tiles for a muted, architectural feel. The image lightbox supports keyboard navigation and swipe gestures.
See it running
Open the live concept site and explore the property detail pages — gallery, floor plan, map, and enquiry form. The source is public on GitHub.