Style Guide · Luxury

California Luxury — Alta Mar

Sun-washed coastal editorial built on arched imagery, a town marquee, and pill-soft warmth. Warm West Coast brokerage brand.

Luxury Warm · High-end · Inviting Modern West Coast
c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Luxury Templates\California Luxury\style-guide.html

2 Color Palette

Warm sand + white dominate; deep teal for dark bands; gold as the accent. Values are the template's real --color-* tokens.

Primary
--color-primary
#2A3D45
rgb(42, 61, 69)
--color-primary-hover
#223239
rgb(34, 50, 57)
--color-primary-soft
#3C535D
rgb(60, 83, 93)
Secondary (Gold)
--color-secondary
#C9A86A
rgb(201, 168, 106)
--color-secondary-hover
#B8945A
rgb(184, 148, 90)
--color-secondary-active
#A5834E
rgb(165, 131, 78)
Accent (Sand)
--color-accent
#F3EBDD
rgb(243, 235, 221)
--color-accent-deep
#EADFC9
rgb(234, 223, 201)
Background & Surface
--color-background
#FFFFFF
rgb(255, 255, 255)
--color-surface
#F7F5F2
rgb(247, 245, 242)
--color-border
#E8E2D6
rgb(232, 226, 214)
Text
--color-text
#2C2C2C
rgb(44, 44, 44)
--color-muted
#707070
rgb(112, 112, 112)
--color-on-dark
#F7F5F2
rgb(247, 245, 242)
Feedback
--color-success
#4A7C59
rgb(74, 124, 89)
--color-error
#B0413E
rgb(176, 65, 62)
Signature — Sun-glow gradient
--gradient-sun: radial-gradient(circle at 50% 50%, rgba(201,168,106,0.28) 0%, rgba(243,235,221,0) 65%)

3 Typography

Display set in DM Serif Display (weight 400 + italic accents); body in Plus Jakarta Sans (400 / 500 / 600 / 700). Headings use the fluid clamp() scale below.

Display font
Aa Bb Cc
DM Serif Display italic
Georgia, serif fallback · weight 400 + italic
Body font
Aa Bb Cc
Plus Jakarta Sans
Weights 400 · 500 · 600 · 700
.text-display · clamp(2.875rem → 5.75rem)
Live where the light is golden
h1 · clamp(2.5rem → 4.25rem)
Coastal estates, warmly done
h2 · clamp(1.875rem → 2.875rem)
The coast is calling
h3 · clamp(1.375rem → 1.875rem)
Malibu to Carmel
h4 · clamp(1.125rem → 1.375rem)
Founded on hello
.text-lead · body-lg
A lede paragraph in Plus Jakarta Sans — approachable, human, first-person-plural. Let's start with hello.
body · 1rem / 1.75
Body copy in Plus Jakarta Sans. Warm, modern West Coast brokerage serving the California coast from golden-hour villas to sun-washed bluffs.
.text-caption · 0.875rem
Caption / small text used for specs, notes, and secondary labels.
.eyebrow · label 0.75rem · letter-spacing 0.22em uppercase
Featured Listings

4 Spacing System

Container, section rhythm, radius scale, and easing — all from the template's tokens.

--container-max78rem
--container-padclamp(1.25rem, 4vw, 2.5rem)
--section-paddingclamp(4.5rem, 3rem + 6vw, 8.5rem)
spacing scale0.25 · 0.5 · 0.75 · 1 · 1.5 · 2 · 3 · 4 · 5 · 6 rem
--shadow-sm0 2px 8px rgba(42,61,69,.06)
--shadow-md0 14px 40px -16px rgba(42,61,69,.18)
--shadow-lg0 30px 70px -24px rgba(42,61,69,.28)
--ease-outcubic-bezier(0.22, 1, 0.36, 1)
durationsfast 200ms · med 450ms · slow 900ms

Border-radius scale

--radius-md · 1rem
(inputs)
--radius-lg · 1.5rem
(cards)
--radius-pill · 999px
(buttons)
--radius-arch
12rem 12rem 0 0

5 Buttons

Fully pill-shaped, weight 700, letter-spacing 0.04em. Hover lifts 2px with a soft shadow; active settles back flat. Hover the samples to see the real states.

Primary teal → hover #223239. Gold → hover #B8945A, active #A5834E. Outline inverts to solid teal on hover; outline-light (on dark) shifts border/text to gold. All buttons: translateY(-2px) + --shadow-md on hover.

6 Form Elements

Uppercase tracked labels; 1.5px sand borders with --radius-md. Focus turns the border gold with a soft 4px gold glow. Try focusing a field.

Thank you — we'll be in touch shortly. (success message style)

7 UI Components

Signature components: sticky blurred nav with arched brand-mark, overlay-price property card, arch-topped service icon tiles, pill badges, and the sun-glow footer. Icons are inline stroked SVG (1.5–2px, rounded).

Navigation bar

Property card & badges

For Sale $4,950,000

Cliffside Villa

Malibu, CA
4 Beds 5 Baths
For Sale New $4,950,000 Featured

Curated Marketing

Editorial photography, story-driven listings, and a coast-wide network — presented with warmth.

Footer (sun-glow)

Alta MarCoastal Estates

Warm, modern West Coast brokerage serving Malibu to Carmel.

Explore

Company

Visit

8 Visual Examples

A combined showcase on the template's warm surface ground with the signature sun-glow.

Malibu · Coastal Estates

Live where the light is golden

From sun-washed bluffs to arch-framed villas, we help you find the coast that feels like home. Let's start with hello.

For Sale $6,200,000

Montecito Retreat

Montecito, CA
5 Beds6 Baths0.8 ac

Generated as a design reference for the California Luxury (Alta Mar) template · values mirror styles.css & DESIGN.md · no tracking or external scripts.