Overview
Loomwise is a marketing website for an observability tool for AI agents. Developers who run agents in production need to see what an agent actually did, step by step, and what each run cost. The site has to show that clearly in the first seconds.
The challenge
Observability tools all promise "visibility", and most sites explain it with abstract copy and static dashboard screenshots. The challenge was to make the product understandable without a demo call, and to give a technical product a warmer, more memorable identity than the usual dark dashboard look.
Approach
Show the product in the hero. The home page opens on a live sample run, a support-triage agent answering "Where is my order #4821?", laid out as a trace waterfall (classify_intent, orders.lookup, draft_reply, tone_check, zendesk.post_reply). Visitors see the product before they read about it.
One feature, one idea. Trace, Cost and Evals each get their own section with a single headline, like "Every step, on one timeline." and "Know what each agent costs, down to the step.", backed by a realistic product view such as spend by agent.
A loom as the brand idea. Threads woven together became the metaphor for steps in a run. Loom and thread photography gives a technical product a human, tactile feel.
A short path to start. "Up and running in three steps", starting with adding the SDK, so developers know the setup effort up front.
Design system
A "thread palette": Ink, Tomato, Butter, Sage and Cream for the brand, plus dedicated colours for LLM, Retrieval and Tool spans so the waterfall reads at a glance. Type pairs Bricolage Grotesque for display, Figtree for body text and JetBrains Mono for code and trace data, with a consistent spacing scale.
Scope and build
9 pages, including home, feature sections, quickstart and pricing. I designed every page in Figma, from wireframes to final screens, then built the site in Framer myself, including the animated waterfall, so the launch matched the design.
What I learned
For developer tools, a realistic sample of the product does more than any headline. Using real span names and real-looking data made the page more credible than illustrations would have.
