Rules

R1. Glass only in the navigation and control layer

Sidebars, toolbars, tab bars, popovers, menus, pop-up lists and floating control bars use Glass. Content such as tables, forms, cards and documents stays opaque. A sheet is an opaque card over a dimmed, lightly blurred backdrop.

R2. Never Glass on Glass

Controls inside a Glass bar are plain. Glass containers are never nested.

R3. Monochrome toolbar symbols

Toolbar and navigation symbols use the label colour. Colour signals state, never decoration.

R4. One prominent action per view

The prominent button style appears once in a view. Every other action uses the tinted, normal or plain style.

R5. Destructive is red and confirmed

Destructive actions use the destructive style and ask for confirmation, or, for frequent and reversible edits, act at once and offer Undo.

R6. Concentric corners

A rounded shape inside another uses the outer radius minus the padding between them, so the curves run parallel.

R7. Outlined icons

Icons are outlined line symbols sized to the text beside them. A filled symbol shows only a selected state.

R8. Large titles for hubs

Hubs, the screens that lead into an area of a product, open with a large title. Working screens use the regular page title row.

R9. Segmented controls are never empty

A segmented control with single selection always keeps one segment selected.

R10. No popover on a popover

Close the first popover before opening anything else, then open a sheet or navigate.

R11. Every effect has a fallback

Reduce Motion, Reduce Transparency and Increase Contrast swap in plain versions of every animation, material and subtle colour.

R12. No floating action buttons

Global actions live in the toolbar and page actions in the title row, never in a button floating over content.

R13. Alerts are rare

Use alerts only for critical, actionable moments, with at most three buttons that have specific titles. Never “OK” on its own.

R14. Hit targets

Every control is at least 44 × 44 points on touch screens and at least 28 × 28 points with a pointer.

R15. Text conventions

Title Case on buttons and menu items, an ellipsis (…) when a control opens another view, and tabular figures for money and quantities.

R16. Design values only

Colours, type sizes, radii, shadows and durations come from the system’s named design values, never from one-off values.

R17. Real states

Every list and screen has designed empty, loading and error states.

R18. Keyboard parity

Everything works from the keyboard with a visible focus ring, and focus is never stolen or lost while people work.