Complications

A complication displays timely, relevant information on the watch face, where people can view it every time they raise their wrist. In addition to providing high-value information, a complication lets people dive into your app with a single tap. All watch faces can display at least one complication; some can display four or more. For developer guidance, see Creating Complications for Your watchOS App.

Screenshot of the Infograph Modular watch face, displaying complications for Weather, Calendar, Heart Rate (in the graph format), Breathe, Air Quality, and Workout.

The system organizes complications into several different families — such as circular small and graphic bezel — which define templates that specify the layout and appearance of your complication data. Each watch face specifies the family it supports in each complication slot.

Creating Useful Complications

People value data-rich complications that provide useful information at a glance. As you start designing a complication, identify essential content in your app that people might appreciate viewing on the watch face. Content that changes throughout the day — like the Activity rings in the Activity complication — can be especially effective.

You provide the data for a complication in the form of a timeline that the system uses to determine the data to display at various times. You can update the timeline a limited number of times each day, and the system stores a limited number of timeline entries for each app. For developer guidance, see Updating Your Complication.

Keep privacy in mind. The always-on display of Apple Watch Series 5 means that information on the watch face might be visible to people other than the wearer. Make sure you help people prevent potentially sensitive information from being visible to others. For developer guidance, see getPrivacyBehavior.

Carefully consider when to update data. Each timeline entry has a time value that specifies the time at which to display your data on the watch face; different data sets might require different time values. For example, a meeting app might display information about an upcoming meeting an hour before the meeting starts, but a weather app might display forecast information at the time those conditions are expected to occur. Choose times that enhance the usefulness of the data you supply.

Prefer complications that do more than merely launch your app. People appreciate complications that deliver relevant information in addition to providing a convenient way to launch an app. A static complication that doesn't display any meaningful information may be less likely to remain in a prominent position on the watch face.

Designing Expressive Complication Content

A great complication instantly communicates its data in clear, unambiguous ways. The following guidelines can help you design complications that look great and are easy to read at a glance:

Size glyphs and images to match the template for each complication you support. For guidance, see Supporting Multiple Complication Families.

In general, use line widths of two points or greater. Thinner lines can be difficult to see at a glance, especially when the wearer is in motion. Use line weights that suit the size and complexity of the image.

Provide complication images in PNG format. Avoid using interlaced PNGs. Complication images use only the alpha channel of the image.

Choose the ring or gauge style that matches your data. Use the closed style to convey a value that's a percentage of a whole, such as for a battery gauge. Use the open style when the minimum and maximum values are arbitrary or don't represent a percentage of the whole, such as for a speed indicator.

Use SF Compact Rounded if you draw text as an image in a graphic family complication. For example, you might need to draw text as an image if you're creating a graph for a graphic rectangular large image complication.

Make sure glyphs and images look good in tinted mode. In watchOS 6 and later, people can select a tinted mode for watch faces that support graphic complications. In tinted mode, a graphic complication applies a solid color to text, gauges, and glyphs, and desaturates full-color images unless you provide tinted versions of them. The following guidelines can help your graphic complications perform well in tinted mode:

  • Avoid using color as the only way to communicate important information. You want people to get the same information in tinted mode as they do in nontinted mode.
  • When necessary, provide an alternative tinted version of a full-color image. If your full-color image doesn’t look good when it’s desaturated, you can supply a different version of the image for the system to tint. For developer guidance, see Tinted Graphic Complications.

Supporting Multiple Complication Families

Supporting all families means that your complications are available on all watch faces that offer them. If you can't display useful information for a particular complication family, you should still provide an image that represents your app — such as your app icon — to let people launch your app from the watch face.

In watchOS 7 and later, you can deliver multiple complications for a single family. For example, an app that helps people train for triathlons could offer three graphic circular complications that deep-link to the swimming, biking, and running areas in the app. For developer guidance, see Declaring the Complications.

Supporting multiple complications also helps you take advantage of shareable watch faces. For example, the triathlon app might offer a shareable watch face that's preconfigured to include its swimming, biking, and running complications and to use its custom images and colors. When people choose this watch face, they don't have to do any configuration before they can start using it. For guidance, see Faces.

Define a deep link for each complication you support. It works well when each complication opens your app to the area that's closely related to it. If all the complications you support open the same area in your app, they can seem less useful.

Provide a set of static placeholder images for each complication you support. The system uses placeholder images when there's no other content to display for your complication's data. For example, when people first install your app, the system can display a static placeholder while it checks to see if your app can generate a localized placeholder to use instead. Placeholder images can also appear in the carousel from which people select complications. For developer guidance, see Adding Placeholders to Your Complications.

The following table lists the sizes of the no-content images your app should include. Note that complication image sizes vary per template, and the size of a placeholder image may not match the size of the actual template image you supply for that complication.

