The Keyboard Board
From Empty Prototype
to Functional Product Site

The Keyboard Board exists in two forms in this portfolio. The original student build — submitted as a class project — was a static HTML site with a visually appealing design, no functional cart, a contact form that posted to `#` and did nothing, a product page where "Add to Cart" buttons were decorative, and `shop.html` as a completely empty file. The design was good. The execution was a prototype in the truest sense: it looked like a product website without functioning like one.

The rebuilt version took that design and brought it to the standard expected of a launch-ready product concept site. The cart works. The form is wired. The Add to Cart buttons do something. The empty shop page was rescued. The security headers are correct. The sitemap is accurate. The OG images are absolute URLs. The fallback handles private browsing. The contact form pipeline carries a live order summary from the cart into the inquiry form.

Both the design direction and the product concept — a refined wood cover that turns a keyboard into usable surface space — were preserved completely. The rebuild was about making the site function as well as it looked.

Most musicians with keyboards in their home or apartment face the same constraint: the keyboard occupies a significant horizontal footprint and becomes dead surface the moment you're not playing it. You can't put a laptop there, you can't use it as a desk without risking damage, and it just sits there taking up prime room real estate while contributing nothing.

The Keyboard Board reframes the instrument as a surface opportunity. A fitted wood cover rests across the top chassis of the keyboard — not on the keys, but on the raised body surrounding them — creating a clean, stable tabletop. You use it for notes, a laptop, a coffee, cables, the small necessities of a working session. When it's time to play, you lift it off. The keyboard goes back to being a keyboard.

The concept is honest about what it is: a student-designed product idea that has not been through final engineering, weight-rating validation, or manufacturing. Every page acknowledges that. The announcement bar across the top of every page reads "Student product concept and functional web prototype" in the footer. Prices are presented as design decisions, not confirmed retail figures. That honesty is part of the design, not a disclaimer bolted on at the end.

The design system is built around a tight eight-token palette that earns its coherence because every color connects to the material identity of the product. There's no arbitrary accent color — every choice can be traced back to wood, warmth, espresso, cream, and gold.

The typography pairing is Playfair Display — a high-contrast serif with classical proportions — for all headings, and Space Grotesk — a geometric sans with a slightly crafted quality — for body and UI text. Both are self-hosted as woff2 files with `font-display: swap`. The combination reads as premium without tipping into stuffiness. It fits a product that wants to sit in a bedroom or studio and feel like it belongs to the room rather than sitting in a tech startup landing page.

The CSS is 949 lines covering the full design system from tokens through components, with two mobile breakpoints (780px and 480px) and a `prefers-reduced-motion` block that disables hero fade animations and button transitions for users who've requested reduced motion at the OS level.

The most significant difference between the original build and the final build is the cart. In the original, "Add to Cart" buttons were `<button>` elements with no event listeners, no state, and no connection to anything. The cart page showed two hardcoded items — Walnut and Redwood — that appeared regardless of what the user had clicked. The checkout button was `type="button"` and did nothing.

The final build replaces all of that with a real client-side cart system built on `localStorage`, a product catalog object, and a pipeline that carries the order summary from the cart into the contact form inquiry. Here's what it does:

Prices are graduated by character intensity — neutral woods at the entry end, statement finishes at the premium end. The logic is defensible and feels like a considered pricing strategy rather than random numbers. Each card's CTA is "Add to Cart," which is now meaningful — clicking it actually adds the item to a persistent cart that follows the user across pages.

Every page footer reads "Student product concept and functional web prototype." The contact page notes "This is a student concept site, but the form is wired for Netlify deployment." The cart summary panel says "This student concept uses an inquiry checkout instead of live payment processing." None of this is buried in small print — it's integrated into the UI as honest framing.

What changed from the original prototype framing is that the site now earns that honesty by being actually functional in every dimension that doesn't require a real product to exist. The cart works. The form sends. The contact flow captures the order. The only thing missing is a real keyboard cover being manufactured and shipped — and the site is very clear about that.

The original build demonstrated taste. The final build demonstrates competence. Both matter — taste without execution produces beautiful things that don't work, and execution without taste produces things that work but nobody wants to use. The Keyboard Board's final state has both: a design system rooted in material warmth and classical restraint, and a technical layer that makes every interaction actually do what it appears to do.

The progression from original to final is also a useful case study in what "launch readiness" means for a product concept site. It doesn't mean having a real product. It means having a real cart system, a real form pipeline, real security headers, real accessibility, real metadata, and honest communication about what's prototype and what would be production. This site has all of those things.