Style Guide · Design Reference

Team-T1-Light

C21 Masters — the daylight twin of Team-T1-Dark. Ultra-luxury minimalism rendered bright, airy, and gallery-white.

Design Style: Luxury / Minimal Category: Boutique luxury real-estate team Team Agents/Team-T1-Light

2 Color Palette

Warm-ivory light theme with a deep-gold primary and heritage-gold accent. Values from assets/tailwind-config.js.

Primary

primary
#957733
rgb(149, 119, 51)
primary-fixed
#6E531F
rgb(110, 83, 31)
on-primary-container
#4E3700
rgb(78, 55, 0)

Secondary

secondary / tertiary
#5A554D
rgb(90, 85, 77)
secondary-container
#E3DCCF
rgb(227, 220, 207)
inverse-surface
#2F2D2A
rgb(47, 45, 42)

Accent

heritage-gold / primary-container
#C5A059
rgb(197, 160, 89)
inverse-primary
#E9C176
rgb(233, 193, 118)
onyx-black
#121212
rgb(18, 18, 18)

Background & Surfaces

background
#FAF8F4
rgb(250, 248, 244)
surface / obsidian
#FFFFFF
rgb(255, 255, 255)
surface-container-lowest
#F4F0E9
rgb(244, 240, 233)
surface-container-low
#EFEAE1
rgb(239, 234, 225)
surface-container-high
#EBE5DA
rgb(235, 229, 218)
surface-variant
#E3DCCF
rgb(227, 220, 207)

Text & Lines

on-surface / on-background
#1B1A18
rgb(27, 26, 24)
on-surface-variant
#5A554D
rgb(90, 85, 77)
outline
#8A8276
rgb(138, 130, 118)
outline-variant
#D6CEBF
rgb(214, 206, 191)
error
#BA1A1A
rgb(186, 26, 26)

3 Typography

Montserrat for display / headings / buttons; Inter for body & labels. Icons: Material Symbols Outlined.

Montserrat
font-display · font-button
Weights 500 / 600 / 700. Display, all headings, button labels, brand wordmark.
Inter
font-body · font-label-caps
Weights 400 / 500 / 600 / 700. Body copy, ledes, small text, tracked caps labels.
diamond Icons
Material Symbols Outlined
Outlined, weight 400. Gold accent throughout UI.
display-lg 64pxRedefining Luxury
display-lg-mobile 40pxRedefining Luxury
headline-lg 32pxArchitects of Premium Living
headline-lg-mobile 28pxArchitects of Premium Living
headline-md 24pxSignature Residences
headline-md-mobile 20pxSignature Residences
body-lg 18px/28Unparalleled access to the world's most distinguished properties — discretion, precision, and heritage in every transaction.
body-md 16px/24Every engagement is handled with the precision of a private practice, from acquisition to disposition.
button 14px capsWork With Our Team
label-caps 12pxThe Founders · By Appointment

4 Spacing System

Layout scale, radius system, and easing curve from the Tailwind config & site.css.

TokenValueUse
container-max1440pxMax content width (centered)
section-gap120pxVertical padding between major sections
margin-desktop80pxHorizontal page margin (desktop)
margin-mobile20pxHorizontal page margin (mobile)
gutter24pxGrid / card gap
unit8pxBase spacing unit
easecubic-bezier(0.16, 1, 0.3, 1)Reveals, card lift, underline, transitions

Border Radius Scale — sharp 0px corner system

buttons / cards / images
0px (default UI)
DEFAULT
0.25rem
lg
0.5rem
xl
0.75rem
full
pills / dots

The signature look uses sharp 0px corners for buttons, cards, images and property tiles. Rounded radii are reserved for the pill eyebrow chip and small status dots.

5 Buttons

Hover the samples to see the real transition. Sharp corners, uppercase Montserrat, gold-driven.

Primary (heritage-gold #C5A059 on onyx text): hover swaps to onyx-black background + white text; active scale(.95).
Secondary (gold outline + gold text on transparent): hover fills with heritage-gold/10 tint.
Nav CTA: gold background, hover darkens to primary-fixed #6E531F. All transitions 300ms on the 0.16,1,0.3,1 ease.

6 Form Elements

Minimalist underline fields — transparent background, single bottom border that turns gold on focus. Labels are tracked caps.

Focus state: bottom border color changes from outline-variant #D6CEBF to heritage-gold #C5A059, no focus ring. Placeholders use on-surface-variant at 40% opacity.

7 UI Components

Signature reusable pieces rendered in the real styles.

Navigation Bar (fixed, blurred, centered wordmark)

Service Cards (card-lift on hover)

key

Buying

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

Learn More
sell

Selling

Cinematic marketing, strategic pricing, and a global audience that positions your property to command its peak.

Learn More
trending_up

Investment

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

Learn More

Badges, Eyebrow & Section Label

New Listing Exclusive Sold
Exclusive Portfolio · By Appointment
The Founders

Footer

C21 MASTERS

Elevating the standard of luxury real estate representation through uncompromising integrity and bespoke advisory services.

Icons: Material Symbols Outlined throughout — key, sell, trending_up, verified, location_on, arrow_forward, arrow_outward — consistently tinted heritage-gold.

8 Visual Examples

A combined mini-showcase on the template's real grounds — dark photo-style hero, gold stat band, and ivory body.

Exclusive Portfolio · By Appointment

Redefining Luxury Real Estate

Unparalleled access to the world's most distinguished properties — discretion, precision, and heritage.

$1.2B+
Career Sales Volume
640+
Families Represented
22
Years Combined
98%
List-to-Sale Ratio
About C21 Masters

A Boutique Standard, Backed by a Global Name

We pair the intimacy of a two-partner advisory with the reach of the Century 21 network. Every client works directly with a founder — never handed off.

query_stats

Market Analysis

Clear, current valuations and neighborhood intelligence so every decision rests on evidence, not guesswork.

Learn More