Executive Summary
The Marketing × Expressive blueprint provides a production-oriented, statically rendered reference implementation for creative studios. It demonstrates how HubZero's Marketing architecture and Expressive design language compose into a cohesive website for Lumaire, a fictional 31-person marketing studio with offices in London and Lisbon.
The implementation focuses on a singular commercial journey: presenting evidence to convert visitors into project conversations. It proves that shared HubZero engineering infrastructure enables distinct visual identities, combining a robust Next.js application structure with an expressive editorial system defined by oversized serif typography, ruled layouts, and intentional surface theming.
Technical Overview
The site is built on Next.js 16.2.10 using the App Router, prioritizing static generation for performance and security. It maintains an honest static-demonstration principle: there is no backend, database, CMS, or third-party tracking. All business content, including case studies and practice details, is managed through local, typed TypeScript records.
| Category | Technology |
|---|---|
| Framework | Next.js 16.2.10 (App Router) |
| Language | TypeScript 5 (Strict Mode) |
| Styling | Tailwind CSS 4 |
| Typography | Instrument Serif, Archivo |
Engineering Decisions and Tradeoffs
The architecture separates platform infrastructure from blueprint-specific content, allowing the visual system to remain decoupled from business data. By using typed records for all content, the site generates its own metadata, sitemap entries, and JSON-LD automatically during the build process.
A key challenge was ensuring that interactive features like the Work Index remain accessible and performant. The implementation uses `:focus-within` to ensure keyboard navigation is equivalent to pointer interactions. For the expanding detail panel, CSS grid-track expansion from 0fr to 1fr is used to achieve a true zero-height state without the layout instability of `max-height` transitions.
Design System and Interaction
The visual system relies on semantic surface tokens defined in CSS custom properties rather than hardcoded colors. Components consume these tokens, allowing for dynamic transitions between 'ink', 'bone', and 'lime' surfaces without requiring separate light or dark mode implementations. This binary shape language—square structures with fully rounded controls—makes the distinction between layout elements and interactive triggers explicit.
