plans: names UX design principles

plans/names-codes/2026-10-23-ux-principles.md

@@ -0,0 +1,14 @@
+# Names store: UX design principles
+
+From the design iteration of 21–23 October 2026 (ep's review of the mockup, versions 16–38 and the community and long-name rounds). They apply to every page of simplex.domains.
+
+1. **Nothing moves.** The main button, and the link under it, sit at the same place on every step. A state that changes on a page (a check that finishes, a name taken meanwhile, a rate that expires) changes in place, in space reserved for it. No content pushes the button, and nothing jumps between states.
+2. **Every gap is measured, not eyeballed.** Rows keep the same padding whatever their content: a 63-letter name gets the same top and bottom padding as a 6-letter one. An inline label sits on the text's baseline; an icon is centred on its word. Gaps are fixed values (16 px between a name and its label on desktop).
+3. **Long names are the normal case.** Every screen is drawn for 63 letters as well as 6. A name breaks only when it is wider than its line; a label that belongs to the name wraps with it; on a phone a secondary label ends the name's last line on the right.
+4. **One main action per step.** It is the centred button; other choices are links under it. A required agreement sits between the choices and the button, and the button stays off until it is given.
+5. **Say what is true, now.** "The name is available (checked at 10:42)", re-checked while the page is open; "Invoice valid for 14:59", not "rate held". When the truth changes, the page says so at once and in the same place.
+6. **Codes are never money.** A code "allows you to register a free name"; with a code the price reads "Free". Real money is shown as money: a taken name's payment is the buyer's balance, a new name costs only the difference, and a refund is one message to support with the reference.
+7. **Don't offer what can't be used.** When a name is taken meanwhile, its payment details fade and stop taking input; a card is not offered below its minimum charge. An inactive button always has a visible reason next to it.
+8. **What looks clickable is clickable.** A blue label is one control, the word and its icon together; the pointer is enough, with no decorative underline.
+9. **Fewer words, no repeats.** One-line notes. A fact is said once: the reference lives in the payment card's status row, not in a second line.
+10. **Phone and desktop are both first.** Every change is checked at 390 and 1280 px wide, in light and dark, with short and 63-letter names, and measured, not only looked at.