## 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/saidtrace/da2a1190-1b0d-4dc6-9c61-691af1a5c9a8-1792130575-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/saidtrace/da2a1190-1b0d-4dc6-9c61-691af1a5c9a8-1792130502177-full.webp
- Component on Kage: https://kage.design/component/saidtrace-feature-grid

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

Build an explanatory workflow section with an eyebrow, a bold two-line heading, and a short supporting paragraph above a large contained diagram. Show several input sources across the top, a central processing or archive card, and three outcome cards below. Connect nodes with quiet curved or straight lines so the information architecture is clear without feeling like a technical diagram. Use a pale neutral panel #f4f6f7, white cards, charcoal #20252b, muted #697178, and a restrained accent such as #6f7ee8 for selected AI states. Use 1px #d9dfe2 borders, 12–16px radii, soft shadows only on the central card, and 24–40px internal spacing. Label the input/output groups with small uppercase text, keep icons simple and line-based, and provide a stacked mobile layout with connectors replaced by spacing or a vertical rule.

Never use the reference's logo, product name, copy, illustrations, or imagery.