{"abstract":[{"text":"A consistent layout that adapts across display sizes, orientations, and multitasking configurations helps people understand and enjoy your app or game on all their devices.","type":"text"}],"hierarchy":{"paths":[["doc:\/\/com.apple.documentation\/documentation\/technologies","doc:\/\/com.apple.HIG\/design\/human-interface-guidelines","doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/foundations"]]},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/layout"},"kind":"article","legalNotices":{"copyright":"Copyright © 2026 Apple Inc. All rights reserved.","privacyPolicy":"https:\/\/www.apple.com\/privacy\/privacy-policy","termsOfUse":"https:\/\/www.apple.com\/legal\/internet-services\/terms\/site.html"},"metadata":{"availableLanguages":["en-US","zh-CN","ja-JP","ko-KR"],"customMetadata":{"alert-date":"2026-09-09","alert-text":"Updated guidance to reflect current best practices.","supported-platforms":"ios,ipados,macos,tvos,visionos,watchos"},"images":[{"identifier":"layout.svg","type":"icon"},{"identifier":"foundations-layout-thumbnail.png","type":"card"}],"role":"article","title":"Layout"},"primaryContentSections":[{"content":[{"inlineContent":[{"identifier":"foundations-layout-intro.png","type":"image"}],"type":"paragraph"},{"inlineContent":[{"text":"Your layout provides the structure for people to understand your content from the moment they open your app. Familiar relationships between controls and content let people use and discover features right away, and make your design feel at home on every platform.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"Apple provides templates and layout guides that can help you integrate Apple technologies and design your apps and games to run on all Apple platforms. See ","type":"text"},{"identifier":"https:\/\/developer.apple.com\/design\/resources\/","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"anchor":"Visual-hierarchy","level":2,"text":"Visual hierarchy","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"Order content by relative importance.","type":"text"}],"type":"strong"},{"text":" People often start by viewing content in reading order — that is, from top to bottom and from the leading to trailing side — so place the most important items near the top and leading side of the window or display. To support right-to-left languages, prefer standard system components that can automatically adapt UI elements to better reflect each language’s natural reading order. For guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/right-to-left","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Align elements to make them easier to scan, and use indentation to convey hierarchy.","type":"text"}],"type":"strong"},{"text":" Alignment makes an app look neat and organized, and can help people track content while scrolling or moving their eyes. People assume that aligned items are related to each other, and conversely, they perceive indented items as subordinate to the item they follow. Because of this, using alignment and indentation deliberately can help people understand your information hierarchy.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Group related items to clearly express related information or functions.","type":"text"}],"type":"strong"},{"text":" For example, you might use negative space, container shapes, or separator lines to show which elements are related and which are unrelated.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Use progressive disclosure to make layouts cleaner and easier to interact with.","type":"text"}],"type":"strong"},{"text":" An interface with too much content and too many choices makes it harder to find information quickly, and harder to understand the choices that are available. Use disclosure triangles, menus, or nested views to reduce how much content to initially display; or use scrollable sections to showcase additional content, which is particularly useful for media-focused apps like those for video, music, or books.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Differentiate controls from content.","type":"text"}],"type":"strong"},{"text":" Take advantage of the Liquid Glass material on all platforms that support it to provide a distinct appearance for your controls. Instead of applying a solid or semi-opaque background color beneath controls, use a scroll edge effect to visually elevate controls above content. For guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/scroll-views","isActive":true,"type":"reference"},{"text":". For full-screen background content, be sure to extend it underneath sidebars, toolbars, and tab bars to fit the entire screen or window.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"If scaling a background image to the full window edge results in components like sidebars or inspectors covering important parts of the image, you can use a background extension effect to flip and blur the image, mirroring it beneath adjacent components and providing the appearance that the background image extends beneath them. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/View\/backgroundExtensionEffect()","isActive":true,"type":"reference"},{"text":" and ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UIBackgroundExtensionView","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"identifier":"layout-background-extention-view.png","metadata":{"deviceFrame":"iPadPro12-9"},"type":"image"}],"type":"paragraph"},{"anchor":"Adaptability","level":2,"text":"Adaptability","type":"heading"},{"inlineContent":[{"text":"Apps and games need to adapt to different display sizes, orientation changes, window sizes, and multitasking states. In iOS, iPadOS, tvOS, and visionOS, the system defines characteristics of the device environment that can affect the way your app or game looks. Use SwiftUI or Auto Layout to ensure that your interface adapts to them.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"Here are some of the most common device and system characteristics that apps need to handle:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"text":"Regular and compact horizontal and vertical ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/layout#Size-classes","isActive":true,"overridingTitle":"size classes","overridingTitleInlineContent":[{"text":"size classes","type":"text"}],"type":"reference"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Different device screen sizes","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Different device orientations and aspect ratios","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"System features like the Dynamic Island","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"External display support, Display Zoom, and resizable windows on iPad and Mac","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Text-size changes","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Locale-based internationalization features like left-to-right\/right-to-left layout direction, date\/time\/number formatting, font variation, and text length","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"inlineContent":[{"inlineContent":[{"text":"Design a layout that adapts gracefully and consistently.","type":"text"}],"type":"strong"},{"text":" People expect your experience to remain familiar when they rotate their device, resize a window, add another display, or switch to a different device. You can help ensure an adaptable interface by respecting system-defined safe areas, margins, and guides (where available) and specifying layout modifiers to fine-tune the placement of views in your interface.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"Even if your app is locked to a certain orientation, such as a landscape-only game, it’s still important to ensure your interface resizes well to provide the best experience across devices and window sizes.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Be prepared for text-size changes.","type":"text"}],"type":"strong"},{"text":" People use ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/typography#Supporting-Dynamic-Type","isActive":true,"overridingTitle":"Dynamic Type","overridingTitleInlineContent":[{"text":"Dynamic Type","type":"text"}],"type":"reference"},{"text":" to increase text size to be more readable, which occurs at the system level. Apps that don’t respond to this setting can be difficult or impossible to use for people who rely on this feature. Support Dynamic Type by adjusting your layout to accommodate text at larger sizes. For example, horizontally adjacent views may need to stack vertically to provide more space for text; table rows or other containers may need to grow in height so that text isn’t cropped or doesn’t overlap other content; and table rows with a single line of text by default might need to grow vertically to accommodate multiple lines of text.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"To support Dynamic Type in your Unity-based game, use Apple’s accessibility plug-in (for developer guidance, see ","type":"text"},{"identifier":"https:\/\/github.com\/apple\/unityplugins\/blob\/main\/plug-ins\/Apple.Accessibility\/Apple.Accessibility_Unity\/Assets\/Apple.Accessibility\/Documentation~\/Apple.Accessibility.md","isActive":true,"type":"reference"},{"text":"). For guidance on displaying text in your app, see ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/typography","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Preview your app on multiple devices, using different size classes, localizations, and text sizes.","type":"text"}],"type":"strong"},{"text":" You can streamline the testing process by first testing versions of your experience that use the largest and the smallest layouts. You can test on a simulated device in ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/Xcode\/device-hub","isActive":true,"type":"reference"},{"text":" to check for clipping and other layout issues. For example, you can use Device Hub to make sure your layout looks great when your app is resized on iPad or in iPhone Mirroring on Mac.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"When necessary, scale background artwork in response to display changes.","type":"text"}],"type":"strong"},{"text":" Viewing your app or game in a different context — such as on a screen with a different aspect ratio — might make your artwork appear cropped, letterboxed, or pillarboxed. If this happens, don’t change the aspect ratio of the artwork; instead, scale it so that it fills the screen completely. Note that since windows can be very wide and short or tall and narrow, background artwork may often need to extend beyond what is typically visible in a more standard display aspect ratio.","type":"text"}],"type":"paragraph"},{"anchor":"Size-classes","level":3,"text":"Size classes","type":"heading"},{"inlineContent":[{"text":"In iOS and iPadOS, size classes are an indication of how much horizontal and vertical space is available to an app’s interface.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"Each dimension — horizontal and vertical — is represented by one of two size classes: ","type":"text"},{"inlineContent":[{"text":"compact","type":"text"}],"type":"emphasis"},{"text":" or ","type":"text"},{"inlineContent":[{"text":"regular","type":"text"}],"type":"emphasis"},{"text":". The horizontal size class determines whether an app is narrow (compact) or wide (regular), while the vertical size class determines whether it is short (compact) or tall (regular).","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"The system sets size classes based on the device type, ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/windows","isActive":true,"overridingTitle":"window","overridingTitleInlineContent":[{"text":"window","type":"text"}],"type":"reference"},{"text":" configuration, and ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/multitasking","isActive":true,"overridingTitle":"multitasking","overridingTitleInlineContent":[{"text":"multitasking","type":"text"}],"type":"reference"},{"text":" state; for example, whether an app is full screen, in Slide Over, or mirrored from an iPhone to a Mac. Depending on their environment, iOS and iPadOS apps can exist in every combination of size classes.","type":"text"}],"type":"paragraph"},{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"app-layout-square.png","metadata":{"abstract":[{"text":"Compact width, compact height","type":"text"}],"deviceFrame":"iPadAir-13"},"type":"image"}],"type":"paragraph"}],"size":1},{"alignment":"leading","content":[{"inlineContent":[{"identifier":"app-layout-vertical.png","metadata":{"abstract":[{"text":"Compact width, regular height","type":"text"}],"deviceFrame":"iPadAir-13"},"type":"image"}],"type":"paragraph"}],"size":1}],"numberOfColumns":2,"type":"row"},{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"app-layout-horizontal.png","metadata":{"abstract":[{"text":"Regular width, compact height","type":"text"}],"deviceFrame":"iPadAir-13"},"type":"image"}],"type":"paragraph"}],"size":1},{"alignment":"leading","content":[{"inlineContent":[{"identifier":"app-layout-full.png","metadata":{"abstract":[{"text":"Regular width, regular height","type":"text"}],"deviceFrame":"iPadAir-13"},"type":"image"}],"type":"paragraph"}],"size":1}],"numberOfColumns":2,"type":"row"},{"inlineContent":[{"text":"For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UITraitChangeObservable-67e94","isActive":true,"type":"reference"},{"text":" and ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/UserInterfaceSizeClass","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Determine layout based on size classes, not device type or orientation.","type":"text"}],"type":"strong"},{"text":" Size classes describe the actual space available, regardless of whether an app is in portrait or landscape. Conversely, a device’s orientation and type (also called its ","type":"text"},{"inlineContent":[{"text":"idiom","type":"text"}],"type":"emphasis"},{"text":") aren’t useful for making layout decisions because they don’t provide your app with information about how much space is available.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"Size classes also let your app’s interface adapt to a wide range of window sizes. For example, when a person runs your app in macOS with iPhone Mirroring, they can freely resize its width and height; or they can resize an iPad app when multitasking in iPadOS or when running it in macOS.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Consider all possible combinations of size classes.","type":"text"}],"type":"strong"},{"text":" Your app can appear in a variety of size classes in both portrait and landscape aspect ratios, and it’s important to consider all of them to provide a good experience. A layout solely designed for landscape on iPhone with regular width and compact height might not take advantage of the vertical space available on iPad in landscape when someone resizes the window to regular height. Conversely, designing exclusively for compact portrait could leave extra space when someone resizes the app window to a regular width on iPad.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Keep functionality the same as size classes change, and keep layout changes recognizable and familiar to the platform.","type":"text"}],"type":"strong"},{"text":" Don’t change your app’s functionality based on the space it occupies. However, you can change the amount of functionality that’s visible onscreen as the amount of space changes. Consider taking advantage of larger spaces to switch from a ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/tab-bars","isActive":true,"overridingTitle":"tab bar","overridingTitleInlineContent":[{"text":"tab bar","type":"text"}],"type":"reference"},{"text":" to a ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/sidebars","isActive":true,"overridingTitle":"sidebar","overridingTitleInlineContent":[{"text":"sidebar","type":"text"}],"type":"reference"},{"text":" or expose functionality that might otherwise be grouped into an overflow menu.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"Similarly, while an app’s size classes might change when someone resizes it, its idiom — the device type it’s made for — remains the same: keep the layout recognizable and familiar to the platform even when resizing.","type":"text"}],"type":"paragraph"},{"anchor":"Guides-and-safe-areas","level":2,"text":"Guides and safe areas","type":"heading"},{"inlineContent":[{"text":"A ","type":"text"},{"inlineContent":[{"text":"layout guide","type":"text"}],"type":"emphasis"},{"text":" defines a rectangular region that helps you position, align, and space your content on the screen. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UILayoutGuide","isActive":true,"type":"reference"},{"text":" and ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSLayoutGuide","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"A ","type":"text"},{"inlineContent":[{"text":"safe area","type":"text"}],"type":"emphasis"},{"text":" defines the area within a window that isn’t covered on the edge by a hardware feature or another view within the window, like a toolbar, tab bar, or status bar. Respecting the safe area is essential to make sure system UI and hardware features like the Dynamic Island don’t obstruct content and controls. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/SafeAreaRegions","isActive":true,"type":"reference"},{"text":" and ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/positioning-content-relative-to-the-safe-area","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"anchor":"Platform-considerations","level":2,"text":"Platform considerations","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"No additional considerations for iOS or iPadOS.","type":"text"}],"type":"emphasis"}],"type":"paragraph"},{"anchor":"macOS","level":3,"text":"macOS","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"Avoid placing controls or critical information at the bottom of a window.","type":"text"}],"type":"strong"},{"text":" People often move windows so that the bottom edge is below the bottom of the screen.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Avoid displaying content behind the camera housing at the top edge of the window.","type":"text"}],"type":"strong"},{"text":" For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/BundleResources\/Information-Property-List\/NSPrefersDisplaySafeAreaCompatibilityMode","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"anchor":"tvOS","level":3,"text":"tvOS","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"Adhere to the screen’s safe area.","type":"text"}],"type":"strong"},{"text":" Inset primary content 60 points from the top and bottom of the screen, and 80 points from the sides. Providing these margins ensures your content is visible regardless of TV compatibility settings or overscan cropping.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"identifier":"visual-design-safe-zone.png","type":"image"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Include appropriate padding between focusable elements.","type":"text"}],"type":"strong"},{"text":" When you use UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they’re focused, and make sure you don’t let them overlap important information. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/about-focus-interactions-for-apple-tv","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"identifier":"visual-design-padding.png","type":"image"}],"type":"paragraph"},{"anchor":"Grids","level":4,"text":"Grids","type":"heading"},{"inlineContent":[{"text":"The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item comes into focus.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"If you use the UIKit collection view flow element, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UICollectionViewFlowLayout","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"tabs":[{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-2-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Two-column-grid","level":4,"text":"Two-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"860 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Two-column"},{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-3-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Three-column-grid","level":4,"text":"Three-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"560 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Three-column"},{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-4-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Four-column-grid","level":4,"text":"Four-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"410 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Four-column"},{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-5-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Five-column-grid","level":4,"text":"Five-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"320 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Five-column"},{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-6-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Six-column-grid","level":4,"text":"Six-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"260 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Six-column"},{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-7-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Seven-column-grid","level":4,"text":"Seven-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"217 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Seven-column"},{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-8-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Eight-column-grid","level":4,"text":"Eight-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"184 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Eight-column"},{"content":[{"columns":[{"alignment":"leading","content":[{"inlineContent":[{"identifier":"visual-design-grid-9-column.png","type":"image"}],"type":"paragraph"},{"anchor":"Nine-column-grid","level":4,"text":"Nine-column grid","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Attribute","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Value","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Unfocused content width","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"160 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Horizontal spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"40 pt","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Minimum vertical spacing","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"100 pt","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"size":1}],"numberOfColumns":1,"type":"row"}],"title":"Nine-column"}],"type":"tabNavigator"},{"inlineContent":[{"inlineContent":[{"text":"Include additional vertical spacing for titled rows.","type":"text"}],"type":"strong"},{"text":" If a row has a title, provide enough spacing between the bottom of the previous unfocused row and the center of the title to avoid crowding. Also provide spacing between the bottom of the title and the top of the unfocused items in the row.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Use consistent spacing.","type":"text"}],"type":"strong"},{"text":" When content isn’t consistently spaced, it no longer looks like a grid and it’s harder for people to scan.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Make partially hidden content look symmetrical.","type":"text"}],"type":"strong"},{"text":" To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen.","type":"text"}],"type":"paragraph"},{"anchor":"visionOS","level":3,"text":"visionOS","type":"heading"},{"inlineContent":[{"text":"In visionOS, you can lay out content within a window, a bounded 3D volume, or an immersive space. The guidance below focuses on laying out content in a window or volume; for guidance on displaying content spatially and best practices for using depth, scale, and positioning, see ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/spatial-layout","isActive":true,"type":"reference"},{"text":". To learn more about windows and volumes in visionOS, see ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/windows#visionOS","isActive":true,"overridingTitle":"Windows > visionOS","overridingTitleInlineContent":[{"text":"Windows > visionOS","type":"text"}],"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"In general, support resizing.","type":"text"}],"type":"strong"},{"text":" The ability to resize windows and volumes is standard behavior in visionOS, just as in macOS and iPadOS. When you allow resizing, make sure your layout adapts well as it changes size, and prefer to keep content horizontally centered at very large sizes so people can easily view and interact with it.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"You can also choose to set a minimum and maximum size for windows, volumes, and attached UI elements like ornaments. Use these settings to keep elements from overlapping at small sizes, and to keep large layouts from becoming too unwieldy; but don’t use minimum and maximum sizes as a way to prevent resizing. For example, in Safari, people can resize browser windows, but the custom navigation bar ornament has a fixed maximum size so that controls remain easy to access. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/visionOS\/positioning-and-sizing-windows","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Use 3D content sparingly in windows.","type":"text"}],"type":"strong"},{"text":" While windows in visionOS can display 3D content at a fixed depth, reserve this for meaningful moments alongside 2D content. For example, an educational app might display an inline 3D model of a rocket next to information about the model. When displaying 3D content inline, place it inset in the window to avoid it colliding with other content or controls, or appearing unpredictably outside the window edge.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"text":"To display larger models or views that primarily consist of 3D content, consider using a volume or placing content in an immersive space.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Display supplemental content in an adjacent window, not in an ornament.","type":"text"}],"type":"strong"},{"text":" While ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/ornaments","isActive":true,"overridingTitle":"ornaments","overridingTitleInlineContent":[{"text":"ornaments","type":"text"}],"type":"reference"},{"text":" are flexible enough to act as custom components, they are best for app-specific interactive controls like toolbars and video playback controls, not supplemental content. To display a supplemental content view, open a new window next to the current one using ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/Scene\/defaultWindowPlacement(_:)","isActive":true,"type":"reference"},{"text":" instead of placing the content in an ornament. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/visionOS\/positioning-and-sizing-windows","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Include enough space around controls for them to be easy to interact with.","type":"text"}],"type":"strong"},{"text":" Put enough space around controls to make them clearly identifiable, and to prevent the system-provided hover effect from obscuring other content. For example, place buttons so their centers are at least 60 points apart. For guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/eyes","isActive":true,"type":"reference"},{"text":", ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/spatial-layout","isActive":true,"type":"reference"},{"text":", and ","type":"text"},{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/buttons#visionOS","isActive":true,"overridingTitle":"Buttons > visionOS","overridingTitleInlineContent":[{"text":"Buttons > visionOS","type":"text"}],"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"anchor":"watchOS","level":3,"text":"watchOS","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"Avoid placing more than two or three controls side by side in your interface.","type":"text"}],"type":"strong"},{"text":" As a general rule, display no more than three buttons that contain glyphs — or two buttons that contain text — in a row. Although it’s usually better to let text buttons span the full width of the screen, two side-by-side buttons with short text labels can also work well, as long as the screen doesn’t scroll.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"identifier":"layout-controls.png","metadata":{"deviceFrame":"watchSeries10-46"},"type":"image"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Support autorotation in views people might want to show others.","type":"text"}],"type":"strong"},{"text":" When people flip their wrist away, apps typically respond to the motion by sleeping the display, but in some cases it makes sense to autorotate the content. For example, a wearer might want to show an image to a friend or display a QR code to a reader. For developer guidance, see ","type":"text"},{"identifier":"doc:\/\/com.apple.documentation\/documentation\/WatchKit\/WKExtension\/isAutorotating","isActive":true,"type":"reference"},{"text":".","type":"text"}],"type":"paragraph"},{"anchor":"Resources","level":2,"text":"Resources","type":"heading"},{"anchor":"Related","level":4,"text":"Related","type":"heading"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/right-to-left","isActive":true,"type":"reference"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/spatial-layout","isActive":true,"type":"reference"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/layout-and-organization","isActive":true,"type":"reference"}],"type":"paragraph"},{"anchor":"Developer-documentation","level":4,"text":"Developer documentation","type":"heading"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/composing-custom-layouts-with-swiftui","isActive":true,"type":"reference"},{"text":" — SwiftUI","type":"text"}],"type":"paragraph"},{"anchor":"Videos","level":4,"text":"Videos","type":"heading"},{"items":["doc:\/\/com.apple.documentation\/videos\/play\/wwdc2025\/356","doc:\/\/com.apple.documentation\/videos\/play\/wwdc2022\/10056","doc:\/\/com.apple.documentation\/videos\/play\/wwdc2017\/802"],"style":"compactGrid","type":"links"},{"anchor":"Change-log","level":2,"text":"Change log","type":"heading"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Date","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Changes","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"September 9, 2026","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Updated guidance to reflect current best practices.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"September 9, 2025","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Added specifications for iPhone 17, iPhone Air, iPhone 17 Pro, iPhone 17 Pro Max, Apple Watch SE 3, Apple Watch Series 11, and Apple Watch Ultra 3.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"June 9, 2025","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Added guidance for Liquid Glass.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"March 7, 2025","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Added specifications for iPhone 16e, iPad 11-inch, iPad Air 11-inch, and iPad Air 13-inch.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"September 9, 2024","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Added specifications for iPhone 16, iPhone 16 Plus, iPhone 16 Pro, iPhone 16 Pro Max, and Apple Watch Series 10.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"June 10, 2024","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Made minor corrections and organizational updates.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"February 2, 2024","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Enhanced guidance for avoiding system controls in iPadOS app layouts, and added specifications for 10.9-inch iPad Air and 8.3-inch iPad mini.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"December 5, 2023","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Clarified guidance on centering content in a visionOS window.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"September 15, 2023","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Added specifications for iPhone 15 Pro Max, iPhone 15 Pro, iPhone 15 Plus, iPhone 15, Apple Watch Ultra 2, and Apple Watch SE.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"June 21, 2023","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Updated to include guidance for visionOS.","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"September 14, 2022","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Added specifications for iPhone 14 Pro Max, iPhone 14 Pro, iPhone 14 Plus, iPhone 14, and Apple Watch Ultra.","type":"text"}],"type":"paragraph"}]]],"type":"table"}],"kind":"content"}],"schemaVersion":{"major":0,"minor":3,"patch":0},"sections":[],"topicSectionsStyle":"compactGrid","references":{"1AAA030E-2ECA-47D8-AE09-6D7B72A840F6":{"alt":null,"identifier":"1AAA030E-2ECA-47D8-AE09-6D7B72A840F6","type":"image","variants":[{"traits":["1x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/3055294D-836B-4513-B7B0-0BC5666246B0\/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6\/10044_wide_250x141_1x.jpg"},{"traits":["2x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/3055294D-836B-4513-B7B0-0BC5666246B0\/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6\/10044_wide_250x141_2x.jpg"},{"traits":["3x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/3055294D-836B-4513-B7B0-0BC5666246B0\/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6\/10044_wide_250x141_3x.jpg"}]},"1E740BE0-AF55-430B-B8C2-346CA2982476":{"alt":null,"identifier":"1E740BE0-AF55-430B-B8C2-346CA2982476","type":"image","variants":[{"traits":["1x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/124\/1E740BE0-AF55-430B-B8C2-346CA2982476\/6549_wide_250x141_1x.jpg"},{"traits":["2x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/124\/1E740BE0-AF55-430B-B8C2-346CA2982476\/6549_wide_250x141_2x.jpg"},{"traits":["3x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/124\/1E740BE0-AF55-430B-B8C2-346CA2982476\/6549_wide_250x141_3x.jpg"}]},"2546ECBD-6443-41EC-921D-6429026F8B67":{"alt":null,"identifier":"2546ECBD-6443-41EC-921D-6429026F8B67","type":"image","variants":[{"traits":["1x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/7\/2546ECBD-6443-41EC-921D-6429026F8B67\/1700_wide_250x141_1x.jpg"},{"traits":["2x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/7\/2546ECBD-6443-41EC-921D-6429026F8B67\/1700_wide_250x141_2x.jpg"},{"traits":["3x"],"url":"https:\/\/devimages-cdn.apple.com\/wwdc-services\/images\/7\/2546ECBD-6443-41EC-921D-6429026F8B67\/1700_wide_250x141_3x.jpg"}]},"app-layout-full.png":{"alt":"An illustration of an iPad in landscape orientation with an empty app window in the center of the screen. The window is wide and tall, and occupies most of the screen.","identifier":"app-layout-full.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/app-layout-full@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/app-layout-full~dark@2x.png"}]},"app-layout-horizontal.png":{"alt":"An illustration of an iPad in landscape orientation with an empty app window in the center of the screen. The window is wide and short, and occupies roughly half of the screen.","identifier":"app-layout-horizontal.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/app-layout-horizontal@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/app-layout-horizontal~dark@2x.png"}]},"app-layout-square.png":{"alt":"An illustration of an iPad in landscape orientation with an empty app window in the center of the screen. The window is narrow and short, and occupies roughly a quarter of the screen.","identifier":"app-layout-square.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/app-layout-square@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/app-layout-square~dark@2x.png"}]},"app-layout-vertical.png":{"alt":"An illustration of an iPad in landscape orientation with an empty app window in the center of the screen. The window is narrow and tall, and occupies roughly half of the screen.","identifier":"app-layout-vertical.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/app-layout-vertical@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/app-layout-vertical~dark@2x.png"}]},"components-layout-and-organization-thumbnail.png":{"alt":"A stylized representation of a window that's divided into three areas: a toolbar above two side-by-side views, suggesting layout and organization. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-layout-and-organization-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-layout-and-organization-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-layout-and-organization-thumbnail~dark@2x.png"}]},"components-ornaments-thumbnail.png":{"alt":"A stylized representation of an ornament at the bottom of a window. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-ornaments-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-ornaments-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-ornaments-thumbnail~dark@2x.png"}]},"components-scroll-views-thumbnail.png":{"alt":"A stylized representation of a scrollable image view. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-scroll-views-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-scroll-views-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-scroll-views-thumbnail~dark@2x.png"}]},"components-sidebars-thumbnail.png":{"alt":"A stylized representation of a portion of a window's sidebar displaying a section and some folders. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-sidebars-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-sidebars-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-sidebars-thumbnail~dark@2x.png"}]},"components-tab-bars-thumbnail.png":{"alt":"A stylized representation of a tab bar containing three placeholder icons with names. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-tab-bars-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-tab-bars-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-tab-bars-thumbnail~dark@2x.png"}]},"components-windows-thumbnail.png":{"alt":"A stylized representation of a window with close, minimize, and full-screen buttons. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-windows-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-windows-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-windows-thumbnail~dark@2x.png"}]},"doc://com.apple.HIG/design/Human-Interface-Guidelines/buttons#visionOS":{"abstract":[],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/buttons#visionOS","kind":"section","title":"visionOS","type":"topic","url":"\/design\/human-interface-guidelines\/buttons#visionOS"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/eyes":{"abstract":[{"text":"In visionOS, people look at a virtual object to identify it as a target they can interact with.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/eyes","images":[{"identifier":"eyes.svg","type":"icon"},{"identifier":"inputs-eyes-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Eyes","type":"topic","url":"\/design\/human-interface-guidelines\/eyes"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/foundations":{"abstract":[{"text":"Understand how fundamental design elements help you create rich experiences.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/foundations","images":[{"identifier":"overview.svg","type":"icon"},{"identifier":"foundations.png","type":"card"}],"kind":"article","role":"collectionGroup","title":"Foundations","type":"topic","url":"\/design\/human-interface-guidelines\/foundations"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/layout#Size-classes":{"abstract":[],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/layout#Size-classes","kind":"section","title":"Size classes","type":"topic","url":"\/design\/human-interface-guidelines\/layout#Size-classes"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/layout-and-organization":{"abstract":[],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/layout-and-organization","images":[{"identifier":"layout-and-organization.svg","type":"icon"},{"identifier":"components-layout-and-organization-thumbnail.png","type":"card"}],"kind":"article","role":"collectionGroup","title":"Layout and organization","type":"topic","url":"\/design\/human-interface-guidelines\/layout-and-organization"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/multitasking":{"abstract":[{"text":"Multitasking lets people switch quickly from one app to another, performing tasks in each.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/multitasking","images":[{"identifier":"multitasking.svg","type":"icon"},{"identifier":"patterns-multitasking-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Multitasking","type":"topic","url":"\/design\/human-interface-guidelines\/multitasking"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/ornaments":{"abstract":[{"text":"In visionOS, an ornament presents controls and information related to a window, without crowding or obscuring the window’s contents.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/ornaments","images":[{"identifier":"components-ornaments-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Ornaments","type":"topic","url":"\/design\/human-interface-guidelines\/ornaments"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/right-to-left":{"abstract":[{"text":"Support right-to-left languages like Arabic and Hebrew by reversing your interface as needed to match the reading direction of the related scripts.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/right-to-left","images":[{"identifier":"right-to-left.svg","type":"icon"},{"identifier":"foundations-right-to-left-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Right to left","type":"topic","url":"\/design\/human-interface-guidelines\/right-to-left"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/scroll-views":{"abstract":[{"text":"A scroll view lets people view content that’s larger than the view’s boundaries by moving the content vertically or horizontally.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/scroll-views","images":[{"identifier":"components-scroll-views-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Scroll views","type":"topic","url":"\/design\/human-interface-guidelines\/scroll-views"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/sidebars":{"abstract":[{"text":"A sidebar appears on the leading side of a view and lets people navigate between areas of your app or top-level collections of content, like folders and playlists.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/sidebars","images":[{"identifier":"components-sidebars-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Sidebars","type":"topic","url":"\/design\/human-interface-guidelines\/sidebars"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/spatial-layout":{"abstract":[{"text":"Spatial layout techniques help you take advantage of the infinite canvas of Apple Vision Pro and present your content in engaging, comfortable ways.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/spatial-layout","images":[{"identifier":"spatial-layout.svg","type":"icon"},{"identifier":"foundations-spatial-layout-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Spatial layout","type":"topic","url":"\/design\/human-interface-guidelines\/spatial-layout"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/tab-bars":{"abstract":[{"text":"A tab bar lets people navigate between top-level sections of your app.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/tab-bars","images":[{"identifier":"components-tab-bars-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Tab bars","type":"topic","url":"\/design\/human-interface-guidelines\/tab-bars"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/typography":{"abstract":[{"text":"Your typographic choices can help you display legible text, convey an information hierarchy, communicate important content, and express your brand or style.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/typography","images":[{"identifier":"typography.svg","type":"icon"},{"identifier":"foundations-typography-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Typography","type":"topic","url":"\/design\/human-interface-guidelines\/typography"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/typography#Supporting-Dynamic-Type":{"abstract":[],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/typography#Supporting-Dynamic-Type","kind":"section","title":"Supporting Dynamic Type","type":"topic","url":"\/design\/human-interface-guidelines\/typography#Supporting-Dynamic-Type"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/windows":{"abstract":[{"text":"A window presents UI views and components in your app or game.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/windows","images":[{"identifier":"components-windows-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Windows","type":"topic","url":"\/design\/human-interface-guidelines\/windows"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/windows#visionOS":{"abstract":[],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/windows#visionOS","kind":"section","title":"visionOS","type":"topic","url":"\/design\/human-interface-guidelines\/windows#visionOS"},"doc://com.apple.HIG/design/human-interface-guidelines":{"abstract":[{"text":"The HIG contains guidance and best practices that can help you design a","type":"text"},{"text":" ","type":"text"},{"text":"great experience for any Apple platform.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/human-interface-guidelines","images":[{"identifier":"human-interface-guidelines-page-image-card.png","type":"card"}],"kind":"article","role":"collection","title":"Human Interface Guidelines","type":"topic","url":"\/design\/human-interface-guidelines"},"doc://com.apple.documentation/documentation/AppKit/NSLayoutGuide":{"abstract":[{"text":"A rectangular area that can interact with Auto Layout.","type":"text"}],"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"identifier","text":"NSLayoutGuide"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSLayoutGuide","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"NSLayoutGuide"}],"role":"symbol","title":"NSLayoutGuide","type":"topic","url":"\/documentation\/appkit\/nslayoutguide"},"doc://com.apple.documentation/documentation/BundleResources/Information-Property-List/NSPrefersDisplaySafeAreaCompatibilityMode":{"abstract":[{"text":"A Boolean value that indicates whether the app prefers to run in compatibility mode when necessary.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/BundleResources\/Information-Property-List\/NSPrefersDisplaySafeAreaCompatibilityMode","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"NSPrefersDisplaySafeAreaCompatibilityMode"}],"role":"symbol","title":"NSPrefersDisplaySafeAreaCompatibilityMode","type":"topic","url":"\/documentation\/bundleresources\/information-property-list\/nsprefersdisplaysafeareacompatibilitymode"},"doc://com.apple.documentation/documentation/SwiftUI/SafeAreaRegions":{"abstract":[{"text":"A set of symbolic safe area regions.","type":"text"}],"fragments":[{"kind":"keyword","text":"struct"},{"kind":"text","text":" "},{"kind":"identifier","text":"SafeAreaRegions"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/SafeAreaRegions","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"SafeAreaRegions"}],"role":"symbol","title":"SafeAreaRegions","type":"topic","url":"\/documentation\/swiftui\/safearearegions"},"doc://com.apple.documentation/documentation/SwiftUI/Scene/defaultWindowPlacement(_:)":{"abstract":[{"text":"Defines a function used for determining the default placement","type":"text"},{"text":" ","type":"text"},{"text":"of windows.","type":"text"}],"fragments":[{"kind":"keyword","text":"func"},{"kind":"text","text":" "},{"kind":"identifier","text":"defaultWindowPlacement"},{"kind":"text","text":"(("},{"kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI16WindowLayoutRootV","text":"WindowLayoutRoot"},{"kind":"text","text":", "},{"kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI22WindowPlacementContextV","text":"WindowPlacementContext"},{"kind":"text","text":") -> "},{"kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI15WindowPlacementV","text":"WindowPlacement"},{"kind":"text","text":") -> "},{"kind":"keyword","text":"some"},{"kind":"text","text":" "},{"kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI5SceneP","text":"Scene"},{"kind":"text","text":"\n"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/Scene\/defaultWindowPlacement(_:)","kind":"symbol","role":"symbol","title":"defaultWindowPlacement(_:)","type":"topic","url":"\/documentation\/swiftui\/scene\/defaultwindowplacement(_:)"},"doc://com.apple.documentation/documentation/SwiftUI/UserInterfaceSizeClass":{"abstract":[{"text":"A set of values that indicate the visual size available to the view.","type":"text"}],"fragments":[{"kind":"keyword","text":"enum"},{"kind":"text","text":" "},{"kind":"identifier","text":"UserInterfaceSizeClass"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/UserInterfaceSizeClass","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"UserInterfaceSizeClass"}],"role":"symbol","title":"UserInterfaceSizeClass","type":"topic","url":"\/documentation\/swiftui\/userinterfacesizeclass"},"doc://com.apple.documentation/documentation/SwiftUI/View/backgroundExtensionEffect()":{"abstract":[{"text":"Adds the background extension effect to the view. The view will be","type":"text"},{"text":" ","type":"text"},{"text":"duplicated into mirrored copies which will be placed around the view on","type":"text"},{"text":" ","type":"text"},{"text":"any edge with available safe area. Additionally, a blur effect will be","type":"text"},{"text":" ","type":"text"},{"text":"applied on top to blur out the copies.","type":"text"}],"fragments":[{"kind":"keyword","text":"func"},{"kind":"text","text":" "},{"kind":"identifier","text":"backgroundExtensionEffect"},{"kind":"text","text":"() -> "},{"kind":"keyword","text":"some"},{"kind":"text","text":" "},{"kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI4ViewP","text":"View"},{"kind":"text","text":"\n"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/View\/backgroundExtensionEffect()","kind":"symbol","role":"symbol","title":"backgroundExtensionEffect()","type":"topic","url":"\/documentation\/swiftui\/view\/backgroundextensioneffect()"},"doc://com.apple.documentation/documentation/SwiftUI/composing-custom-layouts-with-swiftui":{"abstract":[{"text":"Arrange views in your app’s interface using layout tools that SwiftUI provides.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/SwiftUI\/composing-custom-layouts-with-swiftui","kind":"article","role":"sampleCode","title":"Composing custom layouts with SwiftUI","type":"topic","url":"\/documentation\/swiftui\/composing-custom-layouts-with-swiftui"},"doc://com.apple.documentation/documentation/UIKit/UIBackgroundExtensionView":{"abstract":[{"text":"A view that extends content to fill its own bounds.","type":"text"}],"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"identifier","text":"UIBackgroundExtensionView"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UIBackgroundExtensionView","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"UIBackgroundExtensionView"}],"role":"symbol","title":"UIBackgroundExtensionView","type":"topic","url":"\/documentation\/uikit\/uibackgroundextensionview"},"doc://com.apple.documentation/documentation/UIKit/UICollectionViewFlowLayout":{"abstract":[{"text":"A layout object that organizes items into a grid with optional header and footer views for each section.","type":"text"}],"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"identifier","text":"UICollectionViewFlowLayout"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UICollectionViewFlowLayout","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"UICollectionViewFlowLayout"}],"role":"symbol","title":"UICollectionViewFlowLayout","type":"topic","url":"\/documentation\/uikit\/uicollectionviewflowlayout"},"doc://com.apple.documentation/documentation/UIKit/UILayoutGuide":{"abstract":[{"text":"A rectangular area that can interact with Auto Layout.","type":"text"}],"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"identifier","text":"UILayoutGuide"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UILayoutGuide","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"UILayoutGuide"}],"role":"symbol","title":"UILayoutGuide","type":"topic","url":"\/documentation\/uikit\/uilayoutguide"},"doc://com.apple.documentation/documentation/UIKit/UITraitChangeObservable-67e94":{"abstract":[{"text":"A type that calls your code in reaction to changes in the trait environment.","type":"text"}],"fragments":[{"kind":"keyword","text":"protocol"},{"kind":"text","text":" "},{"kind":"identifier","text":"UITraitChangeObservable"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UITraitChangeObservable-67e94","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"UITraitChangeObservable"}],"role":"symbol","title":"UITraitChangeObservable","type":"topic","url":"\/documentation\/uikit\/uitraitchangeobservable-67e94"},"doc://com.apple.documentation/documentation/UIKit/about-focus-interactions-for-apple-tv":{"abstract":[{"text":"Design and implement intuitive control schemes for menus and interactive user interface layouts.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/about-focus-interactions-for-apple-tv","kind":"article","role":"article","title":"About focus interactions for Apple TV","type":"topic","url":"\/documentation\/uikit\/about-focus-interactions-for-apple-tv"},"doc://com.apple.documentation/documentation/UIKit/positioning-content-relative-to-the-safe-area":{"abstract":[{"text":"Position views so that they aren’t obstructed by other content.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/positioning-content-relative-to-the-safe-area","kind":"article","role":"article","title":"Positioning content relative to the safe area","type":"topic","url":"\/documentation\/uikit\/positioning-content-relative-to-the-safe-area"},"doc://com.apple.documentation/documentation/WatchKit/WKExtension/isAutorotating":{"abstract":[{"text":"A Boolean value that determines whether the interface automatically rotates when the user flips their wrist.","type":"text"}],"deprecated":true,"fragments":[{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"kind":"identifier","text":"isAutorotating"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"s:Sb","text":"Bool"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/WatchKit\/WKExtension\/isAutorotating","kind":"symbol","role":"symbol","title":"isAutorotating","type":"topic","url":"\/documentation\/watchkit\/wkextension\/isautorotating"},"doc://com.apple.documentation/documentation/Xcode/device-hub":{"abstract":[{"text":"Manage the simulated and physical devices that you use to test your app.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/Xcode\/device-hub","kind":"article","role":"collectionGroup","title":"Device Hub","type":"topic","url":"\/documentation\/xcode\/device-hub"},"doc://com.apple.documentation/documentation/technologies":{"abstract":[],"identifier":"doc:\/\/com.apple.documentation\/documentation\/technologies","kind":"technologies","role":"overview","title":"Technologies","type":"topic","url":"\/documentation\/technologies"},"doc://com.apple.documentation/documentation/visionOS/positioning-and-sizing-windows":{"abstract":[{"text":"Influence the initial geometry of windows that your app presents.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/visionOS\/positioning-and-sizing-windows","kind":"article","role":"article","title":"Positioning and sizing windows","type":"topic","url":"\/documentation\/visionos\/positioning-and-sizing-windows"},"doc://com.apple.documentation/videos/play/wwdc2017/802":{"abstract":[{"text":"Design principles are the key to understanding how design serves human needs for safety, meaning, achievement and beauty. Learn what these principles are and how they can help you design more welcoming, understandable, empowering and gratifying user experiences.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/videos\/play\/wwdc2017\/802","images":[{"identifier":"2546ECBD-6443-41EC-921D-6429026F8B67","type":"card"}],"kind":"article","role":"article","title":"Essential Design Principles","type":"topic","url":"https:\/\/developer.apple.com\/videos\/play\/wwdc2017\/802"},"doc://com.apple.documentation/videos/play/wwdc2022/10056":{"abstract":[{"text":"SwiftUI now offers powerful tools to level up your layouts and arrange views for your app’s interface. We’ll introduce you to the Grid container, which helps you create highly customizable, two-dimensional layouts, and show you how you can use the Layout protocol to build your own containers with completely custom behavior. We’ll also explore how you can create seamless animated transitions between your layout types, and share tips and best practices for creating great interfaces.\n","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/videos\/play\/wwdc2022\/10056","images":[{"identifier":"1E740BE0-AF55-430B-B8C2-346CA2982476","type":"card"}],"kind":"article","role":"article","title":"Compose custom layouts with SwiftUI","type":"topic","url":"https:\/\/developer.apple.com\/videos\/play\/wwdc2022\/10056"},"doc://com.apple.documentation/videos/play/wwdc2025/356":{"abstract":[{"text":"Dive deeper into the new design system to explore key changes to visual design, information architecture, and core system components. Learn how the system reshapes the relationship between interface and content, enabling you to create designs that are dynamic, harmonious, and consistent across devices, screen sizes, and input modes.","type":"text"}],"identifier":"doc:\/\/com.apple.documentation\/videos\/play\/wwdc2025\/356","images":[{"identifier":"1AAA030E-2ECA-47D8-AE09-6D7B72A840F6","type":"card"}],"kind":"article","role":"article","title":"Get to know the new design system","type":"topic","url":"https:\/\/developer.apple.com\/videos\/play\/wwdc2025\/356"},"eyes.svg":{"alt":"An icon of a human eye.","identifier":"eyes.svg","type":"image","variants":[{"svgID":"Design-Spec","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/eyes.svg"}]},"foundations-layout-intro.png":{"alt":"A sketch of a small rectangle in the upper-left quadrant of a larger rectangle, suggesting the position of a user interface element within a window. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","identifier":"foundations-layout-intro.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/foundations-layout-intro@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/foundations-layout-intro~dark@2x.png"}]},"foundations-layout-thumbnail.png":{"alt":"A sketch of a small rectangle in the upper-left quadrant of a larger rectangle, suggesting the position of a user interface element within a window. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","identifier":"foundations-layout-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/foundations-layout-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/foundations-layout-thumbnail~dark@2x.png"}]},"foundations-right-to-left-thumbnail.png":{"alt":"A sketch of a right-aligned bulleted list within a window, suggesting an interface displayed in a right-to-left language. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","identifier":"foundations-right-to-left-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/foundations-right-to-left-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/foundations-right-to-left-thumbnail~dark@2x.png"}]},"foundations-spatial-layout-thumbnail.png":{"alt":"A sketch of axes in the X, Y, and Z dimensions, suggesting three-dimensional layout. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","identifier":"foundations-spatial-layout-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/foundations-spatial-layout-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/foundations-spatial-layout-thumbnail~dark@2x.png"}]},"foundations-typography-thumbnail.png":{"alt":"A sketch of a small letter A to the left of a large letter A, suggesting the use of typography to convey hierarchical information. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","identifier":"foundations-typography-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/foundations-typography-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/foundations-typography-thumbnail~dark@2x.png"}]},"foundations.png":{"alt":"","identifier":"foundations.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/foundations@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/foundations~dark@2x.png"}]},"https://developer.apple.com/design/resources/":{"identifier":"https:\/\/developer.apple.com\/design\/resources\/","title":"Apple Design Resources","titleInlineContent":[{"text":"Apple Design Resources","type":"text"}],"type":"link","url":"https:\/\/developer.apple.com\/design\/resources\/"},"https://github.com/apple/unityplugins/blob/main/plug-ins/Apple.Accessibility/Apple.Accessibility_Unity/Assets/Apple.Accessibility/Documentation~/Apple.Accessibility.md":{"identifier":"https:\/\/github.com\/apple\/unityplugins\/blob\/main\/plug-ins\/Apple.Accessibility\/Apple.Accessibility_Unity\/Assets\/Apple.Accessibility\/Documentation~\/Apple.Accessibility.md","title":"Apple – Accessibility","titleInlineContent":[{"text":"Apple – Accessibility","type":"text"}],"type":"link","url":"https:\/\/github.com\/apple\/unityplugins\/blob\/main\/plug-ins\/Apple.Accessibility\/Apple.Accessibility_Unity\/Assets\/Apple.Accessibility\/Documentation~\/Apple.Accessibility.md"},"human-interface-guidelines-page-image-card.png":{"alt":"An illustration of several Liquid Glass components such as toggles, sliders, and buttons, atop a neutral background. The transparent components cast shadows on the background and allow their colored elements, like a blue slider track and a green toggle backing, to show through, highlighting the Liquid Glass material's lensing effect.","identifier":"human-interface-guidelines-page-image-card.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/human-interface-guidelines-page-image-card@2x.png"}]},"inputs-eyes-thumbnail.png":{"alt":"A sketch of a human eye. The image is tinted purple to subtly reflect the purple in the original six-color Apple logo.","identifier":"inputs-eyes-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/inputs-eyes-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/inputs-eyes-thumbnail~dark@2x.png"}]},"layout-and-organization.svg":{"alt":"An icon of a window that's divided into three areas: a toolbar above two side-by-side views, suggesting layout and organization.","identifier":"layout-and-organization.svg","type":"image","variants":[{"svgID":"layout-and-organization","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/layout-and-organization.svg"}]},"layout-background-extention-view.png":{"alt":"A screenshot of a full-screen iPad app with a sidebar on the leading edge. A photo of Mount Fuji fills the top half of the content area. The photo subtly blurs as it reaches the top of the screen, where toolbar items float above it grouped on the trailing edge. Where the photo meets the sidebar, the image flips, blurs, and extends fully beneath the sidebar to the edge of the screen.","identifier":"layout-background-extention-view.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/layout-background-extention-view@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/layout-background-extention-view~dark@2x.png"}]},"layout-controls.png":{"alt":"A diagram of an Apple Watch screen showing two side-by-side buttons beneath three lines of text.","identifier":"layout-controls.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/layout-controls@2x.png"}]},"layout.svg":{"alt":"An icon of a small rectangle in the upper-left quadrant of a larger rectangle that suggests the position of a user interface element within a window.","identifier":"layout.svg","type":"image","variants":[{"svgID":"layout","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/layout.svg"}]},"multitasking.svg":{"alt":"An icon of two side-by-side windows in a split view arrangement that suggests multitasking.","identifier":"multitasking.svg","type":"image","variants":[{"svgID":"multitasking","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/multitasking.svg"}]},"overview.svg":{"alt":"An icon of a grid comprised of four squares.","identifier":"overview.svg","type":"image","variants":[{"svgID":"overview","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/overview.svg"}]},"patterns-multitasking-thumbnail.png":{"alt":"A sketch of two side-by-side windows in a split view arrangement, suggesting multitasking. The image is tinted orange to subtly reflect the orange in the original six-color Apple logo.","identifier":"patterns-multitasking-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/patterns-multitasking-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/patterns-multitasking-thumbnail~dark@2x.png"}]},"right-to-left.svg":{"alt":"An icon of a right-aligned bulleted list within a window that suggests an interface displayed in a right-to-left language.","identifier":"right-to-left.svg","type":"image","variants":[{"svgID":"right-to-left","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/right-to-left.svg"}]},"spatial-layout.svg":{"alt":"An icon of three axes in the X, Y, and Z dimensions, suggesting three-dimensional layout.","identifier":"spatial-layout.svg","type":"image","variants":[{"svgID":"Design-Spec","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/spatial-layout.svg"}]},"typography.svg":{"alt":"An icon of a small letter A to the left of a large letter A that suggests the use of typography to convey hierarchical information.","identifier":"typography.svg","type":"image","variants":[{"svgID":"typography","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/typography.svg"}]},"visual-design-grid-2-column.png":{"alt":"An illustration of Apple TV, displaying a two-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.","identifier":"visual-design-grid-2-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-2-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-2-column~dark@2x.png"}]},"visual-design-grid-3-column.png":{"alt":"An illustration of Apple TV, displaying a three-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.","identifier":"visual-design-grid-3-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-3-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-3-column~dark@2x.png"}]},"visual-design-grid-4-column.png":{"alt":"An illustration of Apple TV, displaying a four-column grid of media items. Additional media items are partially visible on the right side of the screen.","identifier":"visual-design-grid-4-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-4-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-4-column~dark@2x.png"}]},"visual-design-grid-5-column.png":{"alt":"An illustration of Apple TV, displaying a five-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.","identifier":"visual-design-grid-5-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-5-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-5-column~dark@2x.png"}]},"visual-design-grid-6-column.png":{"alt":"An illustration of Apple TV, displaying a six-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.","identifier":"visual-design-grid-6-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-6-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-6-column~dark@2x.png"}]},"visual-design-grid-7-column.png":{"alt":"An illustration of Apple TV, displaying a seven-column grid of media items. Additional media items are partially visible on the right side of the screen.","identifier":"visual-design-grid-7-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-7-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-7-column~dark@2x.png"}]},"visual-design-grid-8-column.png":{"alt":"An illustration of Apple TV, displaying an eight-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.","identifier":"visual-design-grid-8-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-8-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-8-column~dark@2x.png"}]},"visual-design-grid-9-column.png":{"alt":"An illustration of Apple TV, displaying a nine-column grid of media items.","identifier":"visual-design-grid-9-column.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-grid-9-column@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-grid-9-column~dark@2x.png"}]},"visual-design-padding.png":{"alt":"An illustration that uses vertical shaded rectangles to show padding between focusable items.","identifier":"visual-design-padding.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-padding@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-padding~dark@2x.png"}]},"visual-design-safe-zone.png":{"alt":"An illustration of a TV with a safe zone border on all sides. In width, the top and bottom borders measure 60 points, and the side borders both measure 80 points.","identifier":"visual-design-safe-zone.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/visual-design-safe-zone@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/visual-design-safe-zone~dark@2x.png"}]}},"variantOverrides":[{"patch":[{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSLayoutGuide\/fragments","value":[{"kind":"identifier","text":"NSLayoutGuide"}]},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIBackgroundExtensionView\/fragments","value":[{"kind":"identifier","text":"UIBackgroundExtensionView"}]},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UICollectionViewFlowLayout\/fragments","value":[{"kind":"identifier","text":"UICollectionViewFlowLayout"}]},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UILayoutGuide\/fragments","value":[{"kind":"identifier","text":"UILayoutGuide"}]},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1WatchKit~1WKExtension~1isAutorotating\/title","value":"autorotating"},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1WatchKit~1WKExtension~1isAutorotating\/fragments","value":[{"kind":"identifier","text":"autorotating"}]},{"op":"add","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1WatchKit~1WKExtension~1isAutorotating\/navigatorTitle","value":[{"kind":"identifier","text":"autorotating"}]}],"traits":[{"interfaceLanguage":"occ"}]}]}