Classic · Warm Luxury

TK Realtors — Style Guide

TK Realtors — Century 21 Masters. A warm, local-expert lake brand with a live property search. Agents Kyler Battleson & Trace Emerson, Canyon Lake, California.

Design style: Classic real-estate / community-focused — Warm · Trustworthy · Community-rooted · "Lake-life" premium-but-approachable.

c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Team Agents\TK Realtors

02Color Palette

The brand system is Century 21 "Relentless Gold" over graphite, on warm off-white surfaces. Every value below is a real --custom-property from css/styles.css.

Primary — Relentless Gold

Gold--primary#b6a475rgb(182, 164, 117)
Gold Dark--primary-dark#97854frgb(151, 133, 79)
Gold Soft--primary-soft#d9cca9rgb(217, 204, 169)
Accent--accent#b6a475rgb(182, 164, 117)

Secondary — Graphite

Graphite--secondary#1c1c1ergb(28, 28, 30)
Graphite 2--secondary-2#2b2b2frgb(43, 43, 47)
Footer Ink(footer bg)#16171argb(22, 23, 26)

Background & Surfaces

Background--background#ffffffrgb(255, 255, 255)
Surface--surface#faf7f0rgb(250, 247, 240)
Surface 2--surface-2#f1ebddrgb(241, 235, 221)
Border--border#e6ded0rgb(230, 222, 208)
Border Dark--border-dark#3a3a3frgb(58, 58, 63)

Text

Text--text#23231frgb(35, 35, 31)
Text Muted--text-muted#5f5f58rgb(95, 95, 88)
Text Invert--text-invert#f7f4ecrgb(247, 244, 236)

03Typography

Headings: Fraunces (serif, optical-sizing, weight 600, negative tracking). Body: Inter (sans). Weights loaded: 400–700 for both families. Live Google Fonts render below.

Canyon Lake HomesH1 · Fraunces 600 · clamp(2.1rem→4rem)
Meet Your Local TeamH2 · Fraunces 600 · clamp(1.7rem→2.75rem)
Featured ListingsH3 · Fraunces 600 · clamp(1.25rem→1.65rem)
Why work with usH4 · Fraunces 600 · clamp(1.05rem→1.25rem)

Body / Lede / Small

Lede — A warm, local-expert lake brand with a live property search, built for the Canyon Lake community. (p.lead · Inter · clamp 1.075→1.35rem, color --text)

Body — Century 21 Masters agents Kyler Battleson and Trace Emerson guide buyers and sellers across Canyon Lake, Murrieta, Temecula, and Riverside. Body copy uses Inter with a slight negative letter-spacing (-0.006em) and 1.6 line-height. (color --text-muted)

Small — License #, disclaimers, and meta text. 0.8–0.85rem, --text-muted.

Eyebrow / Tracked Uppercase Label

Featured Agent

Inter 700 · letter-spacing .18em · uppercase · color --primary-dark, with a 26px gold rule prefix.

04Spacing & Structure

--container1200px (narrow: 820px)
--space-xs0.5rem
--space-sm0.75rem
--space-md1.25rem
--space-lg2rem
--space-xlclamp(2.5rem, 6vw, 5rem)
--space-2xlclamp(3.5rem, 9vw, 7rem) — section padding-block
--header-h66px (74px ≥900px)
--easecubic-bezier(.22, .61, .36, 1)
--shadow-sm0 1px 3px rgba(28,28,30,.08)
--shadow-md0 10px 30px -12px rgba(28,28,30,.22)
--shadow-lg0 24px 60px -20px rgba(28,28,30,.32)

Border-radius scale

9px · --radius-sm
14px · --radius
999px · --radius-pill

Buttons & badges are pills (999px); cards/media are 14px; inputs and small elements are 9px.

05Buttons

Pill buttons, min-height 48px, Inter 600. Hover lifts −2px; active returns to 0. Hover the samples to see the real states.

Primary gold → hover fills gold-dark with white text + medium shadow. Dark graphite → hover to pure black. Outline graphite border → hover fills graphite.

Ghost-light (for dark grounds)

Ghost-light: transparent with translucent white border → hover fills white with graphite text. Used over hero and CTA bands.

06Form Elements

Inputs are 48px min-height, white with 1.5px warm border, 9px radius. Focus turns the border gold with a 3px gold glow.

Required fields marked with a gold asterisk. Invalid fields shift the border to #c0392b.

07UI Components

Navigation (sticky compact header)

Translucent white header (blur), graphite logo tile with gold inner ring, Lucide icon per link on the live site, gold underline on hover/active, pill CTA.

Cards, badges & chips

Local Lake Expertise

Deep knowledge of Canyon Lake neighborhoods, HOA, and waterfront life.

★ Featured Agent For Sale Sold

Status pills & badges

Gold "Featured" badge, graphite status pill, and the red "Sold" variant used on listing cards.

Top Producer 5-Star Rated Canyon Lake

Footer (rich multi-column, graphite)

Icons across the site use the Lucide SVG set (1.25em, stroke currentColor, 2px stroke, round caps).

08Visual Example — Combined Showcase

On warm surface (--surface)

Canyon Lake · CA

Find your place on the water.

Warm, local expertise from Century 21 Masters — with a live property search and genuine lake-community insight.

★ Featured Agent

Kyler Battleson

Top Producer — Canyon Lake specialist.

On graphite ground (--secondary)

Ready when you are

Let's tour your next home.

The dark CTA band pairs graphite with gold-soft accents and inverted type.

Generated as a design reference for the TK Realtors template. No tracking or external scripts — fonts loaded from Google Fonts (the same source the template uses).