Family 38mm 40mm and 42mm 44mm
Circular 32px × 32px (16pt × 16pt @2x) 36px × 36px (18pt × 18pt @2x) 40px × 40px (20pt × 20pt @2x)
Extra large 182px × 182px (91pt × 91pt @2x) 203px × 203px (101.5pt × 101.5pt @2x) 224px × 1224px (112pt × 112pt @2x)
Modular 52px × 52px (26pt × 26pt @2x) 58px × 58px (29pt × 29pt @2x) 64px × 64px (32pt × 32pt @2x)
Utilitarian 40px × 40px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x) 50px × 50px (25pt × 25pt @2x)
Graphic Corner 40px × 40 px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x)
Graphic Circular 84px × 84px (42pt × 42pt @2x) 94px × 94px (47pt × 47pt @2x)
Graphic Bezel 84px × 84px (42pt × 42pt @2x) 94px × 94px (47pt × 47pt @2x)
Graphic Rectangular 300px × 94px (150pt × 47pt @2x) 342px × 108px (171pt × 54pt @2x)
Graphic Extra Large 206px × 206px (103pt × 103pt) 240px × 240px (120pt × 120pt) 264px × 264px (132pt × 132pt)

The system defines the following complication families.

Circular Small

Circular small templates display a small image or a few characters of text. They appear in the corner of the watch face (for example, in the Color watch face).

  • A tear drop glyph centered within a partial ring.Ring image
  • The number sixty-three centered within a partial ring.Ring text
  • A stopwatch glyph centered within a circular area.Simple image
  • The number sixty-eight and the degree symbol centered within a circular area.Simple text
  • A sunset glyph displayed above the time seven twenty-four PM, centered within a circular area.Stack image
  • The letters L, O, N displayed above the time six oh nine.Stack text

As you design glyphs and images for a circular small complication, use the following values for guidance.

Template 38mm 40mm and 42mm 44mm
Ring 40px × 40px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x) 48px × 48px (24pt × 24pt @2x)
Simple 32px × 32px (16pt × 16pt @2x) 36px × 36px (18pt × 18pt @2x) 40px × 40px (20pt × 20pt @2x)
Stack 32px max × 14px (16pt × 7pt @2x) 34px max × 16px (17pt × 8pt @2x) 38px max × 18px (19pt × 9pt @2x)

Modular Small

Modular small templates display two stacked rows consisting of an icon and content, a circular graph, or a single larger item (for example, the bottom row of complications on the Modular watch face).

  • Text and numbers arranged in a two-row column. The top row displays the letters C and P and the number fourteen. The bottom row displays the letters M and H and the number twenty-eight.Columns text
  • A tear drop glyph centered within a partial ring.Ring image
  • The number sixty-three centered within a partial ring.Ring text
  • An image of the moon.Simple image
  • The number sixty-eight and the degree symbol.Simple text
  • A sunset glyph displayed above the time seven twenty-four PM.Stack image
  • The letters L, O, N displayed above the time six oh nine.Stack text

As you design glyphs and images for a modular small complication, use the following values for guidance.

Template 38mm 40mm and 42mm 44mm
Ring 36px × 36px (18pt × 18pt @2x) 38px × 38px (19pt × 19pt @2x) 42px × 42px (21pt × 21pt @2x)
Simple 52px × 52px (26pt × 26pt @2x) 58px × 58px (29pt × 29pt @2x) 64px × 64px (32pt × 32pt @2x)
Stack 52px max × 28px (26pt × 14pt @2x) 58px max × 30px (29pt × 15pt @2x) 64px max × 34px (32pt max × 17pt @2x)

Modular Large

Modular large templates offer a large canvas for displaying up to three rows of content (for example, in the center of the Modular watch face).

  • Activity-related information displayed in a three-row column. The top row displays a calorie count of 396 out of 660. The middle row displays a minute count of 13 out of 30. The bottom row displays an hour count of 3 out of 12.Columns
  • Weather-related information displayed in three left-aligned lines of text. The top row displays the location Cupertino California. The middle row displays sixty-eight degrees and cloudy. The bottom row displays a forecast high of seventy-two degrees and low of sixty-two degrees.Standard body
  • Sports-related information displayed in a two-column, two-row table with a title. The table title is final score. The first table row contains the number fourteen followed by the text central prep. The second table row contains the number twenty-eight followed by the text mission high. Table
  • Calendar-related information displayed in two lines of fully justified text. The first line displays the word wednesday. The second line displays the abbreviation mar and the number nine in text that is about twice as tall as the text in the first line.Tall body

As you design glyphs and images for a modular large complication, use the following values for guidance.

