Brand Assets

Download logos, color palettes, typography specs, and brand guidelines for press, partner, and editorial use of My Santa Teresa Home.

Logo

Wordmark vs. site name — use the right one in the right place.

Wordmark (Logo)

My Santa Teresa Home

Inter Medium, uppercase, 0.2em tracking. Used as the visual logo only — header, footer, favicon, social cover, app icons.

Site Name (Text)

My Santa Teresa Home

Used in all written contexts: page titles, meta tags, schema.org, body copy, emails, share text, legal pages, support replies.

Do: Use the wordmark only as a rendered logo asset (SVG/PNG below or the styled span in the navbar/footer).
Do: Write "My Santa Teresa Home" in any sentence, title, or paragraph that names the brand.
Don't: Type "MY SANTA TERESA HOME" inline as a brand name in body copy or page titles — it's a wordmark, not a sentence noun.
Don't: Recreate the wordmark in any typeface other than Inter Medium with 0.2em tracking.
Don't: Stylize "My Santa Teresa Home" as a logo (decorative letter-spacing, custom dots, all caps in prose).
Don't: Translate the brand name. It is always My Santa Teresa Home, in any language.

My Santa Teresa Home

Dark on Light (Default)

SVG · 1600×200

My Santa Teresa Home

Light on Dark

SVG · 1600×200

My Santa Teresa Home

Terracotta Monochrome

SVG · 1600×200

Color System

All colors are stored as HSL CSS custom properties in src/index.css and exposed via Tailwind tokens.

Primary

Accent

Neutrals

Functional

CSS Variables

:root {
  --background: 60 10% 98%;
  --foreground: 0 0% 18%;
  --card: 0 0% 100%;
  --primary: 214 41% 78%;
  --primary-foreground: 0 0% 18%;
  --primary-hover: 214 35% 68%;
  --secondary: 37 33% 93%;
  --accent: 19 60% 60%;
  --accent-foreground: 0 0% 100%;
  --muted: 40 12% 95%;
  --muted-foreground: 0 0% 42%;
  --success: 142 71% 38%;
  --destructive: 0 84% 60%;
  --border: 40 10% 91%;
  --radius: 0.5rem;
}

Typography

Two typefaces, both loaded via Google Fonts and preloaded for the landing page.

Headings

Playfair Display

Weights: 400, 500, 600 (+ italics 400)

Usage: h1, h2, h3, h4, decorative italics

Body & UI

Inter

Weights: 400, 500, 600

Usage: body text, UI elements, the wordmark

Type Scale

Heading 1Playfair 56–80 / 500

Heading 2Playfair 24–28 / 500

Heading 3Playfair 18–20 / 500

Body — 15 px Inter RegularInter 15 / 400

Small — 13 px Inter RegularInter 13 / 400

Caption — 12 px trackedInter 12 / 500 / 0.12em

Font CSS

:root {
  --font-serif: 'Playfair Display Variable', Georgia, serif;
  --font-sans: 'Inter Variable', 'Inter Fallback', system-ui, sans-serif;
}

Brand Elements

Wordmark Specs

Typeface: Inter (weight 500)
Transform: uppercase
Letter-spacing: 0.2em
Color: foreground on light, background on dark, accent for monochrome
Minimum width: 120 px
Clear space: at least 16 px on all sides

Border Radius

Default (--radius): 0.5rem / 8 px
Small (rounded-sm): 4 px
Medium (rounded-md): 6 px
Large (rounded-lg): 8 px
Cards & buttons (rounded-xl): 12 px
Pills & tags (rounded-full): full

Voice & Tone

Warm, direct, local. Write the way people in Santa Teresa actually talk — friendly, unhurried, never corporate.
Concrete over abstract. Real beaches, real owners, real prices. Avoid clichés ("hidden gem", "paradise found").
Bilingual-aware. Default English, but keep place names in Spanish — Mal País, Cóbano, Playa Hermosa.
Both sides are customers. Address renters and owners directly; never patronize either.

Tagline

Find your home in Santa Teresa — the Nicoya Peninsula.

Voice Library

Load-bearing phrases. Reuse verbatim across the site, posters, emails, and partner copy.

Canonical wedge

Built for 1–12 month stays — the renters Airbnb and Booking don't optimize for.

Short form

Mid-term, not nightly.

Owner outcome ladder

1 to 12 month tenants — fewer turnovers, longer rents, less churn.

Reusable phrases

Use	Don't use
List once, stop repeating yourself	Easy to manage
Skip the repeats	Save time
Pre-qualified renters	Quality leads
Your number stays private	Gated contact
No tire-kickers	Filtered inquiries
Fresh on My Santa Teresa Home:	New listings:
Take a look	Click here / Learn more

Banned words

These trigger SaaS-speak alarms — avoid completely.

unleashsuperchargetransformlevel uphassle-freeseamlessworld-class

Conversational reference

When the brand needs a generic pronoun in body copy.

Use	Don't use
the site	the platform
we	this app
(drop the article)	the marketplace

How to write the site name

Pick the right form for the surface. The wordmark is a rendered asset, never an inline noun.

Context	Use
Page titles, meta tags	My Santa Teresa Home
Body copy, paragraphs	My Santa Teresa Home
Schema.org name field	My Santa Teresa Home
Emails, support replies	My Santa Teresa Home
Legal pages	My Santa Teresa Home
Share caption opener	Fresh on My Santa Teresa Home:
Header / footer logo	wordmark only (rendered)
Social cover, app icon	wordmark only (rendered)

Layout & Spacing

Strict 8 px Tailwind scale. Don't introduce arbitrary px values outside fixed-canvas poster code.

Section padding

py-10 sm:py-14Marketing sections (landing, /about, /brand)
py-8 sm:py-12App sections (browse, dashboard, detail pages)

Container widths

max-w-4xlMarketing reading width — long-form copy, /brand
max-w-6xlApp pages — browse, property detail
max-w-7xlAdmin / wide tables, full-bleed dashboards

Cards

rounded-card shadow-soft p-5(small) or p-6(default)
bg-cardon bg-sandsection bands

Vertical stacks

Use space-y-* on the parent, never per-child mt-*. Class-on-children breaks when items are conditional or reordered.

Negative-space rule (posters)

For fixed-canvas layouts rendered via html-to-image:

Use explicit marginTop between sections — never justifyContent: space-between for tall content. Flex gaps collapse to zero when content overflows.
Minimum 80 px between major blocks at native dimensions.
Hex literals only — html-to-image doesn't resolve CSS vars.

Z-index map

Layer	Token	Why
Default content	`z-0 – z-10`	Stacking inside a section
Navbar	`z-[60]`	Always over page content
Mobile nav drawer	`z-[70]`	Sits above the Navbar when open
Full-screen modals	`z-[80]+`	Photo tour, lightboxes, claim-listing modals
Radix Dialog default	`z-50`	Too low — sits under the Navbar. Override on every full-screen modal.