What’s New in macOS

macOS 11 introduces many user interface changes that update the appearance of apps and make them more approachable to people transitioning from iPad apps. macOS 11 also adds support for familiar iOS features — such as SF Symbols and text styles — that enhance the user experience and can streamline the app design process.

Illustration of a MacBook Pro, displaying Calendar and Maps. Calendar lists events for the WWDC Keynote, a FaceTime lunch, and a workout. Maps displays a map and a sheet that describes the location of the Steve Jobs Theater.

When you build your app for macOS 11, you’ll find that most of the updates are automatic when you use system-defined elements with SwiftUI or Auto Layout; if your app is highly customized, you may have additional work to do. As you think about updating your app for macOS 11, review the following changes to help you plan your approach.

Icons and Images

macOS 11 refreshes icon design throughout the system, bringing a uniform shape to app icons and a refined appearance to document icons. In addition, macOS 11 introduces multipurpose feature icons that can represent items or functions in sidebars and tables.

The adoption of SF Symbols imparts a strong visual consistency to glyphs and icons throughout the system, and gives you an easy way to create images and icons that look at home everywhere. macOS 11 automatically maps AppKit shared images — such as Action, Unlocked, and Share — to specific symbols. In some cases, a symbol might not have the same size or alignment as the AppKit image it replaces, so it's a good idea to check your layout.

Name SF symbol AppKit image (macOS 10.15 and earlier)
Action A ellipsis within a circle. A gear.
Unlocked A padlock with an open shackle. A padlock with an open shackle.
Share A square, containing an arrow that points upward. A square, containing an arrow that points upward.

App Icons

In macOS 11, the design language for app icons promotes consistency with all platforms while retaining the lifelike rendering style typical of macOS icons. App icons combine a rounded-rectangle shape, a front-facing perspective, and a consistent drop shadow to provide a unified visual experience.

Images of app icons for Mail, Photos, and System Preferences as seen in macOS 11. The Mail icon shows a white envelope on a blue rounded rectangle. The envelope uses shading to suggest a three dimensional object. The Photos icon shows eight lozenge shapes fanned out in a circle on a white rounded rectangle background. Each shape is a different color of the rainbow. The System Preferences icon shows two concentric circular gears, both with many teeth, set into a gray rounded rectangle.

Although the design language strongly encourages visual consistency, it doesn’t preclude judicious expressiveness. For example, the Preview, Xcode, and TextEdit icons continue to combine depictions of the physical objects that best convey the app’s core purpose, while incorporating the new shape, perspective, and shadow.

Images of app icons for Preview, Xcode, and TextEdit as seen in macOS 11. The Preview icon shows an image of an ocean scene surrounded by a white rounded rectangular border. In front of the image in the bottom-right corner is a camera loupe. The Xcode icon shows the capital letter A formed out of three cylinders outlined in white, surrounded by a white outlined circle. The circle and letter are shown on a blue rounded rectangle background. In front of the image is a realistic image of a claw hammer, slanting to the right. The TextEdit icon shows an image of white paper ruled with gray horizontal lines and one red vertical line that indicates the left margin. The image is masked to a rounded rectangle shape and it includes a realistic mechanical pencil in front of it, slanting from top-right to bottom-left.

Document Icons

To compose a document icon, the system combines your app icon with the familiar folded-corner icon shape. If your app opens or creates a large number of document types, you can also supply a custom center image or background appearance to help people distinguish them.

Images of document icons for ARKit, Xcode, and Preview as seen in macOS 11. The ARKit icon shows a chair within a cube drawn in yellow lines. The Xcode icon shows a shape that looks like the letter A within a circle and the word Project below it. The background is blue. The Preview icon displays the Preview app icon above the abbreviation JPG.

Feature Icons

A feature icon can represent an item (or category of items), a technology, or a type of information in a table view or in the content sidebar of a preferences window. A feature icon typically uses the macOS 11 rounded rectangle shape to contain a simple, unambiguous glyph, but it can also use custom shapes and colors. For help designing a feature icon, download the production template included in the Apple Design Resources for macOS.

App Accent Colors

In macOS 11, you can specify an accent color to customize the appearance of your app’s buttons, selection highlighting, and sidebar glyphs. The system applies your accent color when the current value in General > Accent color preferences is multicolor.

Partial screenshot of the Podcasts app, highlighted to show the sidebar. Each item in the sidebar includes a glyph followed by the item's title. Every glyph uses the Podcasts app's purple accent color.

Screenshot of the General preferences pane of the Podcasts app. The app's purple accent color is visible in the toolbar icon that represents General and in the content area's pop-menus.

If people set the Accent color preferences to a value other than multicolor, the system applies their chosen color to the relevant items throughout your app, replacing your accent color. The exception is a sidebar glyph that uses a fixed color you specify. Because a fixed-color sidebar glyph uses a specific color to provide meaning, the system doesn’t override its color when people change the value of Accent color preferences. To learn more, see Sidebars.

