Name, logo, color, type, motion and a nine-page website with its own brief form, for a video studio that makes ads and launch videos on its own production system and measures every piece before delivery.

Scope · naming · logo and mark · color and type system · motion identity · web design and build · brief form · search and sharing · launch Live · firendev.com · 2026

firendev makes ads, launches, explainers and customer stories for teams that ship often. Every piece runs through FireNgine, the studio's own production system: timed to the voice, rendered in code and measured before it reaches the client.

The brand had to carry one idea, written on the home page: developed like software, finished like film. And the site had to show the proof, page by page, with real numbers.

firendev joins three words. Fire, for heat and the spark. Firenze, Florence, the workshop city where craft was measured with proportion and geometry. Develop, in both of its senses: developing film and developing software.

A lowercase wordmark in two voices. The f is a high-contrast italic, the single stroke of craft; the rest is a precise grotesque, the system. The f joins the i as in the classic fi ligature, and the dot of the i breaks away from the f's hook to become the spark: an ember square turned 45 degrees, like the bricks of Florence's Duomo.

The wordmark is built in code from the letters, with measured spacing: the gap between the hook and the spark is exactly half a stem. The fi pair with its spark is the monogram, and the mark is a camera frame with the spark in its fourth corner, drawn for favicons and small sizes. On light backgrounds everything goes to a single ink.

A warm dark base and a single accent, ember. Every pair is measured: bone text on ink reads at 16.03:1 and ember on ink at 5.89:1, so the accent passes AA even as text, and accent buttons carry dark text. The accent stays scarce: the spark, the recording dot of the timecode, the primary button and the focus ring.

Three voices of type. A precise grotesque for headings and body. An italic serif for a single word per headline, the same gesture as the f. And a mono for labels, timecodes and numbers, the language of the edit suite.

The home opens on a herringbone floor of bricks, the pattern of the Duomo, drawn live in code. The wordmark is written letter by letter, the f first like a pen stroke. The spark falls into place and, as it lands, fires a pulse of heat through the bricks, again every 4.8 seconds.

Every motion is a function of time, so the floor loops every 9.6 seconds without a seam, and it holds still for visitors who prefer reduced motion. The guides behind the wordmark read its real rendered metrics, x-height and baseline, as a type designer would. Entrances and exits use the same durations and curves as the studio's video kit, so the site and the videos move alike.

Nine pages: home, work, three case studies, FireNgine, contact, privacy and a 404. Every piece is shown in the format it was delivered in, 9:16, 4:5 or 16:9, and the players switch between copies, the 4:5 cut or the Japanese version, in place.

Every case study follows one template: the brief, the process, the final and its variants, the numbers, and one provenance line that lists what was generated. At its center sits the proof sheet: a table of checks against their targets, loudness, true peak, safe zones, contrast and caption sync, measured on the delivered file, including the one check that didn't pass, with its number.

The details keep the language of film: a running timecode in the corner, sound off by default with a level meter, page changes that slate the next title, and a 404 that reads “This frame isn't in the edit.”

Every page works on the phone, where most of the pieces will be watched: the floor, the headline and both calls to action fit the first screen, and the case pages open on their facts.

Static pages with no framework, no cookies and no analytics or advertising trackers.

Full-length pieces streamed from a separate video host, posters in AVIF and the brand's fonts preloaded, so the first screen draws fast.

A brief form of its own: server-side validation, an origin check, a hidden trap field and a per-visitor rate limit stored only as a one-way hash. Briefs go straight to the inbox and nothing is kept on the site.

Search and sharing: one H1 per page, canonical URLs, a sitemap, structured data for the studio and for every case video, and a share image for each case.

Measured contrast everywhere, a visible focus ring and reduced motion respected.