---
version: alpha
name: Cantera HOA
description: Warm residential HOA identity for Cantera (Wilshire Estates) in northwest Lubbock, TX — navy monument lettering, limestone masonry, cream paper surfaces, photography-first community site.
colors:
  primary: "#1a2b4a"
  primary-deep: "#0f1a2e"
  primary-soft: "#2a3f66"
  secondary: "#c9b8a0"
  secondary-light: "#e8dfd2"
  tertiary: "#c45b2c"
  tertiary-dark: "#8b3a18"
  tertiary-light: "#d4783a"
  tertiary-bg: "#fff4eb"
  neutral: "#f8f4ed"
  neutral-warm: "#f1ebe1"
  ink: "#1a1a18"
  ink-soft: "rgba(26, 26, 24, 0.72)"
  ink-muted: "rgba(26, 26, 24, 0.52)"
  white: "#ffffff"
  green: "#2a4a3c"
  green-soft: "#3d6b56"
  gold: "#b08a55"
  blush: "#c45b7a"
  map-bg: "#e6dfd4"
typography:
  display-hero:
    fontFamily: Cormorant Garamond
    fontSize: 4.6rem
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: "-0.01em"
  h1:
    fontFamily: Cormorant Garamond
    fontSize: 3rem
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: "-0.01em"
  h2:
    fontFamily: Cormorant Garamond
    fontSize: 3rem
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: "-0.01em"
  h3:
    fontFamily: Cormorant Garamond
    fontSize: 1.45rem
    fontWeight: 600
    lineHeight: 1.25
  h3-ui:
    fontFamily: Source Sans 3
    fontSize: 1.05rem
    fontWeight: 700
    lineHeight: 1.3
  body-lg:
    fontFamily: Source Sans 3
    fontSize: 1.15rem
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Source Sans 3
    fontSize: 1.0625rem
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Source Sans 3
    fontSize: 0.95rem
    fontWeight: 500
    lineHeight: 1.5
  nav:
    fontFamily: Source Sans 3
    fontSize: 0.92rem
    fontWeight: 600
    lineHeight: 1.3
  eyebrow:
    fontFamily: Source Sans 3
    fontSize: 0.78rem
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: "0.16em"
  brand-mark:
    fontFamily: Cormorant Garamond
    fontSize: 1.65rem
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.14em"
  brand-sub:
    fontFamily: Source Sans 3
    fontSize: 0.72rem
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.16em"
  stat-value:
    fontFamily: Cormorant Garamond
    fontSize: 2.8rem
    fontWeight: 600
    lineHeight: 1
  button:
    fontFamily: Source Sans 3
    fontSize: 0.95rem
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 10px
  md: 14px
  lg: 22px
  pill: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  section: 88px
  section-mobile: 60px
  gutter: 20px
  content-max: 1120px
  nav-height: 72px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    typography: "{typography.button}"
  button-primary-hover:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.white}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-party:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.white}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-party-hover:
    backgroundColor: "#a84a22"
    textColor: "{colors.white}"
  button-light:
    backgroundColor: "{colors.white}"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 28px
  card-featured:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    rounded: "{rounded.lg}"
    padding: 28px
  badge-party:
    backgroundColor: "rgba(196, 91, 44, 0.1)"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  nav-bar:
    backgroundColor: "rgba(248, 244, 237, 0.86)"
    textColor: "{colors.ink-soft}"
    height: "{spacing.nav-height}"
  party-ribbon:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.white}"
    padding: 11px 20px
  section-dark:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.white}"
  section-cream:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.ink}"
  section-warm:
    backgroundColor: "{colors.neutral-warm}"
    textColor: "{colors.ink}"
  section-party:
    backgroundColor: "{colors.tertiary-bg}"
    textColor: "{colors.ink}"
---

> **Alias file:** `style.md` is the same design system as `DESIGN.md`.
> Agents and wget mirrors may request either path. Prefer updating both together (they should stay identical aside from this note).

# Cantera HOA — Design System & Agent Style Guide

> **For agents:** Read this file before editing `index.html` or adding pages.
> Keep visual changes consistent with tokens above and rules below.
> Source of truth for live CSS variables: `:root` in `index.html`.

## Overview

Cantera is a residential homeowners association (legal name: **Wilshire Estates Homeowners Association**, dba **Cantera**) in **northwest Lubbock, Texas**. The brand is taken from the physical entrance monument: cream limestone wall, navy serif **CANTERA** lettering, manicured green shrubs, and warm South Plains golden-hour light.

**Personality:** proud, neighborly, quiet luxury — not tech SaaS, not generic HOA clip-art.

