Website Template for Industrial Design Studios

You design hard goods, so your site should read like a drawing. Datum opens on an exploded product whose named parts pull together as you scroll, every piece measured, then hands off to your catalogue of work.

**Signature interaction.** A scroll-assembled exploded view: five labelled parts translate from spread out to nested as the section scrolls, the callouts fading out and the overall dimensions fading in, and it reverses on scroll up.

**Features**

- **Exploded assembly.** Parts come together on scroll, each named and dimensioned, all transform and opacity.

- **Parts-list fallback.** Below the breakpoint, under reduced motion or with no JavaScript, the diagram becomes a clean numbered parts list.

- **Work grid and cases.** A product grid and a case page each, with materials, dimensions and status.

- **Capability rail.** Capabilities on a horizontal snap rail.

- **Process ledger.** A phase-by-phase ledger with week figures that count up.

- **Blueprint type.** A tall condensed display over a grotesque, burnt amber as the single accent.

**What's included**

- A home page and 8 product case pages, generated from one content file

- Every word, image, link and colour in `content.json`, so no code changes are needed to make it yours

- README and a buyer guide for editing, building and deploying

- The Studio Engine: Vite, TypeScript, smooth scrolling and animation

- Self-hosted open licence (OFL) fonts and generated placeholder images

- QA notes with the test results

**Built right**

- Lighthouse mobile 92 to 100 performance, 100 accessibility, best practices and SEO

- Keyboard accessible, works without JavaScript and respects reduced motion

- About 60 KB of JavaScript gzipped

- Deploys as static files to any host

**Requirements:** Node.js 20 or newer to edit and build.

**Tags:** website template, industrial design, product design, design studio, portfolio template, Vite, responsive

**Images, in upload order**

1. `datum/studio-datum-01-cover.jpg`

2. `datum/studio-datum-02-whats-inside.jpg`

3. `datum/studio-datum-03-pages.jpg`

4. `datum/studio-datum-04-listing-16x9.jpg` (wide, for a banner or a rectangular layout)