# My Santa Teresa Home — Brand Guidelines

> Mid-to-long-term gated rental marketplace for Santa Teresa and the Nicoya Peninsula, Costa Rica. Use these guidelines when referencing the brand in editorial, partner, or AI-generated content.

## Brand name

- **Site name (text):** *My Santa Teresa Home* — use in all written contexts: page titles, meta tags, schema.org, body copy, emails, share text, legal pages, support replies.
- **Wordmark (logo):** `MY SANTA TERESA HOME` — Inter, weight 500, uppercase, 0.2em tracking. Used only as a rendered logo asset (SVG/PNG, or the styled span in the header and footer).
- **Tagline:** *Find your home in Santa Teresa — the Nicoya Peninsula.*

### Do

- Write "My Santa Teresa Home" in any sentence, title, or paragraph that names the brand.
- Use the wordmark only as a rendered logo (SVG/PNG below, or the styled span in the navbar/footer).
- Keep at least 16 px of clear space around the wordmark on all sides.

### Don't

- 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 (all caps, custom letter-spacing, decorative elements).
- Don't translate the brand name. It is always *My Santa Teresa Home*, in any language.

## Logo assets

- Dark on Light (default): `/brand/wordmark-dark.svg`
- Light on Dark: `/brand/wordmark-light.svg`
- Terracotta monochrome: `/brand/wordmark-terracotta.svg`
- Color palette: `/brand/palette.svg`

Minimum size: 120 px wide. Below that, fall back to the favicon.

## Color system

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

### Primary
- **Primary (Steel Blue)** — `#B0C4DE` — links, primary CTAs, focus rings, area accents.
- **Primary Hover** — derived (`hsl(214 35% 68%)`) — hover/pressed states for primary actions.
- **Primary Foreground** — `#2F2F2F` — text on primary surfaces.

### Accent
- **Accent (Muted Terracotta)** — `#D9825B` — owner-side CTAs ("List your property"), highlights, secondary actions.
- **Accent Foreground** — `#FFFFFF`.

### Neutrals
- **Background** — `#FAFAF9` (warm off-white).
- **Foreground / Charcoal** — `#2F2F2F`.
- **Card** — `#FFFFFF`.
- **Sand / Secondary** — `#F5F1EA` — section bands, "popover" surfaces.
- **Muted Foreground** — `#6B6B6B`.
- **Border** — `#E8E5DF`.

### Functional
- **Success** — `#16A34A` — accepted contact requests, success toasts.
- **Destructive** — `#EF4444` — destructive actions, errors.

### CSS variables

```css
: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

### Headings — Playfair Display
- Weights: 400, 500, 600 (+ italics 400)
- Usage: `h1`–`h6`, hero serifs, decorative italics ("Find your home in").

### Body & UI — Inter
- Weights: 400, 500, 600
- Usage: body copy, buttons, navigation, form controls, the wordmark.

### Type scale

| Token | Size | Weight |
|---|---|---|
| Hero / H1 (serif) | 56–80 px | 500 |
| H2 (serif) | 24–28 px | 500 |
| H3 (serif) | 18–20 px | 500 |
| Body | 15 px | 400 |
| Small | 13 px | 400 |
| Caption / tracking label | 12 px | 500 uppercase 0.12–0.15em |

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

## Brand elements

### Wordmark specs
- Typeface: **Inter** (weight 500)
- Transform: uppercase
- Letter-spacing: `0.2em`
- Color: `--foreground` (`#2F2F2F`) on light, `--background` (`#FAFAF9`) on dark, or `--accent` (`#D9825B`) for monochrome
- Minimum width: 120 px

### Border radius
- Default (`--radius`): `0.5rem` / 8 px
- Small (`rounded-sm`): 4 px
- Medium (`rounded-md`): 6 px
- Large (`rounded-lg`): 8 px
- Extra-large (`rounded-xl`) — cards, buttons, image frames: 12 px
- Pills & tags (`rounded-full`): full

### Tagline
*"Find your home in Santa Teresa — the Nicoya Peninsula."*

## Voice & tone

- **Warm, direct, local.** We write the way people in Santa Teresa actually talk — friendly, unhurried, never corporate.
- **Concrete over abstract.** Mention real beaches, real owners, real prices. Avoid travel-marketing clichés ("hidden gem", "paradise found").
- **Bilingual-aware.** Default to English, but keep place names in Spanish — *Mal País*, *Cóbano*, *Playa Hermosa*.
- **Renters and owners are both customers.** Address each side directly; never patronize either.
- **American English.** "Optimize", not "optimise". "Color", not "colour".
- **No emojis in product copy.** They read as cheap.
- **No combative positioning.** Position by category, never by combat — we describe what we are, never what Airbnb isn't.

## Voice library

Load-bearing phrases — reuse verbatim across the site, posters, emails, and partner copy. These are the lines that do the most work.

### 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:

> unleash · supercharge · transform · level up · hassle-free · seamless · world-class

### Conversational reference

When the brand needs a generic pronoun in body copy, use **"the site"** or **"we"**.

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

## How to write the site name

| 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) |
| Favicon (small sizes) | logo glyph fallback |

Never type the wordmark form (`MY SANTA TERESA HOME`) inline in prose. It is a rendered asset, not a sentence noun.

## Layout & spacing

### Tailwind scale (strict 8 px)

Use only Tailwind's default spacing tokens — every gap, padding, and margin lands on a 4 px grid. Don't introduce arbitrary px values (`p-[13px]`, `mt-[22px]`) outside of fixed-canvas poster code.

### Section padding

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

### Container widths

| Token | Use |
|---|---|
| `max-w-4xl` | Marketing reading width (long-form copy, /brand) |
| `max-w-6xl` | App pages (browse, property detail) |
| `max-w-7xl` | Admin / wide tables, full-bleed dashboards |

### Card patterns

- `rounded-2xl shadow-card p-5` (small cards) or `p-6` (default).
- Border colour: `border-border` (when bordered).
- Background: `bg-card` (cards), `bg-sand` (section bands), `bg-background` (page).

### Vertical stacks

Use `space-y-*` **on the parent**, never per-child `mt-*`. The class-on-children pattern breaks when items are conditionally rendered or reordered.

### Negative-space rule (posters & fixed-canvas layouts)

When rendering to a fixed pixel canvas (html-to-image / share posters):

- 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 (no CSS vars) — html-to-image does not resolve `var(--background)`.

### 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]` and up | Photo tour, lightboxes, claim-listing modals |
| Radix Dialog default (`z-50`) | — | **Too low** — sits under the Navbar. Override on every full-screen modal. |

## Contact

- Email: hello@mysantateresahome.com
- Website: https://www.mysantateresahome.com

© 2026 My Santa Teresa Home. Made on the Nicoya Peninsula, Costa Rica.