Prompt

“A warehouse robotics company: industrial, safety yellow, spec-sheet led, precise.”

The agent invented Halden Robotics - Autonomous pallet and tote robots for warehouses that run three shifts, sold on the spec sheet.

Toolchain: pure + inspo
Register: light mode
Build effort: 13+ MCP calls · 5 sites studied
Self-score: 7.5 / 10

The page it shipped - live, scaledOpen full page ↗

The move

The hero is a dimensioned side elevation rather than a product photo: an SVG HX-1400 on a 40px blueprint grid with a title plate ("Drawing HX-1400-SE, Scale 1:20, Sheet 1 of 4"), extension lines and mono callouts for overall length, mast height, fork height, scanner spec, rated load and braking distance. The headline is a specification ("Moves 1,400 kg at 2.0 m/s. Stops inside 480 mm.") and every number in it is repeated in the drawing and again in the comparative spec table, which is rendered from a single data object so the metric/imperial toggle and the click-to-highlight column stay consistent with the hero. The same drawing language returns in the dark safety section as a plan view with the protective and warning fields dimensioned, so the page reads as one datasheet rather than a landing page with a table bolted on.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

Teenageengineering - The spec-sheet register: hardware as the only hero object, tiny dense mono labels printed on and around the machine, a product code set on the chassis. The hero's dimension callouts and the "Drawing / Scale / Sheet" plate come from this.
Hardware Operations — Product Visualization & Animation - Mechanical detail treated as a drawing in a gallery, with the nav reduced to mono metadata at the edges (status line, email). The green "online" status dot in the nav and the mono nav links are lifted from its edge treatment.
Genelec - The 40/60 split of left text block against a right product, and the tall vertical accent bar preceding the headline. That bar became the safety-yellow ruler beside the H1.
Shure - Model code as an eyebrow above the headline (its "MVX2U Gen 2" line), and one product at an angle on a flat field with no environment. Gave the "HX-1400 · Pallet AMR · ISO 3691-4" eyebrow.
Arweave - Numbered index hierarchy (01, 02, 03) and a single accent-coloured period as the only chromatic mark in the headline. Section indices, the footer index list and the yellow-deep periods in the H1 all come from here.

How it was built

The actual MCP calls, in order.

recommend
```
brief: "A warehouse robotics company: industrial, safety yellow, spec-sheet led, precise", detail: full
```
Picked Marquee Hero, but the exemplars were AI and agency sites (blackforestlabs-ai, mage-ai, 11x-com, phantom-land, analogue-co). Useful evidence packet: grotesk-sans at 75%, a #fbdb04 yellow anchor in the genre, plus the hero-fit and spacing guidance. I treated the pick as a runner-up and looked for hardware.
find_by_color
```
hex #f5c400, tolerance 0.2, limit 10
```
Sites carrying safety-adjacent yellow: interaction-hnine-com, logicmag-io, headspace-com, middle-finance, lottiefiles-com, juanmora-co, wesbos-com, daisyui-com, rust-lang-org, ghost-org. Confirmed that yellow reads best as a fill (rust-lang-org button, wesbos-com highlight bars) not as text on light paper, which set the --yellow / --yellow-deep split.
search_screens
```
query "industrial hardware robotics spec sheet technical product page precise engineering", vibe technical, limit 10
```
teenageengineering-com, kvs-services, hardwareoperations-com, arweave-org, price-pierce-co-uk, smartsheet-com, render-com, stately-ai, you-com, builder-io. The first three and arweave-org became core references.
search_screens
```
query "hardware device specifications table payload machine product", industry consumer-tech, limit 8
```
fellowproducts-com, whoop-com, teenageengineering-com, analogue-co, shure-com, apple-com, genelec-com, snap-com. Gave genelec-com and shure-com.
find_examples_for_macrostructure
```
name feature-stack, limit 6
```
algolia-com, alloy-com, amie-so, anytype-io, babbel-com, basecamp-com. Confirmed I did not want a feature-stack; the page below the fold is a numbered spec document instead.
get_screen
```
slug teenageengineering-com
```
Full autopsy: outlined logotype, labels left-justified on hardware edges, 8:1 scale jump. Basis for the callout-annotated hero drawing.
get_screen
```
slug hardwareoperations-com
```
Full autopsy: GT Pressura Extended plus Geist Mono, mono nav at 10px, render bleeding the frame. Basis for the extended grotesk plus mono pairing (Archivo wdth axis plus IBM Plex Mono).
get_screen
```
slug genelec-com
```
Full autopsy: 4px vertical rule beside the headline, 40/60 split, 5-step type scale, 1280 container. Basis for the hero split and the ruler bar.
find_reference_components
```
type stat
```
annotated, bar-chart, before-after, grid, row, single-hero. Took the 4-stat row with hairline rules and tabular figures for the strip under the hero, and the 6-stat grid shape for the safety figures.
find_reference_components
```
type footer
```
address, colophon, list, long-copy, newsletter, sitemap, statement. Took the Ft1 Index (numbered, no underlines) and the Ft8 Address card, combined into one footer.
get_design_system
```
slug teenageengineering-com, live false
```
Thin tokens (no fonts captured), palette roles only; confirmed the monochrome-plus-one-accent structure.
compare
```
slugs teenageengineering-com, hardwareoperations-com, genelec-com, shure-com
```
Shared styles: minimalism, swiss, monochrome. genelec-com and shure-com both run 5 type steps; genelec-com spacing 64/80/132 informed the section rhythm.
get_screen
```
slug arweave-org
```
Full autopsy: numbered 01-04 tab bar, accent period, Roboto Mono plus Work Sans. Basis for the section indices and the H1 periods.

Palette, traced

Every token, and the reference it came from.

--paper#ecebe6Page ground. A concrete-grey off-white rather than pure white, so the safety yellow reads as paint on a floor rather than a web accent.
--paper-2#e1e0daDrawing sheets, table headers, the stat strip. One step down from paper to make panels without borders doing all the work.
--ink#141413Text, chassis linework, the dark button state. Warm near-black to sit with the grey paper.
--muted#66655fMono metadata, dimension lines, secondary copy. Chosen to pass contrast on both paper tones.
--rule#c6c5beHairlines, table borders, the 40px blueprint grid behind the drawings.
--yellow#f5c400Safety yellow. Used only as a fill: the robot chassis, the primary button, the CTA band, protective fields in the safety diagram, the ruler bar. Never as text on paper.
--yellow-deep#b58f00The yellow's text-safe sibling for the H1 periods, section index numbers and timeline dates, so the accent can appear in type without failing contrast.
--dark#1c1c1aThe safety section's ground, where yellow becomes the linework instead of the fill.

Built with the Inspo MCP - try it on your own brief.← All examples