Touch Bar Visual Design

Animation

Avoid animation. The Touch Bar is an extension of the keyboard, and people don’t expect animation in their keyboard. In addition, excessive or gratuitous animation can distract people from their work.

Color

Prefer standard controls and system icons. The standard controls and system icons already use colors that work well in the Touch Bar. For a list of available system icons, see Touch Bar Icons and Images.

Screenshot of a Touch Bar that contains Maps controls, such as the current location button and the drive, walk, and transit buttons for directions. All Maps buttons have gray fill and white glyphs and titles. The drive button is selected, which means that its fill is lighter.

Use color tastefully and minimally. In general, make the Touch Bar similar in appearance to the physical keyboard. Monochromatic colors work best. If you must use colors in your controls, do so tastefully and primarily in temporary states. Colors shouldn’t appear overwhelming or out of place.

Use color to denote prominence. Color can draw the eye to important controls. Reserve blue for default controls and red for destructive controls.

If you use color, choose a limited palette that coordinates with your app. Subtle use of color is one way to communicate your brand.

Screenshot of a Touch Bar that contains Calculator controls. The arithmetic operation buttons have orange fill and white glyphs. All other Calculator buttons have gray fill and white glyphs.

Provide wide color artwork. The Touch Bar supports a P3 color space that can produce richer, more saturated colors than sRGB. Use the Display P3 color profile at 16 bits per pixel (per channel) and export your artwork in .png format.

TIP On a Mac that features a wide color display, you can use the system color picker to select and preview P3 colors, and to compare them with sRGB colors.

For related design guidance, see Human Interface Guidelines for macOS Apps > Color.

Image of a color spectrum in which one black triangle shows the colors within the Display P3 color space and a slightly smaller triangle shows the colors within the S R G B color space. The S R G B color space is completely contained within the Display P3 color space.

System Colors

macOS offers a range of standard system colors that respond automatically to system white-point changes based on factors such as ambient light and keyboard backlight level.

Color API
Blue systemBlueColor
Brown systemBrownColor
Gray systemGrayColor
Green systemGreenColor
Orange systemOrangeColor
Pink systemPinkColor
Purple systemPurpleColor
Red systemRedColor
Yellow systemYellowColor

Don't replicate system colors. System color values may fluctuate from release to release and based on various environmental variables. Instead of trying to create custom colors that match the system colors, just use the system colors.

For developer guidance, see NSColor.

Dynamic System Colors

macOS defines a range of system colors that dynamically match the color scheme of standard interface controls such as buttons and labels. The following system colors are ideal for use in the Touch Bar.

Color Description API
Control Color The system color for the surface of a control. controlColor
Label Color The system color for the text of a label. labelColor
Secondary Label Color The system color for label text of lesser importance than labelColor text, for example, a subheading or additional information. secondaryLabelColor
Tertiary Label Color The system color for label text of lesser importance than secondaryLabelColor, for example, disabled text. tertiaryLabelColor
Quaternary Label Color The system color for label text of lesser importance than tertiaryLabelColor, for example, disabled text. quaternaryLabelColor

Layout

The width of the Touch Bar display differs depending on the device.

Screenshot of a Touch Bar second generation that indicates the overall area is 1004 points wide by 30 points tall.

Touch Bar (2nd generation)

Screenshot of a Touch Bar first generation that indicates the overall area is 1085 points wide by 30 points tall.

Touch Bar (1st generation)

Touch Bar Areas

In its standard configuration, the Touch Bar display consists of either two or three areas, depending on the device. The system enforces a 16pt separation between areas.

The Touch Bar (2nd generation) display contains two areas: the app region and the Control Strip. Although the second generation Touch Bar doesn’t include a system button area, you can display a system button within your app region.

Diagram of a Touch Bar second generation with callouts that show the locations and widths of the minimum app region and the maximum collapsed control strip, in addition to the two area separators.

