BUILT TO SHOW.
READY TO HAND OFF.

A complete static marketing site, a fifteen-screen interactive product demo, and an inquiry flow. Use this package as the implementation reference for the purchased domain. The product name is WashClash; the exact domain spelling is still awaiting owner confirmation.

What’s included

The intended visitor flow

1. Home → see the product: the hero leads with a functioning operator broadcast. Sparkle / Apex switches identity; scene controls change the view; broadcast and ticker playback are independent.
2. Home → understand the value: performance, office placement, direct team communications, daily program, white-label branding, and standalone / platform choices build the story in that order.
3. Explore → interact: the demo room links to fifteen scene types. Full broadcast controls let visitors change screens, periods, location focus, rotation, ticker, and list scrolling. The message studio demonstrates editing, media, and schedule targeting.
4. Get info → request a conversation: every primary CTA leads to the same inquiry page. Product-choice links preselect WashClash alone or WashClash with Car Wash Insights. “Your next move starts here” remains the conversion page.
5. Submit → confirmation: validate, show sending, confirm only a successful Formspree response, and offer a return to the demo. On failure, keep the input and offer retry. No account or checkout is required.

Coaching and media

Use designed text as the dependable baseline. Add 1920×1080 JPG/PNG/WebP artwork and occasional 15–30 second muted MP4 clips with burned-in captions. WebM is supported in this preview; production playback should normalize to MP4/H.264 plus an image fallback. Native HTML messages preserve sharp text and operator branding. Avoid critical instructions that depend on sound.

Five ready-to-use message formats cover retention, conversion, labor alignment, recognition, and promotion preparation. The new rotation weaves those messages between performance views, monthly car/revenue summaries, and yesterday’s seller recap. The prototype includes local upload and targeting tests; the production engineer must connect durable storage, authorization, approval/publishing, time zones, and screen delivery.

See design/FINAL-TEMPLATE-HANDOFF.txt for the final visual inventory and design/COMMUNICATIONS-IMPLEMENTATION.txt and design/COMMUNICATIONS-CONTRACT.ts for scheduling, data, and backend requirements. Recommend 20–24 seconds per message, with targeted check-ins every two or three hours; exact timing is configurable. An expired or wrong-location segment stays out of rotation. Display acknowledgment is not proof that an employee read it.

Connect the form

1. Create the destination form in the owner’s Formspree account and configure its notification recipients. Use the public form endpoint, not an API key.
2. Set formspreeEndpoint in config.js to https://formspree.io/f/YOUR_FORM_ID. Configure domain restrictions and spam protection in Formspree as appropriate.
3. The site sends a POST using FormData and requests JSON. It shows success only after an HTTP success response. Validation and delivery failures retain the entries; the submit button disables during delivery. Delivery has a 15-second timeout.
4. When no valid endpoint is configured, the page visibly identifies itself as a preview and does not send or store personal details. A preview submission clears entered values and shows a distinct preview completion message.
5. Perform one owner-approved live delivery test after setup. Verify the actual notification destination and reply-to address before enabling public acquisition.

Reference: Formspree submission documentation ↗

Fields & routing

Required: first name, last name, email, and organization. Optional: phone, number of locations, and message. Request type selects live demo or information. Product interest selects WashClash, WashClash + Car Wash Insights, or help choosing. Hidden fields provide the request subject, website source, and a spam honeypot. No analytics or marketing subscriptions are enabled by default.

Approved brand rollout

The approved logo is applied to the website, full broadcast, message studio, program icon, favicon, marketing previews, and coaching exports. Master colors live in brand.css; customer colors remain in demo/theme.js. Use the full-color logo on marketing pages and the white logo in operator broadcasts. Keep the operator larger and more prominent.

Brand ownership

