---
id: "aw-el-c55eaf71-632c-451c-bbe4-e99bf02fa4ee"
source: https://www.awwwards.com/inspiration/property-card-era-residence
author: "The First The Last (thefirstthelast)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Luxury Apartment Floor Plan Card

## Summary
A property detail panel for a luxury residence: a cream sheet floats over an interior photo and presents one apartment with a towering condensed serif number, a crisp floor plan, a key stats column (bedrooms, interior area, terrace) and a navy pill to submit a request. The tall condensed numerals against tiny wide-tracked caps give it the feel of an architectural brochure. A strong reference for real estate listing pages that need to feel premium but stay legible.

## Style
- Theme: light (cream panel with navy ink over a sunlit interior)
- Mood: refined, calm, architectural, premium, precise
- Tags: real-estate, floor-plan, condensed-serif, property-card, spec-list, luxury, editorial
- Category: Components, Features

## Palette
| Role | Hex |
|---|---|
| Cream panel | #F3F2EC |
| Navy ink | #1B2440 |
| Taupe | #988E80 |
| Sky grey | #C2C9CE |
| Stone | #B6B0A6 |
| Linen | #DBD9D5 |
| Olive brown | #746B5B |
| Walnut | #473A2E |

## Typography
- Apartment number ("No. 031"): ultra-condensed high-contrast serif, uppercase, navy, about 6% of frame height. Closest free font: Bodoni Moda condensed is not available, so use Big Shoulders Display or Six Caps for the proportions, or Playfair Display SC in a narrow width.
- Stat values ("3", "134 m2", "44 m2"): same condensed serif, about 3.5% of frame height.
- Top-right nav heading ("Select an apartment"): condensed serif, uppercase, two lines, right-aligned, with a thin underline.
- Labels ("Available", "Penthouse duplex", "Book a call", "Contact"): tiny geometric sans caps, 9px, letter-spacing 0.2em. Montserrat Medium.
- Spec labels and body: small sans, 10 to 12px, sentence case for body. Montserrat or Manrope.
- Tabs ("Info", "Benefits"): 9px caps, the active one navy, inactive one faded grey.

## Layout
- 4:3 frame (1600x1200); the cream panel is about 90% wide and 63% tall, square-cornered, sitting over a full-bleed interior photo.
- Panel grid: a narrow left rail (circular seal logo top, vertical breadcrumb near the bottom), a centre area for title and plan, and a right column about 22% wide for specs.
- Title block aligned with the plan's left edge, about 60px from the top.
- Spec column separated by a 1px vertical navy hairline at 30% opacity; specs stacked with 28px gaps.
- Bottom-right action row: navy pill button (about 150x36px) plus two 36px outlined circles (PDF, share), 8px gap.
- No shadows; depth comes from the panel against the photo.

## Elements
- Circular seal: placeholder text set on a circle around a small floral emblem, navy, about 90px across.
- Floor plan: black wall lines, grey floor fill, furniture outlines, a hatched beige terrace with fine horizontal lines.
- Mini key plan: a tiny building silhouette with the selected unit filled navy.
- Compass: a 56px thin circle with an "N".
- Vertical breadcrumb: rotated 9px caps (Home / Apartment selection / No. 031).
- Tabs and description: Info and Benefits tabs with a hairline under them and a two-line description.
- Buttons: filled navy pill "Submit a request" in white caps, outlined circular PDF and share buttons.

## Motion
Static image. A subtle idea: when switching apartments, slide the floor plan in from 24px with a 400ms ease-out while the condensed number rolls digit by digit.

## Rebuild it
1. React card `bg-[#F3F2EC] text-[#1B2440] grid grid-cols-[120px_1fr_280px] p-12` over a `bg-cover` interior photo.
2. Load a condensed display face (Six Caps or Big Shoulders Display) for numbers and Montserrat for labels; labels `text-[9px] uppercase tracking-[0.2em]`.
3. Floor plan as an inline SVG so walls (`stroke-[3]`) and fills can be themed; the terrace uses a `pattern` of 1px horizontal lines.
4. Specs column: `border-l border-[#1B2440]/30 pl-6 space-y-7`, each label above a large condensed value.
5. Tabs: a simple state toggle with a Motion `layoutId` underline sliding between tabs (0.3s).
6. Action row: `rounded-full bg-[#1B2440] text-white h-9 px-5 text-[10px] uppercase tracking-[0.15em]` plus two `size-9 rounded-full border` icon buttons.

## Generation prompt
A refined luxury real estate web panel in cream with navy ink floating over a sunlit modern living room: a tall ultra-condensed serif apartment number, tiny wide-spaced caps labels, a clean architectural floor plan with a hatched terrace, a small key plan and compass, a right column of condensed serif stats for bedrooms and area, info tabs, and a navy pill button with two outlined circle icons; calm, premium, architectural.