Settings shell and navigation

Purpose and placement

A consistent narrow card organizes occasional configuration tasks.

Anatomy

• Centered brand header
• Route icon and title
• Return link
• Inner content panels

Contract

States and feedback

• Menu overview
• Route detail
• Return to settings/dashboard

Interaction and composition

Keep route identity outside its inner controls. Settings is a separate reading and configuration surface from the dashboard, preserving the same semantic colors but using purple brand icons.

Responsive behavior

Outer card max-width 672px with 40px padding; phone content remains narrow and may grow vertically. Full-content screenshots supplement viewport crops where useful.

Accessibility contract

Use one page heading and semantic links. Some control labels are visual labels without htmlFor; the shared shell does not fix child-control semantics.

Known implementation gaps

The settings route itself does not enforce auth in its layout; protected data comes from API/session boundaries and server board routes. Do not equate a rendered settings page with authorized data access.

Source references