In the context of the wider admin redesign (#53322), a scalable, portable, and responsive design pattern for settings pages is crucial. This issue outlines some foundational principles and design conventions for such a pattern.

General Structure

The layout is defined by a consistent header and footer (dictated by the Layout (#53617)), framing the main content area where settings are organized into sections. Each section comprises a left column for title and description, and a right column for the actual settings. The left column makes it easy to scan the page at a high level and locate a specific setting.

Layout Conventions

• 12-Column Grid: The design is based on a 12-column grid system, ensuring flexibility and consistency across various screen sizes.
• Responsive Design: The layout adapts to different screen sizes. When the container shrinks beyond a certain breakpoint, the columns stack vertically, and spacing values are adjusted for optimal readability and usability.
• Horizontal Rules: Sections are visually separated by horizontal rules, providing clear demarcation between different groups of settings.

Section Structure

Each section contains the following elements:

• Section Title: A clear and concise heading for the section.
• Description: A brief description of the section's purpose, including a link to relevant documentation for further guidance.
• Settings Fields: The main content of the section, containing various input elements like text inputs, select dropdowns, checkboxes, radio buttons, and textareas.

Responsive Behavior

• Stacking Columns: On smaller screens/containers, the left and right columns stack vertically to make efficient use of limited space.
• Adjusted Spacing: Padding and margin values are reduced to maintain a clean and functional layout.

By adhering to these guidelines, we ensure a consistent, user-friendly, and responsive design for settings pages.

Contextual examples

To test the spec we can try applying it to some existing interfaces.

Editor preferences

In this example we see how the Editor preferences would adapt to different environments; the existing modal, a hypothetical page in site settings, and on mobile.

Page settings

This mockup shows the settings for a page in the Inspector (in the full-screen editor, and as a quick-edit interface in data views), in a hypothetical full-screen page / modal, and on mobile.