Hi, I'm Jeff Nadeau, a frameworks engineering manager at Apple, and you’re watching “Build an AppKit app with the new design”. The new design of macOS establishes a common foundation for the look and feel of Mac apps, with refreshed materials and controls throughout the system. A key element of this new design is the Liquid Glass material, a translucent surface that reflects and refracts light, creating a sense of depth and dynamism within the user interface.

AppKit has everything you need to adapt to this new design. I’ll take you through the important changes to the framework, outlining the behaviors that you can expect on macOS Tahoe and the new APIs that you can use to fine-tune your adoption of the new design. I’ll go through these changes from the top down, starting with the basic structural components of your application.

Then, I’ll introduce the scroll edge effect, a visual effect that provides legibility atop edge-to-edge scrolling content. The new design also includes a big update to the appearance and layout of controls. Finally, I’ll dig into the Liquid Glass material, how it works and the AppKit APIs that you can use to adopt glass in your custom UI elements.

I'll get started with app structure. The new design system transforms the appearance of a Mac window, altering the window shape and framing its key structural regions in glass. One of those regions is the toolbar. In the new design system, toolbar elements are placed on a glass material, and the entire toolbar appears to float above the content, enhancing the sense of hierarchy within the window. The glass also brings controls together in logical groups. Since they all represent singular actions, AppKit automatically groups multiple toolbar buttons together on one piece of glass.

Different types of controls are separated out into their own glass elements, like segmented controls, pop-up buttons and the search control. AppKit determines this grouping automatically based on the type of each item’s control view. To override the automatic behavior, use NSToolbarItemGroup to group items together or insert spacers to separate items.

The Liquid Glass material is adaptive, which means that it reacts intelligently to its context, changing its appearance to suit the brightness of the content behind it. The toolbar glass will even switch between a light and dark appearance if the scrolled content is especially bright or dark. This appearance change is communicated to the toolbar’s content using the NSAppearance system so any work that you’ve done to support Dark Mode applies here as well.

NSToolbar automatically puts the glass material behind every toolbar item but not every item should appear over glass. Non-interactive items like custom titles and status indicators should avoid the glass material. The informational text in the Photos toolbar is a great example. With the glass material backing, it almost looks like a button. You can remove the glass from an NSToolbarItem by setting the isBordered property to false. Now that's looking much better.

For the rest of your toolbar items, the glass material has one other neat feature - tinting. Use the new style property on NSToolbarItem to specify a prominent style. The prominent style tints the glass using the accent color, which is perfect for displaying state or emphasizing an important action.

To further customize the appearance of a prominent toolbar item, use the backgroundTintColor property to choose a specific color for the glass. There’s one other way to call attention to a toolbar item - badging. Use the NSItemBadge API to indicate that a toolbar item navigates to new or pending content. For example, you can use a badge to indicate a number of unread messages or the presence of new notifications.

With glass toolbars handled, I’ll move on to the main content of the window, which is often organized using a split view. In the new design, sidebars appear as a pane of glass that floats above the window’s content, whereas inspectors use an edge-to-edge glass that sits alongside the content. To get this effect in your application, use NSSplitViewController. When you create split items with a sidebar or inspector behaviors, AppKit presents them with the appropriate glass material automatically.

Now that the sidebar sits atop glass, the legacy sidebar material is no longer necessary. If you’re using an NSVisualEffectView to display that material inside of your sidebar, it will prevent the glass material from showing through. You should remove these visual effect views from your view hierarchy. Since the sidebar glass appears to float above the window, it can appear over content from the adjacent split. This works great if you have horizontal scrolling content, list items which slide over to reveal swipe actions or rich content like a map or a movie poster that can extend into the sidebar region.

To allow your split content to appear underneath the sidebar, set the automaticallyAdjustsSafeAreaInsets property to true. Be sure to set this on the content that you want to extend under the sidebar and not on the sidebar itself. When this property is true, NSSplitView will extend that item’s frame beneath the sidebar and then apply a safe area layout guide to help you position your content within the unobscured area.

Rich content, like photographs or artwork, really showcase the floating glass material in the sidebar but it’s often undesirable to cover up some portion of the content to get that effect. This App Store poster creates a striking effect when displayed edge-to-edge but the artwork doesn’t include any extra negative space to accommodate the size of the sidebar.

Hiding the sidebar reveals what’s really happening here. The content is being mirrored and blurred, extending the appearance of the artwork without actually obscuring any of its content. AppKit has a new API that provides this effect. It's called NSBackgroundExtensionView. This view uses the safe area to position your content in the unobscured portion of the view, while extending its appearance edge-to-edge using a visual effect.

To put this into practice, create a NSBackgroundExtensionView and position it to fill the entire frame of the split item. Assign it a content view, which it positions in the safe area, avoiding the floating sidebar. And that's it. The background extension view will automatically create a replica of the content view to fill the space outside of the safe area.

