Layout rules.L · 01 settings = explanation on the left, controls on the right, max 420 px wide controls so they don't fight for space.
L · 02 modals stack tightly — labels above fields, primary CTA bottom-right.
L · 03 two-column grids for personal info; collapse to single column at < 560 px.
L · 04 the composer is a one-row exception — paste-and-go, no labels.
L · 05 wizards split long flows into 3–5 steps; the current step gets brand-yellow, completed steps get a green check.
L · 06 sticky bar only appears once the form is dirty; the top-edge yellow line is the visual cue, never a banner above.
L · 07 inline edit keeps display rows quiet — pencil reveals on hover.
L · 08 auth lives in a centered card on a tinted backdrop — same shape as Resend, Linear, Craft. Card has a 1 px line, --radius-lg, --shadow-md; backdrop is a soft yellow radial fading into --bg-secondary.
L · 09 2FA uses 6 individual digit slots with a – separator between halves.
L · 10/11 error states use aria-invalid="true" on the offending input and a .form-callout[data-state="error"] inline below — same DOM contract React state can bind to. OTP error flips the WHOLE strip red (not one slot) since the code as a whole is wrong.
L · 12 success/confirmation uses the brand-yellow envelope mark, soft body copy, primary + secondary stacked actions.