Hartness Living

Overview

Hartness Living represents a refined approach to luxury residential real estate, grounded in the aesthetic of 'Architectural Heritage Modernism'—a design philosophy that honors traditional craftsmanship while embracing contemporary clarity. The brand serves affluent homebuyers in Greenville, SC who value quality, precision, and timeless design. The visual identity evokes a sense of permanence and trust through a restrained palette of warm earth tones (terracotta #b17c56, slate blue #405462) paired with crisp whites and soft cream backgrounds. Every interface element communicates the brand's core promise: meticulous attention to detail, from the serif typography (Audrey for headlines, Garamond Pro for body) to the generous 50px border-radius on CTAs that softens without compromising authority.

The brand voice is confident yet approachable, speaking to clients as partners in a shared vision of home. Tone: measured, knowledgeable, never rushed. Vocabulary favors specificity over hyperbole—'crafted with precision' rather than 'stunning.' Example sentence in brand voice: 'Each home is built to exacting standards, with materials selected for durability and beauty that will endure for generations.'

Colors

The color system anchors on a sophisticated dual-tone foundation: Primary (#405462, a muted slate blue) conveys stability and professional expertise, deployed on CTAs, active navigation states, and primary text. Secondary (#b17c56, a warm terracotta) functions as the brand's signature accent, appearing on borders, highlights, and decorative elements—this is the color that signals Hartness's distinctive personality and appears prominently in hero imagery and inset shadows (inset 350px 1px 1px #b17c56). The surface stack progresses from pure white (#ffffff) for primary content areas through warm creams (#fdf5ed, #f9f3eb) for subtle container differentiation, ensuring visual hierarchy without harsh contrast. Tertiary (#0c71c3, a professional blue) supports secondary CTAs and informational ele

Typography

The type system employs a classical serif hierarchy designed to communicate permanence and expertise. Audrey (a custom serif) anchors display and headline levels (48–60px, 700 weight, -0.04em to -0.02em letter-spacing), establishing authority and visual weight. Garamond Pro (a traditional serif) carries body and label text (12–18px, 500 weight, 0.01em to 0.08em letter-spacing), ensuring legibility and a refined, editorial quality. The progression from display (60px, 68px line-height) through headline-lg (48px, 56px line-height) to body-md (16px, 24px line-height) creates a clear visual rhythm that guides users through content hierarchies. All body text uses 500 font-weight (not 400) to maintain visual presence on light backgrounds. Small labels (12px) receive 0.08em letter-spacing to enhan

Layout

The layout system uses a 12-column grid with a 1280px max-width container, providing flexibility for both desktop and tablet breakpoints. Page rhythm is established through the spacing scale: lg (40px) separates major sections, md (24px) divides subsections, and sm (12px) provides breathing room within components. The gutter width is consistently 24px, maintaining visual alignment across all breakpoints. White-space is generous but purposeful—never wasteful, always supporting content hierarchy. Hero sections span full-width with a 1080px content constraint for text overlays, ensuring readability while maintaining visual impact. Cards and content containers use the surface-container stack (surface-container-lowest through surface-container-highest) to create subtle depth without relying on

Elevation & Depth

Depth is conveyed through a restrained shadow and surface-color system rather than aggressive drop shadows. Level 1 (Base): Clean white background (#ffffff) with no shadow. Level 2 (Standard Card): 1px border in outline-variant (#d4c4b0) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a subtle lift. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) combined with background shift to surface-container-low (#f9f3eb), signaling interactivity. Inset shadows are used sparingly for decorative effect (inset 350px 1px 1px #b17c56 on hero sections). The brand avoids deep shad

Shapes

The shape philosophy is 'Refined Softness'—sharp enough to feel contemporary, rounded enough to feel approachable. Buttons and primary CTAs use 50px border-radius (full rounding at 48px height), creating a pill-shaped form that feels premium and intentional. Cards and containers use 0.75rem (12px) border-radius, providing subtle softness without compromising the architectural aesthetic. Input fields use 0.5rem (8px) border-radius, maintaining a slightly more formal appearance suited to form contexts. Navigation elements and badges use full (50px) rounding to signal secondary or tertiary action

Components

Action Elements Buttons follow a two-tier system: primary (background: rgba(64, 84, 98, 0.9), color: #ffffff, padding: 12px 40px, border-radius: 50px, font-size: 14px, font-weight: 500) for main CTAs like 'Inquire Now' or 'Contact Us,' and secondary (background: transparent, border: 1px solid #405462, color: #405462) for supporting actions. On hover, primary buttons shift to #2a3b4f with a 200ms transition. Secondary buttons adopt background-color: #d4dce5 on hover. All buttons use label-md typography with 0.05em letter-spacing for visual distinction.

Containers & Surfaces Cards use a 1px border in #d4c4b0 (outline-variant) with padding: 24px and border-radius: 12px. The base background is #ffffff; on hover, the background shifts to #f9f3eb and box-shadow expands to 0 4px 12px rgb

Do's and Don'ts

**Do**

• Do use the primary slate blue (#405462) for all primary CTAs, active navigation states, and key interactive elements—it's the brand's anchor color and signals trust.
• Do apply the secondary terracotta (#b17c56) as a decorative accent in borders, inset shadows, and highlights to reinforce brand personality without overwhelming the interface.
• Do maintain generous white-space (lg spacing: 40px between sections) to reflect the luxury positioning and prevent visual clutter.
• Do use Audrey serif for all headlines and display text to establish authority; reserve Garamond Pro for body and labels to ensure readability.
• Do apply 50px border-radius exclusively to primary buttons and CTAs; use 12px for cards and 8px for inputs to maintain a graduated hierarchy of softness.
• Do use rgba-based overlays (rgba(64, 84, 98, 0.9)) on buttons and interactive elements rather than solid hex values to support transparency and layering effects.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on text; instead use #405462 on white backgrounds and #ffffff on dark overlays to maintain the brand's refined palette.
• Don't apply box-shadow values larger than 0 4px 12px rgba(0, 0, 0, 0.08)—the brand avoids aggressive depth effects in favor of clean, modern surfaces.
• Don't mix serif and sans-serif typefaces in the same component; Audrey and Garamond Pro are the only approved families for body and display.
• Don't use the tertiary blue (#0c71c3) as a primary CTA color; it's reserved for secondary actions and informational elements only.
• Don't apply border-radius values smaller than 4px or larger than 50px outside their designated contexts; this maintains visual consistency and prevents the interface from feeling disjointed.
• Don't override the spacing scale (unit: 8px, sm: 12px, md: 24px, lg: 40px) with arbitrary pixel values; always reference the token system to ensure rhythm and alignment.