Realtor.com

Overview

Realtor.com is the authoritative real estate marketplace in North America, serving millions of homebuyers, sellers, renters, and agents annually. The brand embodies a philosophy of "Trustworthy Clarity"—a design aesthetic that combines institutional authority with approachable, human-centered usability. The visual language is rooted in **Architectural Minimalism with Warmth**: clean geometric forms, a restrained palette anchored by the signature Realtor red (#d92228), and generous whitespace that conveys confidence and transparency. The interface evokes the feeling of walking into a well-lit, professionally managed real estate office—organized, credible, and ready to help you make one of life's biggest decisions.

The brand voice is direct, knowledgeable, and reassuring without being patronizing. Realtor.com speaks in the language of data and outcomes: "See what your home is worth," "Browse homes in [City]," "Find a trusted expert." The tone avoids hype; instead, it emphasizes facts, tools, and expert guidance. Every interaction is designed to reduce friction and build confidence. Example sentence in brand voice: "Your home's value just updated—see the latest estimate and comparable sales in your neighborhood."

Colors

The Realtor.com color system is built on a foundation of institutional trust (deep neutrals and whites) with a single, powerful accent: the Realtor red (#d92228). This red is the brand's signature and appears exclusively on primary calls-to-action, key interactive elements, and moments of emphasis. It commands attention without aggression—a warm, confident red that signals action and authority.

**Primary (#d92228)** is reserved for the most important CTAs: the "Search" button, "Buy" tab, and critical conversion moments. On hover, it darkens to #ba1b20 and gains a subtle shadow (0 3px 8px rgba(217, 34, 40, 0.25)) to signal interactivity. The secondary color (#3f3b36, a warm charcoal) anchors the interface as the default button and text color for secondary actions and body copy, creating a

Typography

The typography system uses Galano Grotesque Alt as the primary typeface—a modern, geometric sans-serif that conveys professionalism and clarity. The type hierarchy is built on six levels: Display (60px, 700 weight) for hero headlines; Headline-lg (48px, 700) for major section titles; Headline-md (32px, 600) for subsections; Title-lg (24px, 600) for card titles; Body-lg (18px, 400) for prominent body text; Body-md (16px, 400) for standard body copy; Label-md (14px, 500) for buttons and UI labels; and Label-sm (12px, 500) for captions and metadata. Letter-spacing is tightened on display sizes (-0.04em) to create visual impact, while body text uses default spacing for legibility. All headlines use a line-height of 1.2–1.4× the font size to ensure comfortable reading; body text uses 1.5× (28px

Layout

Realtor.com uses a fluid, 12-column grid system with a maximum container width of 1280px, allowing the interface to scale gracefully from mobile (full-width) to desktop (centered with side gutters). The page rhythm is driven by a semantic spacing scale: unit (8px) as the base, with sm (12px), md (24px), lg (40px), and xl (64px) for section separation and major layout shifts. The hero section uses full-width imagery with an overlay gradient (rgba(0, 0, 0, 0.3) to rgba(0, 0, 0, 0.1)) to ensure text legibility; the search bar sits centered 60% down the hero, creating a focal point. Below the fold, content is organized into card-based sections with consistent md (24px) padding and lg (40px) gaps between sections. The gutter (24px) is applied consistently on desktop; on mobile, it reduces to sm

Elevation & Depth

Elevation in Realtor.com is achieved through a subtle shadow system that mimics real-world depth without creating visual clutter. The system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like hover states on list items; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, input fields, and modals; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals, dropdowns, and prominent overlays. Shadows are soft and diffuse, never sharp—they suggest depth without drama. Interactive elements (buttons, cards) transition from md to lg on hover, signaling elevation and

Shapes

The shape language is **Soft-Technical**: rounded corners are used strategically to soften the geometric precision of the interface without sacrificing clarity. Buttons and primary interactive elements use full (9999px) border-radius to create pill-shaped affordances that feel friendly and clickable. Cards and containers use lg (1rem / 16px) border-radius for a balanced, modern appearance. Input fields and search bars also use full (9999px) to emphasize their interactive nature and create visual consistency with buttons. Smaller UI elements like chips and badges use md (0.75rem / 12px) for a m

Components

Action Elements

Buttons are the primary interaction mechanism. The primary button uses the Realtor red (#d92228) background with white text, full border-radius (9999px), and a height of 48px to ensure touch-friendly sizing on mobile. Padding is 12px horizontal, 0px vertical (height handles vertical centering). On hover, the background darkens to #ba1b20 and gains a shadow (0 3px 8px rgba(217, 34, 40, 0.25)) to signal elevation. On active/pressed, the background further darkens to #9a1a1e. The secondary button uses the warm charcoal (#3f3b36) with white text and identical sizing; its hover state darkens to #5a5550 with a subtle shadow. Ghost buttons (transparent background with a 1px border in primary red) are used for tertiary actions; on hover, they fill with the primary-container co

Do's and Don'ts

**Do**

• Do use the Realtor red (#d92228) exclusively for primary CTAs and moments of emphasis—it is the brand's most distinctive asset and loses impact if overused.
• Do maintain at least 24px (md spacing) between major sections and 40px (lg spacing) between distinct content blocks to create visual breathing room and guide the eye.
• Do apply full border-radius (9999px) to all buttons and primary input fields to create a consistent, friendly interactive language.
• Do use the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) as the default elevation for cards and containers; reserve lg shadow for modals and elevated interactions.
• Do ensure all interactive elements have clear hover and focus states with visual feedback (color shift, shadow upgrade, or border change) within 150ms.
• Do use Galano Grotesque Alt exclusively for all typography—avoid system fonts or serif typefaces, which dilute the modern, professional aesthetic.

**Don't**

• Don't use the Realtor red on secondary buttons, backgrounds, or non-interactive elements—it must remain a signal of primary action.
• Don't apply border-radius less than lg (16px) to cards or containers; sharp corners feel dated and conflict with the soft-technical aesthetic.
• Don't exceed 1280px container width on desktop; wider layouts dilute the focused, organized feeling of the interface.
• Don't use shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)); excessive shadow creates visual noise and reduces clarity.
• Don't mix typefaces or use fallback fonts; always load Galano Grotesque Alt via @font-face to maintain brand consistency.
• Don't reduce padding or spacing below sm (12px) in primary content areas; cramped layouts undermine the trustworthy, professional aesthetic.