For Sale
$8,950,000
The Meridian Estate
Beverly Hills, California
- 6 Bd
- 8 Ba
- 9,400 Sq Ft
Timeless Luxury — Hawthorne Estates
Design style: Luxury (light print-editorial / gallery catalogue). A light, paper-white print-editorial / gallery catalogue — the opposite of a dark cinematic hero site. Mood: Elegant · Editorial · Premium · Trustworthy.
2 Color Palette
Color Palette
Primary / Ink
--color-ink
Charcoal Ink
#111827rgb(17, 24, 39)
--color-ink-soft
Ink Soft
#2A3340rgb(42, 51, 64)
Accent / Gold
--color-gold
Gold
#C9A86Argb(201, 168, 106)
--color-gold-deep
Gold Deep
#A5834Ergb(165, 131, 78)
Secondary / Champagne
--color-champagne
Champagne
#E9DFC8rgb(233, 223, 200)
--color-champagne-soft
Champagne Soft
#F3EDDErgb(243, 237, 222)
Background / Ground
--color-bg
White (base)
#FFFFFFrgb(255, 255, 255)
--color-paper
Paper (dominant)
#F9F8F6rgb(249, 248, 246)
--color-on-ink
On-Ink (text on dark)
#F4F2ECrgb(244, 242, 236)
Text / Lines
--color-text
Body Text
#1F2937rgb(31, 41, 55)
--color-muted
Muted
#6B7280rgb(107, 114, 128)
--color-border
Border / Hairline
#E5E7EBrgb(229, 231, 235)
Semantic
--color-success
Success
#2F7D5Drgb(47, 125, 93)
--color-error
Error
#B0413Ergb(176, 65, 62)
Proportion: ivory/paper dominates the ground; charcoal ink appears only as occasional full-width bands; gold is a hairline accent, never a large fill field.
3 Typography
Typography
Display font
Playfair Display
Weights: 400, 500 (headings), 600 · italics used for gold accent words
"Playfair Display", Georgia, "Times New Roman", serif
Body font
Inter — 400 / 500 / 600
Weights: 400 (body), 500, 600 (labels / buttons)
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Heading hierarchy (real fonts & sizes)
masthead
clamp 3–7rem
clamp 3–7rem
The season's most considered residences
h1
clamp 2.5–4.5rem
clamp 2.5–4.5rem
A legacy, curated
h2
clamp 2–3.25rem
clamp 2–3.25rem
Service, refined to an art
h3
clamp 1.375–2rem
clamp 1.375–2rem
The Meridian Estate
h4
clamp 1.125–1.375rem
clamp 1.125–1.375rem
Private Advisory
Body & label samples
.lead / --t-lead
Hawthorne Estates publishes a small, deliberate portfolio of California's finest homes — presented with the eye of an editor.
body / --t-body
For two decades, Hawthorne Estates has guided the acquisition and sale of the region's most storied addresses, measured not in listings but in lasting relationships.
small / --t-small
Represented privately, shown by appointment only.
.eyebrow / --t-label
01 — Our Philosophy
nav label
4 Spacing System
Spacing, Layout & Radius
Space scale (rem tokens)
--space-1 · 0.25rem--space-2 · 0.5rem--space-3 · 0.75rem--space-4 · 1rem--space-6 · 1.5rem--space-8 · 2rem--space-10 · 2.5rem--space-12 · 3rem--space-16 · 4rem--space-20 · 5rem--space-24 · 6remLayout & motion tokens
Border-radius scale (minimal — 2px)
2px
buttons / cards / images0
form fields (square)50%
avatars onlyRadius is deliberately minimal (--radius: 2px). Buttons are squared, form fields are fully square underline-only; circular radius is reserved for portrait avatars.
5 Buttons
Buttons & Links
On light ground (hover the samples — live states)
On charcoal ground
Style: squared (radius 2px), uppercase, letter-spacing 0.22em, padding 1.05rem 2.5rem, label size (0.6875rem/600). Hover: .btn--ink & .btn--gold both shift to gold-deep (#A5834E) with white text; .btn--outline fills ink with on-ink text; .btn--outline-light shifts border + text to gold. Transitions run 200ms on the shared ease curve. The .link-arrow keeps a gold underline and slides its arrow 5px right on hover.
6 Form Elements
Form Elements — underline-only fields
Style: no box — border-bottom hairline only (#E5E7EB), zero radius, transparent-to-white fill, 0.75rem vertical padding. Labels are uppercase tracked (0.16em) ink; required marker is gold. Focus: bottom border turns gold and thickens to 2px. Hover: border darkens to muted. Error state uses --color-error on the border.
7 UI Components
UI Components
Navigation — light masthead bar
Eyebrow / section kicker & property tag
01 — Our Philosophy
This Issue's Cover
Property / catalogue card
For Sale
Numbered index ledger (home signature)
02
$6,475,000
Villa Serrana
Montecito, California · 5 bd / 6 ba
03
$11,800,000
The Atelier House
Bel Air, California · 7 bd / 9 ba
Charcoal stats band
- $1.2B
- Total Sales Volume
- 98%
- List-to-Sale Ratio
- 21
- Avg Days on Market
- 96%
- Repeat & Referral
Pull-quote testimonial
Hawthorne sold our estate in eleven days, above asking, without a single public showing. Discretion of this caliber is rare.
Eleanor Vance · Seller · Bel Air
Footer — light editorial
Icons: the template uses the Lucide icon set (loaded via CDN as <i data-lucide="…">), rendered as thin 2px-stroke line icons in gold — e.g. map-pin, arrow-right, arrow-up-right, bed-double, bath, ruler, phone, mail. Inline SVGs above approximate them. Other signature components: masthead hero, editorial split with framed image, feature-estate + ledger, editorial service entries, step-grid, FAQ ledger, and the charcoal CTA band.
8 Visual Examples
Combined Showcase
On paper (dominant ground)
The Hawthorne Portfolio — Spring 2026
The season's most considered residences.
A small, deliberate portfolio of California's finest homes — presented with the eye of an editor and the discretion of a private office.
On charcoal band (CTA)
Begin the Conversation
Your next chapter deserves a masterful introduction
Whether acquiring or selling, a private consultation is the first step.
On champagne-soft (form panel accent)
By Appointment
Every engagement is led by a senior partner, conducted with discretion, and executed with the precision our clientele expects.
Arrange a ViewingGenerated as a design reference for the "Timeless Luxury" template (Hawthorne Estates). Values documented match styles.css in this folder. No tracking or external scripts — fonts loaded from Google Fonts only.