The floating sidebar, along with the toolbar, demonstrate a key element of the new design system: concentricity. Each element is designed with a curvature that sits neatly within the corner radius of its container, in this case the window itself. And this relationship goes both ways. In the new design system, windows now have a softer, more generous corner radius, which varies based on the style of window.

Windows with toolbars now use a larger radius, which is designed to wrap concentrically around the glass toolbar elements, scaling to match the size of the toolbar. Titlebar-only windows retain a smaller corner radius, wrapping compactly around the window controls. These larger corners provide a softer feel and elegant concentricity to the window but they can also clip content that sits close to the edge of the window.

To position content that nests into a corner, use the new NSView.LayoutRegion API. A layout region describes an area of a view, like the safe area, but with features like corner avoidance built in. You can inset a region either horizontally or vertically by the size of the corner. I'll take you through the API.

You can obtain a region for either the safe area or the area with standard layout margins. The region includes corner adaptation, which can apply either a horizontal or vertical inset to the region. From a layout region, use the layoutGuide method to obtain a guide for applying auto layout constraints. You can also obtain the raw geometry of the region in the form of edge insets or its current rectangle.

Here’s an example of the new API in action. My new folder button is colliding with this corner, and I want to constrain it to a region that avoids this collision. So, in an updateConstraints method, I obtain a layout guide for the safe area, including horizontal corner adaptation. This layout guide is just like the typical safe area layout guide but it includes an extra inset on the edge with the corner. Then, I create a few layout constraints to tie the button’s geometry to the safe area guide. It only took a few lines of code, and now my button sits nicely alongside the corner.

Next, I’ll introduce the scroll edge effect. The new design encourages flowing your content edge-to-edge, with Liquid Glass elements floating atop. To provide separation between the glass and the content, the system applies a visual effect in the areas where these two overlap. This effect comes in two variants: a soft-edge-style, which progressively fades and blurs the content, and a hard-edge-style, which uses a more opaque backing to provide greater separation between the content and the floating elements.

For scrollable content, the scroll edge effect lives inside NSScrollView. The scroll view varies the size and shape of the effect based on the content floating above it. The effect adapts automatically as floating elements come and go. The scroll edge effect is applied automatically underneath toolbar items, titlebar accessories, and a new type of accessory, split item accessories.

Split item accessories are very similar to titlebar accessories, except they only span one split within a split view controller, and they can be placed at either the top or bottom edge of the split. To add a split item accessory, create a NSSplitViewItemAccessoryViewController, and attach it to the split view item using the addTopAligned- or addBottomAlignedAccessoryViewController method. Split item accessories, along with titlebar accessories, are the best way to incorporate floating content into the scroll edge effect. They influence the size and shape of the effect, and they inset the content safe area, simplifying content layout.

Now, no design system is complete without my personal favorite - controls. Controls have an all new look in macOS Tahoe. The new design creates a stronger family resemblance across devices, unifying the appearance of elements like buttons, switches and sliders between macOS, iOS and iPadOS. These changes have been thoughtfully applied to retain the character and capability that you expect from Mac controls.

macOS controls are available in a variety of standard sizes, ranging from mini all the way up to large. These sizes establish varying levels of density and hierarchy among your controls. macOS Tahoe adds one more size to this list - extra large - for emphasizing your most important actions.

The extra large size is ideal for showcasing the most prominent actions in your application. These are the actions that people launch your app to get done, like queuing up some music in a media player or placing a call in a communications app. In addition to the new size, we’ve also taken the opportunity to rethink the heights of controls. Compared to previous releases of macOS, the mini, small, and medium controls are now slightly taller, providing a little more breathing room around the control label and enhancing the size of the click target.

To adapt to varying control heights, use Auto Layout and avoid hard-coding the heights of controls. For compatibility with existing high-density layouts, like complex inspectors and popovers, AppKit provides an API to request control sizes that match previous releases of macOS. Use the new prefersCompactControlSizeMetrics property on NSView. This property is inherited down the view hierarchy, and when it's set to true, AppKit controls will revert to sizing that is compatible with previous releases of macOS. The new design system introduces some new control shapes as well. The mini through medium sizes retain a rounded-rectangle shape, which enables greater horizontal density, while the large and extra-large sizes round out into a capsule shape, making use of all that extra space.

To achieve concentricity in your custom designs, you can override the preferred shape of a control. In this example, I’ve built a custom call-out bar for spell-checking using medium-sized controls. The container for the bar has a capsule shape but it doesn’t fit well with the rounded rectangle controls inside. This is a perfect use case for the new borderShape property. This API allows you to override the shapes of buttons, pop-up buttons and segmented controls.

By overriding these controls to use a capsule shape, they fit nicely within my custom container. In addition to the shape, you can also customize the material of a button using the new glass bezel style. This bezel style replaces the standard button backing with the Liquid Glass material, which is perfect for buttons that need to float atop other content. The glass bezel style is compatible with the existing bezelColor property, which tints the glass using the provided color.

The new design system also introduces the idea of control prominence to AppKit. By varying the prominence of a button, you can control the level of visual weight given to its tint color. This allows you to add color to a button without upstaging higher-prominence controls inside the same interface, such as the default button. This technique is used for destructive buttons. The distinctive red color is a helpful hint that the action is destructive but with a level of prominence that doesn’t overpower nearby controls.

