---
version: alpha
name: Rowset — Four-step Agent Handoff
colors:
  primary: '#1313A4'
  brand-yellow: '#FFDD3D'
  white: '#FFFFFF'
  soft-surface: '#F5F5FF'
typography:
  heading:
    fontFamily: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 60px
    fontWeight: 600
    lineHeight: 60px
  body:
    fontFamily: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
---

## Overview

A neutral instructional section explains an agent handoff using four sequential stages. A prominent heading and short supporting statement introduce a left-rule callout, then a bordered diagram with numbered blue circles. Captured October 8, 2026, in the public logged-out state.

## Colors

Measured source CSS uses deep blue #1313A4 and yellow #FFDD3D. White and pale lavender #F5F5FF provide quieter supporting surfaces.

## Typography

The inspected primary heading computes to 60px / 60px, weight 600, with -1.5px tracking. Its computed stack is InterVariable, Inter, ui-sans-serif, system-ui, sans-serif. Body text uses the separately sampled token above. Preserve the contrast between large display text and compact utility labels; these are desktop measurements, not fixed phone sizes.

## Layout

On desktop a four-column bordered row places all steps side by side. Each cell has comfortable inset padding, a heading and concise explanation. On mobile the complete diagram stacks into one column with horizontal separators while preserving sequence and the record example. The entire mobile component was inspected.

## Elevation & Depth

Keep surfaces flat with thin divider lines and restrained borders; do not introduce heavy shadows or gradients.

## Shapes

Use a rectangular diagram and circular numbered badges. Retain straight internal rules and a thin vertical callout accent.

## Components

The four stages are request, first-agent write, later-agent read and human review. The second cell uses aligned monospace record labels and values. Alternate subtle white and lavender surfaces aid grouping; the blue number circles are the strongest local accent.

## Do’s and Don’ts

Keep the record identifier consistent across steps and use real examples suited to your product. Avoid implying the static diagram is an interactive demo. Do not squeeze four columns onto phone widths. Static screenshots establish appearance only. Hover, focus, animation and submitted states remain untested. Check keyboard behavior and contrast in any adaptation; this is not a full accessibility audit.