**Surface type:** Decide / Learn community landing (marketing + resident resources). Photography leads; chrome stays restrained.

**Primary deliverable:** single-page site at `index.html` in this folder, with assets as relative siblings.

### Brand voice

- Warm and direct; second person when inviting neighbors (“pull up a chair”).
- Prefer concrete place names and facts over fluff (“Lots 1–79”, “43 Wilshire Blvd”).
- Do **not** invent amenities, fees, board names, or policies not present in source docs.
- Legal name when formal: *Wilshire Estates Homeowners Association dba Cantera*. Everyday name: **Cantera**.

---

## Project map (keep paths stable)

```
C:\Users\ianh\Documents\Cantera\
├── index.html              ← main site (self-contained CSS/JS)
├── DESIGN.md               ← this file
├── entrance.jpg            ← hero / brand monument
├── Wilshire_Street.jpg     ← streetscape
├── blvd.jpg                ← boulevard golden hour
├── Wilshire_airel.jpg      ← aerial lot map (note spelling “airel”)
├── wilshire_plat.jpg       ← large plat drawing
├── bylaws.pdf              ← Amended & Restated Bylaws
└── Wilshire Restrictions.pdf  ← CC&Rs / Declaration
```

**Hosting rule:** Keep `index.html` and assets in the **same directory** so relative URLs work. Filename with a space (`Wilshire Restrictions.pdf`) must be linked as `Wilshire%20Restrictions.pdf` or quoted carefully.

### Known community facts (do not contradict)

| Fact | Value |
|------|--------|
| Brand name | Cantera |
| Legal association | Wilshire Estates Homeowners Association |
| Location | Northwest Lubbock, Lubbock County, TX |
| Subdivision | Wilshire Estates Subdivision Unit I (Phase One) PUD |
| Lots | 1–79, Block 1 |
| Streets | Wilshire Blvd, Windsor Ct, Woodstone Ct, Amesbury Ct, Wyndam Ct |
| Management | Goodwin & Company |
| Phone | 855-289-6007 |
| Email | info@goodwintx.com |
| Mgmt address | 6306 Erskine St, Lubbock, TX 79416 |
| Resident portal | https://dwset.sites.townsq.io/ |
| Goodwin site | https://goodwin-co.com/ |
| HOA meeting (as of site build) | Mon Nov 17, 6:00 PM · location soon to be announced |

---

## Colors

Derived from the entrance monument and neighborhood photography.

| Token | Hex / value | Role |
|-------|-------------|------|
| **primary** (navy) | `#1a2b4a` | Headings, brand, primary buttons, dark text on light accents |
| **primary-deep** | `#0f1a2e` | Footer, stats bar, documents section background |
| **primary-soft** | `#2a3f66` | Hover on navy controls |
| **secondary** (limestone) | `#c9b8a0` | Accent line on eyebrows, soft brand metal/stone |
| **secondary-light** | `#e8dfd2` | Light limestone on dark sections |
| **neutral** (cream) | `#f8f4ed` | Page background |
| **neutral-warm** | `#f1ebe1` | Alternating section (gallery) |
| **ink** | `#1a1a18` | Body text (warm near-black, not pure black) |
| **ink-soft** | `rgba(26,26,24,0.72)` | Secondary body / nav links |
| **ink-muted** | `rgba(26,26,24,0.52)` | Captions, helper text |
| **tertiary** (party clay) | `#c45b2c` | Event ribbon, hoa-meeting CTAs only |
| **tertiary-bg** | `#fff4eb` | Block-party section wash |
| **gold** | `#b08a55` | Eyebrow labels on light sections |
| **green** | `#2a4a3c` | Optional landscape accent (sparingly) |
| **white** | `#ffffff` | Cards, light buttons on photography |

### Color rules

1. **Navy is the brand.** Use it for identity, hierarchy, and default CTAs.
2. **Party/clay orange is event-only.** Do not recolor the whole UI orange.
3. **No tech gradients** (indigo/violet/cyan). Hero overlays are navy-based photo scrims only.
4. **No pure black `#000`** for large text blocks; prefer `ink` / navy.
5. Section rhythm: cream → party wash → cream → navy deep → warm cream → cream → navy deep → cream → navy footer.
6. Borders are whispers: `1px solid rgba(26, 43, 74, 0.08–0.12)`.

### CSS custom properties (mirror in `:root`)

