---
id: "aw-el-9daec257-b38f-488c-b147-ef702c25a19c"
source: https://www.awwwards.com/inspiration/contact-page-era-residence
author: "The First The Last (thefirstthelast)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Powder Blue Contact Page With Line Map

## Summary
A contact page for a luxury residential development, set entirely in powder blue: a towering compressed serif "CONTACT US" headline, three centred contact columns, and a hand-styled line map of the coastline with a navy tooltip marking the sales office and a large outlined "book a call" circle. It shows how a single tint, one serif and a custom map can make a utility page feel as premium as the hero.

## Style
- Theme: light (monochrome powder blue)
- Mood: serene, refined, coastal, elegant, quiet
- Tags: contact-page, custom-map, condensed-serif, monochrome, real-estate, circular-badge, tooltip
- Category: CTA, Typography

## Palette
| Role | Hex |
|---|---|
| Background | #B5CEDC |
| Sea light | #C1D6E1 |
| Land block | #ACC4D2 |
| Shore haze | #C9DCE5 |
| Road grey blue | #9BB3C2 |
| Map line | #75899B |
| Muted navy | #38475C |
| Ink navy | #1B2742 |

## Typography
- Headline ("CONTACT US"): compressed high-contrast didone serif, regular, all caps, very tight tracking, about 13% of frame height, ink navy. Closest free: Bodoni Moda (500) scaled to about 70% width, or Instrument Serif (400).
- Top-right link ("SELECT AN APARTMENT"): same compressed serif, two lines, about 2.5% of frame height, underlined.
- Labels and values ("WRITE US", "SALES OFFICE", "TALK TO US", the address and phone lines): wide grotesk sans, 11 to 12px equivalent, uppercase; labels regular, values semibold, tracking 0.04em. Archivo (500 and 700).
- Micro caps ("BOOK A CALL", "CONTACT", map labels, breadcrumb): sans 9px, uppercase, tracking 0.2em. Archivo (600).

## Layout
- 4:3 canvas (1600x1200), fully flat powder blue with no cards.
- Headline centred at the top, spanning about 40% of the width.
- Corners: circular text-ring badge top left (about 100px), stacked links top right aligned right.
- Contact row: three equal centred columns at about 28% height, label above value with a 6px gap.
- Map occupies the lower 60%, centred, about 45% of the width, with a lighter sea shape sweeping in from the bottom right.
- Left edge: a 40x124px bordered box of three stacked social icons separated by short dashes; a vertical rotated breadcrumb near the bottom left.
- Right of the map: a 200px outlined circle with left-aligned "BOOK A CALL NOW" text and two short dark arc segments on its stroke.

## Elements
- Circular badge: placeholder name repeated around a ring, a four-petal monogram in the centre.
- Contact columns with placeholder email, address and phone.
- Line map: thin grey-blue roads, a double-line highway curving across, roundabouts as small circles, building footprints in a slightly darker tint, dotted contour lines, and labelled place dots.
- Navy tooltip: rectangle with "SALES OFFICE" and opening hours in tracked white caps, the monogram at right, a small pointer at the bottom right.
- Social box: 1px navy border, 14px icons.
- Outlined circle CTA with partial navy arcs suggesting progress or rotation.

## Motion
Static image. On hover, the two arc segments on the CTA circle could rotate around the stroke over 1200ms while the tooltip gently bobs 3px.

## Rebuild it
1. Page: `min-h-screen bg-[#B5CEDC] text-[#1B2742] relative px-10 pt-10`.
2. Headline: `h1` centred with a compressed serif at `text-[9rem] leading-none tracking-tight uppercase`; if using Bodoni Moda, add `transform: scaleX(0.72)` on an inline-block.
3. Contact row: `grid grid-cols-3 text-center text-xs uppercase mt-24` with labels `font-normal` and values `font-bold tracking-wide`.
4. Map: an inline SVG drawn in the brand tints (strokes 1 to 3px, #9BB3C2 and #75899B), positioned with `absolute bottom-0 left-1/2 -translate-x-1/2 w-[45%]`.
5. Tooltip: `absolute bg-[#1B2742] text-white text-[10px] tracking-[0.2em] px-4 py-2` with a CSS triangle pointer; animate in with Motion `whileInView` y 8 to 0.
6. CTA circle: `w-52 h-52 rounded-full border border-[#1B2742]/40`, overlay an SVG circle with `strokeDasharray` for the two arcs and rotate it on hover.
7. Badge: an SVG `textPath` around a circle with Motion `rotate` looping over 20s.

## Generation prompt
A refined luxury real-estate contact web page in monochrome powder blue: a towering compressed navy didone serif headline at the top, three small centred uppercase contact columns, a delicate hand-drawn style line map of a Mediterranean coastal town with roads, roundabouts and building footprints, a small navy tooltip pinning an office, a large thin outlined circle call-to-action, a circular text badge in the corner and a bordered vertical social icon strip; serene, elegant, flat, no logos.