Zillow

Overview

Zillow is the leading real estate marketplace that democratizes property discovery and transactions for millions of buyers, renters, sellers, and agents. The design system embodies a "Data-Driven Clarity" aesthetic—combining authoritative blue accents with clean, accessible typography to transform complex real estate information into intuitive, trustworthy interfaces. The brand personality is confident yet approachable: users should feel empowered by comprehensive data (Zestimate® valuations, neighborhood insights, agent ratings) without feeling overwhelmed. The UI prioritizes information hierarchy and progressive disclosure, using generous whitespace (24px gutters, 40px section spacing) and a cool blue palette (#0041d9 primary, #1a73e8 secondary) to evoke stability and expertise.

The voice is conversational, direct, and action-oriented—never jargon-heavy, always outcome-focused. Example: "Find your next home in Boardman—browse 1,200+ listings, compare neighborhoods, and connect with local agents in minutes." Zillow speaks to the emotional stakes of real estate (home, community, investment) while maintaining a professional, data-backed tone. Typography pairs Ivar Headline (bold, geometric, 900 weight for hero statements) with Inter (neutral, highly legible for body copy and inputs), creating visual contrast between aspirational messaging and functional UI.

Colors

The color system is anchored by a primary blue (#0041d9) used exclusively for interactive elements—primary CTAs ("Sign in", "Join"), links, focus states, and active navigation. This blue is derived from Zillow's brand heritage and signals trust and authority in the real estate domain. Secondary blue (#1a73e8) supports the primary in social authentication flows and secondary actions, while tertiary cyan (#059ec2) highlights property features, open house badges, and status indicators. The surface stack progresses from pure white (#ffffff) through cool-toned grays (#f6f6fa, #eff3f9, #e0f2ff) to support layering without introducing warmth. On-surface text is near-black (#111116) for maximum contrast and readability; on-surface-variant (#596b82) is used for secondary labels and metadata. Error

Typography

The type system balances authority with accessibility. Ivar Headline (font-weight: 900, 700, 600) is reserved for display-level messaging (hero headlines at 60px, section headlines at 28–40px) where its geometric, extended letterforms command attention and convey confidence. Inter (font-weight: 400, 600, 700) handles all body copy, labels, and UI text, offering superior legibility at small sizes (12–16px) and neutral personality that doesn't compete with property imagery. Line-height is set conservatively (1.4–1.5 for body, 1.2 for headlines) to maximize information density on property cards and search results. Letter-spacing is minimal (-0.04em on display, 0em on body) to maintain tightness and sophistication. Labels use 600–700 weight and 0.01–0.05em letter-spacing to ensure button and f

Layout

The layout system uses a 12-column grid with a 1280px max-width container, maintaining 24px horizontal gutters on desktop and 16px on tablet. Vertical rhythm is established through 40px section spacing (lg) for major content blocks (hero, featured listings, call-to-action sections) and 24px (md) for subsections and card groups. The search bar and property cards use 24px internal padding to create breathing room; inputs are 56px tall (24px padding + 8px border) to accommodate touch targets and maintain visual weight. Hero sections span full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over background imagery. Property cards are typically 320–360px wide in a 3–4 column grid, with 16px gaps between cards. Modals and overlays use a centered layout with m

Elevation & Depth

Visual hierarchy is conveyed through a layered shadow and background system. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields) uses a 1px border in outline-variant (#cdcdd3) plus a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to lift content slightly above the background. Level 3 (modals, dropdowns, tooltips) uses the same border plus a stronger shadow (0 8px 16px rgba(0, 0, 0, 0.12)) and a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) behind the modal to create depth and focus. Hover states on cards increase shadow to 0 8px 16px rgba(0

Shapes

The shape philosophy is "Approachable Modernism"—rounded corners are used consistently to soften the interface and signal friendliness, but not so aggressively as to feel playful or casual. Buttons and inputs use 12px border-radius (rounded.lg, 1rem) as the standard, creating a modern, slightly rounded aesthetic that feels contemporary without being trendy. Cards and modals use 16px (rounded.xl, 1.5rem) for slightly more softness and visual distinction from interactive elements. Badges and pills use full border-radius (9999px) to emphasize their compact, self-contained nature. The 4px (rounded

Components

Action Elements Buttons follow a three-tier system: primary (solid #0041d9 background, white text, 40px height, 9px 16px padding, 12px radius) for main CTAs like "Sign in" and "Join"; secondary (white background, #0041d9 text, 1px outline-variant border) for alternative actions; ghost (transparent background, #0041d9 text) for tertiary options. All buttons use Inter 700 at 14px with 0.01em letter-spacing. Hover states darken the primary to #0033ab and shift secondary to surface-container-low (#f2faff) background with a 200ms transition. Focus states add a 2px outline in primary-container (#bfdfff) with 2px offset. Social login buttons (Facebook, Google, Apple) use 40px height, 12px radius, and inherit the primary button styling for consistency, with brand-specific colors only in the ic

Do's and Don'ts

**Do**

• Do use primary blue (#0041d9) exclusively for interactive elements—buttons, links, focus states—to create a clear visual language for actionability.
• Do pair Ivar Headline (900 weight) with Inter (400 weight) to create maximum contrast between aspirational messaging and functional UI.
• Do maintain 24px gutters and 40px section spacing to create breathing room and prevent information overload on property-heavy pages.
• Do apply 12px border-radius consistently to buttons and inputs, and 16px to cards, to signal a modern, approachable brand.
• Do use the full shadow stack (sm/md/lg) to create clear elevation hierarchy without relying on color alone.
• Do add text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to labels and badges overlaid on property photos to ensure legibility.

**Don't**

• Don't use primary blue for non-interactive elements like backgrounds or body text—reserve it exclusively for CTAs and focus states.
• Don't mix Ivar Headline and Inter at the same weight; use Ivar only for headlines (600+ weight) and Inter for everything else.
• Don't reduce gutter spacing below 16px or section spacing below 24px; Zillow's data-heavy interface requires generous whitespace.
• Don't apply border-radius below 12px to buttons or inputs; the brand requires a modern, rounded aesthetic.
• Don't use warm colors (oranges, reds, yellows) for primary actions; the cool blue palette is core to Zillow's trust and authority.
• Don't apply shadows to text or use text-shadow for decorative purposes; reserve shadows for elevation and depth only.