# Branding and Assets Plan — Rowan Knots

This document details all visual assets required for the Rowan Knots website, as planned during Step 2a.

## Vector Assets (SVG)

These assets are flat, geometric, or typographic and will be rendered as SVG files.

| Filename | Purpose | Used on | Notes |
| :--- | :--- | :--- | :--- |
| `assets/logo.svg` | Brand wordmark and logo mark | All pages (Header/Footer) | Minimalist geometric knot mark combined with clean sans-serif typography. No rope-font. |
| `assets/favicon.svg` | Browser tab icon (32x32 size) | All pages (HTML head) | Simplified heavy geometric knot shape from the logo mark. Remains readable at small sizes. |
| `assets/icon-sailing.svg` | Represent sailing workshops/services | Services, Workshops | Clean silhouette of a sailboat keel and hull. No anchors. |
| `assets/icon-climbing.svg` | Represent climbing workshops/services | Services, Workshops | Simplified silhouette of a carabiner or mountain peak. |
| `assets/icon-video.svg` | Represent online classes / video coaching | Home, Services, FAQ, Workshops | Clean video camera icon. |
| `assets/icon-workshop.svg` | Represent group workshops | Home, Services, Workshops | Clean icon depicting a group of people or hands joining. |
| `assets/icon-pricing.svg` | Represent pricing details | Pricing | Clean price tag or coin icon. |
| `assets/icon-calendar.svg` | Represent schedule and dates | Workshops | Calendar grid icon. |
| `assets/icon-check.svg` | Indicate checklist / benefits | Services, Blog, FAQ | A clean, sharp checkmark. |
| `assets/icon-arrow-up.svg` | Back-to-top button icon | All pages | Simple upward-pointing arrow chevron. |
| `assets/icon-sun.svg` | Light theme toggle icon | All pages (Header) | Minimalist sun icon with clean rays. |
| `assets/icon-moon.svg` | Dark theme toggle icon | All pages (Header) | Minimalist crescent moon icon. |
| `assets/icon-email.svg` | Direct link to public email | Contact, Footer | Closed envelope icon. |
| `assets/icon-whatsapp.svg` | Direct link to WhatsApp | Contact, Footer | Official WhatsApp chat bubble silhouette. |
| `assets/icon-youtube.svg` | Social link to YouTube channel | Contact, Footer | YouTube play button silhouette. |
| `assets/icon-tiktok.svg` | Social link to TikTok channel | Contact, Footer | TikTok "d" music note silhouette. |
| `assets/icon-instagram.svg` | Social link to Instagram profile | Contact, Footer | Square camera outline with central circle. |

## Photographic Assets (JPG)

These assets depict real people, places, and physical rope work.

> **Current status.** Five of these are final JPG photographs: `hero-home`, `frustrated-climber`,
> `instructor-demonstrating`, `sam-portrait`, and `knot-inspection`. The remaining entries are
> currently **on-brand SVG mock illustrations** (same filename, `.svg` extension) standing in until
> photography is shot. They use the palette below so pages read as finished rather than showing
> empty placeholder boxes. To swap in a real photo, drop the JPG into `assets/` and change the
> single `src` on the page — the surrounding markup already expects a normal `<img>`.