Template 38mm 40mm and 42mm 44mm
Columns 22-64px × 22px (11-32pt × 11pt @2x) 24-74px × 24px (12-37pt × 12pt @2x) 28-84px × 28px (14-42pt × 14pt @2x)
Standard body 22-64px × 22px (11-32pt × 11pt @2x) 24-74px × 24px (12-37pt × 12pt @2x) 28-84px × 28px (14-42pt × 14pt @2x)
Table 22-64px × 22px (11-32pt × 11pt @2x) 24-74px × 24px (12-37pt × 12pt @2x) 28-84px × 28px (14-42pt × 14pt @2x)

Utilitarian Small

Utilitarian small templates occupy a rectangular area in the corner of a watch face (for example, in the Chronograph or Simple watch faces). The content can include a glyph or icon, or a circular graph.

  • The letters L, O, N displayed above the time six oh nine.Flat
  • Two tear drop glyphs, each centered within a partial ring.Ring image
  • Two partial rings, each displaying the number sixty-three centered within them.Ring text
  • An image of the moon.Square

As you design glyphs and images for a utilitarian small complication, use the following values for guidance.

Template 38mm 40mm and 42mm 44mm
Flat 18-42px × 18px (9-21pt × 9pt @2x) 20-44px × 20px (10-22pt × 10pt @2x) N/A
Ring 28px × 28px (14pt × 14pt @2x) 28px × 28px (14pt × 14pt @2x) 32px × 32px (16pt × 16pt @2x)
Square 40px × 40px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x) 50px × 50px (25pt × 25pt @2x)

Utilitarian Large

The Utilitarian large template is primarily text-based, but also supports a glyph or icon placed to the left of the text. This template spans the bottom of the watch face (for example, the Utility or Motion watch faces).

  • The text eleven AM photo shoot displayed on one line in a large text size.Large flat

As you design glyphs and images for a utilitarian large complication, use the following values for guidance.

Template 38mm 40mm and 42mm 44mm
Flat 18-42px × 18px (9-21pt × 9pt @2x) 20-44px × 20px (10-22pt × 10pt @2x) N/A

Extra Large

Extra large templates display larger text and images (for example, on the X-Large watch faces).

  • A tear drop glyph centered within a partial ring.Ring image
  • The number sixty-three centered within a partial ring.Ring text
  • An image of the moon.Simple image
  • The number sixty-eight and the degree symbol.Simple text
  • A sunset glyph displayed above the time seven twenty-four PM.Stack image
  • The letters L, O, N displayed above the time six oh nine.Stack text

As you design glyphs and images for an extra large complication, use the following values for guidance.

Template 38mm 40mm and 42mm 44mm
Ring 126px × 126px (63pt × 63pt @2x) 133px × 133px (66.5pt × 66.5pt @2x) 146px × 146px (73pt × 73pt @2x)
Simple 182px × 182px (91pt × 91pt @2x) 203px × 203px (101.5pt × 101.5pt @2x) 224px × 224px (112pt × 112pt @2x)
Stack 156px max × 84px (78pt × 42pt @2x) 174px max × 90px (87pt × 45pt @2x) 192px max × 102px *(96pt × 51pt @2x

Graphic Corner

Graphic corner templates display full-color images, text, and gauges in the corners of the Infograph watch face. Some of the templates also support multicolor text.

  • A glyph showing a yellow sun partially obscured by a white cloud within a circular area.Circular image
  • The value fourteen minutes and fifty-nine seconds displayed next to a thin solid bar. The text and the bar appear to follow the curve of the bottom-right quadrant of a circle. The timer app icon appears below the time value.Gauge image
  • The weather values fifty-five, shown in green, and seventy-six, shown in orange, displayed with a shaded solid bar between them. The bar shades from green to orange to match the values. The text and the bar appear to follow the curve of the top-right quadrant of a circle. The value seventy-two degrees appears in large white text above the temperature range.Gauge text
  • Two lines of text, both of which appear to follow the curve of the top-left quadrant of a circle. The top line contains the word cup in large white text. The bottom line contains the time ten oh nine AM followed by a plus sign and zero hours, all in orange text.Stack text
  • A line displaying zero hours, zero minutes, and zero seconds in orange text. The line appears to follow the curve of the bottom-left quadrant of a circle. The  stopwatch app icon appears below the line of text.Text image

As you design glyphs and images for a graphic corner complication, use the following values for guidance.

Template 40mm 44mm
Circular image (masked to circle) 64px × 64px (32pt × 32pt @2x) 72px × 72px (36pt × 36pt @2x)
Gauge image (masked to circle) 40px × 40px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x)
Text image (masked to circle) 40px × 40px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x)

