See Jersey Shore Homes — Design System
The single source of truth for every New Jersey Shore and Ocean County community landing page built for Corinne Geiger. Apply these tokens, type styles, spacing rules, and component patterns consistently so all 10+ area pages stay on-brand and re-themeable from one place.
Navy & Gold Coastal Palette
All colors are stored as raw HSL channel values in src/index.css and consumed via Tailwind as hsl(var(--token)). Never hardcode hex in components — always reference a token so a site-wide re-theme edits one file.
Semantic Token Mapping
| Token | Resolves to | Purpose |
|---|---|---|
| --primary | var(--navy) | Primary actions / brand |
| --primary-foreground | var(--background) | Text on primary |
| --accent | var(--gold) | Accent / highlight |
| --accent-foreground | var(--navy) | Text on accent |
| --ring | var(--gold) | Focus rings |
| --radius | 0.5rem | Base corner radius |
Use for contrast rows (Why Buyers). White text at 75–90% opacity.
Navbar, footer base. Pair with gold accents and white/80 text.
CTAs, badges, accent bars. Navy text on gold for contrast.
Cormorant Garamond meets Inter
A distinctive editorial serif for display and stats paired with a refined sans for body and UI. Loaded via Google Fonts in index.html. Display weights 400–700; body weights 300–700.
Applied via .font-serif-display utility. Used for H1, H2, H3, stat values, pull-quotes.
Applied via .font-body utility (default on body). Used for paragraphs, labels, nav, UI.
Type Scale & Specimens
A Rhythm Built on 96px Sections
Generous vertical breathing room signals authority. Every section uses py-24 (96px) inside a 1200px max-width container. Card grids and split layouts follow a consistent gap ladder.
Spacing Scale
| Token | Pixels | Typical use |
|---|---|---|
| p-/gap-2 | 8px | Tight inline gaps |
| p-/gap-3 | 12px | Chip / badge padding |
| p-/gap-4 | 16px | Form field gaps, card inner |
| p-/gap-5 | 20px | Stat tile grid gap |
| p-/gap-6 | 24px | Card grid gap, section sub-blocks |
| p-/gap-8 | 32px | Card padding (lg) |
| p-/gap-10 | 40px | Split-layout column gap |
| p-/gap-12 | 48px | Section heading bottom margin |
| p-/gap-20 | 80px | Hero bottom padding |
| p-/gap-24 | 96px | Section vertical padding (py-24) |
Corner Radii
| Class | Radius | Use |
|---|---|---|
| rounded-lg | 8px | Inputs, form fields |
| rounded-xl | 12px | Icon tiles, small chips |
| rounded-2xl | 16px | Contact cards, school rows, captions |
| rounded-3xl | 24px | Stat tiles, feature cards, images, panels |
| rounded-full | 9999px | Buttons, badges, pills, dots |
Layout Rules
max-w-[1200px] mx-autopy-24 px-6mb-12grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5grid-cols-1 md:grid-cols-3 gap-6grid-cols-1 lg:grid-cols-2 gap-12p-6 / p-7 / p-8rounded-3xl shadow-coastalShadows, Gradients & Glow
Depth is restrained and intentional — a soft navy cast on cards and images, a gold glow only on primary CTAs. Gradients carry the brand: gold for accents, navy for dark sections.
Shadows
.shadow-coastal.shadow-gold-glowGradients
.gradient-gold.gradient-navyReusable Building Blocks
These components are the saved modules for every area page. Swap copy, stats, and images per town — never rebuild the layout. Each is token-driven so it re-themes automatically.
CTA Buttons — CTAButton.tsx
primarygradient-gold, navy text, gold glow. Primary CTA everywhere.
secondarywhite/15 glass on dark. Used in hero over photo.
ghosttransparent, navy outline. Secondary on light sections.
Base: rounded-full px-7 py-3.5 text-sm font-semibold · hover lifts -0.5 · "Schedule a time to talk with Corinne Geiger" is the global primary CTA.
Stat Tiles — StatTile.tsx
Card: rounded-3xl p-6 border border-border/60 · gold top-bar on hover · icon tile 44px in gold/12% · value in serif-display 3xl bold · delta pill.
Section Heading — SectionHeading.tsx
Where [Neighborhood] Truly Thrives
Anatomy: numbered eyebrow (gold, tracked) → serif H2 with accent-colored phrase → 16px gold underline bar → muted intro paragraph. Supports dark mode for contrast rows.
Badges, Pills & Chips
Gold badgegradient-gold, navy text, rounded-full, uppercase tracked. Market condition + credential badges.
Navy pillnavy/8% bg, navy text. Credential chips (ABR, CRS…) and neutral tags.
Icon Tiles
Solid gold (48px)gradient-gold, navy icon. Feature columns.
Tint gold (44px)gold/12% bg, gold icon. Stat tiles, contact cards.
Tint gold (36px)gold/12% bg, gold icon. Compact list rows.
Icons: lucide-react · stroke width 1.5–2 · sizes scale with tile (w-4 → w-6).
Pull Quote (dark section) with Agent Badge
"I've sold Barnegat through four decades of cycles. The bay keeps the demand steady, the schools keep the families, and the built-out map keeps the values firm."
— Corinne Geiger, 40-year Ocean County Realtor
12-Section Row Template
Every community page follows this exact section order — the saved-row structure from the Barnegat build. Duplicate the page, swap copy/stats/images, publish. Backgrounds alternate between background, secondary, and gradient-navy for rhythm.
| # | Section | Background | Key pattern |
|---|---|---|---|
| 01 | Hero | Photo + navy overlay | Full-bleed, stat chips, dual CTA |
| 02 | Market Snapshot | secondary | 4 stat tiles + 2-col cards + badge |
| 03 | Community | background | Split: school bars + photo caption |
| 04 | Healthcare | background | 2 provider cards + photo caption |
| 05 | Dining | background | 3–5 restaurant rows + quick-facts strip |
| 06 | Outdoor & Lifestyle | background | 3 feature cards + captions |
| 07 | Economic Foundation | secondary | 2 headline stats + supporting list |
| 08 | Why Buyers Choose | gradient-navy | 3 icon columns + pull quote |
| 09 | Agent Block | background | Split: photo + bio + contact cards |
| 10 | Featured Listings | secondary | 3 listing cards / IDX grid |
| 11 | Testimonials | background | 1–3 quote cards |
| 12 | Contact / Close | gradient-navy | Closing line + contact form |
Coastal, Trusted-Advisor Tone
Copy reads like a credentialed local who has sold this specific town for decades — not a national template. Confident, data-forward, warm but professional. No hype, no filler adjectives.
Do — Every claim backed by a number
“3.2 months of supply” / “$432,000 — 11 days on market.” If no verified figure, write [CONFIRM: median DOM].
Do — Locally specific detail
Reference Route 9, Island Beach State Park, the lighthouse, Mystic Shores — landmarks that can’t be pasted onto another town.
Do — Corinne Geiger’s first-person voice
“Forty years of selling here tell me…” Pull-quotes in serif italic, signed “— Corinne Geiger, 40-year Ocean County Realtor.”
Don't — No hype or filler adjectives
Avoid “amazing,” “stunning,” “vibrant.” Let the data and the local detail do the persuading.
Don't — No emojis in body copy
This is an authority/trust page. Icons (lucide) are UI, not decorative emoji in sentences.
Don't — No invented stats
Never fabricate a number. Use bracketed placeholders ([CONFIRM], [PULL LIVE VIA IHOMEFINDER], [SWAP FOR REAL TESTIMONIAL]) instead.
Build a New Area Page
When spinning up a new NJ Shore / Ocean County community page, follow this checklist to stay on-system.
Duplicate the Barnegat page as your starting template
Swap neighborhood name in H1, title tag, meta description, URL slug
Replace all [CONFIRM] stats with verified town data
Source town-specific photos (actual streets, dining rooms, trailheads) — compress before upload
Update school names/ratings, dining list, outdoor features per town
Add one local landmark or annual event in body copy
Set RealEstateAgent schema areaServed to the new town
Connect Featured Listings to iHomefinder IDX filtered by town
Swap [SWAP FOR REAL TESTIMONIAL] with verified client quotes
Verify stat grids and 3-column rows on mobile first
Keep global CTA “Schedule a time to talk with Corinne Geiger” unchanged
Add internal links to neighboring area pages once built
One system. Every shore town.
Edit tokens in src/index.css to re-theme every area page at once. Edit shared components once to update all 10+ pages.