Zumper

Overview

Zumper is a rental marketplace designed to humanize the apartment-hunting experience through warm, illustrative storytelling and intuitive interaction patterns. The brand serves renters seeking clarity and confidence in a traditionally opaque market, combining vibrant, character-driven illustration with a clean, functional interface. The aesthetic movement is 'Illustrative Minimalism'—a balance between playful, colorful visual narratives (featuring diverse characters, stylized architecture, and organic shapes in teal, coral, and navy) and a restrained, white-space-forward digital interface. The emotional response is one of optimism and accessibility: users feel guided, not overwhelmed, and the brand voice is conversational and encouraging rather than corporate. Zumper's tone is direct yet warm, using phrases like 'Find your fresh start™' to position renting as a positive life transition. Example sentence in brand voice: 'Browse millions of homes, tour instantly, and move in with confidence—your next place is just a search away.'

Colors

The Zumper color system is anchored by a vibrant magenta-pink primary (#E5105A) used exclusively for CTAs, interactive states, and brand moments—this is the signature accent that draws the eye and signals action. The secondary color is a deep navy (#022C3B), employed for headers, navigation, and text hierarchy to ground the interface with authority and trust. A bright cyan tertiary (#38CCFF) provides a supporting accent for highlights, badges, and secondary interactive elements, creating visual rhythm alongside the primary. The surface stack is built on clean whites and warm off-whites: surface (#FFFFFF) for primary content areas, surface-dim (#F9F9F6) for subtle backgrounds, and surface-container (#EBEAE6) for grouped content regions. Text is rendered in near-black (#0A0F1C) for maximum r

Typography

The type system pairs Figtree (a geometric, friendly sans-serif) for headlines and display text with Moderat (a clean, neutral sans-serif) for body copy and UI labels. This pairing creates visual hierarchy while maintaining warmth: Figtree's rounded letterforms (especially in the 'a' and 'g') echo the organic, illustrative style of the hero imagery, while Moderat's precision ensures legibility in dense information contexts like search results and listings. Display text (56px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (40px, 700 weight) is used for page titles and prominent section headers; headline-md (28px, 600 weight) for subsection titles; and body-md (16px, 400 weight, 24px line-height) for all body copy. Labels and button

Layout

Zumper uses a fluid 12-column grid with a max-width of 1200px, allowing content to scale responsively from mobile to desktop without hard breakpoints. The gutter width is 24px, providing consistent spacing between columns and sections. Page rhythm is established through a semantic spacing scale: xs (4px) for micro-interactions and inline spacing, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section spans full-width with 64px vertical padding (xl spacing) above and below the search input, creating breathing room around the primary CTA. Content sections below the fold use md (24px) padding on left/right and lg (40px) padding on top/bottom to establish a calm, spa

Elevation & Depth

Zumper's elevation system is subtle and restrained, using soft shadows to create gentle depth without visual heaviness. The base elevation (Level 1) is the white surface (#FFFFFF) with no shadow, establishing the default plane. Level 2 (standard cards and inputs) uses a 1px shadow at 0 1px 2px rgba(0, 0, 0, 0.05), barely perceptible but sufficient to separate the card from the background. Level 3 (modals, dropdowns, and hover states) escalates to 0 4px 6px rgba(0, 0, 0, 0.1), creating a more pronounced lift. The notification banner at the bottom of the hero uses Level 2 shadow (0 1px 2px rgba(

Shapes

Zumper employs a 'Soft-Technical' shape philosophy that balances approachability with functional clarity. Buttons and primary CTAs use a full-pill border-radius (9999px), creating a friendly, inviting gesture that encourages interaction and reinforces the warm, human-centered brand voice. Input fields and search boxes also use the full-pill radius (9999px) to echo button styling and create a cohesive interaction language. Secondary containers (cards, modals, notification banners) use a moderate radius of 0.5rem (8px), providing visual softness without the playfulness of full-pill shapes—this r

Components

Action Elements Buttons are the primary interaction mechanism and use the full-pill radius (9999px) to signal affordance. The primary button (button-primary) has a background of {colors.primary} (#E5105A), white text, 12px horizontal padding, 48px height, and label-md typography (14px, 600 weight). On hover, the background shifts to {colors.primary-fixed-dim} (#DB0F5A), a darker, more saturated pink, with a transition duration of 150ms ease-out. Secondary buttons use a transparent background with a 1px border in {colors.primary} (#E5105A) and primary-colored text; on hover, the background fills with {colors.surface-container-low} (#F1F1ED) while the border remains. All buttons include a focus state with a 3px outline in rgba(229, 16, 90, 0.2) (primary with 20% opacity) at 2px offset, p

Do's and Don'ts

**Do**

• Do use the primary magenta (#E5105A) exclusively for CTAs, interactive states, and moments that demand user attention—never dilute its impact by overusing it.
• Do maintain the full-pill radius (9999px) on all buttons and primary inputs to reinforce the warm, approachable brand voice.
• Do apply the md spacing (24px) between major content sections and lg spacing (40px) between hero and body content to preserve the calm, uncluttered aesthetic.
• Do pair Figtree headlines with Moderat body copy to create visual hierarchy while maintaining warmth and legibility.
• Do use soft shadows (0 1px 2px rgba(0, 0, 0, 0.05) for Level 2, 0 4px 6px rgba(0, 0, 0, 0.1) for Level 3) to create gentle depth without visual heaviness.
• Do test all interactive elements with keyboard navigation and ensure focus states are visible at 3px outline width in rgba(229, 16, 90, 0.2).

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) as primary text or background colors—always use the warmer tones from the surface stack (#0A0F1C for text, #F9F9F6 for subtle backgrounds).
• Don't apply the primary magenta (#E5105A) to non-interactive elements like headings or body text; reserve it for buttons, links, and active states.
• Don't use sharp corners (0px radius) on any interactive element; the minimum radius is 0.125rem (2px) for micro-interactions, and 9999px for primary CTAs.
• Don't exceed 15px blur radius on shadows; keep shadows soft and diffuse to maintain the clean, modern aesthetic.
• Don't squeeze white-space around cards or between sections; use the semantic spacing scale (md for component padding, lg for section breaks) to maintain visual breathing room.
• Don't mix Figtree and Moderat weights arbitrarily; use Figtree at 600–700 weight for headlines and Moderat at 400–600 weight for body and labels.