Keller Williams Los Feliz

Overview

Keller Williams Los Feliz embodies a 'Architectural Minimalism' aesthetic—clean, confident, and grounded in professional authority. The brand serves high-net-worth buyers and sellers in Los Angeles's most competitive real estate market, where clarity and trust are paramount. The visual language prioritizes stark contrast (pure black #000000 against off-white #eeeeee) punctuated by teal accents (#37b0ba) and critical red (#b40101) for urgency, creating an interface that feels both premium and accessible. The emotional response is one of assured competence: users feel they are in the hands of seasoned professionals who respect their time and intelligence.

The brand voice is direct, data-driven, and aspirational without being breathless. Vocabulary favors concrete terms ('$1 billion sold', 'Los Angeles market leader', 'your winning team') over marketing platitudes. Tone is warm but never casual—think of a trusted advisor at a mahogany desk, not a friend at a coffee shop. Example sentence in brand voice: 'With over $1 billion in sales across Los Angeles in the last two years, we've proven our ability to deliver results in the most competitive market in the nation.'

Colors

The color system operates on a principle of 'confident restraint.' Primary (#000000) is the dominant action color—used on all CTAs, navigation, and interactive elements—establishing authority and focus. It pairs with pure white (#ffffff) for maximum legibility and premium perception. The surface stack (#eeeeee through #cccccc) provides subtle depth without visual noise, allowing content to breathe across a 12-column grid. Secondary (#37b0ba, a sophisticated teal) is reserved for accents, highlights, and secondary CTAs, introducing a modern, forward-thinking energy that differentiates KW Los Feliz from competitors. Tertiary (#b40101, a deep red) signals urgency and importance—used sparingly on error states, limited-time offers, and critical notifications. On-surface text (#212226) ensures r

Typography

The type system balances authority with approachability through a deliberate pairing of Muli (headlines, display) and Source Sans Pro (body, labels). Muli's geometric warmth at display sizes (60px, -0.04em letter-spacing) commands attention without coldness; Source Sans Pro's neutral efficiency at body sizes (16px, 24px line-height) ensures sustained readability across property listings and legal disclosures. Poppins is used for accent titles (20px, 600 weight) to introduce a contemporary, slightly playful note that humanizes the brand. Weight hierarchy is strict: 700 for primary CTAs and critical labels, 600 for section headings, 400 for body text. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) overlaid on hero imagery to ensure contrast against variable background

Layout

The page uses a fluid 12-column grid with a max-width of 1200px, centered via margin: 0 auto. Section rhythm is governed by the lg spacing token (40px) for vertical separation between major content blocks, creating a breathing room that feels neither cramped nor wasteful. The hero section occupies 100% viewport height with a background video (object-fit: cover), establishing immersive context before transitioning to card-based content below. Container padding uses the gutter token (24px) on desktop, reducing to sm (12px) on tablets and xs (4px) on mobile. White-space philosophy: generous margins around primary CTAs (minimum 24px on all sides), compact spacing within form fields (12px padding), and 40px separation between distinct content sections. The grid supports both full-width hero sec

Elevation & Depth

Depth is conveyed through subtle shadow and surface-container layering rather than dramatic drop shadows. Level 1 (Base): surface color #eeeeee with no shadow, establishing the default reading plane. Level 2 (Standard Card): surface-container-lowest (#f5f5f5) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), used for property cards and secondary content. Level 3 (Elevated/Hover): surface-container-high (#dcdcdc) with box-shadow: 0 4px 10px rgba(0, 50, 123, 0.1), applied on card hover and modal backgrounds. Inset shadows (inset 0 1px 2px #454545) are used sparingly on scrollable containers to sug

Shapes

The design philosophy is 'Soft-Technical'—sharp enough to feel professional, rounded enough to feel human. Border-radius follows a deliberate scale: sm (3px) for subtle refinement on inputs and small interactive elements, DEFAULT (4px) for standard buttons and cards, md (5px) for slightly larger cards and containers, lg (6px) for prominent cards and modals, xl (25px) for pill-shaped buttons and badges, and full (9999px) for circular avatars or icon buttons. The 3–6px range dominates the interface, creating visual consistency without the softness of Material Design's 12–16px defaults. This rest

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #000000 background with #ffffff text, 12px label-sm typography, 44px height, and 1px solid border at the same color. On hover (button-primary-hover), background shifts to #313131 (primary-container) while maintaining white text and border. Padding is 12px horizontal, 0 vertical (height handles vertical centering). Transition timing is 200ms ease-in-out. Secondary buttons (button-secondary) invert the logic: transparent background with #000000 text and border, shifting to #4c4c4c background on hover. Ghost buttons (button-ghost) have no border or background, using on-surface-variant text (#4c4c4c), and shift to rgba(0, 0, 0, 0.04) background on hover with 150ms transition. All buttons mus

Do's and Don'ts

**Do**

• Do use primary (#000000) for all primary CTAs, navigation links, and interactive focus states—it is the brand's signature action color and must remain consistent across all touchpoints.
• Do maintain minimum 44px height for all clickable elements (buttons, list items, form inputs) to meet WCAG touch target guidelines and ensure usability on mobile devices.
• Do apply the lg spacing token (40px) between major content sections to create visual breathing room and guide users through the page hierarchy.
• Do use secondary (#37b0ba) as an accent for secondary CTAs, highlights, and supporting information—never as a primary action color.
• Do pair Muli headlines with Source Sans Pro body text to create a clear typographic hierarchy that signals professionalism and readability.
• Do include :focus-visible states with 2px solid primary outline and 2px outline-offset on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use tertiary (#b40101) as a primary action color; reserve it exclusively for error states, urgent notifications, and limited-time offers to preserve its signal value.
• Don't apply border-radius greater than lg (6px) on standard buttons and cards—the brand uses sharp, technical shapes (3–6px range) to signal professionalism, not the soft 12–16px of consumer apps.
• Don't layer text directly on background video without the color-overlay (rgba(0, 0, 0, 0.25))—contrast will fail WCAG AA standards and undermine readability of critical messaging.
• Don't mix Poppins and Muli in the same headline; use Muli for primary headlines and Poppins only for accent titles (20px, 600 weight) to maintain typographic clarity.
• Don't use surface colors (#eeeeee, #f5f5f5) as text colors; always use on-surface (#212226) or on-surface-variant (#4c4c4c) to ensure minimum 7:1 contrast ratio.
• Don't apply shadows greater than md elevation (0 4px 10px rgba(0, 50, 123, 0.1)) on standard components—the brand favors subtle depth, not dramatic drop shadows that suggest depth without substance.