We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 06 · Boutique real estate agency · Concept

Cortelle

Homes with a courtyard of their own.

Cortelle, a fictional boutique agency. The home page is one hand-drawn sheet of an invented city: homes are stamps on it, the list is a drawer, and zooming into a street is the listing.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Cortelle site on a wide display: Homes with a courtyard of their own.
Opening screen, desktop

01 The brief

The brand
Cortelle is a fictional boutique real estate agency selling homes in the historic quarters of an invented city. Its tagline is "Homes with a courtyard of their own."
The problem
Home buyers looking in an old quarter want to understand the street before the rooms. The site lets them search and filter twelve fictional homes, save favourites and request a viewing.

02 The idea

The city is the page

What you see
A drawn atlas sheet of the invented city of Orvane fills the first screen. Twelve numbered enamel stamps mark the homes. Choose a quarter and the sheet zooms to it; choose a stamp and it zooms to the street, where the home's courtyard plot and footprint are drawn as a diagram and a card holds the facts, an example price and a link to the full plans. The list of all twelve homes is a drawer over the map, and its entries take the map to the street.
How it works
The sheets are original inline SVG, so no third-party map script is loaded. City, quarter and street are one continuous viewBox zoom. Escape closes the drawer, then climbs one level; the zoom and the drawer slide are switched off under reduced motion. Saved homes are kept in localStorage in the visitor's own browser.

03 Design system

  • Ground#E8D6A6 groundAtlas-buff sand around the sheet.
  • Ink#2B2A28 inkText, rules, frames and primary buttons.
  • Clay#A9744A accentSelected or chosen home, link underlines and the sun arcs. Never a button fill or text.
  • Muted#4A4A44 mutedSecondary text.
  • Paper #F5F3EC. Sheet interiors, plates and panels.
  • Paper 2 #EBE8DE. Filter panel, quarter legend and success box.
Type
  • Fraunces
    Soft old-style serif, weight 600, for headings, home numerals and the footer name.
  • Manrope
    Everything read closely, including the text inside drawings, at 17px.
Edges
The sheet sits in a chamfered 45-degree frame with an ink rim, echoing the quarter outlines. The title cartouche has one hard clay offset shadow; controls are 4px-radius plates.
Motion
The city-to-quarter-to-street zoom is a 420ms ease; it, the drawer slide, smooth scroll and the marker ring pulse are all switched off under reduced motion.

04 Process

  1. Pre-production

    Pre-production set the thesis (understand the street before the rooms), the route list and the risks, including that galleries for twelve homes could not be sourced from stock.

  2. Build

    The site was built from a written plan, with the drawn sheets and shared data first, then the browser, saved homes and the viewing form.

  3. Finish review

    Impeccable finish-review rounds compared the finished build with the direction and design system.

  4. Fixes

    Material findings were fixed and the pages checked again.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Original SVG atlas sheets, plans and elevations
  • No third-party map script
  • One continuous city, quarter and street zoom
  • Saved homes in localStorage
Access
  • Skip links and labelled regions
  • Every stamp is a labelled button; the drawer lists all twelve homes as the text twin
  • Stamps, zoom out and the drawer all work from the keyboard; Escape closes the drawer, then climbs one level
  • Plan viewer on each home steps with Left and Right arrows and closes on Escape
  • Save and filter buttons expose pressed state; drawings carry image roles and labels
  • Visible focus styles; marker pulse and smooth scroll off under reduced motion
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Cortelle is a fictional agency and a concept project by Artlogic. The city, streets, homes and prices are invented.

The viewing request is a demo and stores nothing. Saved homes stay in the visitor's own browser and are not sent anywhere.

The four quarter sheets, plans and elevations are original SVG drawn for this concept. The few photographs are free Unsplash stock used for mood only, always captioned as stock and never presented as a particular home, because stock cannot supply a full gallery for each home.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.