Settings page

The starting point

Count the problems.

Layer 1: Copywriting

Section headings

Before: "Profile" | After: "Public profile". Now the user knows who sees this data. Before: "Notification preferences" | After: "What we send you". Before: "Danger zone" | After: "Delete your account". Name the action, skip the theatrics.

Toggle labels

Before: "Email notifications" | After: "Send me email when someone replies" Before: "Marketing emails" | After: "Send me product updates and tips"

Delete button

Before: "Delete Account" | After: "Permanently delete my account and all data"

Helper text

Every field should say why it collects data. Below email: "We'll use this for sign-in and account recovery." Below website: "Shown on your public profile."

Layer 2: Typography

Heading hierarchy

The original jumps from h1 to h3.

Section headers are small and uppercase wayfinding labels. Field labels use text-sm font-medium. Hierarchy from treatment, not raw pixels.

Separator audit

Replace border-b on every section with space-y-10. Save the single border-t for the destructive action. That separation is load-bearing.

Layer 3: Craft

Labels and autocomplete

Inline validation

Save button

Never swap the label to "Saving..." The user shouldn't wonder which button they pressed.

Destructive action

Layer 4: Animation

Save feedback

Toggle animation

Async loading

Reduced motion

The toggle still moves (it communicates state) but instantly.