Act as a senior product designer and engineer. Build the settings area for {{business_name}}'s app in my {{tech_stack}} project. Roles: {{user_roles}}. Inspect the existing settings code and forms first and propose the section list (for example Profile, Account, Notifications, Team, Billing, Danger zone). Navigation: each section has its own URL. 1280: a left section nav of 220px; 768: the same, narrower; 360: a list of sections that opens each one as its own page with a back link. Current section uses aria-current. Save model: pick one per section and never mix them in a form. - forms with several fields: an explicit Save; a sticky save bar appears only when something changed ("Unsaved changes", Discard, Save) and warns before leaving - single toggles: save instantly, optimistically, with an undo toast and rollback if the server refuses Layout inside a section: at 1280, a label column of 4 with a one-line description and the control in 8; at 360, stacked. Group related settings under h2s; 32px between groups, 20px between fields. Fields: visible labels, help text tied with aria-describedby, inline errors plus a summary on save with focus moved to it; switches are real switches with the state in text. Permissions: settings a role can't change show read-only with the reason ("Only owners can change billing"); the server enforces it. Danger zone: last, separated by a divider, with a red outline button; deleting asks the person to type the workspace name and spells out what will be lost and whether it can be undone. States: skeleton while loading, saving spinner on the button, "Saved" with a timestamp, errors that keep input, and disabled controls with reasons. Motion: the save bar slides up 200ms; nothing under prefers-reduced-motion. Avoid: one giant form for everything, toggles that also need Save, red used outside the danger zone, settings hidden inside modals.