Input states.

Every input speaks its state through border, icon, and message — color is never alone. Shape and text always carry the meaning too.

Default--border-subtle

Email · Field

Full name

Resting field, awaiting input

Hover--border-strong

Email · Field

Full name

Edge firms as the cursor lands

Focus--ring

Email · Field

Avery Lindqvist

Terracotta ring marks the active field

Error--danger

Email · Field

avery@

Enter a valid email address

Warning--warn

Email · Field

(555) 01

This number looks incomplete

Success--success

Email · Field

Avery Lindqvist

Saved and verified

Six states, one field. Default rests quietly; hover and focus invite; error, warning, and success each pair a color with an icon and a written line — so meaning survives for anyone who cannot read the color alone.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait