Zillow Brand Design System Deep Dive

1. Brand Overview

Zillow’s interface is built for people making big decisions about where they live. It’s not a “fun” product in the way a social app might be, but it has to be welcoming, trustworthy, and unambiguous. This is a platform for browsing, comparing, and committing to homes — with all the emotional weight that implies.

The visual language leans toward clarity over flourish. You’ll notice restrained use of color, minimal shadows, and a grid that feels predictable. That predictability is deliberate. When you’re scrolling through hundreds of listings, you don’t want visual gimmicks — you want consistency.

The extracted data here shows a surprisingly neutral palette — black (#000000), mid-gray (#626364), and a light gray (#b1b5b8). No bright primary brand blue in the sample, which suggests that Zillow may be using imagery and interactive states to inject color, while the base UI stays monochrome. This works because it keeps the focus on the content (photos of homes, maps) and lets those be the “color” of the experience.

Spacing is on an 8px base grid. That’s industry-standard for web UI, and it’s the right choice here. It creates alignment across components and makes responsive scaling easier.

There’s minimal typography data — no explicit font families extracted — which likely means they’re using a system font stack or custom font with server-side delivery. The absence of multiple styles in the scrape suggests a lean approach to type: clear, readable, and not overloaded with variants.

Border radii are tiny — 3px corners in some places, and 0px elsewhere. This makes the UI feel sharp and utilitarian rather than soft and playful. Shadows are subtle (rgba(0,0,0,0.13) at 0px 2px 9px -1px), used sparingly to lift elements without drama.

Breakpoints at 390px, 480px, 481px, and 620px tell us they’re tailoring for small mobile devices, slightly larger phones, and tablets. This is a mobile-first system, with early attention to narrow widths.

Overall, Zillow’s design system is about trust and legibility. It’s not trying to win design awards for visual fireworks — it’s trying to make sure you find your future home without struggling against the interface. I love that focus.

2. Color System

2.1 Primary Colors

From the extracted data, Zillow’s core colors in the UI here are:

• Black (#000000) — Used for text and high-contrast elements. This is the anchor color.
• Medium Gray (#626364) — Likely used for secondary text, icons, and de-emphasized UI.
• Light Gray (#b1b5b8) — Used for borders, placeholders, and background neutrals.

There’s no bright accent color in the extracted palette, which is unusual for a brand known for its blue logo. This suggests that the core UI skeleton is grayscale, with branding applied selectively (e.g., logo, CTAs) outside the scraped scope.

Psychologically, this grayscale base says: “We’re serious. We’re about information.” Compared to competitors (e.g., Redfin’s red, Realtor.com’s bold accents), Zillow’s default UI is quieter. This works for a brand where the product visuals are inherently colorful (home photos, maps).

2.2 Complete Palette

2.3 Color Relationships

Black and light gray give strong contrast for text and background elements. Black on light gray passes WCAG AA easily for normal text (contrast ratio ~12:1). Medium gray on white is borderline (~4.5:1), so it’s likely reserved for smaller or secondary text that doesn’t need primary emphasis.

No explicit dark mode palette is extracted, but the grayscale scheme would invert cleanly — black text could become white, light gray could become darker gray, etc.

2.4 Usage Guide

• Black (#000000): Use for primary text or icons. Avoid using it for large background areas — it would overpower listings.
• Medium Gray (#626364): Good for timestamps, secondary metadata, non-critical labels. Don’t use for primary actions — it lacks contrast urgency.
• Light Gray (#b1b5b8): Use for subtle dividers and inactive states. Avoid pairing with medium gray for text — low contrast.

Combinations that work:

• Black text on light gray background (high contrast)
• Medium gray icons on white (soft emphasis)

Combinations to avoid:

• Medium gray text on light gray background — too low contrast
• Black on medium gray — heavy and visually noisy

3. Typography

3.1 Font Families

No font family data was extracted — no Google Fonts, Adobe Fonts, or variable fonts detected. This suggests either:

• A system font stack (e.g., -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)
• Or a custom font served without public-facing CSS references in the scrape.

Either way, the takeaway: typography is kept lean.

3.2 Type Scale

No explicit sizes were captured in the data. Without those, we can’t list an H1–H6 table. This likely means the base type scale is embedded in other CSS not scraped.

3.3 Hierarchy

With a grayscale palette and minimal font variation, hierarchy is probably driven by:

• Font size and weight shifts
• Spacing above/below headings
• Color shifts from black (primary) to medium gray (secondary)

The simplicity here keeps cognitive load low. You know what’s important because it’s bigger, bolder, and darker.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid.

Extracted values:

They’re mostly sticking to multiples of 8px, except for 11px, 29px, and 31px — probably adjustments for visual balance with text baselines or specific images.

4.2 Layout

Breakpoints:

• 390px — small mobile
• 480px — larger mobile
• 481px — transition point (tablet?)
• 620px — small tablet / large phone landscape

This is mobile-first: start at 390px, scale up.

No container widths extracted, but the tight breakpoints suggest they optimize early for narrow screens.

5. Visual Elements

Border Radius

Extracted:

• 0px 0px 3px 3px — likely for cards with only bottom corners rounded
• 3px — small rounding for buttons or inputs

Tiny radii keep the aesthetic sharp and professional. Zillow avoids bubbly UI.

Shadows

One shadow:

• rgba(0, 0, 0, 0.13) 0px 2px 9px -1px

Low opacity, small spread, slight vertical offset. Used sparingly. This is a “lift without drama” shadow.

Borders

One combo:

• Width: 1px 0px 0px
• Style: solid none none
• Color: rgb(240, 238, 238) (~#f0eeee)

This is a subtle top border — maybe for table rows or card separation.

6. Components

The data shows no extracted button, link, or form styles — which means Zillow may use inline styles or loaded components in JS.

Given the palette and spacing, we can infer components follow the 8px grid, small radii, and grayscale base.

6.1 Buttons

No direct values, but likely:

• Background: brand blue (not in scrape)
• Text: white
• Radius: 3px
• Padding: multiple of 8px

6.2 Links

Probably black or brand blue by default, with underline on hover.

6.3 Forms

Borders in light gray, 3px radius, focus state with darker border.

6.4 Cards

Padding: 29px or 31px Shadow: rgba(0,0,0,0.13) 0px 2px 9px -1px Radius: 3px bottom corners

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-gray-medium: #626364;
  --color-gray-light: #b1b5b8;
  --color-border-light: #f0eeee;

  /* Spacing */
  --space-8: 8px;
  --space-11: 11px;
  --space-29: 29px;
  --space-31: 31px;
  --space-53: 53px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-bottom-sm: 0px 0px 3px 3px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.13) 0px 2px 9px -1px;

  /* Breakpoints */
  --breakpoint-sm-mobile: 390px;
  --breakpoint-mobile: 480px;
  --breakpoint-tablet-min: 481px;
  --breakpoint-tablet: 620px;
}

8. AI Coding Assistant Prompt

# Zillow Design System Specification

You are a Zillow design expert. Build UIs matching their visual language exactly.

## Brand Context
Zillow’s design is for home search — clear, trustworthy, and structured. The UI is monochrome with subtle accents. Spacing follows an 8px grid, corners are small-radius, and shadows are minimal.

## Color Palette
- Black: #000000 — Primary text, icons
- Medium Gray: #626364 — Secondary text, metadata
- Light Gray: #b1b5b8 — Borders, placeholders, dividers
- Border Light: #f0eeee — Subtle top borders

## Typography
- Font family: System stack (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)
- No extracted sizes — use consistent hierarchy with larger, bolder black text for headings; smaller medium gray text for metadata.

## Spacing & Grid
- Base: 8px grid
- Tokens: 8px, 11px, 29px, 31px, 53px
- Apply multiples of 8px for component padding, section gaps. Use 11px for fine-tuned alignment.

## Border Radius
- none: 0px — tables, sharp containers
- sm: 3px — inputs, buttons
- bottom-sm: 0px 0px 3px 3px — cards with only bottom corners rounded

## Shadows & Depth
- Soft shadow: rgba(0,0,0,0.13) 0px 2px 9px -1px — used sparingly for cards or lifted elements

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: var(--color-black);
  color: white;
  padding: var(--space-8) var(--space-29);
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: var(--color-gray-medium); }
.btn-primary:focus { outline: 2px solid var(--color-gray-light); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Input Field
```css
.input {
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  font-size: 16px;
  background: white;
}
.input:focus { border-color: var(--color-gray-medium); outline: none; }
.input::placeholder { color: var(--color-gray-light); }
```

### Card
```css
.card {
  background: white;
  border-radius: var(--radius-bottom-sm);
  padding: var(--space-29);
  box-shadow: var(--shadow-soft);
}
```

## Layout & Responsive Rules
- Mobile-first
- Breakpoints: 390px, 480px, 481px, 620px
- Page padding: 8px mobile, 29px desktop
- Consistent grid gap: multiples of 8px

## Interaction Rules
- Transitions: 150ms ease for hover/focus
- Focus indicators: 2px outline in light gray
- Disabled states: 50% opacity, no pointer events

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid
- Keep border-radius small and consistent
- Use soft shadow only for lifted components
- Keep typography simple and legible

## DON'T List
- Don’t introduce new colors
- Don’t use heavy shadows
- Don’t mix large radii with sharp corners
- Don’t reduce contrast below WCAG AA

## Code Examples

### Primary Button
```css
<button class="btn-primary">Search</button>
```

### Card
```css
<div class="card">Listing details...</div>
```

### Input
```css
<input class="input" placeholder="Search by address">
```

9. Summary

TL;DR — Zillow’s design system is grayscale-first, mobile-first, and trust-focused. Small radii, subtle shadows, and an 8px grid give it structure without flash. The UI exists to serve the content — the homes — not to compete with them.

Brand Keywords:

• trust-driven
• monochrome-minimal
• grid-consistent
• content-first
• mobile-prioritized