```css
:root {
  --navy: #1a2b4a;
  --navy-deep: #0f1a2e;
  --navy-soft: #2a3f66;
  --limestone: #c9b8a0;
  --limestone-light: #e8dfd2;
  --cream: #f8f4ed;
  --cream-warm: #f1ebe1;
  --ink: #1a1a18;
  --ink-soft: rgba(26, 26, 24, 0.72);
  --ink-muted: rgba(26, 26, 24, 0.52);
  --white: #ffffff;
  --green: #2a4a3c;
  --gold: #b08a55;
  --party: #c45b2c;
  --party-bg: #fff4eb;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 50px rgba(15, 26, 46, 0.12);
  --shadow-soft: 0 8px 28px rgba(15, 26, 46, 0.08);
  --max: 1120px;
  --nav-h: 72px;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
```

---

## Typography

| Role | Family | Weight | Notes |
|------|--------|--------|-------|
| Display / H1–H2 | **Cormorant Garamond** | 600 | Matches monument serif; slightly condensed tracking at large sizes |
| Brand wordmark | Cormorant Garamond | 600 | `letter-spacing: 0.14em`; all caps **CANTERA** |
| Body, UI, nav | **Source Sans 3** | 400–700 | Readable at 17px body |
| Eyebrows | Source Sans 3 | 700 | Uppercase, `0.16em` tracking, gold or limestone |

### Google Fonts link

```html
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet" />
```

### Scale (desktop → fluid)

- Hero H1: `clamp(2.8rem, 6vw, 4.6rem)`, line-height ~1.05
- Section H2: `clamp(2rem, 3.6vw, 3rem)`, line-height ~1.12
- Body: 17px / 1.55
- Lede: ~1.15rem, `ink-soft`, max-width ~38rem
- Use `text-wrap: balance` on headings; `pretty` on long ledes where supported

### Do not

- Default to Inter / Roboto as primary brand type
- Use monospace except for code snippets (none expected on HOA site)
- Center long body paragraphs (center only hero headlines and ribbon)

---

## Layout

- **Max content width:** `1120px` (`.wrap`)
- **Horizontal padding:** `min(100% - 2.5rem, 1120px)` → ~20px gutters mobile (`1.5rem` under 560px)
- **Section padding:** ~5.5rem desktop, ~3.75rem mobile
- **Nav height:** 72px sticky; sits under the party ribbon
- **Grid patterns in use:**
  - Party: `1.15fr / 0.85fr`
  - About: `1.05fr / 0.95fr`
  - Map: `0.9fr / 1.1fr`
  - Gallery: asymmetric `1.4fr / 1fr` with tall + two wide cards
  - Stats: 4 columns → 2 on small screens
  - Docs / contact: 2 columns → 1
- **Breakpoint:** ~900px collapses multi-column layouts and reveals hamburger nav; ~560px tightens gutters

### Section order (current page)

1. Party ribbon (global)
2. Sticky nav
3. Hero (`#top`)
4. HOA meeting (`#hoa-meeting`)
5. About (`#about`)
6. Stats strip
7. Gallery (`#neighborhood`)
8. Map (`#map`)
9. Documents (`#documents`)
10. Contact (`#contact`)
11. Footer

Preserve anchor IDs when editing; external links and nav depend on them.

---

## Elevation & Depth

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat | No shadow | Page canvas, text blocks |
| Whisper border | `1px solid rgba(26,43,74,0.08–0.1)` | Cards, list rows, map frame |
| Soft card | `0 8px 28px rgba(15,26,46,0.08)` | Standard cards |
| Lift | `0 18px 50px rgba(15,26,46,0.12)` | Photos, featured map, party aside |
| Nav glass | cream @ 86% + `backdrop-filter: blur(16px) saturate(160%)` | Sticky header |
| Hero scrim | Multi-stop navy gradient over photo | Text legibility on entrance image |

Shadows are **navy-tinted**, not pure black. Avoid heavy multi-color glows and glassmorphism on content cards.

---

## Shapes

| Token | Value | Use |
|-------|-------|-----|
| sm | 10px | Icon tiles, list rows, mobile menu items |
| md | 14px | Standard cards, gallery tiles |
| lg | 22px | Featured cards, large photos, party card |
| pill | 999px | All buttons, badges, nav CTA |

Buttons are **always pills**. Cards are rounded rectangles — not super-elliptical blobs.

---

## Components

### Brand mark

```
CANTERA  (Cormorant, tracked out, navy)
HOA      (Source Sans, small caps tracking, muted)
```

### Eyebrow label

Gold text, uppercase, bold, with a short limestone horizontal rule (`::before` 22×1.5px) to the left. On dark sections, use limestone instead of gold.

### Buttons

