Editable text has to whisper its affordance: a pencil on hover, a soft background tint. With no signal, people file support tickets just to rename a title.
Keep every pixel in place during the swap. Same font, same size, same padding, with the border going from transparent to accent. One jump and the illusion collapses.
Enter commits, Escape cancels, and everyone agrees on that. Blur is the contested one: some apps save on click-away, others discard. Pick one rule and never break it.
Save optimistically: the text updates on screen while the request is still in flight. If the server fails, roll back, keep the draft, and say why.
Match the editing mode to the cost of a typo. Make every cell editable when mistakes are cheap, or require an explicit Edit action when they are expensive.
Do / Don't
Do: Signal editability on hover with a pencil icon or a soft background tint.
Do: Update the UI immediately, then roll back and keep the draft if the save fails.
Do: Keep font, size, and padding identical between the text and the input.
Don't: Leave editable text with zero affordance, so users cannot tell it is editable.
Don't: Change what blur does from one screen to the next (save here, discard there).
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