The Touch Bar (1st generation) display includes three areas: the system button area, the app region, and the Control Strip.

Diagram of a Touch Bar first generation in which callouts show the locations and widths of the system button, the minimum app region, and the maximum collapsed control strip, in addition to the two area separators.

Area Contains User configurable?
Control Strip System-level controls for performing actions, like initiating Siri or adjusting the volume level. Yes. People can extend the Control Strip to the full width of the Touch Bar, collapse it to the right side of the Touch Bar, reduce it in size, or hide it entirely. By default, the Control Strip appears in its collapsed state and contains four controls.
App region Your app’s controls. Yes. People can hide this area entirely. When the Control Strip is visible, the app region has a minimum width of 685pt.
System button (available on some models) A contextually relevant button, like Esc, Cancel, or Done. No. When present, this area's width is 64pt. In Touch Bar (2nd generation), you can use 8pt spacing to display the relevant button in the app region, where it's disabled by default.

Assume that the default Control Strip is visible. Although people can reconfigure the Control Strip, reduce its size, or hide it completely, don’t rely on the availability of this space for your design.

Positioning App Controls

You have several options for adding visual separation between app controls in the Touch Bar.

Spacing type Width between controls
Default 8pt
Small fixed space 16pt
Large fixed space 32pt
Flexible space Varies to match the available space.

Position controls logically and intuitively. If your app offers a control that persists across different modalities, it can work well to put the control in the left side of the app region. For example, the Compose button in Notes always appears in the far left of the Touch Bar, regardless of whether people are navigating notes, editing a note, or browsing attachments.

On the other hand, primary controls that command people’s attention — such as an alert or the suggested items in the QuickType bar — work best centered in the app region, with secondary options on the left. Consider using the order of controls in your app’s toolbar to inform the order of Touch Bar controls in the app region. When you use consistent control positions in both areas, people can rely on their familiarity with your onscreen controls to help them use your Touch Bar controls.

IMPORTANT If the order of your Touch Bar controls mirrors the order of controls in your app’s window, make sure to adjust the control order in the app region when your app uses a right-to-left layout.

Construct a flexible layout. The app region varies in width depending on the configuration of the Control Strip and the device, so consider allowing certain controls — such as sliders and scrubbers — to stretch when additional space becomes available.

Strive for consistent spacing. As much as possible, make controls in the Touch Bar equidistant, except when spacing variations are necessary for clarity or to cluster related controls.

Use flexible spaces and grouping to aid alignment. Flexible space between items pushes the items on the left toward the left side of the Touch Bar and the items on the right toward the right side of the Touch Bar. Grouping lets you position multiple controls at once. For example, you can center a control or group by marking it as the principal item in the Touch Bar.

Avoid repositioning controls automatically. People can become frustrated and confused if a control changes position by itself. If it makes sense in your app, consider letting people customize control positioning.

Avoid manually reversing controls in right-to-left locales. The system already reverses certain controls, such as segmented controls and sliders. Manually reversing controls can cause problems with Touch Bar customization features.

For developer guidance, see NSTouchBarItem.

Common Layout Styles

Touch Bar layouts can vary significantly from app to app because of factors like configuration options, various control sizes, and the device your app is running on. When possible, use one of the following common layout styles for your controls.

Layout with one principal item. The center of the Touch Bar contains a single large control, such as a candidate list. Additional controls, such as buttons and segmented controls, are on the left. In Touch Bar (2nd generation), layouts with one principal item can look like this:

