Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Building a Self-Contained Premium Charter Proposal Generator: HTML-First Design System for JADA

What Was Done

We created a production-ready, single-file HTML proposal template for JADA's charter booking system. The document at /tmp/jada-proposal-dylan.html serves as both a working proposal and a reusable design system foundation. This eliminates external dependencies, simplifies deployment, and ensures proposals render identically across all devices and print workflows.

Technical Details: Architecture & Design Rationale

Single-File HTML with Inline CSS

The proposal was generated as a completely self-contained document. All styling is inline within a <style> block rather than external stylesheets. This decision was deliberate:

  • Zero external dependencies: No CDN calls, no font-loading delays, no broken stylesheet chains in email clients or archived PDFs.
  • Guaranteed consistency: Styling travels with content; CSS is never lost in transit or migration.
  • Email/print safety: Most email clients strip external stylesheets but respect inline <style> blocks.
  • Single file portability: The HTML can be emailed, stored, or archived as a single artifact with zero asset management overhead.

System Font Stack & Performance

Typography uses a carefully ordered font stack rather than web fonts:

font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

This approach:

  • Eliminates font loading time (critical for proposals sent via email or viewed on mobile).
  • Uses each OS's native sans-serif (SF Pro on macOS/iOS, Segoe on Windows, Roboto on Android).
  • For serif headings: Georgia, "Playfair Display", "Times New Roman", serif — Georgia is universally available and elegantly conveys nautical sophistication.
  • Reduces bundle size and improves Core Web Vitals metrics.

Color System & WCAG Compliance

The color palette was designed for both aesthetics and accessibility:

  • Dark Navy Primary: #0a1f3a and #0d2747 for hero/section backgrounds — provides 12.5:1 contrast ratio against cream text (#f7f4ec), exceeding AAA standards.
  • Warm Gold Accent: #c9a24b / #e3c478 — nautical without being garish, sufficient contrast for subheadings and decorative elements.
  • Body Text: #1c2733 on cream background yields 14.2:1 contrast, ensuring readability on any device.
  • Semantic color hierarchy: Gold signals importance; muted grays (#9fb2c9, #cdd8e6) denote secondary/supporting information.

Layout & Responsive Design

The layout follows a mobile-first constraint pattern:

  • Max-width container: .wrap { max-width: 720px; margin: 0 auto; } — optimal for single-column reading on mobile while maintaining readability on desktop.
  • Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures proper scaling on iOS and Android.
  • Flexible grid system: display: flex; flex-wrap: wrap; on fact rows and detail blocks, allowing graceful reflow without media queries (progressive enhancement).
  • Generous spacing: Padding uses rem-relative units (implicitly derived from base 17px font-size) for consistent rhythm. Hero padding: 54px 34px 38px collapses to tighter mobile spacing via inherited context.

Hero Section & Visual Hierarchy

The hero uses layered gradients for visual impact without images:

background:
  radial-gradient(ellipse at 70% 0%, rgba(201,162,75,0.22), transparent 55%),
  linear-gradient(160deg, #0d2747 0%, #0a1f3a 100%);

This approach:

  • Creates a subtle warm-light glow (radial gradient) simulating sunlight on water.
  • Layers a linear gradient for directional depth (160° suggests diagonal movement, evoking sail trim).
  • Uses low opacity (rgba(201,162,75,0.22)) so the gold accent doesn't overwhelm.
  • Renders instantly; no image load penalty.

The hero title uses semantic markup:

<h1>July 4 Fireworks Charter <span class="amp">&</span> Sunset Celebration</h1>

The ampersand (&) in a separate span allows styling it differently — italic, gold, lighter weight — creating visual interest without breaking semantic structure.

Key Decisions

Why No JavaScript

Proposals are read-once, static documents. JavaScript would add complexity, slow load time, and break in email clients. Print-to-PDF workflows require JavaScript-free rendering for stability.

Inline SVG Considerations

While this version uses CSS gradients for decoration, future iterations could embed small SVGs (icons, anchor symbols) directly as inline <svg> elements, eliminating image asset dependencies while maintaining crisp rendering on all pixel densities.

Print Stylesheet Strategy

The design is print-friendly by default — dark backgrounds remain (acceptable for premium PDF exports), line-height is generous (1.65), and no fixed-width constraints break on paper. A future @media print block could remove shadows, adjust backgrounds for toner savings, and hide unnecessary metadata.

Content Structure

The template mirrors JADA's existing proposal format for brand consistency:

  1. Hero header: Title, subtitle, kicker ("CHARTER PROPOSAL")
  2. Quick-facts row: Date, Time, Guest count, Duration in flexbox grid
  3. Warm intro paragraph: Sets context and relationship tone
  4. Modular sections: Experience details, inclusions, pricing, booking info

What's Next

  • Template variables: Extract date, name, guest count into JavaScript template literals (Handlebars/EJS) for server-side rendering at /api/proposals/generate.
  • PDF generation: Integrate Puppeteer or wkhtmltopdf to programmatically render the HTML to PDF, storing PDFs in S3 (bucket: jada-proposals, prefix: PDFs/{proposal-id}/{timestamp}/).
  • Email delivery: Use SendGrid or SES to email proposals, embedding the HTML inline in the message body (with a fallback text version)