A complete design language exploration for a premium home builder — distinct typographic personalities, color palettes, and hero compositions, each engineered for the high-end real estate market.
Whitespace as a status symbol. Restraint becomes the statement — clean grids, refined typography, and quiet confidence built for buyers who already know what they want.
Four pairings working in harmony — Italiana for hero display, Cormorant Garamond for editorial flourish, Manrope for body and UI, Barlow Condensed for utility marks.
Each residence begins with the land — its grade, its prevailing winds, the angle of late afternoon light. From there we draw lines of restraint, allowing the architecture to recede and the living to begin.
/* Google Fonts import */ @import url('https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:wght@300;400;700&family=Manrope:wght@300;400;500;700&family=Barlow+Condensed:wght@300;400;700&display=swap'); --font-display: 'Italiana', serif; --font-serif: 'Cormorant Garamond', serif; --font-sans: 'Manrope', sans-serif; --font-cond: 'Barlow Condensed', sans-serif;
A pale, paper-like base lets navy and gold do the work. Champagne softens transitions; the neutral scale carries every UI surface.
--brand1: #0E2C4D; /* Navy */ --brand2: #C9A86A; /* Gold */ --brand3: #E8DFC9; /* Champagne */ --brand4: #1A3A5F; /* Navy Mid */ --n-100..800: #FAF8F4 → #14110D; --body: #2A2620; --gradient: linear-gradient(135deg, #0E2C4D 0%, #1A3A5F 60%, #C9A86A 130%); --gradient-light: linear-gradient(135deg, #FAF8F4 0%, #E8DFC9 100%);
Primary buttons in deep navy default to gold on hover — a luxury REVEAL interaction. Hollow variant inverts the same logic.
.btn-primary { padding: 12px 25px; border-radius: 5px; background: var(--brand1); color: #fff; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .btn-primary:hover { background: var(--brand2); color: var(--n-800); transform: translateY(-2px); } .btn-primary:active { background: #b89a5e; }
Built from the brand-1 navy with a touch of warmth — never neutral grey. Luxury tier adds a faint gold halo.
--shadow-subtle: 0 1px 2px rgba(14, 44, 77, 0.04), 0 1px 3px rgba(14, 44, 77, 0.06); --shadow-medium: 0 4px 12px rgba(14, 44, 77, 0.08), 0 2px 4px rgba(14, 44, 77, 0.05); --shadow-strong: 0 12px 32px rgba(14, 44, 77, 0.14), 0 4px 8px rgba(14, 44, 77, 0.08); --shadow-luxury: 0 30px 60px -20px rgba(14, 44, 77, 0.18), 0 18px 36px -18px rgba(201, 168, 106, 0.12); --text-shadow-subtle: 0 1px 2px rgba(14, 44, 77, 0.08); --text-shadow-elegant: 0 2px 8px rgba(14, 44, 77, 0.18); --text-shadow-dramatic: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);