## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/web-search-agents-by-nimble/b9f88c51-9261-49a4-af5a-25ccd481000c-1789452128-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/web-search-agents-by-nimble/b9f88c51-9261-49a4-af5a-25ccd481000c-1789452077081-full.webp
- Component on Kage: https://kage.design/component/web-search-agents-by-nimble-feature-grid-2

## Before you start
Ask what the user's product, audience, and brand identity are, then apply the principles below to that product rather than reproducing the reference.

Design a technical workflow explainer on a white background. Start with a centered heading and a short subtitle, then build a wide diagram: a request card on the left, a large rounded central “agent loop” container, and a response card on the right. Within the center, arrange four small modules in a two-by-two grid connected by subtle directional arrows; below or around it, add two compact infrastructure dependency cards. Use hairline borders #E4E4E8, white cards, pale gray fills #FAFAFA, charcoal text #252631, muted secondary text #777983, and a restrained lime or lavender accent for the active module and outer loop. Use 16–24px radii, clean monospace styling only for request/response snippets, and enough whitespace for the arrows and labels to remain legible. On mobile, transform the horizontal flow into a vertical sequence while preserving the loop relationship.

Never use the reference product name, exact diagram labels, exact API payloads, icons, screenshots, or imagery.