Haven Patios

Overview

Haven Patios is a luxury outdoor living brand serving Arizona homeowners with custom patio covers, pergolas, and shade structures. The design system embodies 'Architectural Warmth'—a fusion of precision engineering and approachable craftsmanship. The aesthetic combines clean, modern lines (reflecting the structural integrity of the products) with warm, inviting color accents (the signature golden-orange primary) that evoke Arizona's desert landscape and the comfort of outdoor living. The brand personality is confident yet personable: locally-owned expertise delivered with genuine care. The UI conveys reliability through structured layouts, clear typography hierarchy, and consistent spacing, while the vibrant primary color (#ffa500) signals energy and approachability. Voice: direct, knowledgeable, never corporate. Example: 'Your patio cover isn't just shade—it's an extension of your home. Let's build it right.'

Colors

Haven Patios' color system centers on a bold, warm primary accent (#ffa500 golden-orange) that dominates CTAs, hero sections, and key interactive elements. This accent is the visual signature of the brand—it appears on 'Get Free Estimate' buttons, accent text (ROC# 367382), and hover states, commanding attention without aggression. The surface stack is anchored in clean whites (#ffffff for surface, #f7f7f7 for surface-dim) paired with a sophisticated dark tertiary (#0c0d0e) used for typography, headers, and structural elements. Secondary blue (#2563eb) provides a supporting accent for links, secondary CTAs, and informational highlights. The on-surface text color (#181d23, near-black) ensures legibility at 16–18px body sizes with 24–28px line-height. Neutral grays (#575a5f for on-surface-va

Typography

The type system pairs Urbanist (a geometric, modern sans-serif) for display and headline scales (display: 67px/600 weight, headline-lg: 48px/600 weight) with Inter (a neutral, highly legible sans-serif) for body and label scales. This pairing communicates premium craftsmanship (Urbanist's geometric precision mirrors architectural design) while maintaining accessibility (Inter's clarity ensures body text is effortless to read at 16–18px). Display text uses -0.02em letter-spacing to tighten the visual weight; body text uses 0.005–0.01em to maintain rhythm. Line-height scales proportionally: display uses 76px (1.13x), headlines use 44–56px (1.22–1.33x), and body uses 24–28px (1.5x). On small labels over busy backgrounds (e.g., badges, form hints), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.

Layout

Haven Patios uses a 12-column fluid grid with a max-width of 1280px, centered on larger screens. The spacing scale is semantic: unit (8px) is the base increment, with sm (12px) for tight groupings, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to left/right padding on all containers, ensuring 24px margins between content and viewport edges on tablet/desktop. White-space is generous: section breaks use lg (40px) vertical spacing, creating visual breathing room between hero, testimonials, and project galleries. Cards use md (24px) internal padding with 12px gaps between card elements. The hero section spans full-width with 80px top/bottom padding an

Elevation & Depth

Haven Patios uses a restrained shadow system to create subtle depth without visual clutter. Elevation is conveyed through three distinct levels: Level 1 (Base/Surface) has no shadow—flat, grounded elements like body text and backgrounds. Level 2 (Cards, Inputs, Badges) uses elevation.sm (0 2px 4px rgba(0, 0, 0, 0.06))—a soft, close shadow that lifts elements 2–4px above the surface, ideal for cards, form fields, and small components. Level 3 (Modals, Dropdowns, Floating CTAs) uses elevation.md (0 4px 12px rgba(0, 0, 0, 0.08))—a more pronounced shadow with 12px blur, creating clear separation f

Shapes

Haven Patios employs 'Architectural Precision'—a shape philosophy that balances modern sharpness with approachable softness. Buttons use full (40px border-radius), creating pill-shaped CTAs that feel friendly and inviting while maintaining a premium aesthetic. Cards and containers use lg (16px border-radius), providing enough roundness to feel contemporary without appearing childish. Form inputs use DEFAULT (8px border-radius), a subtle curve that signals interactivity without dominating the design. Badges and small accent elements use full (40px), echoing button shapes for visual consistency.

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the signature orange (#ffa500) background with dark text (#121212), full 40px border-radius, 12px 32px padding, and 48px height. On hover (button-primary-hover), the background shifts to #ff9500 (5% darker) with a 200ms ease transition and elevation.md shadow. Secondary buttons (button-secondary) use a transparent background with a 2px solid orange border, same padding and height, and on hover (button-secondary-hover) fill with primary-container (#ffe4b5) and shift text to on-primary-container (#663300). Ghost buttons (button-ghost) are transparent with blue text (#2563eb) and no border; on hover, they fill with secondary-container (#dbeafe). All buttons use label-md typography (14px/600 w

Do's and Don'ts

**Do**

• Do use the primary orange (#ffa500) on all primary CTAs, focus states, and key interactive elements—it's the brand's signature and should be instantly recognizable.
• Do maintain 24px gutter padding on all container edges and 40px vertical spacing between major sections to ensure generous white-space and visual breathing room.
• Do pair Urbanist (display/headlines) with Inter (body/labels) consistently—this pairing communicates both precision and approachability, core to the brand.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to signal responsiveness and polish.
• Do use full 40px border-radius on all buttons and primary CTAs—this is the brand's signature gesture and should be instantly recognizable.
• Do constrain body text to 600–800px column widths (8–9 columns on 12-column grid) to ensure optimal readability at 16–18px font sizes.

**Don't**

• Don't use shadows exceeding 24px blur or 12% opacity—keep the design light and modern; avoid heavy, dated drop-shadows.
• Don't mix Urbanist and Inter at the same scale (e.g., don't use Urbanist for body text or Inter for display headlines)—maintain the clear hierarchy.
• Don't apply the primary orange to non-interactive elements or backgrounds; reserve it exclusively for CTAs, focus states, and key accents.
• Don't reduce gutter padding below 16px on mobile or below 24px on desktop—white-space is essential to the premium aesthetic.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—consistency in shape language is critical.
• Don't apply multiple shadows or complex gradients to a single element—simplicity and clarity are core to the architectural precision philosophy.