Cottage Group

Overview

Cottage Group is a luxury portfolio home builder serving the Carolinas, specializing in smart-sized, architecturally distinctive residences. The brand embodies 'Refined Minimalism'—a design philosophy that strips away excess while celebrating the inherent beauty of materials, proportion, and craftsmanship. The digital presence mirrors this ethos: clean typography, generous whitespace, and a warm earth-tone accent that echoes the natural palette of residential architecture. The emotional response is one of quiet confidence and timeless elegance—users feel they are engaging with a builder who understands both heritage and innovation.

The brand voice is conversational yet authoritative, never breathless or trendy. Cottage Group speaks to homeowners as partners in creation, using precise, grounded language. Example: 'From Charleston to Bluffton, learn about our local team at the South Carolina Coast.' The vocabulary emphasizes place, craft, and personalization—words like 'portfolio,' 'local,' 'smart-sized,' and 'team' recur. Tone is warm but professional, accessible but refined.

Colors

The color system is anchored by a warm, earthy primary (#af683e)—a terracotta-inspired brown that appears on CTAs, hero overlays, and key interactive elements. This color is neither trendy nor austere; it references natural building materials and evokes the residential vernacular of the Carolinas. Secondary blue (#2275d7) provides digital-native contrast for form focus states and secondary actions, appearing in input field focus rings (0 0 0 3px rgba(34, 117, 215, 0.4)) and hover states. Tertiary (#1b4159) is a deep slate used sparingly for text hierarchy and secondary navigation. The surface stack is predominantly white (#ffffff) and near-white grays (#eeeeee, #eaeaea, #e0e0de), creating a luminous, paper-like foundation. On-surface text is dark charcoal (#333333), ensuring 7:1+ contrast

Typography

The type system pairs Prata (serif, 400 weight) for display and headline scales with Poppins (sans-serif, 400–600 weight) for body and label text. This pairing communicates sophistication through the serif while maintaining modern legibility via the sans-serif. Display (60px, 400 weight, -0.02em tracking) is used for hero headlines and sets a grand, unhurried tone. Headline-lg (40px, 400 weight) anchors section introductions. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraph text, with generous line-height (1.5x) ensuring readability on both mobile and desktop. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, with slight positive tracking to enhance legibility at small sizes. On hero overlays with photographic backgrounds, ap

Layout

The page uses a 12-column fluid grid with a maximum container width of 1280px, allowing content to breathe on large screens while remaining readable on mobile. The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Section separation uses lg spacing (40px) between major blocks, with md spacing (24px) for subsection breaks. Hero sections span full width with image backgrounds and semi-transparent overlays (rgba(0, 0, 0, 0.3)). Cards and content containers use md padding (24px) internally, with sm spacing (12px) between nested elements. The design favors generous whitespace over density—no section should feel cramped. Container max-width of 1280px prevents text lines from exceeding 75–80 characters, optimizing readability. Responsive breakpoints follow mobile-

Elevation & Depth

Depth is achieved through subtle, restrained shadows rather than dramatic layering. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders (outline-variant, #cccccc) for definition. Level 2 (Cards, inputs): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a barely-perceptible lift. Level 3 (Modals, popovers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), suggesting a card floating 4–8px above the surface. No shadows exceed 12px blur radius or 0.12 opacity, maintaining the minimalist aesthetic. Input fields on focus receive a colored ring (0 0 0 3px rgba(34, 117, 215, 0.4)) rathe

Shapes

The design system employs 'Architectural Sharpness'—a philosophy that favors clean lines and minimal rounding, reflecting the geometric precision of residential design. Border-radius is used sparingly and intentionally: buttons and secondary CTAs use sm (4px, 0.25rem), creating a subtle, professional appearance without softness. Input fields use md (12px, 0.75rem) for a slightly more approachable feel, signaling interactivity. Cards use DEFAULT (8px, 0.5rem) for a neutral, balanced look. Full-width hero sections and major containers have no rounding (0px), emphasizing architectural integrity.

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the warm terracotta primary (#af683e) background with white text, 20px 40px padding, and 1px solid border matching the background. On hover (button-primary-hover), the background shifts to primary-fixed-dim (#b89080), a slightly desaturated variant that signals interactivity without jarring contrast. All button transitions use 0.2s ease-out timing. Secondary buttons (button-secondary) are transparent with a 1px primary-colored border and primary text, allowing them to recede visually while remaining actionable. Focus states on all buttons receive a 3px outline in secondary blue (rgba(34, 117, 215, 0.4)) for keyboard navigation accessibility.

Containers & Surfaces Cards (card) use su

Do's and Don'ts

**Do**

• Do use Prata serif for all headline scales (display, headline-lg, headline-md) to establish hierarchy and sophistication.
• Do apply the primary terracotta (#af683e) exclusively to CTAs, focus states, and brand-critical interactive elements—never use it for backgrounds or body text.
• Do maintain minimum 24px gutter spacing between sections and 12px padding within cards to preserve the minimalist, breathing aesthetic.
• Do use the secondary blue (#2275d7) only for form focus rings, input validation states, and secondary actions—never as a primary brand color.
• Do apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) to white text overlaid on photographic backgrounds to ensure 7:1+ contrast.
• Do use 1px outline-variant borders (#cccccc) to define card and input edges subtly without visual noise.

**Don't**

• Don't round corners beyond md (12px) on any component—excessive rounding contradicts the architectural precision of the brand.
• Don't use the primary color (#af683e) for backgrounds, body text, or non-interactive elements; reserve it exclusively for CTAs and focus states.
• Don't apply drop shadows exceeding 12px blur radius or 0.12 opacity—the aesthetic is minimalist, not layered.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain clear typographic separation between Prata and Poppins.
• Don't use the secondary blue (#2275d7) as a primary brand accent or in hero sections—it is a functional color for digital interaction only.
• Don't compress whitespace below 12px (sm spacing) between interactive elements; the design philosophy requires breathing room.