A SwiftUI view that implements a graphic corner complication uses the following default text values:

  • Style: Rounded
  • Weight: Semibold
  • Text size: 10pt (40mm), 11pt (44mm)

Graphic Circular

Graphic circular templates display text, gauges, and full-color images in small circular areas on the Infograph and Infograph Modular watch faces. Some of the templates also support multicolor text.

  • A white musical notes glyph displayed within a red circle. The circle's outline is bright red for about ninety percent of the circumference and dull red for about ten percent, showing current progress.Closed gauge image
  • The number one hundred in white text displayed within a green circle. The circle's outline appears to overlap the starting point on the circumference by about five percent, showing current progress.Closed gauge text
  • The number one point zero in white text, surrounded by a partial circle that begins at about the 8:00 position and ends at about the 4:00 position. The partial circle's outline shades from green at the 8:00 position to violet the 4:00 position. A small green sun glyph appears at about the 6:00 position.Open gauge image
  • The number forty-two in white text, surrounded by a partial circle that begins at about the 8:00 position and ends at about the 4:00 position. The partial circle's outline shades from blue at the 8:00 position to violet the 4:00 position. The letters A, Q, I appear in green text at about the 6:00 position.Open gauge text
  • The number seventy-two in white text, surrounded by a partial circle that begins at about the 8:00 position and ends at about the 4:00 position. The partial circle's outline shades from green at the 8:00 position to yellow the 4:00 position. Two numbers appear side by side at about the 6:00 position. Fifty-five appears in green text on the left and seventy-six appears in orange text on the right.Open gauge range
  • An image of the breathe app icon.Image

As you design glyphs and images for a graphic circular complication, use the following values for guidance.

Template 40mm 44mm
Image (masked to circle) 84px × 84px (42pt × 42pt @2x) 94px × 94px (47pt × 47pt @2x)
Closed gauge image (masked to circle) 54px × 54px (27pt × 27pt @2x) 62px × 62px (31pt × 31pt @2x)
Open gauge image (masked to circle) 22px × 22px (11pt × 11pt @2x) 24px × 24px (12pt × 12pt @2x)

A SwiftUI view that implements a graphic circular complication uses the following default text values:

  • Style: Rounded
  • Weight: Medium
  • Text size: 12pt (40mm), 13pt (44mm)

Graphic Bezel

The graphic bezel template displays a graphic circular template with optional text wrapped along the bezel of the Infograph watch face. The text can fill nearly 180 degrees of the bezel before becoming truncated.

  • A line of white text that appears to follow the curve of the upper third of a circle. The text reads 8:00 AM yoga, flow studio. Centered below the text is the calendar date friday twenty-three displayed in a circular area.Closed gauge image

As you design glyphs and images for a graphic bezel complication, use the values shown in Graphic Circular for guidance.

Graphic Rectangular

Graphic rectangular templates can display full-color images, text, a gauge, and an optional title in a large rectangular region. Some of the text fields can support multicolor text.

  • Three lines of left-aligned text. The first line uses blue text to display the words water reminders. The second line uses white text to display the words thirty-two ounces consumed. The third line uses gray text to display the words four day streak, woo hoo.Standard body
  • Two lines of text displayed above a bar that can fill with color to indicate progress. The first line uses blue text to display a tear drop glyph followed by the words water reminder. The second line uses white text to display the words thirty-two ounces consumed. The bar uses the same blue color as used in the first line of text to fill the bar from the left to about seventy percent of the total length.Text gauge
  • A line of text displayed above a graph. The text displays in white the words sixty-eight B, P, M, followed by the words two minutes ago, in red text. The graph shows many heart rate values over time.Large image

The large image template works especially well for showing details about a value or process that changes over time, because it provides room for information-rich charts, graphs, and diagrams. For example, the Heart Rate complication displays a graph of heart-rate values within a 24-hour period. The graph uses high-contrast white and red for the primary content and a lower-contrast gray for the graph lines and labels, making the data easy to understand at a glance.

Use the following values for guidance as you create glyphs and images for a graphic rectangular complication.

Template 40mm 44mm
Large image with title 300px × 94px (150pt × 47pt @2x) 342px × 108px (171pt × 54pt @2x)
Large image without title 324px × 138px (150pt × 47pt @2x) 368px × 156px (171pt × 54pt @2x)
Standard body 24px × 24px (12pt × 12pt @2x) 27px × 27px (13.5pt × 13.5pt @2x)
Text gauge 24px × 24px (12pt × 12pt @2x) 27px × 27px (13.5pt × 13.5pt @2x)

NOTE Both large image templates automatically include a four-point corner radius.

A SwiftUI view that implements a graphic rectangular complication uses the following default text values:

  • Style: Rounded
  • Weight: Medium
  • Text size: 16.5pt (40mm), 18pt (44mm)