Use the WashClash master identity on the marketing website, proposals, and product navigation. Use the outlined SVG artwork from assets/brand/. The endorsed signature reads “A Car Wash Insights product”; no parent logo has been recreated or replaced. The approved WashClash palette extends the parent’s dark navy foundation, with the approved blue product accent. The data-first mark combines prominent ascending columns, a W-shaped trend arrow, and a lighter C scoreboard frame. “Built to Move You Up” is the master tagline. It relates to the parent’s chart imagery without replacing its existing logo. Operator choices are labeled only Sparkle Express and Apex Auto Spa. Apex remains a fictional branding example, disclosed in data details rather than the identity caption.

Design rules

• Marketing identity: Midnight #060C19, Broadcast Blue #1F55E7, Signal Blue #59C6FF, Ice #EDF5FF. Barlow Condensed for display type; Barlow for body text. Both font families are bundled with OFL licenses. Keep large editorial headings, broad visual sections, and compact calls to action.
• Broadcast identity: the operator dominates. The Sparkle example keeps its blue broadcast palette. WashClash is the competition layer, and Car Wash Insights is secondary. Operator configuration lives in demo/theme.js.
• Performance semantics: green means the conversion minimum is met; coral means below target; gold denotes leadership independently. The example floor is 15%. There are no invented plan quotas, letter grades, or pace goals.
• Responsive behavior: desktop uses split editorial layouts; below 760px, sections and form fields stack. The navigation becomes an accessible menu. Screenshot previews keep a 16:9 ratio. Actual broadcast demos use their existing mobile layout.
• Motion: marketing pages use restrained hover transitions. Broadcast screen rotation, seller/list scrolling, and ticker motion have separate controls. Reduced-motion preferences are respected; rotation begins paused.
• Accessibility: semantic landmarks, skip link, visible focus, labeled fields, native validation, keyboard-operable controls, alternative text, and readable status labels accompany the color system.

Demo data & limitations

The broadcast is a front-end demonstration using the existing captured Sparkle figures from October 1–5, 2026. It does not poll production systems. “Today” means the captured October 5 snapshot, not the viewer’s current day. Week starts Monday, so that captured week equals the October 5 day snapshot. The custom picker is limited to the captured date range, and some ranges do not have site totals. Rank-change animation is explicitly simulated.

Preserve the captured conversion calculation until the production data definition is confirmed: new plans ÷ (retail cars + new plans). Do not silently replace it with a different retail denominator. Individual seller rankings use plans plus re-signups and are not employee conversion rates. Yesterday has seller records but no site totals; never manufacture missing metrics.

Before production launch

1. Confirm the purchased domain spelling: WashClash.com versus the transcribed WatchClash.com. Set the canonical URL, social metadata, sitemap, redirects, TLS, and preferred www policy on the engineer’s host.
2. Replace the blank Formspree endpoint and verify live delivery. Set the recipient’s reply-to to the submitted email. Review the final contact notice and any privacy policy required for the production data handling.
3. Confirm permission for public Sparkle branding and captured figures, or replace them with approved demo data. The current owner requested these examples; avoid implying endorsements or performance guarantees.
4. Confirm production availability, pricing, supported data connections, and rollout requirements. The current copy makes no universal integration or revenue-uplift claims.
5. Keep operational demo data separate from production customer data. Implement authentication and operator boundaries in the real product. No production kiosk token is included in this package.
6. Deploy the contents of website/ in the ZIP to the chosen static host. No Node build or external font service is needed. Serve directory index files and retain the relative paths.
7. For the public production site, remove the engineer-handoff footer link, this handoff page, and the downloadable ZIP after review. Replace demo samples if the product is connected to real data.

Acceptance checks

Home and demo-room CTAs route correctly. Product choices preselect the inquiry form. Empty and malformed forms fail validation. Preview mode sends nothing. Mocked success, validation failure, server failure, network failure, and repeat submission states are checked. Verify desktop and phone layouts, all fifteen scene types, period selection, list and ticker controls, and theme switching. Current brand rollout checks are in QA-BRAND-ROLLOUT.txt. Functional results are in QA-RESULTS-v2.txt in the handoff package.

This is an engineering-ready design reference, not a claim that the new domain or Formspree account has already been configured.