DualAgent-T1-Light — Style Guide

01 Color Palette

Warm-bone / gallery-white ground with dual-mandate coding: darkened gold = Real Estate, deepened teal = Lending. Every value below is the template's real token.

Primary — Metallic Gold (Real Estate)

gold#A6822Frgb(166, 130, 47)

gold-light#D9BD78rgb(217, 189, 120)

gold-dark#7E6122rgb(126, 97, 34)

Secondary — Lending Teal

teal#157E8Ergb(21, 126, 142)

teal-light#3AA8BDrgb(58, 168, 189)

Accent — Selection / Seal Gold

selection / seal#C2A15Crgb(194, 161, 92)

Background — Grounds & Elevation

panel-2 (body)#FFFFFFrgb(255, 255, 255)

panel (warm bone)#F2F0EArgb(242, 240, 234)

panel-3#E9E6DErgb(233, 230, 222)

line (hairline)#E2DFD7rgb(226, 223, 215)

Text — Ink & Muted

obsidian#15191Brgb(21, 25, 27)

ink (headings)#191D1Frgb(25, 29, 31)

muted (body)#4C5458rgb(76, 84, 88)

faint#6E767Argb(110, 118, 122)

02 Typography

Primary: Montserrat (headings, UI, labels) · Secondary: Source Serif 4 (body copy). Icons: Material Symbols Outlined. Weights loaded: Montserrat 400/500/600/700/800/900, Source Serif 4 400/500/600.

.h-display — Montserrat 800, -0.02em, hero (68px)

Buy, Sell & Finance Under One Roof.

H1 · h-display 52px

Elite advisory, one expert

H2 · h-section — Montserrat 700, +0.02em (30px)

Request a Consultation

H3 · h-section (24px)

The Real Estate Practice

H4 · h-title — Montserrat 600 (20px)

Loan Programs & Rates

H5 · h-title (16px)

Direct Contact

H6 / eyebrow · .h-eyebrow — Montserrat 700, 12px, 0.22em uppercase

About the Advisor

Lede · Source Serif 4 400 (18px)

Sophia A. Sterling is a rare dual practitioner — a Senior Real Estate Advisor and a licensed Mortgage Loan Officer. One accountable expert from first showing to final wire.

Body · Source Serif 4 400 (16px)

Luxury acquisition, listing, and in-house financing under one roof — eliminating the friction between agent and lender.

Small · Source Serif 4 (13px)

Typical response within one business day. Your details stay private.

Nav label · Montserrat 500 (13px)Home About Services Contact

Weight scale — Montserrat

Regular quiet detail	400
Medium nav / UI	500
SemiBold h-title	600
Bold h-section / eyebrow	700
ExtraBold h-display / stats	800
Black c21 seal numeral	900

03 Spacing System

8px base unit, 12-column fixed grid, generous section rhythm. Tight architectural radius scale (4 / 8 / 12px).

Container max-width1280px
Gutter / page padding24px (px-6) · 40px (md:px-10)
Section padding (y)80px → 112px (py-20 / md:py-28)
Grid12-col desktop · 24px gutters
Brand tracking0.22em (uppercase labels)
Easing curvecubic-bezier(.16,.84,.44,1)
Card shadow0 12px 30px rgba(20,24,26,.06)
Gold hover shadow0 6px 22px rgba(166,130,47,.32)

Border-radius scale

DEFAULT · 4px
buttons · inputs · badges

lg · 8px
cards · panels

xl · 12px
images · showcase

full · 999px
eyebrow pills only

04 Buttons

Hover the samples to see the real states. Primary = gold-gradient with a sweeping sheen + lift; Secondary = teal ghost outline that fills to 10% teal on hover. Both lift -1px.

Primary (.btn-gold)	bg linear-gradient(gold-dark→gold→gold-light) · text #15191B · radius 4px · Montserrat 700 uppercase · hover: sheen sweep + shadow 0 6px 22px rgba(166,130,47,.32) + translateY(-1px)
Secondary (.btn-ghost)	1px border rgba(21,126,142,.6) · text #157E8E · transparent · hover: bg rgba(21,126,142,.1) + translateY(-1px)

05 Form Elements

Fields sit on the warm bone panel (#F2F0EA) with a hairline #E2DFD7 border; focus swaps the border to teal (#157E8E) to signal "Lending" activity. Labels use the uppercase Montserrat eyebrow. Click a field to see the focus state.

Full Name

Phone

Email

I'm Interested In

How can I help?

I consent to be contacted about my inquiry. I understand this is not a loan application or commitment to lend.

06 UI Components

Signature reusable pieces rendered with real styles: crown-bordered cards, glass nav with C21 seal lockup, footer, eyebrow badges, listing card + SOLD stat band. Icons are Material Symbols Outlined (filled 24).

Navigation (scrolled glass state)

21 CENTURY 21
MASTERS

Home About Services Contact

Cards — crown-gold · crown-teal · card-soft

real_estate_agentReal Estate

Luxury Acquisition

Gold top-border "crown" over a real drop shadow.

account_balanceLending

In-House Financing

Teal crown edge signals the lending mandate.

Neutral Panel

card-soft — 8% ink border, same soft elevation.

Badges / eyebrow chips & tags

Real Estate · DRE #01234567 Lending · NMLS #987654 Represented Seller In-House Financed

Listing card with SOLD stat band

apartment

Just Listed

The Sterling Estate

Beverly Hills · 6 Bed · 8 Bath

$9.4M

Sale Price

102%

Of List

9d

On Market

Footer

07 Visual Examples

Combined showcase on the template's real warm-bone ground (#F2F0EA), reading as a true mini page.

Real Estate · DRE #01234567 Lending · NMLS #987654

Buy, Sell & Finance
Under One Roof.

One accountable expert from first showing to final wire, eliminating the friction between agent and lender.

About the Advisor

A rare dual practitioner

Precision fintech meets legacy real estate prestige.

$1.2B+

Closed Volume

640+

Loans Funded

18 yrs

Experience

Email Timeframe