DESIGN REVIEW · VERSION 01

Geoff Media
design direction.

An interactive first pass, built around the supplied hero and its original artwork.

What’s included

Homepage, Brands overview, three brand detail pages, About, and Contact. All pages adapt to narrow screens. Navigation and brand links work; the inquiry form demonstrates layout and validation without sending anything.

Preserved from your design

The original red-and-blue crest, pale illustrated hero background, three colored landscapes, character artwork, centered headline, and blue action treatment. The hero is reconstructed from the source images rather than enlarged from the small thumbnail.

Proposed additions

Open editorial layouts, numbered brand introductions, a PlaidLibs spotlight, shared-purpose section, and an illustration gallery. The gallery uses supplied art rather than invented releases, testimonials, or product screenshots.

Copy to confirm

Typography and artwork

The prototype uses local Georgia and system sans-serif fallbacks. Ringle and Poppins were referenced in the Figma data but font files were not supplied. The existing artwork is unchanged; some assets are cropped or layered to fit the design. The Hoheto Kai mark uses the supplied contemporary wordmark. Final hero positioning and typography can be matched precisely when the approved frame and fonts are available.

Launch scope

This is a design prototype, not a deployed production site. There is no backend, analytics, service worker, live form, or fabricated legal text. Before launch, confirm copy and destinations, add the real contact handling and relevant policies, and verify font licensing and final accessibility. The static files are separate from any future Worker, in line with your Cloudflare workflow.

Visual system

Geoff blue
#073C92
Crest red
#C80020
Discovery
#4B692C
Story
#9F332B
Wonder
#245C99

Accent values are provisional companions to the original artwork. Main text: #1D2632. Background: white. Shared content width: 1,180px. Main text: 17px. Display headings: Georgia. Visible focus, reduced-motion support, and stacked mobile layouts are included.

View the homepage →