Settings Page

Purpose

The settings page composition handles user preferences, account configuration, product configuration, and administrative options. It is characterized by a persistent category navigation column on the left and a content area on the right that displays the selected category's form sections. It is always a full page within the page shell — never a modal or drawer. Use it when there are three or more distinct settings categories that benefit from named navigation, or when any single category contains enough fields to justify scrolling independently from the category list.

Do not use this composition for a single isolated form (use the form-layout pattern in a card instead). Do not use it as a navigation structure for non-settings content such as reports, dashboards, or entity lists — those use the page shell sidebar.

Structure

The settings page sits inside the main content area of the page shell. It is split into two columns: a narrow settings category sidebar on the left and a wide content panel on the right. This is a secondary navigation structure wholly contained within the main content area, distinct from the application-level sidebar.

+---------------------------------------------------------------------+
|  [PageHeader: "Settings" or category name]                          |
+---------------------------------------------------------------------+
|                        |                                            |
|  Category Nav          |  Content Area                             |
|  (fixed, ~200px)       |  (fills remaining width, scrollable)      |
|                        |                                            |
|  General               |  +--------------------------------------+ |
|  Security     ←active  |  |  [Section Card]                      | |
|  Notifications         |  |  CardHeader: section title + desc    | |
|  Integrations          |  |  CardContent: form fields            | |
|  Advanced              |  |  CardFooter: Save / Cancel           | |
|                        |  +--------------------------------------+ |
|                        |                                            |
|                        |  +--------------------------------------+ |
|                        |  |  [Section Card]                      | |
|                        |  |  ...                                 | |
|                        |  +--------------------------------------+ |
|                        |                                            |
|                        |  +--------------------------------------+ |
|                        |  |  [Danger Zone Card]                  | |
|                        |  |  error-subtle tinted background      | |
|                        |  +--------------------------------------+ |
|                        |                                            |
+------------------------+--------------------------------------------+

The PageHeader spans the full width above both columns. It displays the top-level page title (for example, "Settings") in --force-font-size-3xl (30px), bold. It does not contain action buttons at the page-header level — all actions are scoped to individual section cards within the content area.

The category navigation column is approximately 200px wide (no layout token prescribes this; it should use min-content or a fixed value around 200px–224px to accommodate typical category label lengths). It is not the application sidebar — it uses a different visual treatment. Category items use the same anatomy as sidebar nav items: --force-font-size-sm (14px), medium weight, --force-color-text-secondary default, --force-color-bg-interactive-active and --force-color-text-interactive-active for the selected state with a 4px left border in --force-color-border-primary. The background of the category column is transparent — it inherits the content area background (--force-color-bg-surface), not the application sidebar's --force-color-bg-emphasis. This is the primary visual distinction between this settings nav and the application sidebar.

The category nav is sticky: it remains in view as the user scrolls the content area. Its top value must account for the TopBar height (--force-layout-header-height, 64px) to prevent it from scrolling underneath the fixed TopBar.

The content area to the right of the category nav fills all remaining width. Its content is a vertical stack of section cards separated by --force-spacing-6 (24px). Each section card uses the standard Card component with a CardHeader, CardContent, and CardFooter. Because settings forms are not data-dense, apply a reading-measure cap of approximately 720px to this inner column — settings is one of the opt-in use cases for a narrower column. The shell's content panel itself still fills the available width; this cap applies only to the inner column. Center or left-align this narrower column within the available content area.

Section Cards

Each section card corresponds to a logical cluster of related settings. The CardHeader contains a section title (--force-font-size-xl, 20px, semibold) and an optional one-sentence description (--force-font-size-sm, 14px, --force-color-text-secondary). The CardContent holds form fields following the form-layout pattern. The CardFooter holds the section-scoped Save and Cancel buttons.

Each section card saves independently. There is no single "Save all" button for the entire page. This prevents accidental changes across unrelated sections and makes the mental model clear: each card is a self-contained form unit.

The Danger Zone card, if present, always appears last in the content area. It uses --force-color-bg-error-subtle as its background, --force-color-border-error as its border, and --force-color-text-error for its section title. Actions inside it (Delete Account, Revoke All Access, Reset to Defaults) use the danger button variant. The Danger Zone card does not have a CardFooter save/cancel pair — its actions are immediate or open confirmation dialogs.

Category Navigation Depth

Categories are flat — a single level of items with no collapsible groups. If a category is complex enough to need sub-sections, those sub-sections are handled by multiple section cards within the content area, not by nesting the category navigation. Do not create a two-level settings category hierarchy.

