Compass Re
www.compass.coma tech-brokerage site that fronts a property search engine with one calm photographic hero and a serif headline, using a near-monochrome ink-on-white system, a custom Compass Sans plus Compass Serif pairing, and a prominent buy/rent/sell search bar as the centrepiece.
Design tokens
- display
- Compass Serif
- body
- Compass Sans
- mono
- none
Do / Don't
Reference it for
- Fronting a search-driven local-business tool with one calm photographic hero and a single serif line, so the tool feels considered rather than utilitarian.
- A search panel as the page centrepiece: tabbed Buy/Rent/Sell with a prominent location field, placed over the hero image.
- A near-monochrome, high-trust palette (ink #171717 on white, grey #DADADA surfaces) that reads as established and credible.
- A custom-sans-plus-serif pairing where the serif appears only in the headline, giving an otherwise plain page a moment of class.
- Fast, near-invisible motion (0.1s transitions, a 0.3s cubic-bezier(0.2,0.8,0.2,1) on focus) that keeps a data-heavy interface feeling responsive.
Do not copy
- "Find your place", Compass Sans and Compass Serif are proprietary; map to a similar custom-feeling sans plus a Times-class serif for the headline.
- The classic #0000EE link blue is a deliberate Compass signal; use it knowingly, not by default, or it can read as unstyled.
- The dense agent / listing / city directory deeper in the page is brokerage-scale information architecture; a smaller client should borrow the hero-and-search pattern, not the whole directory.
Signature moves
calm photographic hero with a single serif line over a search panel
a search-driven tool is fronted by one calm photographic hero and a single serif headline, so the tool feels considered, near-monochrome ink (#171717) on white with grey (#DADADA) surfaces.
tabbed search panel as the page centrepiece
a tabbed Buy/Rent/Sell search panel with a prominent location field is placed over the hero as the centrepiece, with fast focus motion (0.3s cubic-bezier(0.2,0.8,0.2,1)).
Related references
Marshall White
strongReal Estate
a premium Melbourne real estate agency rendered as a restrained editorial object: deep navy ink (#00101F) on white, a single refined sans (Untitled Sans) with a Georgia/Cigars serif accent, full-bleed property photography and almost no radius, so the work and the wealth speak quietly.
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.
Bright Horizons
strongChildcare Education
a large early-education and childcare provider whose site leads with a warm deep-teal and sunshine-yellow palette over happy children's photography, the rounded Mulish sans throughout, a tabbed audience-routing hero, and a clear, trust-led grid of pathways for parents and employers.