| Filename | What it shows | Dimensions | Used on | Alt text |
| :--- | :--- | :--- | :--- | :--- |
| `assets/hero-home.jpg` | Hands methodically wrapping dark blue marine rope around a wooden deck cleat. Clean, soft focus background. | 1200×600 | Home (Hero) | Hands wrapping a blue marine rope around a wooden cleat on a boat deck. |
| `assets/frustrated-climber.jpg` | Climber looking at a rope in their hands on an outdoor rock ledge, with a smartphone balanced on their knee showing a diagram. | 800×600 | Home (The Problem) | A climber examining their rope on a rock face. |
| `assets/instructor-demonstrating.jpg` | Hands holding green climbing rope demonstrating a figure-eight on a bight knot, with a student's hands mirroring it in the background. | 800×600 | Home (How We Teach) | Instructor demonstrating a figure-eight knot to a student using green climbing rope. |
| `assets/sam-portrait.jpg` | Calm portrait of Sam in a dark jacket standing outdoors, holding a coil of hemp rope over one shoulder. | 600×800 | About (Meet Sam) | Sam, the knot tying instructor, holding a coil of rope. |
| `assets/knot-inspection.jpg` | Close-up of a perfectly dressed clove hitch tied around a silver metal ring, showing neat parallel lines. | 800×600 | About (Our Philosophy) | A close-up of a neatly tied clove hitch knot on a metal ring. |
| `assets/bristol-harbour.jpg` | Quiet view of water at Bristol Harbour during a calm morning, with distant boat masts visible. | 1200×600 | About (Location) | A calm morning at Bristol Harbour. |
| `assets/video-coaching-setup.jpg` | Laptop screen showing a live video call demonstrating a knot, with a piece of red rope on the desk in front of it. | 800×600 | Services (Coaching) | A laptop showing a live online knot tying coaching session. |
| `assets/group-workshop.jpg` | Four people around a wooden worktable practicing knots with orange ropes, smiling and assisting one another. | 800×600 | Services (Workshops) | Participants practicing knot tying together at an in-person workshop. |
| `assets/rope-selection.jpg` | Coils of ropes of different thicknesses and materials (nylon, polyester, hemp) hanging side by side on a wooden wall. | 800×600 | Pricing (Packages) | Various types of marine and climbing ropes hanging on a wall. |
| `assets/overhead-camera-setup.jpg` | Top-down view of a wooden table where hands are tying an alpine butterfly, with an overhead camera on a stand pointing down. | 800×600 | FAQ (Online Setup) | Hands tying an alpine butterfly knot under an overhead camera. |
| `assets/sailing-knots.jpg` | Close-up of a bowline knot tied in white marine rope, securing a line to a silver metal dock ring on a sunny day. | 800×600 | Workshops (Sailing) | A bowline knot tied around a metal dock ring. |
| `assets/climbing-knots.jpg` | Close-up of a figure-eight follow-through knot tied into a colorful climbing harness with dynamic green rope. | 800×600 | Workshops (Climbing) | A figure-eight follow-through knot tied into a climbing harness. |
| `assets/science-friction.jpg` | Close-up of two different colored ropes (red and yellow) joined by a sheet bend knot, under moderate tension. | 800×600 | Workshops (Science) | Red and yellow ropes joined together by a sheet bend knot under tension. |
| `assets/nylon-polyester-comparison.jpg` | Two hanks of rope resting on slate: one white double-braid polyester, one blue twisted three-strand nylon. | 800×600 | Blog (Nylon vs Poly) | A comparison layout showing white polyester rope and blue nylon rope side by side. |
| `assets/washing-rope.jpg` | Tub of water where clean green climbing rope is being rinsed by hand, with visible water droplets. | 800×600 | Blog (Maintenance) | Rinsing a green climbing rope by hand in a tub of clean water. |
| `assets/social-share.jpg` | Social media sharing card showing clean coils of rope with the text "Rowan Knots - Practical Knot Tying Lessons" overlay. | 1200×630 | SEO Metadata | Coils of rope with Rowan Knots brand details. |

---

## Design Direction

### Visual Mood
The design is clean, technical, and precise. It draws inspiration from marine and alpine equipment guides (like Patagonia or Arc'teryx) rather than kitsch seaside gift shops. Layouts are spacious with thin borders, crisp geometry, and high-contrast typography. No anchors, ropes in fonts, or distressed nautical textures are permitted.

### Typography
- **Headings Font:** 'Outfit', sans-serif (via Google Fonts). Clean, geometric, and modern.
- **Body Font:** 'Inter', sans-serif (via Google Fonts). High readability, neutral structure.
- **Font Scale:**
  - `h1`: 2.5rem (40px) / Line height: 1.2
  - `h2`: 1.875rem (30px) / Line height: 1.3
  - `h3`: 1.25rem (20px) / Line height: 1.4
  - `body`: 1rem (16px) / Line height: 1.6
  - `caption`/`small`: 0.875rem (14px) / Line height: 1.5

### Palette
* **Primary (Headings, Links, Key Accents):** `#3F6C7E` (a Slate-Blue tone that represents slate stone and deep cold waters)
* **Background Light:** `#F7F9FA` (a very soft off-white/light gray with cool slate undertones for a clean canvas)
* **Background Dark:** `#182226` (a deep slate-gray, matching the primary tone's shadow for dark mode)
* **Text Light Mode:** `#2C3A3F` (dark charcoal-slate for high contrast and readability on light background)
* **Text Dark Mode:** `#E2E8F0` (soft light slate-gray for easy reading on dark background)
* **Border Color (Light):** `#D9E2E5` (thin, crisp boundary lines in light mode)
* **Border Color (Dark):** `#2A3A40` (thin, crisp boundary lines in dark mode)
* **Accent Warm (Focus states / highlights):** `#D4AF37` (a warm brass/gold color, used sparingly like brass hardware)