Product design

A physical product page in cobalt and cool white. Large object photography, measured drawings and a working finish selector with share link and specification download.

Light
Product photography
Finish selector
React Bits

Set up

1
Download it
For Next.js App Router with React 19, Tailwind CSS v4, and the @/ import alias.
$npx senn-ui@latest add product-design
Prefer to copy the files manually?
Copy src/templates/product-design from GitHub, including its assets and license files. Install its packages:
$npm i gsap @gsap/react motion @phosphor-icons/react cn
If your project has no src/lib/utils.ts (or lib/utils.ts), create it with:
export { cn } from "cn";
2
Render the template
Add this to src/app/page.tsx (or app/page.tsx if your project has no src folder).
import Template from "@/templates/product-design/page"; export default function Home() { return <Template />; }

Make it yours with your AI agent

Paste into Claude Code, Cursor, Codex or any coding agent. It asks about your product, then rewrites the copy, colors and images.

I'm using the "Product design" template from Senn (MIT; bundled third party components retain their own licenses). Turn it into the landing page for my own product.

The template lives in `src/templates/product-design/`:
- `content.ts`: every word, number, link and image, plus the data the product mockups show. Most of the work happens here.
- `theme.css`: colors and motion as CSS variables on the `.contour` class.
- `page.tsx`: loads the fonts and puts the sections in order.
- `assets/`: the template's photos, imported in content.ts.
- `sections/` and `components/`: layout and animation. Leave these alone unless I ask.

Steps:
1. Before editing anything, ask me what you need to know in one short list: product name, what it does in one sentence, who it is for, the one action I want visitors to take (sign up, book a demo, join a waitlist…), three or four benefits, real proof (numbers, customer quotes, logos), common questions with answers, brand colors and font preference. Never invent statistics or testimonials. If I don't have something yet, leave a clear TODO in content.ts.
2. Rewrite `content.ts` for my product. Keep the same structure and field names. Write specific, plain copy: concrete outcomes and real numbers, no filler, no buzzwords, sentence case headings.
3. Rebrand: change the wordmark in content.ts, rename the `.contour` class and the `--contour-*` variables to my brand, and rename the page component.
4. Update the colors in `theme.css` to my brand. Check that text stays readable on every photo, in both light and dark areas.
5. Replace the photos in `assets/` with mine, or ask me for them. Keep the imports in content.ts in sync.
6. If the page isn't rendered yet, render it on my home route: import the default export of `src/templates/product-design/page.tsx` in `app/page.tsx`.
7. Keep every section, layout and animation. Don't add dependencies.
8. Run the dev server and check the page at desktop and phone widths: no text overflowing, no single word alone on a heading's last line, every link and button pointing somewhere real.
9. Preserve any bundled LICENSE and third party license files when adapting or distributing the template.

Notes for this template:
- Contour and the C01 desk light are fictional. Replace every specification, dimension, finish, contact and legal detail with verified information, then remove the sample labels. Add real pricing and a purchase destination before selling anything.
- Finishes live in `finishes` in content.ts. Each has an id, name, code, swatch colour, note and photograph. The selector, the share link (?finish=<id>) and the downloaded specification all read from this list, so add or remove finishes there.
- The measured drawing in sections/specs.tsx reads `specs.drawing`. Keep the figures and `specs.rows` in sync, and redraw the SVG paths if the product's shape changes.
- Photographs live in assets/ (cobalt.jpg, graphite.jpg, room.jpg). Replace them with real product photography of every finish, shot on the same backdrop and framing so the finish crossfade lines up. Update alt text in content.ts. Sources are documented in assets/IMAGE_SOURCES.md.
- Preserve REACT_BITS_LICENSE and THIRD_PARTY_NOTICES.md. React Bits components retain their upstream MIT + Commons Clause terms; Senn's MIT license does not relicense them.
- The demo is noindex in Senn. Add Product or Offer structured data in the host app only once the product, price and availability are real.

4
Run it
$npm run dev
Then open localhost:3000.

Set up

Download it

For Next.js App Router with React 19, Tailwind CSS v4, and the @/ import alias.

$npx senn-ui@latest add product-design

Prefer to copy the files manually?

Copy src/templates/product-design from GitHub, including its assets and license files. Install its packages:

$npm i gsap @gsap/react motion @phosphor-icons/react cn

If your project has no src/lib/utils.ts (or lib/utils.ts), create it with:

export { cn } from "cn";

Render the template

Add this to src/app/page.tsx (or app/page.tsx if your project has no src folder).

import Template from "@/templates/product-design/page";

export default function Home() {
  return <Template />;
}

Make it yours with your AI agent

Paste into Claude Code, Cursor, Codex or any coding agent. It asks about your product, then rewrites the copy, colors and images.

I'm using the "Product design" template from Senn (MIT; bundled third party components retain their own licenses). Turn it into the landing page for my own product.

Run it

$npm run dev

Then open localhost:3000.