Design Reference · Style Guide

Aurelia Collection

Luxury real estate — warm cinematic hospitality (Aman / Four Seasons grade). A solo-advisor private practice: serene, sun-warmed, golden-hour, resort-brochure pacing.

Design Style: Luxury (warm cinematic hospitality) Fonts: Cormorant Garamond · Inter

c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Luxury Templates\Aurelia Luxury

I Color Palette

Primary (Ink / Ground)

--ink#111111 · rgb(17,17,17)

--ink-warm#17140F · rgb(23,20,15)

--ink-deep#0E0C08 · rgb(14,12,8)

Accent (Gold family — hairlines & accents only)

--gold#B68C4D · rgb(182,140,77)

--champagne#C9A96A · rgb(201,169,106)

--bronze#9A7B4F · rgb(154,123,79)

--gold-muted#A8864A · rgb(168,134,74)

Background (Ivory grounds)

--soft-white#FAF9F7 · rgb(250,249,247)

--warm-white#F5F3EF · rgb(245,243,239)

Text (on light)

--text#2A2622 · rgb(42,38,34)

--muted#6B655C · rgb(107,101,92)

--faint#8A847A · rgb(138,132,122)

Text (on dark)

--on-ink#F4F0E8 · rgb(244,240,232)

--on-ink-mutedrgba(244,240,232,.62)

--on-ink-linergba(201,169,106,.20)

Supporting & State

--gold-dividerrgba(182,140,77,.35)

--success#2F7D5D · rgb(47,125,93)

--error#B0413E · rgb(176,65,62)

Proportion: warm ivory dominates the light sections; warm charcoal appears as full-width cinematic bands; gold is a hairline/accent only — never a fill field or large background.

II Typography

Display / Headings

Cormorant Garamond

Weights 300 / 400 / 500 · italics for the single gold accent word · large, thin, never bold · --font-display

Body / UI

Inter

Weights 300 / 400 / 500 · nothing heavier · body sits at 18px · --font-body

hero · 300Represented privately

H1 · --t-h1A considered introduction

H2 · --t-h2The Aurelia Collection

H3 · --t-h3Featured estates

H4 · --t-h4By appointment only

Eyebrow / chapterII Featured Collection

Nav labelCommunities

Lede — I take on only a handful of clients each season, representing a small, curated collection of estates the way a five-star resort curates a stay.

Body (18px, Inter 400) — Warm, editorial, hospitality-first and unhurried. When you work with me, every introduction is considered; the property is always the hero. The page breathes between warm-charcoal cinematic bands and ivory calm sections.

Small text (15px) — DRE #01234567 · By appointment · The Aurelia Collection.

III Spacing System

--wrap

74rem (container max)

--wrap-wide

86rem

--wrap-narrow

52rem

--section-pad

clamp(5rem, 3.5rem + 7vw, 10rem)

--pad-x

clamp(1.25rem, 4vw, 3.5rem)

space scale

0.25 · 0.5 · 0.75 · 1 · 1.25 · 1.5 · 2 · 2.5 · 3 · 4 · 5 · 6 rem

--ease

cubic-bezier(0.22, 1, 0.36, 1)

--ease-out

cubic-bezier(0.16, 1, 0.3, 1)

durations

--fast 240ms · --med 560ms · --slow 800ms

--radius-btn · 10px

--radius-card · 12px

--radius-image · 16px

--radius-pill · 999px

Radius per brief: cards 12px, images 16px, buttons 10px. Motion: 500–800ms fade-up reveals, slow hover zoom, Ken Burns; all respect prefers-reduced-motion.

IV Buttons

Explore estates →

Hover the samples to see the real states. Primary (.btn--ink): black bg / white text → gold bg on hover. Secondary (.btn--outline): 1px gold border / gold text → black fill on hover. Gold (.btn--gold): gold → black on hover. Icon nudges 3px on hover. Radius 10px, letter-spacing 0.04em, weight 500.

On warm-charcoal bands the secondary uses .btn--outline-light (ivory hairline → solid ivory fill on hover).

V Form Elements

Clean, thin-bordered fields (--border-strong), radius 10px, generous 0.9rem padding. Focus state: gold border + 3px gold glow rgba(182,140,77,.12). Required marker in gold.

VI UI Components

Navigation (scrolled / solid state)

A Aurelia

Nav is transparent over the hero, transitions to solid ivory with a hairline gold underline on scroll. Serif wordmark + gold monogram tile; uppercase letter-spaced links; gold underline-on-hover; slim gold-outline CTA.

Estate Card & Badges

Just Listed

Villa Serena

Montecito, California

5 Bed6 Bath8,400 sqft

$12,500,000↗

Dark tag (over imagery)

Film · No. 01Featured

Light pill badge (on cards)

Just ListedBy Appointment

Section eyebrow (Roman-numeral chapter)

III The Lifestyle

Footer (dark hospitality)

Signature components (from DESIGN.md): cinematic video-plate hero · trust marquee · asymmetric lead feature + horizontal estate rail · editorial about split with signature · communities image tiles · full-bleed lifestyle parallax band · pull-quote testimonials · warm-charcoal CTA band · dark hospitality footer. No stats / counters / metric bands anywhere. Icons: line icons (~16–24px) tinted gold. Deliberately no posed agent portraits — the property is the hero.

VII Visual Examples — Combined Showcase

I A Considered Introduction Represented privately, by appointment

Serene, sun-warmed, resort-brochure pacing — warm charcoal and ivory alternating, gold as a hairline accent only.

Just Listed

Casa del Mar

Malibu, California

6 Bed7 Bath11,200 sqft

$18,900,000↗

The same components on the ivory calm ground (--soft-white):

II Featured Estate Villa Serena

Warm, natural golden-hour light; framed with 16px soft-radius corners. Calm, never a hard sell — the tone of a concierge.

View details →

Generated as a design reference for the Aurelia Luxury template · not a production page · no external tracking or scripts.