skills/tripcanvas-lite/references/tripcanvas-site-blueprint.md

# TripCanvas Site blueprint

Use this blueprint for every TripCanvas Lite website. It describes the minimum complete product, not optional inspiration.

## Product promise

TripCanvas is a personal travel agent that handles the organization so the travelers can enjoy the trip. The Site must answer, at a glance and in detail:

- Where are we going, and in what order?
- Where do we sleep every night?
- How much do we travel each day and in total?
- What road or connection do we take for every leg?
- What should we see, and when?
- Which reservations or constraints matter first?
- Why is this route paced this way?
- How can everyone traveling open the same live plan?

## Required Site structure

### 1. Trip overview

Show in the first viewport:

- destination-specific trip title;
- dates when known, otherwise duration;
- ordered route string;
- one excellent destination image with descriptive alt text and visible credit;
- total days;
- total route distance;
- total estimated driving or transit time;
- total nights;
- clear navigation to Route, Places, Day by day, and Distances.

Include a complete-route maps deep link.

### 2. Complete interactive route map

Show the complete route on an interactive geographic map.

- Plot real stops in route order.
- Draw road-following or transit-route geometry when supported, not decorative straight lines.
- Make every stop selectable.
- Make every route leg selectable.
- Selecting a stop reveals its location, role in the trip, short atmosphere description, day number, overnight status, and 3–5 highlights.
- Selecting a leg isolates or emphasizes it and reveals origin, destination, main road or connection, distance, and estimated time.
- Provide a visible control to restore the complete route.
- Provide keyboard labels, touch-friendly targets, useful zoom, and an accessible text alternative.

OpenStreetMap/Leaflet is appropriate for the map surface when available. A maps deep link is still required even when the embedded map works.

### 3. Destination postcards

Create a visual gallery for the meaningful stops.

- Use real, relevant photographs rather than generic regional stock imagery.
- Give every image a place name, day number, one-sentence atmosphere, alt text, and visible source credit linked to its page.
- Do not hotlink an image without retaining its credit and source page.
- Keep the gallery useful rather than exhaustive.

### 4. Day-by-day itinerary

Create one selectable tab or equivalent control per day. Every day view must show:

- day number and date when known;
- ordered route for the day;
- concise day theme;
- estimated travel time for the day;
- total distance for the day;
- that night's base;
- a chronological schedule with departures, meaningful stops, meals or rest when relevant, arrival, check-in, and evening plan;
- 1–2 contextual photographs with credits;
- a route rationale explaining why the day is paced and ordered that way.

Make active and inactive day states visually obvious. The day plan must remain legible on a phone.

### 5. Distances and travel legs

Create an interactive leg viewer plus a full leg table. Each row must contain:

- sequential leg number;
- origin and destination;
- main road, ferry, rail line, or other connection;
- distance;
- estimated duration;
- deep link that opens that exact leg in Google Maps or a suitable equivalent.

Selecting a row must update the detailed mini-map and its summary. End with total route distance and total travel time. Make clear that traffic and schedules can change.

### 6. Travel-agent notes

Close with concise practical intelligence:

- the route segment that defines or constrains the trip;
- reservations to make first;
- overall pace and the reasoning behind overnight allocation;
- relevant seasonal, border, mountain-road, ferry, accessibility, or transport cautions;
- source links and a reminder to confirm time-sensitive facts before departure.

## Data consistency contract

Maintain one canonical trip model and derive every section from it. At minimum, track:

- trip language and units;
- date range or duration;
- ordered stops;
- coordinates;
- days and overnight bases;
- route legs;
- per-leg distance and duration;
- per-day distance and duration;
- global totals;
- maps links;
- highlights and reservation flags;
- sources and image credits.

The same stop order, night allocation, distance, duration, and day assignment must appear everywhere. Recalculate totals after any change. Do not hand-copy conflicting values between views.

## Visual direction

Create a place-specific editorial travel journal, not a generic AI product page.