The tint prominence type has four cases: automatic, which indicates that the control should choose a level of prominence appropriate for its style and configuration; none, which indicates minimal or no tint color; secondary, which indicates a more subdued application of the tint color; and primary, which applies the tint at the most prominent level.

To apply a lower prominence tint to a button, set the tintProminence property to secondary. By default, this will display using the accent color. In this example, I’m treating the Play button a little differently because I want it to behave as the default button, so I’ve given it the return key equivalent. This ensures that the button responds to the keyboard in a predictable way, and since it’s the default button, it’ll automatically apply the most prominent level of tint.

Tint prominence also has a function with sliders. The tintProminence API allows you to choose whether the track is filled with the accent color. A slider set to none will avoid filling its track, whereas a slider set to secondary or primary will fill it. The slider fill has learned one more trick in macOS Tahoe. It can anchor itself at any location along the track, rather than just the minimum end. Use the new neutralValue property to set a value that serves as the anchor for the track fill.

In this example of a playback speed control, I’ve set the neutralValue to 1x, so that when the speed is made slower or faster, the blue fill helps communicate the difference between the selected value and the default value. The new design system also brings an update to menus with a refreshed appearance and a significant expansion in the use of icons.

Both menu bar menus and context menus now use icons to represent their key actions. Within each section of a menu, the icons form a single column that’s easy to scan through. Adding clear, recognizable symbols to your menu items helps people quickly find the most important actions in the menu. The “Get to know the new design system” video provides a ton of additional guidance for choosing symbols for your menu items. Be sure to check it out.

Finally, integrating Liquid Glass elements into your app. Before you integrate the Liquid Glass material into your custom UI elements, it’s important to think about the design intent behind this new material. Liquid Glass elements float at the top level of the UI, elevating the controls and navigation into a distinct functional layer.

With that in mind, limit your use of Liquid Glass to the most important elements in your app, the controls that belong in this top level of hierarchy. Freeform’s inline editing controls are a great example. They float above the content rather than sitting alongside, and they work beautifully with the Liquid Glass material.

To place your content on glass, use the NSGlassEffectView API. Setting a contentView allows AppKit to apply all of the necessary visual treatments to keep your content legible as the glass adapts to its surroundings. So avoid placing the NSGlassEffectView behind your content as a sibling view. You can customize the appearance of the glass using the corner radius and tint color properties. I’ll take you through an example of adopting NSGlassEffectView for an existing element.

In this example, I have a fitness app which shows daily training stats and a custom control for picking the type of workout. I’m displaying them using a horizontal NSStackView. Now, this is a prominent part of my UI, so I’m going to put both parts of it on glass.

Adopting the Liquid Glass material takes just a few new lines of code. First, create an NSGlassEffectView for each glass element that you want to display and set each one’s contentView property to the desired view. The glass effect view ties its geometry to the contentView using Auto Layout, so you don’t have to worry about keeping them in sync.

Then, put the glass effect views into the view hierarchy. In this example, I updated the stack view to swap in the new glass effect views. If you have multiple glass shapes in close proximity, group them together using NSGlassEffectContainerView. The glass effect container view combines multiple glass elements together into a single rendering effect. This has a few benefits. First, grouped glass elements can fluidly join and separate using a liquid visual effect. The glass shapes meld together based on their proximity and the value of the spacing property, which is available on NSGlassEffectContainerView.

Second, the adaptive appearance of the glass is shared across the grouped elements, which ensures that they maintain a uniform appearance as the underlying content changes. And grouping is important for visual correctness. The Liquid Glass material reflects and refracts light, picking color from nearby content. To create this effect, the glass material samples content from an area larger than itself.

But what happens if that sampling region includes another glass element? Well, glass can’t directly sample other glass, so the visual results in this case will not be consistent. Using a glass effect container allows these elements to share their sampling region. Not only does this provide a more consistent visual result but it also improves the performance of the glass effect, since it only needs one sampling pass for the entire group.

Revisiting the sample from earlier, these two glass effects are part of a logical group, so they need to be inside a glass effect container. It’s straightforward to set one up. In this example, I create an NSGlassEffectContainerView and set the stack view as its content view. The container and its content view are also constrained together using Auto Layout, So I can cleanly swap this container into my existing layout. The Liquid Glass material is a powerful tool for elevating your app’s key controls and enabling your content to flow seamlessly from edge to edge.

It’s a great way to highlight the functionality that makes your app unique.

So what's next? As a first step, build your app with Xcode 26. A lot of the new design will start working right away. Extend your content edge-to-edge wherever possible, taking full advantage of the floating glass toolbar and sidebar. Then, adapt to the new control sizes by auditing your app for hard-coded control heights or inflexible layout constraints. Enhance your menu actions with symbol icons and identify key elements of your interface to elevate with the Liquid Glass material. Thanks for watching and thanks for making great Mac apps.