Durango North Star

Overview

Durango North Star is a Colorado real estate brand that bridges local mountain expertise with professional service excellence. The design system embodies 'Warm Professionalism'—a aesthetic that combines the authenticity of regional heritage with the polish of contemporary real estate marketing. The UI evokes trust, stability, and local rootedness through a carefully curated palette of golden accents (#f7d36a), slate grays (#3e4242, #666666), and natural cream backgrounds (#fdf7ec). The emotional response is one of approachable expertise: clients feel they're working with neighbors who happen to be exceptional at their craft.

The brand voice is conversational yet authoritative, grounded in specificity rather than hyperbole. Tone vocabulary includes phrases like 'Where client success equals team success,' 'Local experience,' and 'Professional service'—never breathless or overly trendy. Example sentence in brand voice: 'We know these neighborhoods because we live here. Let's find your home.'

Colors

The color system is anchored by a warm golden primary (#f7d36a) used exclusively for call-to-action buttons, key interactive elements, and brand highlights. This color appears on the hero 'SEARCH LISTINGS' button and signals actionability with warmth rather than aggression. Secondary (#2ea3f2) provides a cool counterpoint for secondary actions, links, and informational elements, creating visual rhythm without competing for attention. Tertiary (#006799) is reserved for deep accents and data visualization. The surface stack uses a warm cream base (#fdf7ec) that evokes natural paper and regional earth tones, with progressive darkening through surface-container layers (#ede5d8 → #d5ccc0) for depth without coldness. On-surface text (#3e4242) is a warm charcoal that reads comfortably against cre

Typography

The type system pairs Proxima Nova Light (geometric, modern sans-serif) for headlines and navigation with Merriweather (warm, humanist serif) for body copy and long-form content. This pairing communicates 'professional yet approachable'—the sans-serif conveys clarity and modernity, while the serif adds sophistication and readability. Display text (75px, 500 weight) anchors hero sections with commanding presence; headline-lg (48px) structures major sections; body-md (16px, 400 weight) ensures comfortable reading at 24px line-height. Label-md (14px, 600 weight, 0.05em letter-spacing) is used for buttons and UI labels, with tight tracking that emphasizes intentionality. On small labels over busy backgrounds (e.g., badges on image cards), apply text-shadow 0 1px 3px rgba(0, 0, 0, 0.2) to ensur

Layout

The page uses a fluid 12-column grid with a max-width of 1280px, centering content on larger screens while allowing full-bleed hero imagery. The hero section spans edge-to-edge with a diagonal wave transition (visible in the screenshot) that separates the hero from the content below, creating visual momentum. Section spacing follows the lg token (40px) for major breaks and md token (24px) for subsection separation. The gutter (24px) is applied consistently to card grids and form layouts. Container padding uses md (24px) on desktop, reducing to sm (12px) on mobile. The rhythm emphasizes breathing room: cards are never cramped, and whitespace is treated as a design element rather than wasted space. The layout accommodates both image-heavy hero sections and dense information cards, with the g

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids harsh contrast. Level 1 (base surfaces) uses no shadow, relying on subtle borders (1px solid #cccccc) and background color shifts. Level 2 (cards, input fields) applies sm elevation (0 1px 4px rgba(0, 0, 0, 0.15)), a soft shadow that lifts elements 2-4px. Level 3 (modals, popovers, hover states) uses md elevation (0 4px 12px rgba(0, 0, 0, 0.12)), creating clear separation. On hover, cards transition from sm to md elevation over 200ms, signaling interactivity without jarring movement. The warm cream background (#fdf7ec) ensures sh

Shapes

The shape philosophy is 'Refined Minimalism'—sharp enough to feel professional, soft enough to feel human. Buttons use 4px border-radius (DEFAULT), a subtle rounding that avoids both hard edges and excessive softness. Cards use 5px (md), slightly more generous, creating a distinct visual category. Input fields match buttons at 4px for cohesion. Badges and chips use full (9999px) for their inherent pill shape, signaling they are distinct, contained pieces of information. The 3px (sm) radius is used sparingly for small UI elements like focus rings or micro-interactions. This graduated scale ensu

Components

Action Elements Buttons are the primary interaction pattern. The primary button (56px height, 24px vertical padding, 40px horizontal padding) uses the golden primary (#f7d36a) with dark text (#3e4242), creating high contrast and clear affordance. On hover, the background shifts to #f0c94a over 200ms, maintaining warmth while signaling state change. The secondary button uses a 2px border in secondary blue (#2ea3f2) with transparent background, allowing it to sit comfortably next to primary buttons without visual competition. Ghost buttons (48px height) are used for tertiary actions, with a 1px outline in #cccccc and no fill. All buttons use label-md typography (14px, 600 weight, 0.05em letter-spacing) for visual consistency.

Containers & Surfaces Cards are the primary content conta

Do's and Don'ts

**Do**

• Do use the golden primary (#f7d36a) exclusively for primary CTAs and key interactive moments—it's the brand's signature and should never be diluted by overuse.
• Do maintain the warm cream background (#fdf7ec) as the default surface; it's core to the brand's approachable, regional identity.
• Do apply consistent 24px padding (md token) to all cards and containers for visual rhythm and breathing room.
• Do transition all interactive states over 200ms minimum to signal intentionality and avoid jarring visual shifts.
• Do pair Proxima Nova Light headlines with Merriweather body copy to maintain the professional-yet-approachable voice.
• Do use the secondary blue (#2ea3f2) for secondary actions and links, creating visual hierarchy without competing with primary.
• Do apply sm elevation (0 1px 4px rgba(0, 0, 0, 0.15)) to cards and md elevation (0 4px 12px rgba(0, 0, 0, 0.12)) on hover for clear depth progression.

**Don't**

• Don't use pure white (#ffffff) as a background; the warm cream (#fdf7ec) is the brand standard and creates visual cohesion.
• Don't apply the golden primary to secondary buttons or non-interactive elements—reserve it for actions that drive business value.
• Don't exceed 40px padding on cards or containers; the brand favors efficiency and clarity over excessive whitespace.
• Don't use shadows darker than rgba(0, 0, 0, 0.18); the brand avoids harsh contrast and maintains approachability.
• Don't mix serif and sans-serif within a single headline or button; maintain the Proxima Nova Light / Merriweather pairing.
• Don't apply border-radius greater than 16px (xl) except for full-pill badges and chips; excessive rounding dilutes the refined aesthetic.
• Don't transition interactive states faster than 150ms or slower than 300ms; the brand values responsiveness without feeling frenetic.