Woodhouse Spas

Overview

Woodhouse Spas embodies a refined aesthetic rooted in Architectural Minimalism with warm, earthy sophistication. The brand serves affluent wellness seekers seeking premium spa experiences across the United States, delivering luxury through a carefully curated visual language that balances contemporary clarity with timeless elegance. The design evokes a sense of serene confidence—not austere, but purposefully restrained, allowing the warmth of natural materials and the depth of navy-and-taupe color relationships to communicate premium positioning without excess.

The brand voice is warm, knowledgeable, and inviting—speaking to guests as peers in the wellness journey rather than as customers. Tone is conversational yet refined: "Wrap them in warmth with a spa gift card – the perfect way to say slow down and enjoy the season." The vocabulary favors clarity over jargon, grounding luxury in tangible comfort ("coziest," "warmth," "premium") while maintaining sophistication through serif typography and restrained color application.

Colors

The color system is anchored by a deep navy primary (#273845) used for primary CTAs, navigation, and structural elements—this is the brand's signature accent, appearing on the prominent "BOOK NOW" button and card backgrounds. Secondary accent is a warm taupe (#807c75), deployed in the footer and as a supporting brand color that bridges the navy and warm gold tones. Tertiary gold (#d4a574) appears in hero typography and decorative elements, evoking luxury and warmth without overwhelming the palette.

Surface colors follow a light, airy foundation: the body background is #fcfcfc (near-white with subtle warmth), with container layers stepping down through #f4f4f4, #efefef, and #e6e6e6 to create visual hierarchy. Text on light surfaces is #333333 (dark charcoal, not pure black, for reduced har

Typography

The type system pairs Playfair Display (serif, 400–500 weight) for all display and headline levels with Inter and Inter Tight (sans-serif, 400–600 weight) for body and label text. This pairing communicates luxury through the serif's classical elegance while maintaining modern readability via the sans-serif body. Display text (56px, 400 weight, -0.02em letter-spacing) sets an aspirational tone; headline-lg (40px) anchors section introductions; body-md (16px, 400 weight) ensures comfortable reading at standard viewport sizes. Labels use Inter Tight at 14px (600 weight, 0.01em letter-spacing) for button text, creating a tight, intentional feel. On small labels over busy backgrounds (e.g., badges on hero imagery), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to ensure legibility. Line-heigh

Layout

The layout uses a 12-column fluid grid with a 1280px max-width container, maintaining breathing room on desktop while adapting gracefully to mobile. Section vertical spacing follows a semantic rhythm: 40px (md) for standard section separation, 80px (lg) for major section breaks, and 160px (xl) for hero-to-content transitions on desktop. Gutter width is 24px, applied consistently to left/right container padding and inter-column gaps. The hero section spans full-width with a split layout (text left, imagery right), using the navy primary as the text background to anchor the page and establish brand presence immediately. Cards and content blocks use 24px padding (md spacing) internally, with 12px (sm) gaps between nested elements. White-space is treated as a design material: the light #fcfcfc

Elevation & Depth

Visual hierarchy is conveyed through a restrained shadow and border system rather than dramatic depth. The base layer (Level 1) is the light surface (#fcfcfc) with no shadow. Level 2 (standard cards and inputs) applies a 1px solid border in #d9d9d9 or #e6e6e6 with a subtle shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (elevated cards, modals, hover states) deepens the shadow to 0 32px 68px rgba(0, 0, 0, 0.3) and may shift the background to #efefef or apply a darker border. Buttons do not use shadows; instead, they rely on color contrast and a 2px border-radius to signal interactivity. On hove

Shapes

The shape philosophy is Architectural Sharpness: clean, minimal border-radius that respects the brand's refined, structured aesthetic. Buttons and inputs use 2px radius (rounded.sm), creating a subtle softness that avoids harsh corners while maintaining geometric precision. Cards use 2px radius as well, aligning with the button language. Larger containers and modals may use 4px (rounded.md) or 8px (rounded.lg) for slightly more breathing room. Badges and pills use full (9999px) radius for a classic, approachable feel. This consistent application of minimal rounding reinforces the brand's balan

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses the navy background (#273845) with white text, 14px Inter Tight 600 weight, 14px vertical padding and 20px horizontal padding, 2px border-radius, and no border. On hover, the background darkens to #1e2b35 (button-primary-hover), creating a subtle depth cue. On active/pressed state (button-primary-active), the background shifts to #151e24 with a transition of 150ms ease-out. Secondary buttons (button-secondary) invert this: white background with navy text, 1px solid navy border, and on hover shift to #f4f4f4 background. Accent buttons (button-accent) use the warm taupe (#807c75) background with white text, following the same padding and radius as primary. All buttons include a focus sta

Do's and Don'ts

**Do**

• Do use the navy primary (#273845) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain distinctive.
• Do pair Playfair Display serif headlines with Inter sans-serif body text to maintain the luxury-meets-modern balance; never reverse this pairing.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and surfaces to create subtle depth without atmospheric blur.
• Do maintain 24px (md) gutter spacing and 40px (lg) section separation to preserve the calm, unhurried aesthetic.
• Do use the warm taupe (#807c75) as a secondary accent in footers and supporting UI elements to bridge navy and gold tones.
• Do apply 2px border-radius consistently to buttons, inputs, and cards to reinforce architectural sharpness.

**Don't**

• Don't use pure black (#000000) for text or borders; always use #333333 (dark charcoal) or navy (#273845) to maintain warmth.
• Don't apply shadows larger than the lg elevation (0 32px 68px rgba(0, 0, 0, 0.3)) to avoid a floating, disconnected appearance that conflicts with the grounded aesthetic.
• Don't mix serif and sans-serif within a single heading or body paragraph; maintain clear typographic hierarchy by role, not by mixing families.
• Don't use the tertiary gold (#d4a574) as a primary background color; reserve it for accents, decorative elements, and hero typography only.
• Don't reduce padding below 12px (sm) on interactive elements; the brand's luxury positioning requires generous, breathable spacing.
• Don't apply border-radius greater than 8px (lg) to buttons or inputs; the architectural sharpness philosophy demands minimal, intentional rounding.