One doc. Read top to bottom. Global rules first (colors, fonts, shape), then each page and what it needs.
| Swatch | Hex | Where |
|---|---|---|
| Navy | #020C32 |
Main text, dark sections, header/footer |
| Orange | #FF8F00 |
Buttons, badges, accents, the stats bar |
| Orange (hover) | #E68200 |
Button hover only |
| White | #FFFFFF |
Backgrounds, cards |
| Grays | standard gray 50→900 | Secondary text, hairlines |
Never use: any gold (#C4A265, #FFD700) or the old blue (#1F3B8A). If you see those in an old file, it's dead.
Mobile and speed are top priorities. Most buyers are on a phone.
- Filters on mobile = an app-style bottom sheet, exactly like the listing page's mobile bar + sheets. Not a cramped sidebar squeezed onto a phone. Tap a "Filters" button → sheet slides up from the bottom → select → apply. (search-page-v6.html already has a mobile bottom-sheet for filters — use it as the reference.)
- Sticky bottom action bar on mobile where there's a primary action (the listing page already does [Call] [Text] [Inquire] [More]).
- Speed: lightweight everything. No heavy libraries, no bloated animations, images lazy-loaded and square-cropped, video hero must not tank load time (poster image first).
- Design every page at mobile width first, then desktop.
Internal links are real text links, and the link text IS the keyword (e.g. the link to the Freeman 37 page reads "Freeman 37"). Never bury a link in an icon-only tile or an image with no text. Link wheels, builder lists, model lists, location lists — all text. This is how we push ranking power to the pages that need it.
How the linking flows: the individual listing pages are the leaf nodes — every listing links back up to its builder, model, city, state, and category. So the hub pages don't cross-link everywhere; they only link down the tree (builder → its models, model → sibling models, location → nearby locations + models). The listings do the linking back. Keep hub link wheels tight.
Don't use builder logos. Builder names as text only. (Logos are trademarks and can imply an authorized-dealer relationship we don't have. Text also carries anchor-text juice; a logo doesn't.)
(We fill these in together, one at a time. Each page = what sections it has + what's decided.)
⭐ ONE TEMPLATE COVERS MOST OF THE SITE
The main search page, location pages, builder pages, and model pages all share ONE search-results layout.
/yachts-for-sale/shows all inventory; a location/builder/model page is that same template pre-filtered. So design one inventory template and it covers pages 2–5. The only things that change per page type: 1. the H1 2. what's in the link wheel (see each page) 3. the editorial copy below the resultsEverything else — breadcrumbs, listings grid, filters (app-style bottom sheet on mobile), editorial-below-results, empty state — is identical.
/ — 🔴 build from scratch (no existing design)Global site, not Florida-only. Every block below is also chosen to spread internal link juice to the pages that need it.
Sections, top → bottom:
1. Video hero (full-bleed background video — Rob has the video).
- H1 over video: "LHP Yacht Brokerage | Sales & Management" (Montserrat, light).
- On-page search in the hero — search by builder / location / length / price.
- Note: the "yachts for sale" keyword belongs to the main search page (/yachts-for-sale/), not the homepage. Homepage is brand-led.
2. Featured listings — "peek cards" (horizontal carousel; the next card peeks in from the edge to signal scroll). Count is the designer's call. (Which yachts get featured is handled on our side — not a design concern.)
3. Buy + Sell blocks — two link blocks → buying hub + selling hub. (Link juice to the money pages.)
4. Popular builders — grid of top builders → builder hubs. (Link juice.) Which builders: use the homepage builder list in PAGE-SPECS.md / internal-linking-map (top per category, not all).
5. Hottest locations — grid of top locations → location pages. (Link juice, same idea as featured yachts.)
6. Funnel band (recommended, confirm): "What's your yacht worth?" valuation hook and/or "Talk to a broker" contact CTA → feeds lead form.
7. Funnel content (recommended, confirm): "Guides & resources" row → buyer guide / financing / market reports.
8. Footer link block — location + category links grid (SEO).
Open question for Rob: confirm funnel band + funnel content in/out.
/yachts-for-sale-{location}/ — 🟡 skeleton existsCovers city, state, country, region — all the same URL pattern. Live example: https://lhp-yacht-sales.pages.dev/yachts-for-sale-fort-lauderdale/
/{builder}-{suffix}-for-sale/ — 🔴 build from scratche.g. /freeman-boats-for-sale/, /viking-yachts-for-sale/. Suffix ("boats" vs "yachts") is per-builder — dev looks it up; designer just leaves room for either word.
Direction: straight to the point, utilitarian, SEO-first. Not a marketing page. Model it on how YachtWorld and SI Yachts do builder pages — no hero image, no logo, get to the listings fast. - Reference examples: https://www.yachtworld.com/boats-for-sale/make-azimut/ · https://www.siyachts.com/used-azimut-yachts-for-sale_24
Sections, top → bottom: 1. Breadcrumbs + H1. No hero image. No logo (builder name as text). 2. Listings grid — this builder's current inventory (with filters). 3. Models — categorized text links. The builder's models grouped by category (e.g. center consoles / sportfish), each a plain text link where the link text is the model name. This is the builder page's link wheel — links to models only (not to locations, other builders, or comparisons). 4. Editorial below the results: broker-voice intro, "what to know before buying used [Builder]", FAQ. Small fact line (country / year founded) can sit with the intro. 5. Watch List CTA / empty state at zero listings (page stays live forever).
Decided: one template for every builder (big and small get the same treatment). No "vs competitors" section for now.
/{builder}-{model}-{suffix}-for-sale/ — 🔴 build from scratche.g. /freeman-37-boats-for-sale/. Inherits the builder's suffix. Same treatment as the builder page — straight to the point, no hero, no logo.
Sections, top → bottom: 1. Breadcrumbs + H1. No hero, no logo. 2. Listings grid — every current listing of this model. 3. Variants — where a model has variants (e.g. Freeman 37VH vs 37LR) they share this one page; show them as a comparison of what's different between the variants (tabs or a side-by-side of the differences). 4. Sibling models — text links. The model page's link wheel links only to other models from the same builder (Freeman 37 → Freeman 42, 47…). Nothing else — the listings below do the linking back to builder/location/category. 5. Editorial below the results: broker-voice intro + FAQ. 6. Optional slots — design them, they fill in only when we have the data: - Specs block (model-level: LOA, beam, draft, fuel, water) — included only for high-search models where it's worth it. - Engine options / performance — if we have the info. - What owners say (forum-sourced) — if we have the info. 7. Watch List CTA / empty state at zero listings (page stays live forever).
/yachts-for-sale/ — design exists (search-page-v6)The "yachts for sale" keyword page. Top of the inventory tree — shows ALL inventory.
prototypes/search-page-v6.html — it's already on the current design system (Montserrat, navy/orange) with the full filter rail, sort, favorites, and mobile bottom-sheet. Refine it, don't redesign from zero.All three are the ONE TEMPLATE pre-filtered. Nothing new to design beyond the H1 + link-wheel contents:
- Category pages (/center-console-boats-for-sale/, /motor-yachts-for-sale/, /sportfish-yachts-for-sale/…) — listings filtered to the category; link wheel → builders in that category (text links).
- Size pages (/40-foot-yachts-for-sale/, /40-to-50-foot-yachts-for-sale/…) — listings filtered by length; link wheel → adjacent sizes / ranges.
- Browse hubs (/search-for-yachts-by-builder/, -by-location/, -by-type/, -by-size/, -by-price/) — same template; the link wheel is the main event here (the full directory for that dimension).
- Editorial below results, empty state, breadcrumbs — all identical to the template.
https://lhp-yacht-sales.pages.dev/yachts-for-sale/archipelago-iii-sunreef-pc-60-for-sale-aaaaaaaa/ Already production-built (gallery, sidebar, mobile bottom bar, favorites). The designer may refine it if they want — it's the visual bar for the site, so any changes should raise it, not drift from it. Not a required deliverable.
/yacht-broker-{city}/ — 🔴 build from scratche.g. /yacht-broker-miami/. Top cities only. This is the "who LHP is in this market" page — a people/trust page, not an inventory page. It must not duplicate the city inventory page.
/yachts-for-sale-{city}/) for the boats.Sections, top → bottom: 1. Hero + H1 ("Yacht Broker Miami"). 2. Market intro — LHP's history and presence in this city (broker voice). 3. Brokers active in this city — each links to their bio page. Headshots: placeholders for now. 4. "See what's for sale in [City]" → link to the city inventory page. (Replaces "recent closings" — that data is hard to surface.) 5. Why work with LHP in this market. 6. Local marinas + market knowledge (broker voice). 7. Contact — a form on the page plus Call / Text / Email buttons to reach the assigned broker.
/about/team/{slug}/ — 🟡 partial existsLive example: https://lhp-yacht-sales.pages.dev/about/team/robert-fulling/
Every one of these is a conversion funnel, not a brochure. Minimal distraction, clear path to the form.
/sell-your-yacht/ — main seller funnel. A prototype exists (content/sell-your-yacht-prototype.html); designer can use it as the base or redesign — either is fine. Must link prominently to the "what's it worth" page and the value calculator./what-is-my-yacht-worth/ — the valuation calculator, two-step:
1. Step 1 — vessel info (builder, model, year, length, condition, etc.)
2. Step 2 — contact info
Same flow as the form on https://yachtbuyers.com/ — match that experience./guides/how-to-sell-a-yacht-in-florida/ — long-form article (uses the article template, §12). Links into the two funnel pages above./boat-loan-calculator/ — designer designs the calculator UI: inputs (price, down payment, term, rate) → live monthly payment. Clean, on-brand, works on mobile./yacht-financing/ — article (article template, §12) that links to the calculator.Covers buyer guides (/buying-a-yacht/{topic}/), /guides/{slug}/, and market reports (/market-report/{slug}/).
One template: H1 → optional hero image → readable single text column (~720px) → in-article links → related links / small sidebar → CTA at the end. Design it once.
The existing header is good (main nav, region/currency/units selector, mobile drawer) — keep it. But the mega menu was never finished — the designer needs to design the full mega-menu dropdowns (the browse-by builder / location / type / size / price content that lives inside them). Menu items should be text links (link juice).
No footer exists (the old prototype literally says "real footer to follow"). Designer designs it from scratch. Must include: - the location + category link block (text links — SEO) - contact info, socials, legal/licensing (Florida Chapter 326), Yacht Buyers sister-site link - navy background, white/gray text, logo as image
DESIGNER-BRIEF.md ← THIS is the brief. Start and end here.
linkwheel-component.html ← the link-wheel component, standalone (open in a browser)
design-system/
global.css ← the design tokens in code (exact colors/type/spacing)
CLAUDE-rulebook.md ← the full site rulebook — deeper detail if you need it
DESIGN-CHANGES.md ← changelog of visual decisions on the two prototypes
prototypes/
search-page-v6.html ← base for the inventory template (current design system)
listing-claude-design-v2.html← the built listing page's design
reference/ ← URL patterns, linking map, SEO templates (dev-facing; skim only)
⚠️ Old prototypes = old brand. Anything you find with Playfair headings, Inter body text, or gold (
#C4A265/#FFD700) is the dead design era. Trustglobal.cssand this brief over any old file.