Diagram of a Touch Bar second generation in which callouts show the layout of a two-segment segmented control, one button, and a candidate list in the app region. Each segment measures 75.5 points wide, the button measures 72 points wide, and the candidate list can range from 389 to 445 points wide. There is a one point space between the segments, and an eight point space on both sides of the button.
Diagram of a Touch Bar second generation in which callouts show the layout of three buttons and a candidate list in the app region. Each button measures 72 points wide and the candidate list can range from 389 to 445 points wide. There is an eight point space between each of the buttons and also between the rightmost button and the candidate list.
Diagram of a Touch Bar second generation in which callouts show the layout of a three-segment segmented control and a candidate list in the app region. Two segments measure 63.5 points wide, the middle segment measures 63 points wide, and the candidate list can range from 389 to 445 points wide. There is a one point space on both sides of the middle segment and a space that can range between 48 and 104 points between the segmented controls and the candidate list.

NOTE In Touch Bar (2nd generation), a principal candidate list control typically remains centered with respect to the device, whereas other types of principal controls may appear off-center in some circumstances. For example, an item might be too large to center in the current configuration, but may become centered when people customize the Control Strip.

In Touch Bar (1st generation), layouts with one principal item can look like this:

Diagram of a Touch Bar first generation in which callouts show the layout of a two-segment segmented control, one button, and a candidate list in the app region. Each segment measures 75.5 points wide, the button measures 72 points wide, and the candidate list measures 445 points wide. There is a one point space between the segments, and an eight point space on both sides of the button.
Diagram of a Touch Bar first generation in which callouts show the layout of three buttons and a candidate list in the app region. Each button measures 72 points wide and the candidate list measures 445 points wide. There is an eight point space between each of the buttons and also between the rightmost button and the candidate list.
Diagram of a Touch Bar first generation in which callouts show the layout of a three-segment segmented control and a candidate list in the app region. Two segments measure 63.5 points wide, the middle segment measures 63 points wide, and the candidate list measures 445 points wide. There is a one point space on both sides of the middle segment and a space that can range between 48 and 104 points between the segmented controls and the candidate list.

Layout with two principal items. The center of the Touch Bar contains two consistently sized controls. Additional controls are on the left.

In Touch Bar (2nd generation), a layout with two principal items can look like this:

Diagram of a Touch Bar second generation in which callouts show the layout of a three-segment segmented control and two buttons in the app region. Two segments measure 63.5 points wide, the middle segment measures 63 points wide, and each button measures 143 points wide. There are one point spaces between the segments and an eight point space between the buttons.

In Touch Bar (1st generation), a layout with two principal items can look like this:

Diagram of a Touch Bar first generation in which callouts show the layout of a three-segment segmented control and two buttons in the app region. Two segments measure 63.5 points wide, the middle segment measures 63 points wide, and each button measures 143 points wide. There are one point spaces between the segments and an eight point space between the buttons.

Layout with three principal items. The center of the Touch Bar contains three consistently sized controls. Additional controls are on the left.

In Touch Bar (2nd generation), a layout with three principal items can look like this:

Diagram of a Touch Bar second generation in which callouts show the layout of six buttons in the app region. From the left, the first three buttons each measure 72 points wide and the last three buttons each measure 143 points wide. All spaces between buttons measure eight points wide.

In Touch Bar (1st generation), a layout with three principal items can look like this:

Diagram of a Touch Bar first generation in which callouts show the layout of six buttons in the app region. From the left, the first three buttons each measure 72 points wide and the last three buttons each measure 143 points wide. All spaces between buttons measure eight points wide.

Fluid layout. This layout includes consistently-sized controls, such as buttons.

In Touch Bar (2nd generation), a fluid layout can look like this:

Diagram of a Touch Bar second generation in which callouts show the layout of eight buttons in the app region. Each button measures 144 pixels wide and between each button is a flexible spacer.

In Touch Bar (1st generation), a fluid layout can look like this:

Diagram of a Touch Bar first generation in which callouts show the layout of eight buttons in the app region. Each button measures 144 pixels wide and between each button is a flexible spacer.

Typography

The Touch Bar uses a variant of San Francisco, the system font in macOS. Standard Touch Bar controls, such as buttons and segmented controls, automatically use this variant. For guidance, see Typography; for developer guidance, see NSFont.