- The buyer is an engineer holding a requirements document — SWaP limits, an environmental envelope, a target range, a frame-rate floor — and the old site answered none of it
- Specifications lived in three places that disagreed: manufacturer datasheets, the OEM site, and an internal spreadsheet, with different labels and different rounding for the same figure
- Export classification is a legal claim, not a spec. Several ECCN codes were single-sourced or in direct conflict between sources, and publishing a wrong one is a real liability
- There is nothing to check out. The only conversion worth building for is a technical conversation, which makes every e-commerce pattern the wrong pattern
- Two physically different sensor technologies — uncooled long-wave and cooled mid-wave — that a visitor has to be able to tell apart before any individual product page means anything
- Defense-adjacent subject matter that had to read as capability and instrumentation, not as weapons marketing
A catalog engineers can argue with.
How KumoKodo Studio rebuilt mtechimaging.com — a site that sells infrared camera cores to people who arrive already knowing their SWaP budget, their spectral band, and their target range. No cart, no pricing, no adjectives. Spec tables, range charts, and one route to an engineer.
A template selling instruments.
MTech Imaging has been engineering infrared solutions since 2009, integrating and supporting cooled and uncooled thermal camera cores for defense, industrial, research, and medical programs. Their site was a hosted template that presented those cores the way a template presents anything — as tiles.
Build the site as an instrument.
The design direction — internally, “Thermal Instrument” — takes its cues from the product rather than from the category. It is dark because the work is done in the dark, and it is precise because the audience is.
A palette taken from the signal
Instrument black under a cold brand cyan for precision, with thermal amber reserved for heat and used sparingly enough that it still means something when it appears. Corner reticle brackets, monospace HUD readouts, scanlines and sensor grain do the decorating — the viewfinder language, not a gradient.
The spec table is the sales pitch
Every product page runs the same table, in the same row order, with the same units. That consistency is the feature: an engineer comparing two cores scans the same line on both pages instead of reconciling two datasheets, and products within a family are laid out as a column-per-model matrix so the comparison is already done.
Charts drawn, not embedded
Detect / Recognize / Identify range charts, and a spectrum map plotting both bands against the atmospheric absorption gap between them, are built from CSS hairlines and catalog data — no charting library, no client JavaScript, nothing rendering between the reader and the numbers.
Every path ends at an engineer
The three-step engagement model — assess, configure, support — runs the homepage, and each of the three application domains (land, sea, airborne and space) leads to the same place. There is no cart and no price, because the next step was always a conversation.
One catalog, checked into the repo.
The catalog file runs the site
A single typed catalog module holds every product — family, band, cooled or uncooled, spec groups, comparison tables, range-chart data, and application markets. The catalog page grouping, the statically generated detail routes, the featured lineup on the homepage and in the footer, the sitemap, and the Product JSON-LD all derive from it. Adding a product is a data change, and the structured data can never drift from the page it describes.
- A typed catalog module is the content model
- Detail routes prerendered from the same array
- Sitemap and featured lineup generated, not maintained
- Product JSON-LD emitted from the rows the table renders
Ten spec rules, enforced catalog-wide
Cross-product consistency is what engineers actually notice, so the rules sit at the top of the catalog file as a checklist the next editor has to read past. Sensitivity is always labelled NEdT and always expressed with a less-than-or-equal, never a strict less-than. Radiometry gets a row on every product, valued or explicitly marked unavailable. The long-wave band is always stated as 8-14 µm. Altitude is always 12 km. Digital zoom is always phrased the same way, and the one core that has none says so outright.
- Rules live in the source, not in someone’s memory
- Uniform labels, units, and comparison operators
- Every product carries the same required rows
- Named exceptions instead of silent omissions
Export classification with three states, not two
Every ECCN was researched and then triaged as confirmed, pending, or missing. Confirmed means multi-source or datasheet-in-print. Pending means single-sourced, or in conflict between sources. Missing means no source states one at all. Only confirmed codes are eligible to render; everything else degrades to “contact sales to confirm.” Each pending item is named in the source alongside the specific conflict, so reconciling it with the manufacturer has a worklist rather than a memory.
- confirmed · pending · missing, tracked per product
- Conflicts recorded with their competing sources
- Public cell degrades to a sales conversation
- Classification page built and parked until the codes clear
Static by default; one dynamic surface
Next.js 16 App Router on React 19 with strict TypeScript, every route prerendered. Tailwind CSS v4 with the design tokens declared in a single theme block, so the instrument palette and the type scale are one file rather than a scatter of hex codes. Motion drives an instrument boot-up on load and restrained scroll reveals, all safe under prefers-reduced-motion. The only dynamic surface is the contact Server Action: Zod-validated, honeypot-guarded, provider-agnostic, and it surfaces a real error rather than pretending a lost message was delivered.
- Next.js 16 · React 19 · strict TypeScript
- Tailwind v4 tokens in one theme block · Archivo + IBM Plex
- Server Action + Zod + honeypot · no database
- robots.ts explicitly welcomes six AI crawlers
Why we built it this way.
Absent beats wrong on an export code
An export classification on a public page is a legal claim someone may rely on. Where sources conflicted, or a code was single-sourced, we withheld it rather than publish the likeliest answer — and shipped the classification page parked, not guessed, until the codes are reconciled with the manufacturer.
No count of cores, anywhere
A catalog count reads as a boast and goes stale the moment the lineup changes, so the site never states one — not in copy, not in a stat block. The rule is written into the catalog file so a future edit cannot reintroduce it by accident. We have held to it in this case study too.
Capability, not weapons marketing
The same cores that serve defense programs also track marine mammals from survey vessels, map wildfires and agricultural health from orbit, and keep drivers on a road in blinding dust. Leading with what infrared does, rather than with what it can be aimed at, is both more accurate and a wider door.
Parked, not deleted
Work that comes out of the design gets kept where it can come back. The spectrum map was pulled off the catalog page because it delayed people reaching the products, not because it was wrong — it stays in the repo for a future education page, alongside the classification table, each behind a route the framework ignores.
Reviewed by the people who know the hardware.
The catalog went through line-by-line technical review with MTech’s own engineers, and their corrections became the site’s rules rather than one-off edits. When they told us to stop stating a count of cores, that became a catalog rule. When they told us the spectrum diagram was slowing people down on the way to the products, we pulled it from the page and kept it in the repo. When a spec label was wrong on one product, we fixed it on all of them and wrote down why.
Change orders arrived as a slide deck and as a written spec, and each one landed as a single reviewable commit against the catalog. That is the payoff of putting the content model in the repository instead of in a CMS nobody audits: a specification change is a diff someone can check.
Technology stack.
Visit MTech Imaging.
Take a look at the live site — or tell us about a technical product of your own that deserves better than a template.