Hero

Hero is building public safety’s first AI-native operating system. Founded by executives from Amazon, Airbnb, and Google, the San Francisco startup unifies dispatch, real-time intelligence, mobile response, reporting, investigations, and analytics into one platform designed to give public safety workers superpowers. When they came to Caviar, Hero was still in stealth mode and preparing to introduce itself to the world.

Hero had a serious product and nothing public to show for it. Coming out of stealth in a regulated, trust-driven industry meant the brand had to feel credible to police chiefs and dispatchers, not just impressive to the tech world. They needed a complete identity, a website, and conference materials, all built from scratch and all ready before a major industry conference just three months away.

Caviar built the entire brand system first: a shield-inspired logo, a color palette anchored in confident blues, and a type system set in Neue Haas across both brand and product. From there, we designed and developed a six-page website in Webflow, layered with custom Lottie animation and scroll-driven motion. Along the way, we wrote taglines and messaging, and produced print-ready assets for their first major industry conference. The result carried Hero from stealth to a confident public launch

Hero arrived with a name, a mission, and no public face. We started with logo exploration across multiple concepts, refining toward a shield-inspired mark that nods to protection and service without leaning on cliché badge imagery.

The team then built out the full system: color exploration that landed on a confident blue palette with sharp accents, a typography pairing of Neue Haas Grotesk for the brand and Roboto for the product, and a brand book that documented it all.

We also wrote and workshopped taglines with the Hero team, landing on the line that now leads their homepage: “Public safety’s first AI-native operating system.” Every choice was pressure-tested against a hard question: does this feel trustworthy to the people who run 911 centers? The final identity threads that needle, modern enough to signal serious AI capability, grounded enough for a regulated industry.

The homepage needed to demonstrate the product’s core promise, real-time situational awareness, without exposing a product still partly under wraps. We explored multiple hero concepts and landed on a layered animation: an interactive heatmap over a moving dot-grid background, with product UI elements resolving on top.

Technically, this meant splitting the animation into a Lottie layer for the foreground and an HD video render for the background motion, then compositing them seamlessly in Webflow across desktop and mobile. We rebuilt product screens as anonymized, skeleton-style visuals, so the site could show how Hero works without revealing sensitive interface details.

Hero’s platform spans dispatch, intelligence, mobile, reporting, investigations, and analytics. Explaining all of that on one page risked a wall of text. Instead, we designed a scroll-driven product workflow section that walks visitors through the operating system step by step, with each stage animating into view as the user moves down the page.

We carried the same motion language across the Platform and About pages, with animated grid backgrounds and Lottie sequences that play once on scroll. The About page also got a full careers system: job listings, pop-up descriptions, and an application form with resume upload, all built natively in Webflow.

Midway through the website build, Hero locked their booth at a major industry conference. Caviar took the brand-new identity into print for the first time: a two-sided one-pager and three large-format banners, designed, revised, and delivered as press-ready files.

Because the identity was built on clear rules for color, type, and iconography, the team could move fast without anything drifting off-brand.

Ambitious animation is easy in After Effects and hard on the open web. Caviar produced more than ten Lottie animations across the site, plus HD background renders for the effects that Lottie can’t carry, and worked hand in hand with development to keep everything sharp, fast, and responsive.

That meant desktop and mobile variants for every hero animation, scroll-triggered playback tuned section by section, and file sizes kept under strict performance budgets. The finished site moves the way the Figma prototypes promised it would.