apple-hig-macos-window-layout

Apple HIG macOS Window Layout

Build a stable, resizable, native macOS window shell organized around the main task: titlebar, toolbar, sidebar, content, inspector, sizing, panels, sheets, and menu bar companions. Reach for it when shaping the overall window structure rather than one isolated component.

Purpose

Use this skill when designing or implementing the overall macOS app window shell: titlebar, toolbar, sidebar, content area, inspector, window sizing, panels, sheets, and menu bar companion windows.

Core rule

A macOS window should feel stable, resizable, native, and organized around the main task.

When to use this skill

Use for:

• Main macOS app windows
• Utility windows
• Menu bar companion windows
• Split view layout
• Sidebar + detail + inspector
• Toolbar placement
• Window sizing
• Settings window sizing
• Floating panels
• Sheets

When not to use this skill

Do not use for:

• iPhone layout only
• Typography only
• Sidebar content only
• Menu bar popover only

Standard productivity window

┌─────────────────────────────────────────────┐
│ Toolbar / titlebar                          │
├──────────────┬───────────────────┬──────────┤
│ Sidebar      │ Main Content      │ Inspector│
│              │                   │          │
└──────────────┴───────────────────┴──────────┘

Recommended widths:

Sidebar: 220–280 px
Main: flexible, dominant
Inspector: 280–360 px

Window size guidance

Small utility:       520 × 420
Medium productivity: 900 × 640
Large workspace:     1100 × 720+
Settings:            520–640 × 360–520
Menu bar popover:    320–420 wide

Use minimum sizes so layout does not break.

SwiftUI window setup

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            RootWindowView()
                .frame(minWidth: 900, minHeight: 640)
        }

        Settings {
            SettingsView()
                .frame(width: 560, height: 420)
        }
    }
}