Overview
HubZero Focused Blueprint — Automotive / Bold is a production-ready reference implementation demonstrating how the Automotive information architecture expresses itself through the Bold design language. It uses Veltrix Automotive, a fictional direct-to-consumer electric-vehicle manufacturer, to model the end-to-end customer journey from vehicle discovery to ownership.
What the blueprint demonstrates
This blueprint solves recurring automotive engineering challenges, including consistent specification management, responsive art direction for rich imagery, and the representation of complex vehicle comparison state without requiring backend persistence. It provides a static-first, content-driven architecture featuring small, focused client-side interaction islands.
Application architecture
The implementation uses Next.js 16.2.10 and React 19.2.4. Pages default to server components, reserving client components strictly for interactive elements like the RangeExplorer, vehicle comparison tray, and financing estimator. There is no backend, database, or CMS; all domain content is managed via typed records within the repository.
Information architecture and routes
Routing is centralized in a single configuration file to ensure consistency across navigation, breadcrumbs, and sitemap generation. The 25 canonical content URLs cover the full product lifecycle, from high-level brand discovery at the root to specific service and financing routes.
Data and content architecture
Domain content is stored in typed modules under `src/content/`. Vehicle metrics are stored as raw numbers to facilitate accurate calculations for range sorting, budget filtering, and financing estimations, with display strings derived via formatting utilities. This ensures that a single source of truth powers cards, detail pages, and comparison tools.
Design system and Bold visual language
The Bold language is dark-only, utilizing a single ignition-orange accent for focus and important boundaries. Geometry is strictly engineered with square corners and decisive borders. Typography relies on Archivo for headings and Inter for body text, scaled using fluid `clamp()` functions to maintain hierarchy across device widths.
Automotive product experiences
Vehicle detail pages are statically generated for six models. Each page integrates core metrics, narrative content, and interactive galleries. The technology route explains the shared VLX-800 platform, using engineering-specific imagery and consistent platform figures.
Vehicle comparison architecture
Comparison is a signature in-memory interaction. Users can select up to three vehicles, with state persisting across navigation via a dedicated `CompareProvider`. The comparison rail is wrapped in a layout containment boundary to prevent document-level overflow on mobile, ensuring a stable user experience during side-by-side specification review.
Key engineering decisions and tradeoffs
- Removal of root loading.tsx: Prevents client-side shells from replacing initial content during delivery, ensuring better accessibility and SEO.
- Static-first rendering: All pages are prerendered with no remote data fetching during rendering, prioritizing speed and reliability.
- In-memory state management: Chosen to provide comparison functionality without the complexity or false promise of a persistent user backend.
- Single-accent design: Deliberately limits color usage to ignition-orange to focus user attention on product and data rather than decorative elements.
Limitations and lessons learned
This blueprint is a demonstration. It does not include backend capabilities such as ordering, live inventory, or financing applications. The financing estimator is an honest demonstration of formula-based calculation, not a functional financial tool. Future iterations should consider how to bridge the gap between static content and live services if backend integration becomes a requirement.
