Internal review copy. Not presented to the client. Aesthetic: Measured Industrial. Yellow notes on the boards are annotations for MSH and are not part of the design.
Three surfaces, four boards
The homepage is drawn twice to close the client's open light-versus-dark question by showing rather than asking. The OEM page and the parts page are each drawn as a template with its hardest variant beside it.
All ten machine-class images are cutouts on a white ground, so on a light base they need no plate and no re-masking. MSH leans this way; the decision is Sean's and Jake's.
Identical markup, one attribute changed. It works, and it costs a white plate behind every machine image and every OEM mark, plus a lighter accent red for text.
One template, eleven brands. Board A is Cummins at its richest; Board B draws the Sennebogen parts-only variant in full at the same width.
Drawn in both data states. Board A is today's catalog and is the majority case; Board B is the same template once the data is enriched.
These live in the MSH repository, not on this site. The four boards above are the deliverable.
| Why each choice was made | projects/bulkliftproducts/design/concept-rationale.md |
|---|---|
| Where the colours and type came from | projects/bulkliftproducts/design/derived-brand-tokens.md |
| Risks found before drawing | projects/bulkliftproducts/plan-review.md |
| The brief | projects/bulkliftproducts/design-direction.md |
| Screenshots, five breakpoints | projects/bulkliftproducts/design/screenshots-clean/ (and screenshots/ annotated) |
Header, navigation and footer are illustrative on every board. They are SOW item 4 and are quoted separately. They appear only because a page cannot be drawn without them.
Judge the design without the scaffolding. The yellow annotation blocks and the grey board bars are review apparatus, not design - at 1440 they occupy roughly a fifth of each board. Every board renders clean by adding class="clean" to <body>, and screenshots-clean/ holds that render at all five breakpoints. The clean version is what a client should ever see.