Error states

#Copy

Field messages say how to fix the field: "Inserisci un'email nel formato nome@esempio.it", not "Email non valida".

#Forms

• Show each field's error next to the field, as soon as the person leaves it or submits.
• On a failed submit, put a BaseAlert above the button that says what to fix, and move focus to it or to the first invalid field.
• Never clear what was typed.

#Pages and sections

• A page that can't load keeps its header and navigation, so people aren't stranded. The error replaces only the content, with a heading, one sentence and one primary button.
• A section that can't load shows its error inside the section. The page around it keeps working.
• "Gone" isn't a dead end: offer the closest thing (similar listings, back to the results).

#Contrast

Red (w-danger) passes 3:1 on white, enough for icons and borders but not for text. Until the system has an accessible error text color (a /ds-add decision), error text is w-black or w-dark-primary, next to a red icon or border. The library's own red error text is a known issue being fixed.

#In mockups

Each error state is a mockup state whose key starts with error (error, errorSend, errorGone), with its own link like every state (/search?save=errorSend). The state bar shows a warning when a page has none. Forms show their errors already on screen in that state, without the reviewer having to type. The error-states skill has the full checklist. The error-states-reviewer agent reviews it.