Touch Bar Visual Design
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.
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.
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.
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.
|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|
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.
|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.|
Positioning App Controls
The system offers several options for separating app controls in the Touch Bar.
|Spacing type||Width between controls|
|Small fixed space||32px|
|Large fixed space||64px|
|Flexible space||Varies. Matches the available space.|
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.
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.