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.
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.
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.
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.
Touch Bar (2nd generation)
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.
The Touch Bar (1st generation) display includes three areas: the system button area, the app region, and the Control Strip.
| 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:
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:
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:
In Touch Bar (1st generation), a layout with two principal items can look like this:
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:
In Touch Bar (1st generation), a layout with three principal items can look like this:
Fluid layout. This layout includes consistently-sized controls, such as buttons.
In Touch Bar (2nd generation), a fluid layout can look like this:
In Touch Bar (1st generation), a fluid layout can look like this:
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.