Zillow DESIGN.md

Real-estate discovery with high-trust search flows and map-driven clarity. Zillow's public site uses a white and soft-blue foundation, dark text, large search-led hero areas, and the strong Zillow blue (#006AFF) to anchor rentals, homes, agents, and loans.

1. Visual Theme & Atmosphere

Overall Aesthetic

Zillow feels like property discovery translated into a trust-heavy search interface. The system balances marketplace breadth, map/search functionality, and consumer-finance seriousness with a bright, approachable frame.

Mood & Feeling

• Helpful and trustworthy
• Search-first and goal-oriented
• Marketplace-clear rather than editorially luxurious
• Consumer-friendly but serious
• Home discovery with financial credibility

Design Density

Medium density. Zillow surfaces carry many navigation options, but the search-led structure keeps the hierarchy obvious.

Visual Character

• Blue-led trust signals
• White cards and soft support surfaces
• Search bars, recommendations, and property modules
• Image-led listing previews and marketplace flows
• Calm, mainstream digital real-estate energy

2. Color Palette & Roles

Core Foundation

Support and Utility

3. Typography Rules

Font Stack

css--font-display: "Zillow Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Zillow Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Typography Philosophy

Zillow typography should feel reliable, consumer-readable, and search-friendly. It should make property and loan workflows feel easy to trust.

4. Component Stylings

Buttons

css.button-primary {
  background: #006aff;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
}

.button-primary:hover {
  background: #0058d6;
}

.button-secondary {
  background: #ffffff;
  color: #1b1f23;
  border: 1px solid #dce5f5;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
}

Search and Listing Cards

css.listing-card {
  background: #ffffff;
  border: 1px solid #dce5f5;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(15, 74, 161, 0.06);
}

.search-shell {
  background: #ffffff;
  border: 1px solid #dce5f5;
  border-radius: 999px;
}

Inputs

css.input {
  background: #ffffff;
  color: #1b1f23;
  border: 1px solid #dce5f5;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 16px;
}

Component Notes

• Search should remain the strongest product affordance
• Listings and recommendations need trust-forward framing
• Blue should guide action and orientation more than decoration

5. Layout Principles

Spacing Scale

Layout Behavior

• Lead with search and clear housing goals
• Use cards and recommendations to keep browsing guided
• Balance listings, loans, rentals, and agents without losing clarity
• Keep visual structure mainstream and trustworthy

Whitespace Philosophy

Whitespace should feel calm and search-supportive, helping large real-estate content sets remain easy to navigate.

6. Depth & Elevation

Elevation Strategy

Zillow uses light consumer-marketplace elevation with rounded search shells and listing cards.

css--shadow-soft: 0 8px 18px rgba(15, 74, 161, 0.05);
--shadow-card: 0 16px 30px rgba(15, 74, 161, 0.08);

Surface Hierarchy

• White base
• Soft blue support bands
• Search shell and listing card elevation
• Blue used for action, links, and trust

7. Do's and Don'ts

Do

• Keep search and discovery central
• Use blue to reinforce trust and action
• Preserve mainstream readability and marketplace clarity
• Make property browsing feel guided and low-friction

Don't

• Do not turn Zillow into luxury real-estate editorial
• Do not bury search under decorative hero content
• Do not make listing cards visually noisy
• Do not overcomplicate the trust signals around loans, agents, and rentals

8. Responsive Behavior

Breakpoints

Responsive Rules

• Keep search prominent and easy to use on mobile
• Preserve readable listing cards and image thumbnails
• Stack recommendation and utility modules before compressing them
• Maintain strong CTA clarity in finance-related flows

9. Agent Prompt Guide

Quick Reference

• White and soft-blue real-estate marketplace foundation
• Zillow-blue search and CTA anchors
• Rounded search shells, listing cards, and mainstream trust-heavy layout
• Search-first, helpful, and consumer-finance credible

Prompt Template

textDesign this like Zillow's current public website:
- white and soft-blue real-estate marketplace foundation
- Zillow-blue search and CTA anchors with strong trust cues
- rounded search shells and listing-card layouts
- consumer-friendly property discovery with loan, rental, and agent clarity
- guided, reliable, search-first UX over luxury editorial styling