Responsive Behavior

At and above --force-breakpoint-lg (992px), both the category nav column and the content area are displayed side by side. The category nav is sticky. The content area scrolls independently.

Between --force-breakpoint-md (768px) and --force-breakpoint-lg (992px), the category nav collapses into a horizontal pill-style tab row above the content area, using the Tabs component in the gray variant with containerSize="fullWidth". The active category tab uses the same active background treatment. The content area takes full width below this tab row and scrolls normally.

Below --force-breakpoint-md (768px), the category tabs remain visible but may overflow into a horizontally scrollable row if there are more than four categories. The content area cards stack full-width. CardFooter action buttons stack vertically (primary action on top, cancel below).

Token Usage

Element	Token
Page title size	--force-font-size-3xl (30px)
Page title weight	--force-font-weight-bold (700)
Category nav background	transparent (inherits --force-color-bg-surface)
Category item label — default	--force-color-text-secondary
Category item label — active	--force-color-text-interactive-active
Category item background — hover	--force-color-bg-interactive-hover
Category item background — active	--force-color-bg-interactive-active
Category item active left border	--force-color-border-primary (4px)
Category item border radius	--force-radius-md (6px)
Section card background	--force-color-bg-surface
Section card border	--force-color-border-default
Section card border radius	--force-radius-card (8px)
Section card padding	--force-spacing-6 (24px)
Section title size	--force-font-size-xl (20px)
Section title weight	--force-font-weight-semibold (600)
Section description color	--force-color-text-secondary
Section-to-section gap	--force-spacing-6 (24px)
Category sticky top offset	--force-layout-header-height (64px)
Danger Zone card background	--force-color-bg-error-subtle
Danger Zone card border	--force-color-border-error
Danger Zone title color	--force-color-text-error
Danger Zone action	danger button variant

Accessibility

The category navigation is a <nav> element with role="navigation" and aria-label="Settings categories". This distinguishes it from the application-level sidebar navigation. The active category item carries aria-current="page".

The settings content area is a <main> region (already provided by the page shell). Individual section cards do not need additional landmark roles unless they are complex enough to warrant role="region" with an aria-labelledby pointing to the section title — this is appropriate for the Danger Zone section.

Category navigation must be keyboard accessible via Tab and arrow keys. When a category is selected by keyboard, the browser must scroll the content area to the top or navigate to the new category view; the focus must move to the section card heading in the content area so screen reader users are informed of the context change.

When a section form is submitted (Save clicked), if validation errors occur, focus must move to the first field in error state and each error message must be announced via aria-live or via the aria-describedby relationship already on the input.

Tabs used in the responsive mobile/tablet category view must follow the ARIA tablist pattern: the tab row has role="tablist", each tab has role="tab" with aria-selected and aria-controls pointing to the corresponding content panel, and the content panels have role="tabpanel" with aria-labelledby pointing back to the controlling tab.

Guidance

Every settings category must produce a unique URL. Use route-based navigation for categories so that users can link directly to a specific settings section, back-button behavior works correctly, and the browser history reflects the navigation.

Do not make the entire settings page a single long scroll without category navigation. Even three or four unrelated setting groups merit the two-column navigation structure, because users arrive with a specific intent and scan for the relevant category rather than reading top-to-bottom.

Do NOT put navigation-related items (return to product, go to dashboard) in the category navigation list. Categories are settings topics only. A breadcrumb or back link in the PageHeader handles product-level navigation.

Do NOT embed charts, data tables, or dashboards in the settings page content area. Settings pages are for configuration. Monitoring and analytics data belongs on its own page with the appropriate list-page or detail-view composition.

Do NOT use the primary button variant more than once per section card. If a section has both a Save action and a secondary action like "Test Connection," the secondary action uses the secondary or outline button variant.

The Danger Zone section must always be the last section card on the page. Never place it at the top or in the middle. Users should have to scroll past all constructive options to reach destructive ones, creating a natural friction barrier.

Composition

The settings page composes the PageHeader (for the title), a vertical nav list of category links following the sidebar-navigation item style (without the full SidebarProvider wrapper — these are standalone nav items), the Card component (CardHeader, CardContent, CardFooter) for each section, the form-layout pattern within each card's content area, Button components (primary and secondary) in card footers, and optionally Tabs (gray variant) for the responsive category navigation at smaller breakpoints.