JD Glass DeskBuild guide

Guide route

How the Glass Desk variation was made.

This route documents the material system, proof labels, motion model, form behavior, and critique loop for variation 03.

Material labels

Frosted

Real work, verified clients, audit material, and links. High trust, high scrutiny.

Matte

Concept states, fiction, synthetic data, or unsolved ideas. Honest by finish.

Built demo

Working interfaces that are true to behavior but not yet client-signed evidence.

Motion model

Cards use a lightweight perspective tilt on hover. It is a drag cue, not noise. Reduced-motion disables all transforms and hides the gradient surface so the page reads as a clean material still.

Static form

The contact form validates name, email, message, and consent entirely in the browser. Confirmation is shown inline with no server, no tracking, and no external network dependency.

Implementation choices

  • Static HTML/CSS/JS under one isolated site folder.
  • Off-white surface with frosted and matte proofs.
  • Indigo accent instead of amber to keep the variation distinct from variation 01.
  • Soft gradient blobs via a blurred fixed surface layer.
  • Responsive across desktop, tablet, and mobile.
  • One H1 per route; no horizontal overflow.

Critique passes

  1. Pass 1: Static structure and route wiring verified.
  2. Pass 2: Form validation, reduced motion, and accessibility checks completed.
  3. Pass 3: Automated browser checks for desktop, tablet, and mobile.