Partial screenshot of a Finder window, cropped to show the sidebar.

The iCloud glyph remains teal, even when the other glyphs use orange.

Windows and Views

Throughout macOS 11, windows adopt visual touches that recall iOS interfaces. For example, windows integrate the sidebar, toolbar, and content areas, use an increased corner radius, and display lightweight controls.

Screenshot of the Mail app, showing the mail boxes on the left, the Inbox message list in the middle, and the selected message on the right. The selected message includes a photo of some buildings in a city and the message reads Hi Greg, Here's where I think we should go...recognize it?

Toolbars and Title Bars

By default, toolbars are taller, window titles can display inline with controls, and toolbar items no longer include a bezel. The increased height and bezel-free controls combine to give macOS 11 toolbars a streamlined appearance.

To match the default toolbar’s increased height, toolbar items automatically use the large control size. The exception is an integrated toolbar-title bar area — such as the one in a Safari window — which continues to use the regular control size. To accommodate the new default size, you’ll probably need to adjust the layout of your toolbar.

Closeup of the toolbar in a Finder window, which uses a white background and controls that don't include a bezel. From the left, the toolbar shows the icons, list, column, and gallery view buttons, the item grouping button, and the share button.

Finder toolbar controls in macOS 11

Closeup of the toolbar in a Finder window, which uses a gray background and controls that include bezels. From the left, the toolbar shows the icons, list, column, and gallery view buttons, the item grouping button, the action menu, and the share button.

Finder toolbar controls in macOS 10.15

IMPORTANT Continuing to use the minSize and maxSize APIs to set the size of a toolbar item can clip the control, because the current values don’t account for the larger default size. Use constraints if you need to specify minimum or maximum sizes for a toolbar control.

When horizontal space is limited, the toolbar can display the Search button in place of the search bar. When people click the Search button, the bar expands; when they click elsewhere in the window, the search bar collapses and the toolbar displays the button again.

Partial screenshot of the top-right corner of a Finder window, highlighted to show the search button.

Partial screenshot of the top-right corner of a Finder window, highlighted to show the search field.

In a preferences window, the toolbar can use SF Symbols to harmonize with the appearance of the main window, but the title position remains above the toolbar buttons. When needed for clarity, individual toolbar buttons can include color. To indicate the active preference pane, the window applies a system-provided selection appearance to the selected toolbar button.

If your window includes multiple panes, you can align different subsets of toolbar items with each pane, so that as people resize the window, each set of items remains above its associated view.

In macOS 11, a sidebar (technically known as a source list) extends to the full height of the window. Within the sidebar, default item spacing, row height, and glyph size all increase, and the selected-item highlight uses a rounded-corner appearance.

A sidebar’s row height, text, and glyph size depend on its overall size, which can be small, medium, or large. You can set the size programmatically, but users can also change it by selecting a different sidebar icon size in General preferences. The table below shows the differences in default sidebar metrics between macOS 11 and previous versions of macOS.

Sidebar size Sidebar component macOS 11 (default) macOS 10.15 and earlier (default)
Small Row height 24pt 22pt
SF symbol scale Medium *
Glyph size 16pt × 16pt
Text size (style) 11pt (Subhead) 11pt
Medium Row height 28pt 24pt
SF symbol scale Medium
Glyph size 20pt × 20pt 18pt × 18pt
Text size (style) 13pt (Body) 13pt
Large Row height 32pt 32pt
SF symbol scale Medium
Glyph size 24pt × 24pt 24pt × 24pt
Text size (style) 15pt (Title 3) 13pt
All Horizontal spacing between cells 17pt 3pt
Vertical spacing between cells 0pt 2pt

*In some cases, a small sidebar may use small-scale SF Symbols by default.

Using SF Symbols is the easiest way to create sidebar glyphs that use the new metrics. Alternatively, you can use PDF template images to create sidebar glyphs; if you must use bitmap images, be sure to create them in small, medium, and large sizes, at both @1x and @2x resolutions.

By default, sidebar glyphs use the current accent color (to learn more, see App Accent Colors). If you need to clarify the meaning of an individual sidebar glyph, you can give it a fixed color that persists regardless of the user’s Accent color preferences. Don’t use the ability to specify a fixed color to stylize your app as a whole. In macOS, people expect to see their chosen accent color throughout all the apps they use.

Table Views

In macOS 11, table views are larger overall, using taller rows, a larger font size, and more space between items to increase visual separation within and around table content. macOS 11 introduces three table-view styles to define different appearances that work well in specific window areas: inset, full-width, and automatic. For developer guidance, see NSTableView.style.

The inset style adds insets to the expanded spaciousness of macOS 11 tables. Because the inset style increases the visual space around the content, it works well in tables that fill the area between other views — such as sidebars and toolbars — and echoes the changes in sidebar appearance.

