Illustration

Agent figure

An illustration of how an agent works, played step by step. Full spec, standalone files, and every live example in web/components/agent-figure/.

Examples

Measure mode (Spot)Open “Measure mode (Spot)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

App mode (Hirsla)Open “App mode (Hirsla)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Exchange mode (Hirsla, how it was built)Open “Exchange mode (Hirsla, how it was built)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Build mode (Briefing)Open “Build mode (Briefing)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Ledger mode (Briefing, the checks)Open “Ledger mode (Briefing, the checks)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

One per story, after the paragraph it explains.

Live: Agents.

Anatomy

Stage: Sharp, white, aria-hidden; everything inside rounded.
Transcript: p.vh with the whole story.
Caption: “Illustration, not the product UI” and Pause.

Variants

Modes: Exchange, measure, ledger, app, build.

Behaviour

Phone, tablet, desktop: 16px desktop, 13px phone, em-based.
Motion: Steps 300ms, 1.5s apart, once, from 40% in view; scan 1.4s.

Accessibility

Transcript, real button, end state without motion.

Words

Real, short copy; never invented results.

Code

Classes: .agf and .agf-*. Styles in site/assets/css/site.css.

<figure class="agf">
<div aria-hidden="true" class="agf-stage">
<div class="agf-me">
<div class="agf-phone">
<div class="agf-phone-top"><span class="agf-bar"></span><span class="agf-bar"></span></div>
<div class="agf-h">Exception-<br/>al design<span class="agf-box" data-s="2"></span><span class="agf-badge" data-s="2">1</span></div>
<span class="agf-bar l1"></span><span class="agf-bar l2"></span><span class="agf-bar l3"></span>
<div class="agf-cards"><span class="agf-bar"></span><span class="agf-bar"></span></div>
<span class="agf-scan"></span>
</div>
<div class="agf-side">
<div class="agf-flag" data-s="2"><div class="agf-flag-t"><span class="agf-badge">1</span>Headline splits mid-word</div><div class="agf-sub">Text overflows its box by 14 px</div></div>
<div class="agf-ticket" data-s="3"><div class="agf-ticket-t"><span>Filed</span><span class="agf-tag">High</span></div><div>Product page · mobile</div><span class="agf-shot"></span></div>
</div>
</div>
</div>
<p class="vh">Illustration: Spot scans a product page on a phone-sized screen. It finds a headline that splits mid-word because the text overflows its box by 14 pixels, and files it as a high-severity issue with a cropped screenshot.</p>
<figcaption class="agf-cap"><span>Illustration, not the product UI</span><button class="agf-btn" hidden="" type="button">Pause</button></figcaption>
</figure>