Design Reference — Luxury

Classic Luxury Light

The daylight twin of Lux-Dark — same old-world editorial voice on a warm paper ground. Century 21 Masters · Kenn Jan Ali, California.

Design Style: Classic / Luxury
Mood: Warm · Sunlit · Editorial · Gallery-in-daylight
Type: Cormorant Garamond + Jost + Allura
c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Luxury Templates\Classic Luxury Light

02 — Color Palette the warm-paper ground & champagne gold

Primary — Champagne / Brass gold
--champagne
#C7A763rgb(199, 167, 99)
--champagne-soft
#DCC495rgb(220, 196, 149)
--brass
#997A3Drgb(153, 122, 61)
Secondary — Espresso dark bands
--obsidian
#0B0A08rgb(11, 10, 8)
--ink-2
#1B1813rgb(27, 24, 19)
--ink-3
#221E18rgb(34, 30, 24)
Accent — Hairlines
--line-gold
rgba(153,122,61,0.34)
--line-light
rgba(20,18,14,0.13)
--line-dark
rgba(20,18,14,0.16)
Background — Warm paper surfaces
--paper
#F4F0E7rgb(244, 240, 231)
--paper-2
#EBE4D6rgb(235, 228, 214)
--card
#FBF8F1rgb(251, 248, 241)
--ivory-2
#EBE5D8rgb(235, 229, 216)
Text — Ink & stone (on light ground)
--ink
#14120Ergb(20, 18, 14)
--ivory (on dark)
#F4F0E7rgb(244, 240, 231)
--stone
#5E574Brgb(94, 87, 75)
--stone-dark
#6A6256rgb(106, 98, 86)
--stone-dim
#8A8273rgb(138, 130, 115)

Proportion: warm sand/paper dominates the page; two dark espresso bands (hero photo overlay + footer) provide contrast. Note that --ink and --paper/--ivory share hex values by role (text on light = #14120E; light text on dark = #F4F0E7).

03 — Typography Cormorant Garamond · Jost · Allura

DisplayCormorant Garamond, Georgia, serif
Body / UIJost, system-ui, sans-serif
Script accentAllura, cursive
Cormorant weights300, 400, 500 + italics
Jost weights300, 400, 500, 600
Body base300 / line-height 1.7
H1 · --fs-hero · Cormorant 300
Private Residences
H2 · --fs-display · Cormorant 300
The California Collection
H3 · --fs-h2 · Cormorant 300
An editorial approach
H4 · --fs-h3 · Cormorant 400
Bespoke representation
H5 · 1.45rem · Cormorant 400
Considered, quietly
H6 · Cormorant italic 500
Estate no. 01
Body · Lede · Small · Script · Eyebrow

Lede (--fs-lead, Jost 300): A daylight gallery for private residential — warm paper, champagne gold, and an old-world editorial voice.

Body (--fs-body, Jost 300, line-height 1.7): Full-bleed photography, gold hairlines, and sand alternating bands carry the page. Prices read in dark ink; raised paper cards lift on a soft hover shadow.

Small text (0.85rem, --stone-dark) — used for captions, notes, and licensing detail.

Section eyebrow

Masters

Nav Label — Tracked Uppercase

04 — Spacing & System layout tokens, radii & easing

--maxw1320px
--pad-xclamp(1.4rem, 5vw, 7rem)
--rail56px (0 ≤1024px)
--nav-h88px → 68px stuck
section .blockclamp(5rem, 10vw, 9.5rem)
.block--tightclamp(3.5rem, 7vw, 6rem)
--easecubic-bezier(.22,1,.36,1)
--ease-slowcubic-bezier(.16,1,.3,1)
Border-radius scale (sharp — a signature of this template)
Buttons · 0px
Images · 0px
DRE badge · 2px
Guide cards · 3px
Icon buttons · 50%

The template deliberately uses sharp (0px) hairline-bordered buttons with a champagne fill-up; only small chrome (badges 2px, guide cards 3px) and circular icon buttons/socials (50%) break from square corners.

05 — Buttons hover the samples to see the real states

Primary (.btn): 1px gold hairline border, transparent fill; on hover the champagne fill wipes up from the bottom (translateY 101%→0), border turns champagne, and the ↗ icon nudges up-right. Solid (.btn--solid): starts champagne-filled; hover wipes the fill upward off the top and text turns champagne. Ghost (.btn--ghost): ink fill on hover with ivory text. Text link (.tlink): brass, uppercase 0.24em tracking, with an underline that scales in from the left. All transitions use --ease over 0.5–0.55s. Focus-visible: 1px champagne outline, 4px offset.

06 — Form Elements underline fields on the paper ground

Fields are borderless except for a 1px --line-light bottom rule; text is Jost 300 at 1.05rem in --ink. On focus the underline turns champagne (no box outline). Labels are brass, uppercase, 0.2em tracked. In the live template the label floats as a placeholder and lifts on focus; here it sits above the field for clarity. Checkbox accent-color is champagne.

07 — UI Components real markup & styles

Navigation (stuck / frosted paper bar)

Fixed nav sits right of a 56px architectural rail; transparent over the dark hero, then a frosted paper bar (rgba(244,240,231,0.82) + blur) once stuck. Brand lockup reads brass on light, champagne on dark. Links: 0.74rem uppercase, 0.22em tracking, with a champagne underline that scales in on hover / current page.

Guide / property rail card (raised paper, soft hover lift)
Guide · 01
The Buyer's Guide

A measured path from first viewing to the keys — private, discreet, considered.

  • Establish the brief & financing
  • Curate a private shortlist
  • Negotiate & close in confidence

Raised card: --card background, 1px --line-dark border, 3px radius. On hover it lifts 6px, border turns gold, background goes pure white, and a soft shadow (0 24px 50px -28px) appears. Ordered items use decimal-leading-zero counters in Cormorant brass.

Badges & eyebrow
Featured Collection Beverly Hills, CA DRE #01234567

Eyebrow: brass uppercase 0.36em with a 38px leading hairline. Location eyebrow: brass 0.28em. DRE badge: brass text in a 1px gold-hairline box, 2px radius — the required licensing detail shown with intent.

Footer (espresso dark band)

Footer sits on --obsidian with a gold top hairline; oversized Cormorant wordmark with a champagne accent span; muted stone body text; agent identity + DRE licensing badge. Icons: the template uses Lucide (line icons via data-lucide) plus inline SVG for social/affiliation marks — thin 1.2–1.5 stroke, champagne/brass on hover.

08 — Visual Example the system assembled

The California Collection
A quiet authority in private residential.

Full-bleed photography under an espresso gradient, large Cormorant serif headlines, and champagne accents — the daylight twin of Lux-Dark's dark ground.

View the Collection
Estate · 01
Bel-Air Modern

Five bedrooms · canyon views · gallery light throughout.

$12,500,000
Private Enquiry

Discreet · By appointment

Generated as a design reference for the Classic Luxury Light template — values mirror styles.css & DESIGN.md in this folder. No tracking or external scripts.