Touch Bar Visual Design
Animation
Avoid animation. The Touch Bar is considered an extension of the keyboard, and people don’t expect animation in their keyboard. In addition, excessive or gratuitous animation can make people feel disconnected and distract them from their work.
Color
Prefer standard controls and system icons. The standard controls and system icons already use colors that are designed to 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 tend to 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 Macs with wide color displays, 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 try to 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 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 touch portion of the Touch Bar, excluding the Touch ID sensor, is 2170px wide × 60px high. Because the Touch Bar is a high-resolution Retina display, this measurement is equivalent to 1085pt × 30pt.
Touch Bar Regions
In its standard configuration, the Touch Bar consists of three primary regions. Each region is separated by 32px, which the system enforces.
| Region | Description | Width |
|---|---|---|
| Control Strip | System-level controls for performing actions like initiating Siri or adjusting the volume level. | Varies, depending on the user’s configuration. The Control Strip can be extended to the full width of the Touch Bar (referred to as the Expanded Control Strip in System Preferences), collapsed to the right side of the Touch Bar, reduced in size, or hidden entirely. By default, the Control Strip appears in its collapsed state and contains four controls. |
| App region | Your app’s controls. | Varies, depending on the user’s configuration. When the Control Strip is visible, the minimum width of this region is 1370px. Users can choose to hide this region entirely. |
| System button | Based on the context, a button like Esc (Escape), Cancel, or Done. | 128px. |
Design with the assumption that the default Control Strip is visible. Although the user can reconfigure the Control Strip, reduce its size, and disable it entirely, your app shouldn’t rely on the availability of this space for its design.
Positioning App Controls
The system offers several options for separating app controls in the Touch Bar.
| Spacing type | Width between controls |
|---|---|
| Default | 16px |
| Small fixed space | 32px |
| Large fixed space | 64px |
| Flexible space | Varies. Matches the available space. |
Position controls logically and intuitively. The left side of the app region works well for controls that persist across different modalities. For example, when Notes is active, a Compose button for adding a note always appears on the far left of the Touch Bar, regardless of whether you’re navigating notes, editing a note, or browsing attachments. Otherwise, primary controls work best centered in the Touch Bar, with secondary options on the left.
Construct a flexible layout. The app region varies in width depending on the configuration of the Control Strip, so consider setting certain controls, such as sliders and scrubbers, to stretch when additional space becomes available.
Strive for consistent spacing. To the extent possible, make controls in the Touch Bar equidistant, except when spacing variations are necessary for clarity or to cluster related controls.
Use flexible space 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. You can center a control or group by marking it as the principal item in the Touch Bar.
Don’t reposition controls automatically. People can become frustrated and confused if controls change position. It’s fine to let the user reposition controls manually through customization, but avoid automatic repositioning.
Avoid manually reversing controls in right-to-left locales. Reversing controls can cause problems with Touch Bar customization features, and the system already reverses certain controls, such as segmented controls and sliders.
For developer guidance, see fixedSpaceLarge, fixedSpaceSmall, and flexibleSpace.
Common Layouts
Because of the wide range of configuration options and control sizes available, layout styles in the Touch Bar can vary significantly from app to app. Whenever possible, use a common layout style for your controls.
Layout with one principal item. The center of the Touch Bar contains a single large control, such as a candidate list (which offers autocompletion suggestions during text entry). Additional controls, such as buttons and segmented controls, are on the left.
Layout with two principal items. The center of the Touch Bar contains two consistently sized controls. Additional controls are on the left.
Layout with three principal items. The center of the Touch Bar contains three consistently sized controls. Additional controls are on the left.
Fluid layout. This layout includes consistently-sized controls, such as buttons.
Typography
The Touch Bar uses a variant of San Francisco, the system typeface in macOS. It matches that of the physical keyboard and is optimized for legibility, clarity, and consistency. Standard Touch Bar controls, such as buttons and segmented controls, automatically use this variant. To learn how to apply it programmatically in your app, see NSFont.
For related design guidance, see Human Interface Guidelines for macOS Apps > Typography.