The Modern House
www.themodernhouse.coma design-led estate agency that presents homes like an art magazine, a black-on-warm-paper system with a custom serif-and-sans pairing, tracked uppercase labels, sharp un-rounded corners and slow 0.9s cross-fades that make property browsing feel curated and unhurried.
Design tokens
- display
- serif (custom, with italic)
- body
- sans (custom)
- mono
- none
Do / Don't
Reference it for
- Treating a local service (here, estate agency) as editorial publishing: photography-first, magazine pacing, restraint over features.
- A near-monochrome warm-paper palette (black on #F5F1ED) with no accent colour, letting imagery supply all the warmth.
- A custom serif-plus-sans pairing with tracked uppercase labels (1.2-1.8px letter-spacing) for a refined, gallery-like register.
- Sharp un-rounded corners site-wide as a deliberate, confident choice.
- Slow, graceful cross-fades (0.9s cubic-bezier(0.17,0.55,0.55,1)) that make browsing feel unhurried and premium.
Do not copy
- The "estate agency like no other" positioning and the specific editorial voice are The Modern House's identity; borrow the register, not the lines.
- The custom sans / serif faces are proprietary; map to a refined serif-with-italic plus a quiet grotesque.
- The no-accent, near-monochrome austerity only works with genuinely excellent photography; without it the page looks empty rather than refined.
Signature moves
warm-paper monochrome gallery
a near-monochrome black-on-warm-paper system (#F5F1ED) runs with no accent colour, letting the photography supply all warmth, magazine pacing over features.
tracked-caps labels plus sharp corners
a custom serif-plus-sans pairing uses tracked uppercase labels (1.2-1.8px letter-spacing) and sharp un-rounded corners (0px radius) site-wide as a deliberate gallery register.
slow graceful cross-fades
Swiper image carousels and CSS transitions cross-fade slowly at 0.9s cubic-bezier(0.17,0.55,0.55,1), making browsing feel unhurried and premium.
Related references
Aesop
flagshipConsumer Brand
an editorial e-commerce reference where Suisse Intl on warm-cream `#fffef2`, a modular 1.13 type ratio, and full-bleed photography do all the work - no display face, no accent colour, no motion of consequence.
Abby Wilson Therapy
strongOther
A boutique therapist for "anxious, high-achieving women" who reassures by being polished and specific - a warm sand-and-charcoal editorial system, a Calluna serif voice, named specialties and a clearly walked process that says "I understand exactly who you are and how this works".
Antara Spa
strongBeauty
a Malaysian day spa that sells calm with one oversized Fraunces wordmark on a sun-warmed photographic hero, an earthy sand-brown-sage palette, and slow GSAP-and-Lenis scroll, the whole page tuned to feel like exhaling.
Apple Newsroom
flagshipEditorial Publishing
the editorial corner of apple.com - SF Pro on Apple's signature `#f5f5f7` light-grey page, rounded 24-32px news cards with white surfaces, and a 21-keyframe globalnav animation library that defines the bar at the top of every Apple page on the internet.