Redfin Design System Deep Dive

1. Brand Overview

Redfin’s design language is built for one thing: making property search feel fast, trustworthy, and transactional. This is a brand that sits squarely between “utility” and “aspiration.” They’re not trying to be a lifestyle magazine, and they’re not dressing up in florid imagery. Instead, they cut to the chase—clean type, grounded colors, simple layouts—while still injecting enough personality to stand out from generic real estate search tools.

There’s a noticeable absence of visual clutter. Their tone feels professional but not cold. Black (#000000) is dominant across headers, navigation, and primary actions, which says: "We’re serious. We have authority here." At the same time, there’s a subtle softness: rounded corners (6px, 12px, even 1000px pills), muted grays (#686868, #333333, #555555), and a constrained shadow palette, so depth feels restrained.

The typography uses Inter, a modern sans-serif, clean and optimised for UI readability. Multiple weights give flexibility: bold for headings and labels, regular for body, without fussing over tiny stylistic flourishes. Their responsive typography is decisively handled—heading sizes scale down over multiple breakpoints, so the system never feels cramped or oversized.

The system is designed for high-density information—search results, maps, filters—without feeling overwhelming. Every piece of spacing, every border radius, every shadow has a functional reason. This isn’t maximalism; it’s a controlled toolkit for a data-heavy UI.

In short: Redfin’s design philosophy maximises clarity and speed, with just enough “brand” to be memorable. This is for people making decisions—comparative searches, filtering options—and they’ve nailed the mechanics that keep that process comfortable.

2. Color System

2.1 Primary Colors

Unlike many tech brands leaning on blue, Redfin’s semantic primary color as extracted is actually black (rgb(0,0,0) / #000000). That’s rare. It communicates authority, neutrality, and lets their content be the visual hero. The secondary semantic color is a translucent warm gray (rgba(56, 52, 48, 0.06)), used for backgrounds and subtle containers.

Psychologically, black in UI makes interactions feel serious. Against competitors (like Zillow’s blues or Realtor.com’s red/white mix), Redfin’s choice frames them as more utilitarian, less personality-play. That’s a deliberate stance: “Content first.”

The true “brand red” shows up in states and accents (rgb(200, 32, 33) borders, rgb(222,51,65) button fills), but it’s not the semantic primary. That’s interesting—there’s restraint in keeping red out of system-wide primary roles.

2.2 Complete Palette

2.3 Color Relationships

The primary black and off-white combo is the highest contrast possible (WCAG Pass AAA). Secondary grays like #686868 maintain good readability on white but drop to borderline on darker backgrounds—fine for secondary info, but avoid on dark surfaces unless bumped up.

Transparency in secondary (rgba(56, 52, 48, 0.06)) means backgrounds don’t fight content. These overlays are light enough to pass minimal contrast with dark text.

No dark mode token set is visible—they’re designing for light mode first.

2.4 Usage Guide

Works well:

• Black #000 text on white or off-white.
• Brand reds as borders against light surfaces—contrast pops without screaming.
• Near black #131313 for labels in interactive components—ties to other UI copy.

Avoid:

• Using brand red as big background blocks—it’s strong, will overpower.
• Medium grey (#686868) on a colored background—lowers readability.
• Translucent warm gray over photography—risk of muddying images.

3. Typography

3.1 Font Families

Single family: Inter. Fallbacks: -apple-system, system-ui, Roboto, Droid Sans, Helvetica, Arial. No Google Fonts or Adobe embed—this is system-safe, performant, and consistent. Inter is chosen for its modernity and legibility in UI contexts.

3.2 Type Scale

3.3 Hierarchy

Bold 700 weights are reserved for titles, links, buttons—these are interactive or high-visibility elements. Regular 400 is for copy, low priority text. The scale drops in clear steps—no arbitrary sizes; increments are functional. Responsive heading variants show size shrinking from 41px down to 16px on mobile—this keeps hierarchy intact without overflowing.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px system. Values all match multiples or fractions of 8px, with rare 5px/6px exceptions.

Common values (frequency shows real-world weight):

• 8px — 539 uses (buttons padding, gap spacing, section buffers)
• 16px — 53 uses (component padding)
• 12px — 53 uses (input padding)
• 4px — 26 uses (icon spacing, micro-gaps)
• 64px — 11 uses (section margins)
• 48px — 7 uses (modal padding, large gaps)

4.2 Layout

Breakpoints:

• Small mobile: 400px
• Mobile landscape: 425px, 426px
• Tablet-ish: 600px, 769px
• Large tablets: 890px–897px
• Desktop cut: 1024px, then 1280px

They’ve got lots of granular breakpoints—likely because maps + list views need precise tweaks.

5. Visual Elements

Border Radius:
Range from sharp 1px spans to 1000px pills.

Values:

• 1px — spans (subtle rounding)
• 2px — generic buttons/divs
• 6px — primary/default buttons, inputs
• 12px — cards
• 1000px — pill buttons & circular chips

Shadows:
Low-use, subtle multi-layer RGBA shadows—mainly for cards/modals:

• rgba(18, 18, 18, 0.1) 0px 8px 24px...
• rgba(19,19,19,0.12) 0px 2px 6px...

They avoid heavy colored shadows—keeps UI flat.

Borders:
Thin 1px lines in grays or brand red, used sparingly for structure. Divider styles like 1px solid rgb(216,216,216) break sections softly.

6. Components

6.1 Buttons

Variant 1: Secondary (header menu)

• Default: bg: #222, text: #FEFEFE, padding: 8px 16px, radius: 6px, border: 1px solid #222
• Hover: bg: #1EAEDB (bright blue), opacity: .7
• Focus: Outline 2px solid #000, bg same as hover

Variant 2: Tab

• Default: bg: #FEFEFE, text: black, radius: 6px 6px 0 0
• Focus: Bright blue background, white text

Variant 3: Search

• Default: bg: #DE3341 (brandish red), padding 8px, radius: 6px
• Hover/Focus: Blue background, white text

Variant 4: Pill

• Default: bg: rgba(56,52,48,0.06), text: near black, radius: 1000px

6.2 Links

Four styles:

• Gray #4F4F4F normal, hover blue #3860BE
• Teal #15727A bold, hover blue
• Near black bold, hover blue
• White bold (on dark backgrounds), hover blue

No underlines—hover changes color only.

6.3 Forms

Search inputs in two flavors:

• Transparent background, no border; focus flips to blue bg, white text, 1px solid black outline.
• White bg with #757575 border; same focus swap to blue bg, white text.

6.4 Cards

Rounded (12px), occasional subtle shadows (rgba(18,18,18,0.1) multi-layer), padding likely in standard spacing multiples (not explicit here but consistent with scale).

7. Design Tokens

:root {
  /* Colors - semantic */
  --color-primary: #000000;
  --color-secondary: rgba(56, 52, 48, 0.06);
  --color-text-main: #000000;
  --color-text-strong: #131313;
  --color-text-secondary: #686868;
  --color-section-header: #333333;
  --color-icon-gray: #555555;
  --color-surface-light: #FEFEFE;
  --color-border-red: #C82021;
  --color-border-teal: #32AE88;
  --color-border-light: #D8D8D8;
  --color-border-medium: #BBBBBB;
  --color-border-dark: #757575;

  /* Typography */
  --font-family-main: Inter, -apple-system, system-ui, Roboto, Droid Sans, Helvetica, Arial;
  --font-size-h1-xl: 41px;
  --font-size-h1-lg: 36px;
  --font-size-h1-md: 29px;
  --font-size-h1-sm: 26px;
  --font-size-h1-xs: 24px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-body-xs: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Radius */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 1000px;

  /* Shadows */
  --shadow-lg: rgba(18, 18, 18, 0.1) 0px 8px 24px 0px, rgba(18, 18, 18, 0.08) 0px 2px 8px 0px, rgba(18, 18, 18, 0.4) 0px 0px 1px 0px;
  --shadow-md: rgba(19, 19, 19, 0.12) 0px 2px 6px 0px, rgba(19, 19, 19, 0.08) 0px 1px 2px 0px;
}

8. AI Coding Assistant Prompt

# Redfin Design System Specification

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

## Brand Context
Redfin values clarity, speed, and a professional tone. The UI is built for high-density information—property listings, maps—while staying clean and readable. Colors are restrained, typography is functional, and components favour rounded softness over sharp edges.

## Color Palette
- Primary: #000000 — Headers, nav menus, primary text
- Secondary: rgba(56, 52, 48, 0.06) — Background fills, subtle cards
- Text Strong: #131313 — Bold labels
- Text Secondary: #686868 — Secondary info
- Section Header: #333333 — Category headers
- Icon Gray: #555555 — UI icons
- Surface Light: #FEFEFE — Background surfaces
- Border Red: #C82021 — Primary borders for actions
- Border Teal: #32AE88 — Rare accent borders
- Border Light Gray: #D8D8D8 — Content dividers
- Border Medium Gray: #BBBBBB — Button outlines
- Border Dark Gray: #757575 — Input borders

## Typography
Font family: Inter, -apple-system, system-ui, Roboto, Droid Sans, Helvetica, Arial

| Role | Size | Weight | Line Height | Use |
|------|------|--------|-------------|-----|
| H1 XL | 41px | 700 | 1.25 | Desktop hero titles |
| H1 LG | 36px | 700 | 1.50 | Section titles |
| H1 MD | 29px | 700 | 1.25 | Mobile h1 |
| H1 SM | 26px | 700 | 1.25 | Compact headings |
| Body LG | 18px | 400 | 1.75 | Standard reading |
| Body MD | 16px | 400/700 | 1.50 | General UI copy |
| Caption | 14px | 400/700 | 1.50 | Notes, small labels |
| Caption XS | 12px | 400/700 | 1.50 | Helper text |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 28px, 32px, 48px, 64px, 80px

## Border Radius
- xs: 1px — spans
- sm: 2px — generic buttons
- md: 6px — inputs, regular buttons
- lg: 12px — cards
- pill: 1000px — pill buttons

## Shadows & Depth
- Large: rgba(18, 18, 18, 0.1) 0px 8px 24px, etc. — cards, modals
- Medium: rgba(19,19,19,0.12) 0px 2px 6px — light depth

## Component Specifications

### Primary (Secondary-style) Button
Default: bg #222, text #FEFEFE, padding 8px 16px, radius 6px, border 1px solid #222  
Hover: bg #1EAEDB, text #fff, opacity .7  
Focus: outline 2px solid #000, bg #1EAEDB

### Tab Button
Default: bg #FEFEFE, text #000, radius 6px 6px 0 0  
Focus: bg #1EAEDB, text #fff, outline 2px solid #000

### Search Button
Default: bg #DE3341, text #000, padding 8px, radius 6px  
Hover: bg #1EAEDB, text #fff

### Pill Button
Default: bg rgba(56,52,48,0.06), text #131313, radius 1000px

### Links
- Gray #4F4F4F to hover blue #3860BE — body links
- Teal bold to hover blue — accent links
- White bold (nav) — hover blue

### Inputs
Transparent variant: no border, radius 6px, padding 12px 40px 12px 16px; focus bg #1EAEDB, text #fff, border 1px solid #000  
Solid variant: bg #FEFEFE, border 1px solid #757575; same focus change

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 476px, 530px, 550px, 600px, 769px, 890-897px, 1023px, 1024px, 1280px  
Section spacing: multiples of 8px

## Interaction Rules
Transitions: 150ms ease on bg/color changes  
Focus: 2px solid outline in specified color  
No motion beyond necessary state change

## DO List
- Use only defined palette colors
- Keep spacing in defined values
- Maintain consistent border radius by component type
- Use 700 weight for interactive labels
- Limit shadows to defined RGBA sets
- Preserve hover → focus → active colour flow

## DON'T List
- Invent new color hexes
- Use underlines for links
- Apply heavy box shadows
- Mix sharp and heavily rounded corners in one container
- Use red backgrounds for large areas

## Code Examples

```css
.btn-secondary {
  background: #222;
  color: #FEFEFE;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #222;
  font-weight: 700;
  font-size: 14px;
  transition: background 150ms ease;
}
.btn-secondary:hover {
  background: #1EAEDB;
  color: #fff;
  opacity: 0.7;
}
.btn-secondary:focus {
  outline: 2px solid #000;
}

.input-search {
  background: #FEFEFE;
  color: #000;
  border: 1px solid #757575;
  border-radius: 6px;
  padding: 12px 40px 12px 16px;
}
.input-search:focus {
  background: #1EAEDB;
  color: #fff;
  border: 1px solid #000;
}

.card {
  background: #FEFEFE;
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
}

---

## 9. Summary

**TL;DR** — Redfin’s design system is stripped down to what matters: black and white authority, precise typography, tight spacing, and soft rounded corners. It’s both transactional and approachable.

**Brand Keywords**:
- utility-professional
- black-dominant
- rounded-control
- restrained-depth
- clarity-first