Style Guide · Design Reference

DualAgent-T1-Dark

Design Style: Corporate Modern with Luxury Accents (fintech-luxury, dark-mode-first)

An obsidian-and-gold "premium timepiece" that signals one accountable expert handling both sides of a high-net-worth deal — real estate and mortgage lending under one roof.

Brand: Marcus A. Sterling — Century 21 Masters + LendingElite Mortgage (codename "EliteObsidian")

c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Dual Agents\DualAgent-T1-Dark

Real Estate · Gold Lending · Teal

01 Color Palette

Primary — Metallic Gold (Real Estate)

gold
#C2A15C
rgb(194, 161, 92)
gold-light
#E6CC8A
rgb(230, 204, 138)
gold-dark
#9C7E42
rgb(156, 126, 66)

Secondary — Lending Teal

teal
#3AA8BD
rgb(58, 168, 189)
teal-light
#6FCAD9
rgb(111, 202, 217)

Accent — Gradients & Hairlines

Metallic gold text
linear-gradient 95deg
dark → light → gold
hairline-gold
rgba(194,161,92,.55)
1px divider
hairline-teal
rgba(58,168,189,.55)
1px divider

Background — Obsidian & Tonal Panels

obsidian (bg)
#080B0C
rgb(8, 11, 12)
panel (L1)
#0F1416
rgb(15, 20, 22)
panel-2 (L2)
#141B1E
rgb(20, 27, 30)
panel-3 (L3)
#1A2327
rgb(26, 35, 39)
line (hairline)
#222C30
rgb(34, 44, 48)

Text

ink
#F5F7F7
rgb(245, 247, 247)
muted
#AEB7BA
rgb(174, 183, 186)
faint
#7C868A
rgb(124, 134, 138)

02 Typography

Display / UI: Montserrat 'Montserrat', system-ui, sans-serif — uppercase, tight tracking, weights 400–900. Body: Source Serif 4 'Source Serif 4', Georgia, serif. Icons: Material Symbols Outlined.

Eyebrow · 12/.22emOne Professional · Two Mandates
H1 Display · 68px/800Under One Roof
H2 Display · 52px/800Buy, Sell & Finance
H3 Section · 36px/700Featured Listings
H4 Title · 24px/600Live Rate Sheet
H5 Title · 19px/600In-House Financing
H6 Title · 15px/600Loan Program Details
Lede · serif 18pxOne accountable expert from first showing to final wire.
Body · serif 16pxMarcus A. Sterling is a rare dual practitioner eliminating the friction between agent and lender.
Small · serif 13pxCentury 21 Masters DRE #01234567 · Equal Housing Opportunity.
Nav label · 13pxHome  About  Services  Contact

Montserrat weights in use

Aa400 Regular Aa500 Medium Aa600 SemiBold Aa700 Bold Aa800 ExtraBold Aa900 Black

03 Spacing System

Container max-width
1280px
Base unit
8px grid
Section gutter (desktop)
24px · px-10 (40px)
Generous margins
40px+ negative space
Nav height
80px (utility bar 40px)
Brand tracking
0.22em (letterSpacing.brand)
Easing curve
cubic-bezier(.16,.84,.44,1)
Button padding
16px / 32px (py-4 px-8)

Border-radius scale (architectural, no pills)

DEFAULT · 4px
buttons / inputs / cards
lg · 8px
xl · 12px
portrait / large cards
9999px
chips / badges only

04 Buttons

Hover the samples to see the real interaction. Primary (Gold Standard): gold gradient, obsidian text; hover lifts translateY(-1px), adds a 28px gold glow and sweeps a diagonal shimmer highlight across the face. Secondary (Lending Edge): teal outline ghost; hover lifts and fills with rgba(58,168,189,.10).

Explore Properties Get Pre-Approved
Book Consultation Learn More

05 Form Elements

Obsidian field background, 1px line border, 4px radius. On focus the border transitions to teal to signal "Lending" activity. Labels use the tracked uppercase eyebrow style in faint.

06 UI Components

Navigation (scrolled / glass state)

21 CENTURY 21MASTERS
Home About Services Contact
Book Consultation

Cards — crown-gold / crown-teal (tonal elevation)

real_estate_agent

Luxury Acquisition

Curated off-market estates and white-glove representation from first showing to close.

account_balance

In-House Financing

Licensed loan officer control of your rate, terms, and timeline — no third-party handoff.

verified

card-soft

Neutral 1px white/6% border panel used for listings and general content blocks.

Badges, chips & eyebrows

Real Estate · DRE #01234567 Lending · NMLS #987654 Loan Approved Elite Status SOLD

Icons: Material Symbols Outlined (filled, weight 400), e.g. real_estate_agent account_balance verified — noted as the template's legacy icon set.

Footer

21 CENTURY 21MASTERS

Senior Real Estate Advisor with Century 21 Masters and licensed Mortgage Loan Officer — under one roof.

Real Estate

  • Featured Listings
  • Proof of Transactions
  • Sell Your Estate

Lending

  • Loan Programs
  • Calculator
  • Get Pre-Approved
© 2026 Marcus A. Sterling · DRE #01234567 · NMLS #987654 · Equal Housing Opportunity.

07 Visual Examples — Combined Showcase

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.

Explore Properties Get Pre-Approved
workspace_premium

$1.2B+ Closed Volume

18 years · 640+ loans funded. The dual-mandate advantage in numbers.