Olivia Harper Homes

Overview

Olivia Harper Homes is a luxury residential development brand that transforms architectural ambition into lived experience. The design system embodies 'Warm Minimalism'—a philosophy that marries austere geometric restraint with tactile, organic warmth. The brand serves affluent homebuyers and design-conscious developers who view real estate as a canvas for personal legacy, not mere transaction. The UI evokes a sense of curated sophistication: every element is intentional, every color chosen for its ability to communicate quality without shouting. The emotional response is one of calm confidence—the user feels they are in the hands of professionals who understand both craft and luxury.

The brand voice is measured, precise, and never hyperbolic. Vocabulary leans toward architectural terminology ('façade', 'materiality', 'spatial flow') and lifestyle language ('curated', 'refined', 'bespoke'). The tone is consultative rather than transactional; sentences are declarative and grounded in specifics. Example: 'Each residence at 1716 S. Bayshore features floor-to-ceiling glazing and a private infinity-edge terrace overlooking Biscayne Bay—designed for those who demand both privacy and panorama.'

Colors

The color palette is anchored in a warm, neutral foundation (#eeebe4 surface, #333333 on-surface) that evokes natural materials—linen, sand, aged oak. This restraint is punctuated by two sophisticated accent colors: primary (#9684a8), a muted mauve-taupe that conveys luxury without ostentation, and secondary (#b6ab99), a warm greige that bridges the gap between stone and textile. Primary is deployed on CTAs, focus states, and key interactive elements; secondary appears on project cards and supporting surfaces. The surface stack is carefully calibrated: surface-container-low (#ede9e1) for input fields, surface-container-high (#ddd9d1) for hover states, and surface-container-highest (#d2cec6) for elevated modals. Error red (#cf2e2e) is reserved for validation and critical alerts. All text on

Typography

The type system is built on Roboto, a humanist sans-serif that balances geometric clarity with organic warmth. Display (60px, 400 weight, -0.02em tracking) is reserved for hero headlines and major section breaks; it commands attention through scale and negative space, not weight. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) establish hierarchy without visual aggression—the brand prefers lightness to boldness. Body text (16px, 400 weight, 24px line-height) is set with generous leading (1.5x) to ensure readability on both desktop and mobile; this breathing room reinforces the luxury aesthetic. Labels (14px, 500 weight, 0.01em tracking) are used sparingly on buttons and badges. All headings use -0.01em to -0.02em negative letter-spacing to tighten the visual texture; body

Layout

The layout system uses a 12-column grid with a max-width of 1280px, constrained to 1024px on tablet and 100% on mobile with 24px horizontal gutters. The page rhythm is built on the spacing scale: 24px (md) for section separation, 40px (lg) for major content blocks, and 12px (sm) for internal component spacing. White space is weaponized—large margins between sections (40px minimum) create visual breathing room and signal the importance of each content block. The grid is fluid, not fixed; containers expand and contract with viewport width rather than snapping to breakpoints. Project cards occupy 2 columns on desktop (6 cards per row), 1 column on tablet (3 cards per row), and full-width on mobile. The container-max-width of 1280px ensures that even on ultra-wide displays, content remains sca

Elevation & Depth

Depth is conveyed through subtle shadow and spatial positioning rather than dramatic layering. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for micro-interactions like hover states on links, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements and dropdowns. Project cards use md elevation by default; on hover, they transition to lg elevation and shift up 2px (transform: translateY(-2px)) over 300ms, creating a sense of lift without jarring movement. Modals and overlays use lg elevation with a sem

Shapes

The shape philosophy is 'Architectural Precision'—corners are sharp where they signal modernity and technical control, soft where they invite comfort and approachability. Buttons and input fields use 3px border-radius (rounded.sm), a subtle softness that prevents the UI from feeling cold or rigid. Project cards use 16px border-radius (rounded.lg), a more generous curve that humanizes the rectangular form and echoes the organic quality of architectural photography. Badges and small UI elements use 50% border-radius (rounded.full) to create perfect circles or pills, signaling secondary importanc

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary (#9684a8) background with on-primary (#eeebe4) text, 6px vertical and 15px horizontal padding, and a 3px border-radius. On hover, the button transitions to button-primary-hover (primary-container #c9bcd6 background) over 300ms with no scale transform—the brand avoids aggressive micro-interactions. The button-secondary variant uses a transparent background with a 1px primary border and primary text; on hover, it fills with surface-container-high (#ddd9d1). Both variants use label-md typography (14px, 500 weight) and a minimum height of 40px to ensure touch-target accessibility.

Containers & Surfaces Project cards (card-project) use secondary (#b6ab99) as the base background with

Do's and Don'ts

**Do**

• Do use primary (#9684a8) exclusively for interactive elements and focus states—never use it for body text or backgrounds.
• Do maintain at least 40px vertical spacing between major content sections to create visual breathing room and signal hierarchy.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and modals; reserve lg elevation for floating elements and dropdowns.
• Do use Roboto 400 weight for all body text and headlines; reserve 500 weight for labels and small UI text only.
• Do ensure all text on colored backgrounds (primary, secondary, tertiary) uses the corresponding on-* color token to maintain contrast.
• Do transition interactive elements over 200–300ms using ease timing; avoid instant state changes.

**Don't**

• Don't use gradients, patterns, or textures—the brand aesthetic is clean, material-based, and free of visual noise.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use multiple layered shadows; depth is conveyed through subtle, single-source lighting.
• Don't use font weights heavier than 500 in the UI; the brand rejects bold typography in favor of refined, measured hierarchy.
• Don't apply border-radius greater than 16px to primary content containers; excessive rounding signals playfulness, not luxury.
• Don't use the secondary or tertiary colors for text; reserve them for backgrounds and accents only.
• Don't animate scale, rotation, or other transform properties on button hover; transitions should be color and shadow only.