| Variant | Class | When |
|---------|-------|------|
| Primary navy | `.btn.btn-primary` | Default durable actions |
| Party clay | `.btn.btn-party` | Event-related CTAs only |
| Secondary outline | `.btn.btn-secondary` | Secondary on light bg |
| Light | `.btn.btn-light` | On photography / dark hero |

Min height **48px** (touch). Focus: `2px solid navy` offset 3px.

### Party ribbon

Full-width clay gradient strip above nav. Always high visibility for time-sensitive community events. Link color `#fff7e8` with underline.

### Cards

White surface, whisper border, soft shadow. Featured management card uses navy gradient fill with limestone eyebrows.

### Document download row

Dark section; cards are translucent white on navy-deep. Icon tile + title + short description + `PDF ↓`. Entire card is the link.

### Photo treatment

- Real community photos only (no stock)
- Captions as gradient scrims at bottom of figures
- Hover: subtle `scale(1.04)` on gallery images (respect `prefers-reduced-motion`)
- Aerial map: `object-fit: cover`, min-height ~420px, map bg `#e6dfd4`

### Navigation

- Desktop: horizontal links + pill “HOA Meeting” CTA
- Mobile (<900px): hamburger → dropdown panel
- JS toggles `.open` on `#navMenu` and `.scrolled` on `#nav`

---

## Do's and Don'ts

### Do

- Lead with real Cantera photography
- Keep navy + cream + limestone as the core triad
- Put urgent events in the ribbon **and** a dedicated section
- Link PDFs and full-size maps in new tabs (`target="_blank" rel="noopener"`)
- Maintain relative asset paths
- Keep legal name accurate when stating association identity
- Prefer editorial serif headlines + humanist sans body
- Test mobile nav and contrast on cream **and** navy sections

### Don't

- Invent board members, dues amounts, amenities, or rules not in the PDFs
- Swap brand fonts for Inter / generic system-only stacks without reason
- Add indigo/violet SaaS gradients, glass feature grids, or icon-topper marketing sludge
- Use party orange as a general brand color
- Break the single-folder asset layout without updating all links
- Remove hoa-meeting content without user request (or archive it after the event date)
- Center every section or force equal 3-column icon feature grids as the default composition
- Add heavy animation that ignores `prefers-reduced-motion`

---

## Implementation notes for agents

### Editing workflow

1. Read this `DESIGN.md` and skim `:root` + section structure in `index.html`.
2. Prefer **surgical patches** to `index.html` over full rewrites.
3. After visual changes, open the file in a browser (or `python -m http.server` from this folder) and check hero, party, map, docs, mobile menu.
4. If tokens change, update **both** `:root` in `index.html` **and** the YAML front matter here.

### Local preview

```bash
cd "/c/Users/ianh/Documents/Cantera"
python -m http.server 8765
# open http://127.0.0.1:8765/
```

Opening `index.html` via `file://` works for images; some browsers are pickier about PDFs — HTTP server is safer for full verification.

### Adding a new page

- Match fonts, colors, nav, footer, and `.wrap` / `.section` patterns.
- Reuse class names from `index.html` rather than inventing a parallel system.
- If the site grows beyond one file, extract shared CSS to `styles.css` and keep tokens identical — update this guide’s project map.

### Event maintenance

Keep the top ribbon and `#hoa-meeting` section in sync.

When the meeting location is announced, update both places.

After the meeting date passes, either archive to “Past meetings” or replace with the next event — do not leave stale “upcoming” copy.

### Accessibility baselines

- Body text on cream and white: ink/navy (high contrast)
- White text only on navy-deep, navy, or photo scrims
- Party clay buttons: white label (large text / UI component)
- Visible focus rings on interactive controls
- Meaningful `alt` text on all photos
- `aria-label` / `aria-expanded` on mobile nav toggle

### Content sources

- Bylaws & membership mechanics → `bylaws.pdf`
- CC&Rs, lots, common facilities, easements → `Wilshire Restrictions.pdf`
- Photography → JPEGs in this folder
- Management contacts → Goodwin public listings (verify before changing)

---

## Quick copy-paste CSS snippet (new components)

```css
.example-card {
  background: var(--white);
  border: 1px solid rgba(26, 43, 74, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
}
.example-card h3 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 600;
}
.example-card p {
  color: var(--ink-soft);
}
```

---

## Change log

| Date | Note |
|------|------|
| 2026-08-05 | Initial site + DESIGN.md authored from entrance monument brand and community assets |
| 2026-08-05 | Block party replaced by HOA meeting Nov 17 6pm (location TBA); style.md alias; README agent context |