designmotionhq

forms

Settings System

Your settings page is harmless until the last section. Settings is a system.

Watch on Instagram

Key insights

  • Match the apply model to the blast radius. Light toggles commit instantly with a saved confirmation, while identity fields like email demand an explicit Save/Cancel that a real click completes.
  • Group by task, not org chart. A flat list of twenty rows becomes three scannable sections the moment it mirrors user intent instead of your data model.
  • Make it searchable. Power users never scroll, they search, and one query beats digging through six nested menus.
  • Give every changed value a modified indicator plus a per-setting reset, so someone can revert one override without nuking the rest.
  • Quarantine destructive actions. Put delete behind a visual wall at the bottom of the page, and gate it behind typing the exact resource name so a stray click can't fire it.
  • Collapse advanced options behind an expandable section, keeping the common path short while the depth stays one click away.

Do / Don't

  • Do: Match a setting's apply model to its stakes: instant for low-risk toggles, explicit save for identity.
  • Do: Require typing the resource name before an irreversible delete goes through.
  • Do: Surface a reset affordance next to any value the user has changed.
  • Don't: Pour every option into one flat list ordered by your schema.
  • Don't: Let irreversible actions fire on a single unguarded click.
  • Don't: Bury settings in nested menus when a search box would find them instantly.

Want Claude to build this correctly?

UX Engine gives Claude Code the senior-designer reasoning behind every pattern.

The Design System Blueprint

An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.

Get the Blueprint — free

The PDF, plus emails about new patterns and my tools. Unsubscribe anytime.

Related patterns