Blueprint — Legal × Classic
The Legal × Classic Focused Blueprint (HZ-BP-014) serves as the canonical reference for pairing the Legal architecture with the Classic design language. It is a production-grade implementation for a fictional law firm, Marlowe & Sterling, designed to demonstrate how institutional credibility, information hierarchy, and strict content ethics resolve into a static, performant web experience.
Architecture and information hierarchy
The Legal architecture mandates that practice areas function as the site's primary axis. They are the join key connecting lawyers, matters, industries, and insights. By prioritizing this structural relationship over a traditional marketing navigation, the blueprint ensures that content is organized by capability rather than by organizational chart.
Honest demonstration over simulated functionality
The blueprint rejects common law-firm tropes like generic contact forms or fabricated client testimonials. Because the site is 100% static, all conversion paths are direct `mailto:` or `tel:` links. This constraint enforces content ethics—such as privilege and conflict rules—directly into the markup, preventing the inclusion of non-compliant marketing features.
Technical implementation and determinism
The project is fully static, utilizing Next.js App Router for deterministic rendering. To guarantee that server HTML and client hydration are byte-identical, we prohibited any reliance on runtime state like wall-clock time or locale-dependent date formatting. Dates are parsed via string-splitting, and years are hardcoded in the footer, ensuring build reproducibility across any environment.
Lessons and reusable patterns
- Content Graph: A single registry layer resolves cross-entity references at build time, preventing circular imports and ensuring data integrity.
- Design Tokens: Identity is defined in theme.css rather than component props, allowing Blueprint Base to remain neutral and reusable.
- Accessible Navigation: Desktop mega-panels and mobile drawers were built with semantic markup and focus management, avoiding dependencies on headless-UI libraries.
- Hairline Grids: A CSS-based grid pattern using `gap-px` and background colors creates 1px rules without the complexity of border-collapse arithmetic.
