lab process

A clearer process for stronger block reviews
01

Map the promise

Start by checking what the section is meant to communicate, which audience it serves, and whether the first visible heading explains the value without relying on internal notes.

Audience needMessage priorityPublic-safe copy
02

Load realistic content

Populate each step with enough copy to expose line wrapping, spacing pressure, card height changes, and how the process reads when the content is no longer a single short sentence.

Long descriptionsSubstep chipsContent balance
03

Review layout and borders

Check the numbered markers, cards, and substep chips as a connected system. Borders should feel intentional, with consistent rounding and squircle treatment across light and dark themes.

Rounded cardsSquircle bordersVisual rhythm
04

Test motion and interaction

Scroll through the process slowly and quickly, confirming entrance timing, hover states, and the vertical connector do not distract from the step titles or make the layout feel unstable.

Scroll revealHover liftConnector timing
05

Approve the handoff state

Finish by comparing desktop, tablet, and mobile views in both themes. The block should look ready with default content, clear hierarchy, and no hidden dependency on surrounding project styles.

Desktop passMobile passTheme pass

Process review flow

RichText Content: use this diagram slot for a short process summary, supporting notes, or embedded visual content during lab review.