Screenshot of a Finder window, highlighted to show the content area in list view. The list view displays several folders and documents using inset row backgrounds that alternate in color between light gray and white.

The classic, full-width table style remains available, but automatically includes the required content padding at the beginning and end of each row. The full-width style works best for tables that already have a visual margin around them, such as a table embedded in a preferences pane.

Screenshot of Accessibility preferences. In the left side of the window, the list of specific accessibility areas is set off from the rest of the window by a thin gray border. The list uses a gray bar that meets the border on both side edges to show the selected item.

The automatic style means the system uses the table view’s position in the view hierarchy to help determine its appearance.

To create more spacious tables, macOS 11 uses several new table-view metrics. In the diagrams that follow, you can see how the layout of a table row differs between macOS 11 and macOS 10.15 and earlier.

The following table lists the values for the table-row layout areas shown above.

Table-view metric macOS 11 macOS 10.15 and earlier
Recommended row height 24pt 17pt
Minimum row height for text-only rows 18pt 17pt
Inset at leading and trailing row edges 10pt (inset style); 0pt (other styles)
Padding at leading and trailing row edges 6pt
Intercell spacing (17,0) (3,2)
Text size (style) 13pt (Body) 11pt

In addition to the values listed in the table above, inset-style tables in macOS 11 also include a 10pt vertical inset before the first row and after the last row.

As you adjust the layout of your table content to follow the new metrics:

  • Make sure your icons or glyphs can fit into a 16pt × 16pt area when you use the recommended 24pt row height
  • Consider adding 6 points of space between items within a row to ensure a spacious table appearance

If you don’t update your app, the appearance of your tables doesn’t change when your app runs in macOS 11. The exception is a table that implements a sidebar. If you identify the table style as a source list, the system automatically applies the new sidebar appearance. For guidance, see Sidebars; for developer guidance, see NSTableView.style.sourceList.

Tip In macOS 11, a table's width continues to equal the width of its rows, but the new padding and insets prevent columns and cells from covering the entire row. The system also uses the specified style to determine the space to add to row background features, like selection appearance or alternating row colors. If you need to provide content that completely covers a row — such as a custom background appearance — add it to the row instead of the cells.

Sheets

Sheets no longer unfurl from the bottom edge of the parent window’s toolbar. In macOS 11, a sheet is a rounded rectangle view that floats on top of the dimmed parent window.

Alerts

Alerts are cardlike rectangles that use the same corner radius as all windows in macOS 11. Within an alert, most content is center aligned.

Screenshot of an alert that displays the full trash icon and the title Are you sure you want to permanently erase the items in the Trash? Below the title is the text You can't undo this action. At the bottom of the alert are the Cancel button on the left and the Empty Trash button on the right. The Empty Trash button uses a blue background.

You can also use red text to emphasize a destructive action in an alert.

Screenshot of an alert that displays the Podcasts app icon and the title Delete Good Night Stories for Rebel Girls from Library? Below the title are two stacked buttons. The top button uses red text and is titled Delete from Library. The bottom button is titled Cancel.

macOS 11 introduces visual changes to menus and menu content. If you use standard menus and menu items, you get the following default appearances automatically:

  • Menu item titles use the same 13-point font size as sidebars and window content areas.
  • Menu separator lines are 1 point thick and inset from the sides.
  • The selection highlight for a menu item is a rounded rectangle that’s inset from the edges of the menu.

Controls

Refreshed AppKit controls — such as checkboxes, pop-up buttons, push buttons, and segmented controls — emphasize simplicity and boldness, harmonizing with iOS controls while maintaining familiar appearances. When you use standard AppKit controls in your app, you shouldn’t have to adjust your interface to adopt the new appearances. The exception is the slider, which is taller.

Slider Size macOS 11 (default) macOS 10.15 and earlier (default)
Without tick marks Regular 28pt 19pt
Small 20pt 15pt
Mini 17pt 13pt
With tick marks Regular 28pt 24pt
Small 20pt 18pt
Mini 17pt 15pt

Beginning in macOS 11, the track of a slider with tick marks aligns with the center of the thumb.

Typography

Beginning in macOS 11, SF Pro is available as a variable font. The variable font format delivers a single package that includes the glyphs for all supported weights — such as regular, bold, and ultralight — in both uprights and italics. The variable format also supports optical sizing, which is a way to interpolate between glyphs to create size-specific versions of SF Pro to fit every design. Optical sizing replaces the need for the fixed-range Text and Display variants of SF Pro.

macOS 11 also introduces support for the full range of text styles, such as body, headline, and callout. Dynamic Type is not available in macOS 11. For guidance, see Typography.

Widgets

A widget elevates a small amount of useful content from your app in a beautiful, glanceable way. In macOS 11, you can create widgets in small, medium, and large sizes; people choose the size they want when they add your widget to Notification Center.

You can also create widgets for iOS and iPadOS. For guidance, see Widgets; for developer guidance, see WidgetKit.