Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

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

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:

  • controlColor

  • labelColor

  • secondaryLabelColor

  • tertiaryLabelColor

  • quaternaryLabelColor

These system colors respond automatically to system white-point changes based on factors such as ambient light and keyboard backlight level.

To learn about programatically using system colors in your app, see the reference documentation for NSColor.

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 Icons.

Use color tastefully and minimally. In general, the Touch Bar should be 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.

image: ../Art/touchbar_monochrome.png

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.

image: ../Art/touchbar_branding.png

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.

Layout

The touch portion of the Touch Bar, excluding the Touch ID sensor, is 2170px wide by 60px high. Since the Touch Bar is a high-resolution Retina display, this is equivalent to 1085pt by 30pt.

image: ../Art/touchbar_layout_total.png

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

This region contains system-level controls, such as for initiating Siri or adjusting the volume level.

Varies, depending on the user’s configuration. It 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 are displayed here.

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, the system displays a button such as Esc (Escape), Cancel, or Done.

128px.

image: ../Art/touchbar_layout_regions.png

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 with 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 your app should avoid unprovoked repositioning of things.

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.

Common Layouts

Due to 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.

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

image: ../Art/touchbar_layout_example01.png

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.

image: ../Art/touchbar_layout_example04.png

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

image: ../Art/touchbar_layout_example03.png

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

image: ../Art/touchbar_layout_example02.png

Typography

The Touch Bar uses a variant of San Francisco, the system font in macOS. This font is optimized for legibility, clarity, and consistency. It also matches the physical keyboard’s font. Standard Touch Bar controls, such as buttons and segmented controls, automatically utilize the this font. To learn about programatically applying the system font in your app, see the reference documentation for NSFont.