- Begin with a warm ivory or beige paper foundation such as `#F7F1E7` or a destination-specific equivalent. Pure white may be used for contained surfaces, but must not dominate the entire page.
- Pair the paper base with a deep ink, forest, marine, or earth tone and one restrained destination-derived accent. Let local landscape, architecture, materials, light, signage, or print culture refine this system rather than replacing it with arbitrary colors.
- Use an expressive editorial serif for journey titles and a highly legible sans serif for navigation, labels, times, and route data. Body text must remain at least 16px with generous line height.
- Use one dominant visual idea and consistent section rhythm. Favor generous photographic moments, strong hierarchy, and clean information design.
- Use color to distinguish route, stops, selected states, overnight bases, and cautions.
- Keep motion minimal and purposeful. The Site should feel calm and dependable for travelers of different ages, not like a cinematic scroll demo.
- Avoid neon AI gradients, glassmorphism, chatbot bubbles, default dashboard cards, oversized empty heroes, browser-default tables and buttons, and ornamental maps.
- Keep contrast, focus states, alt text, reduced-motion behavior, and 200% text enlargement usable.

## Visual composition contract

Do not render the entire trip as one centered white article separated by thin gray rules. Every Site must satisfy these composition requirements:

### Opening

- Use an intentional asymmetric editorial hero: strong title and route on one side, excellent destination photography on the other or behind it.
- Integrate days, nights, total distance, and total travel time into a designed summary band or folio—not four loose pieces of text.
- Keep the complete-route action prominent and visually consistent with the rest of the system.

### Section rhythm

- Alternate at least three purposeful surface treatments across the page: warm paper, a deep-color band, and a lighter contained folio or destination-accent section.
- Vary composition by information type. Do not repeat the same heading-plus-paragraph-plus-rectangle pattern for every section.
- Use generous spacing, but do not leave large empty areas that make the page feel unfinished.

### Route

- Compose the complete map with a substantial companion panel that explains the selected stop or leg, including overnight status, day, highlights, distance, and duration.
- Style map controls, selected states, and route-reset actions as part of the Site. Do not leave a naked Leaflet map followed by a row of default rectangular buttons.

### Places

- Treat destination photography as an editorial spread or varied postcard composition. Avoid three identical image cards in a plain grid when another arrangement better expresses the journey.
- Use considered crops, visible captions, day markers, and credits. Photography should shape the page silhouette, not merely illustrate text.

### Day by day

- Present each selected day inside a travel-folio composition with a clear timeline, prominent nightly base, route totals, contextual photography, and a visually distinct route rationale.
- Day selectors must look designed, be obviously interactive, and remain large enough for older travelers and touch use.

### Distances and overnight bases

- The selected driving leg must have a visual summary or mini-map in addition to the complete table.
- Style the leg table deliberately with clear hierarchy, selected state, comfortable row height, and responsive mobile behavior; never ship a browser-default data table.
- Make every overnight base visually prominent wherever the relevant day or stop appears. Use a consistent night marker, bed icon, or colored lodging panel rather than burying it in prose.

### Final polish check

Before publishing, view the complete page at desktop and phone widths. If it resembles a report exported to the web, a documentation page, or a sequence of default components, revise the composition before calling it finished.

## Final acceptance checklist

Do not call the Site complete until all answers are yes:

- Does the opening screen communicate the route and core totals immediately?
- Can a traveler see where every night is spent?
- Can they inspect every day separately?
- Can they inspect every travel leg separately?
- Do maps show geographically credible route geometry?
- Do complete-route and per-leg map links work?
- Do day totals equal the sum of their legs?
- Do global totals equal the sum of all legs?
- Are dates, days, stops, and nights internally consistent?
- Are mutable facts labeled as estimates or linked to current sources?
- Are every image and important factual source credited?
- Do all primary interactions work by mouse, keyboard, and touch?
- Is the phone layout useful during the trip?
- Does the page use a warm editorial foundation rather than a dominant blank-white document canvas?
- Do the map, day views, overnight bases, leg viewer, tables, buttons, and selected states look intentionally designed rather than browser-default?
- Does the page alternate section surfaces and compositions instead of repeating one long article layout?
- Does the final handoff correctly say that the Site is private by default and explain: open Share, choose “Anyone with this link”, then copy the link?
- Is the deployed URL the actual hosted Site rather than localhost, a preview, source code, or a file download?