How this site was designed and put together.

The concept

Anvil sells physical machines into warehouses and factories, so the site had to read as engineering credibility first and marketing polish second. That ruled out anything soft, playful, or "startup" — no rounded gradients, no lifestyle photography, no vague promises. The brief was operational reliability and return on investment: uptime, throughput, and labor cost, stated as numbers a plant manager could check.

The name gave the concept its anchor. An anvil is a tool that takes an impact and doesn't move — a fitting metaphor for a robot that's supposed to be the one dependable thing on a warehouse floor full of variables. Every design decision after that traces back to a single question: does this look like it belongs on a spec sheet, or does it look like it belongs on a pitch deck?

Visual direction

The palette is a deep, cool steel charcoal — closer to gunmetal than the warmer charcoals common in consumer-facing dark themes — with a single safety-amber accent used the way a facility actually uses amber: sparingly, on beacons, warning strips, and the one button that matters. A muted brushed-metal gray carries secondary text and structure, so the amber never has to compete for attention.

Typography splits three ways on purpose. A condensed, tall industrial display face carries headlines — the kind of face that reads like it belongs on facility signage rather than a website. A monospace face handles every spec number, kicker, and navigation label, because a fixed-width digit grid is what makes a data readout look like a data readout instead of decoration. A plain, highly legible sans carries body copy, so long paragraphs of technical explanation stay easy to read at length.

Product and environment imagery was art-directed toward cool overhead fluorescent lighting with amber accent light sources in frame — beacon glow, warning strips, hazard lighting — rather than the soft, warm lifestyle photography a consumer brand would use. The goal was imagery that looks like it was shot on an actual facility floor, not a studio set built to look like one.

Structure — five real pages

This is a genuine multi-page build, with the technical spec sheet split out as its own page rather than buried in a homepage scroll:

• index.html — the home page: hero, fleet overview, how-it-works, a telemetry-style stats section, customer proof, and a demo-request CTA.
• product/index.html — the full technical specification for the flagship AR-600 Hauler, with a quick-reference data strip, a complete spec table, an annotated diagram, and the sensor stack explained.
• industries/index.html — three verticals the fleet deploys into, each with its own scenario and environment photography.
• about/index.html — the founding story, engineering leadership, and the company's operating values.

Every page shares the same header and footer, and internal links are relative to each page's folder depth — pages one level down reach the homepage with ../index.html and reach each other as siblings. There's no separate contact page; the homepage's demo-request section serves that purpose, and every other page's "Request Demo" button and footer links point back to its anchor.

The imagery

Every photograph on the site — the fleet shots, the product angles, the sensor-stack close-up, the three industry environments, and the three leadership portraits — was generated rather than photographed at a real facility, since Anvil itself isn't a real company. The art direction stayed consistent across the set: cool industrial lighting with an amber accent source somewhere in frame, hardware shown mid-task rather than posed, and no readable branding, logos, or safety placards that could be mistaken for a real company's signage. The three leadership portraits share one lighting setup — the same cool facility-corridor key light — so the team reads as one company rather than three unrelated headshots.

The signature motion

Two techniques carry the site's motion identity, and both were chosen because they're things an actual fleet-management system would show, not decoration borrowed from somewhere else. First, the "How It Works" section on the home page includes a top-down warehouse floor-plan diagram where the travel route draws itself in on scroll and a small robot marker rides the finished path from dock to staging — a literal nav-route readout rather than a generic line animation. Second, the "By The Numbers" section counts its statistics up from zero as an amber scan-line sweeps through the strip once, the way a dashboard panel looks when it first comes online.

Supporting details reinforce the same idea in smaller doses: a live-looking telemetry card floats over the hero image with battery, payload, and uptime readouts; product and environment photos get a brief amber sweep on hover, echoing a LiDAR scan pass; and a thin diagonal hazard-stripe divider marks a couple of section boundaries, the way warning tape marks a boundary on an actual floor. Everything else — section reveals, staggered card entrances, the sticky header's shadow on scroll — runs through GSAP's ScrollTrigger, loaded from a CDN with no build step required. prefers-reduced-motion is respected: visitors who've asked for less motion get the finished layout instantly, with nothing gated behind an animation.

Responsiveness and craft details

The layout was checked from a 375px phone width up through large desktop screens. The nav collapses to a slide-in panel below 860px, the spec table and diagram stack to a single column, the industry cards drop their alternating left/right layout, and overflow-x: clip is set on both html and body so nothing — including the full-bleed hero image and the wide spec table — can force horizontal scroll on a narrow screen. The floating hero telemetry card is hidden below the tablet breakpoint rather than squeezed, since a cramped data readout is worse than no readout.

The homepage's demo-request form is intentionally a visual demo: it validates and shows a confirmation state on submit, but doesn't send anything anywhere, and says so directly on the page rather than leaving it ambiguous.

Deploying a site like this

Because there's no build step — plain HTML, CSS, and a small JavaScript file, with fonts and the animation library loaded from CDNs — deployment is just a matter of hosting static files. The most common path is Netlify: drag the project folder onto Netlify's deploy target, or connect a Git repository and let it deploy on every push, and the site is live on a Netlify subdomain within a minute or two, with a custom domain attachable afterward under Site Settings. Because every internal link in this project is relative rather than absolute, the whole folder can also be dropped into any other static host without changing a single link.