Design Reference · Style Guide

C21 Masters

A sharp-cornered, black-and-gold gallery for a high-net-worth agent team — the dark twin of Team-T1-Light. Cinematic, editorial, ultra-luxury minimalism.

Design Style: Luxury Boutique Real-Estate Team Dark Theme Est. 2014
c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Team Agents\Team-T1-Dark

Color Palette

Black-and-gold discretion. Gold is used strictly as the "accent of value." Values are the template's real tokens from assets/tailwind-config.js.

Primary — Gold

primary
#e9c176
rgb(233, 193, 118)
heritage-gold
#C5A059
rgb(197, 160, 89)
primary-fixed
#ffdea5
rgb(255, 222, 165)
inverse-primary
#775a19
rgb(119, 90, 25)
on-primary
#412d00
rgb(65, 45, 0)

Secondary — Neutral Metal

outline
#9a8f80
rgb(154, 143, 128)
outline-variant
#4e4639
rgb(78, 70, 57)

Accent — Gold Gradient (stats / display text)

.text-gold-gradient
#ffdea5 → #C5A059 → #775a19
120deg linear-gradient

Background — Ground & Surfaces

background / surface
#121414
rgb(18, 20, 20)
surface-container-lowest
#0c0f0f
rgb(12, 15, 15)
obsidian (cards)
#252526
rgb(37, 37, 38)
onyx-black
#121212
rgb(18, 18, 18)
surface-container-low
#1a1c1c
rgb(26, 28, 28)
surface-container-high
#282a2b
rgb(40, 42, 43)
surface-container-highest
#333535
rgb(51, 53, 53)

Text

on-surface (body)
#e2e2e2
rgb(226, 226, 226)
on-surface-variant (muted)
#d1c5b4
rgb(209, 197, 180)
soft-ivory
#F9F9F9
rgb(249, 249, 249)

Typography

Montserrat (500–700) for headings, display and buttons — tight/negative tracking, often uppercase. Inter (400–600) for body and labels. Icons: Material Symbols Outlined.

Heading Hierarchy (Montserrat)

display-lg · 64px / 72 · 700 · -0.02em
Redefining Luxury
display-lg-mobile · 40px / 48 · 700 · -0.01em
Premium Living
headline-lg · 32px / 40 · 600 · 0.02em
Signature Residences
headline-lg-mobile · 28px / 36 · 600 · 0.01em
A Boutique Standard
headline-md · 24px / 32 · 600
Alexander Vance
headline-md-mobile · 20px / 28 · 700
Market Analysis

Body & Labels (Inter)

body-lg (lede) · 18px / 28 · 400
Unparalleled access to the world's most distinguished properties. Discretion, precision, and heritage in every transaction.
body-md · 16px / 24 · 400
From acquisition to disposition, every engagement is handled with the precision of a private practice.
label-caps · 12px / 16 · 600 · 0.1em · uppercase
Exclusive Portfolio · By Appointment
button · 14px / 20 · 700 · 0.05em · uppercase (Montserrat)
Work With Our Team

Spacing System

8px base unit. Sharp 0px corners on everything ("architectural precision") — only the hero pill eyebrow and circular avatars use the full radius.

Layout Metrics

container-max · 1440px
section-gap · 120px
margin-desktop · 80px
gutter · 24px
margin-mobile · 20px
unit · 8px

Border-Radius Scale (tokens vs. applied)

0px · buttons / cards / inputs
DEFAULT · 0.25rem
lg · 0.5rem
xl · 0.75rem
full · pill/avatar

Easing

cubic-bezier(0.16, 1, 0.3, 1) — used for reveals, card-lift, and the animated gold underline.

Buttons

Uppercase Montserrat, 14px / 700 / 0.05em, sharp 0px corners. Hover the samples to see the real states. Primary = solid gold + black text (hover → white); Secondary = 1px gold outline (hover → gold 10% fill). All buttons scale 0.95 on :active.

Work With Our Team Explore Listings Consultation

Nav "CONSULTATION" CTA uses the primary-fixed (#ffdea5) hover; hero/CTA primaries hover to pure white.

Form Elements

Minimal underline fields: transparent background, single bottom border (outline-variant #4e4639) that turns heritage-gold on focus. Uppercase label-caps labels. No box, no focus ring — editorial and quiet.

Send Message

UI Components

Signature reusable pieces rendered with real styles. Icons: Material Symbols Outlined (gold, thin-weight).

Navigation Bar — fixed translucent, gold hairline, centered wordmark

Section Eyebrow & Badges

Exclusive Portfolio · By Appointment New Listing Exclusive Sold

Service Card — obsidian panel, gold ghost border, card-lift

Buying

Curated access to on- and off-market homes, with negotiation that protects your position and your privacy.

Learn More

Property Card — full-bleed 4:3, sharp gold status badge

New Listing

$8,450,000

5 BD · 6 BA

Bel-Air Crest, Los Angeles

Stat Strip — gold-gradient numerals

$1.2B+
In Career Sales Volume
640+
Families Represented
22
Years Combined Expertise
98%
List-to-Sale Price Ratio

Footer — mega footer on lowest surface

Visual Examples

Buttons, type, a card and a form combined on the template's real dark ground — a true mini style guide.

Exclusive Portfolio · By Appointment

Redefining
Luxury Real Estate

Discretion, precision, and heritage in every transaction — guided by two founding partners who treat your move as their own.

Work With Our Team Explore Listings

Investment

Portfolio strategy, yield modeling, and disciplined sourcing for buyers building long-term wealth.

Learn More
Send Message