---
title: Complications
platform: watchOS
category: foundations
url: https://developer.apple.com/design/human-interface-guidelines/complications
quality_score: 0.49
content_length: 19508
last_updated: 2025-07-20T03:47:18.990Z
keywords: ["complications","watchos","foundations","system","color","images","visual","design","layout","motion","interface","presentation","widgets","icons"]
has_code_examples: false
has_images: false
is_fallback: false
---
Complications A complication displays timely, relevant information on the watch face, where people can view it each time they raise their wrist. People often prefer apps that provide multiple, powerful complications, because it gives them quick ways to view the data they care about, even when they don’t open the app. Most watch faces can display at least one complication; some can display four or more. Starting in watch OS 9, the system organizes complications (also known as accessories) into several families — like circular and inline — and defines some recommended layouts you can use to display your complication data. A watch face can specify the family it supports in each complication slot. Complications that work in earlier versions of watch OS can use the legacy templates, which define nongraphic complication styles that don’t take on a wearer’s selected color. Developer note Prefer using Widget Kit to develop complications for watch OS 9 and later. For guidance, see Migrating Clock Kit complications to Widget Kit. To support earlier versions of watch OS, continue to implement the Clock Kit complication data source protocol (see CLKComplication Data Source).Best practices Identify essential, dynamic content that people want to view at a glance. Although people can use a complication to quickly launch an app, the complication behavior they appreciate more is the display of relevant information that always feels up to date. A static complication that doesn’t display meaningful data may be less likely to remain in a prominent position on the watch face. Support all complication families when possible. Supporting more families means that your complications are available on more watch faces. If you can’t display useful information for a particular complication family, provide an image that represents your app — like your app icon — that still lets people launch your app from the watch face. Consider creating multiple complications for each family. Supporting multiple complications helps you take advantage of shareable watch faces and lets people configure a watch face that’s centered on an app they love. For example, an app that helps people train for triathlons could offer three circular complications — one for each segment of the race — each of which deep-links to the segment-specific area in the app. This app could also 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 Watch faces. Define a different deep link for each complication you support. It works well when each complication opens your app to the most relevant area. If all the complications you support open the same area in your app, they can seem less useful. Keep privacy in mind. With the Always-On Retina display, 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 guidance, see Always On. Carefully consider when to update data. You provide a complication’s data in the form of a timeline where each entry has a 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. 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, so you need to choose times that enhance the usefulness of your data. For developer guidance, see Migrating Clock Kit complications to Widget Kit. Visual design Choose a ring or gauge style based on the data you need to display. Many families support a ring or gauge layout that provides consistent ways to represent numerical values that can change over time. For example:The closed style can convey a value that’s a percentage of a whole, such as for a battery gauge. The open style works well when the minimum and maximum values are arbitrary — or don’t represent a percentage of the whole — like for a speed indicator. Similar to the open style, the segmented style also displays values within an app-defined range, and can convey rapid value changes, such as in the Noise complication. Make sure images look good in tinted mode. In tinted mode, the system applies a solid color to a complication’s text, gauges, and images, and desaturates full-color images unless you provide tinted versions of them. For developer guidance, see Widget Rendering Mode. (If you’re using legacy templates, tinted mode applies only to graphic complications.) To help your 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-mode 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 use in tinted mode. Recognize that people might prefer to use tinted mode for complications, instead of viewing them in full color. When people choose tinted mode, the system automatically desaturates your complication, converting it to grayscale and tinting its images, gauges, and text using a single color that’s based on the wearer’s selected color. When creating complication content, generally 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 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. Note that complication image sizes vary per layout (and per legacy template) and the size of a placeholder image may not match the size of the actual image you supply for that complication. For developer guidance, see placeholder(in:).Circular Circular layouts can include text, gauges, and full-color images in circular areas on the Infograph and Infograph Modular watch faces. The circular family also defines extra-large layouts for displaying content on the X-Large watch face. Closed gauge image Closed gauge text Open gauge image Open gauge text Open gauge range Image Stack image Stack text You can also add text to accompany a regular-size circular image, using a design that curves the text along the bezel of some watch faces, like Infograph. The text can fill nearly 180 degrees of the bezel before truncating. Closed gauge image As you design images for a regular-size circular complication, use the following values for guidance. Image 40 mm 41 mm 44 mm 45 mm/49 mm Image 42 x 42 pt (84 x 84 px @2 x)44.5 x 44.5 pt (89 x 89 px @2 x)47 x 47 pt (94 x 94 px @2 x)50 x 50 pt (100 x 100 px @2 x)Closed gauge 27 x 27 pt (54 x 54 px @2 x)28.5 x 28.5 pt (57 x 57 px @2 x)31 x 31 pt (62 x 62 px @2 x)32 x 32 pt (64 x 64 px @2 x)Open gauge 11 x 11 pt (22 x 22 px @2 x)11.5 x 11.5 pt (23 x 23 px @2 x)12 x 12 pt (24 x 24 px @2 x)13 x 13 pt (26 x 26 px @2 x)Stack (not text)28 x 14 pt (56 x 28 px @2 x)29.5 x 15 pt (59 X 30 px @2 x)31 x 16 pt (62 x 32 px @ 2 x)33.5 x 16.5 pt (67 x 33 px @2 x)Note The system applies a circular mask to each image. A Swift UI view that implements a regular-size circular complication uses the following default text values:Style: Rounded Weight: Medium Text size: 12 pt (40 mm), 12.5 pt (41 mm), 13 pt (44 mm), 14.5 pt (45 mm/49 mm)If you want to design an oversized treatment of important information that can appear on the X-Large watch face — for example, the Contacts complication, which features a contact photo — use the extra-large versions of the circular family’s layouts. The following layouts let you display full-color images, text, and gauges in a large circular region that fills most of the X-Large watch face. Some of the text fields can support multicolor text. Closed gauge image Closed gauge text Open gauge image Open gauge text Open gauge range Image Stack image Stack text Use the following values for guidance as you create images for an extra-large circular complication. Image 40 mm 41 mm 44 mm 45 mm/49 mm Image 120 x 120 pt (240 x 240 px @2 x)127 x 127 pt (254 x 254 px @2 x)132 x 132 pt (264 x 264 px @2 x)143 x 143 pt (286 x 286 px @2 x)Open gauge 31 x 31 pt (62 x 62 px @2 x)33 x 33 pt (66 x 66 px @2 x)33 x 33 pt (66 x 66 px @2 x)37 x 37 pt (74 x 74 px @2 x)Closed gauge 77 x 77 pt (154 x 154 px @2 x)81.5 x 81.5 (163 x 163 px @2 x)87 x 87 pt (174 x 174 px @2 x)91.5 x 91.5 (183 x 183 px @2 x)Stack 80 x 40 pt (160 x 80 px @2 x)85 x 42 (170 x 84 px @2 x)87 x 44 pt (174 x 88 px @2 x)95 x 48 pt (190 x 96 px @2 x )Note The system applies a circular mask to the circular, open-gauge, and closed-gauge images. Use the following values to create no-content placeholder images for your circular-family complications. Layout 38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm Circular–42 x 42 pt (84 x 84 px @2 x)44.5 x 44.5 pt (89 x 89 px @2 x)47 x 47 pt (94 x 94 px @2 x)50 x 50 pt (100 x 100 px @2 x)Bezel–42 x 42 pt (84 x 84 px @2 x)44.5 x 44.5 pt (89 x 89 px @2 x)47 x 47 pt (94 x 94 px @2 x)50 x 50 pt (100 x 100 px @2 x)Extra Large–120 x 120 pt (240 x 240 px @2 x)127 x 127 pt (254 x 254 px @2 x)132 x 132 pt (264 x 264 px @2 x)143 x 143 pt (286 x 286 px @2 x)A Swift UI view that implements an extra-large circular layout uses the following default text values:Style: Rounded Weight: Medium Text size: 34.5 pt (40 mm), 36.5 pt (41 mm), 36.5 pt (44 mm), 41 pt (45 mm/49 mm)Corner Corner layouts let you display full-color images, text, and gauges in the corners of the watch face, like Infograph. Some of the templates also support multicolor text. Circular image Gauge image Gauge text Stack text Text image As you design images for a corner complication, use the following values for guidance. Image 40 mm 41 mm 44 mm 45 mm/49 mm Circular 32 x 32 pt (64 x 64 px @2 x)34 x 34 pt (68 x 68 px @2 x)36 x 36 pt (72 x 72 px @2 x)38 x 38 pt (76 x 76 px @2 x )Gauge 20 x 20 pt (40 x 40 px @2 x)21 x 21 pt (42 x 42 px @2 x)22 x 22 pt (44 x 44 px @2 x)24 x 24 pt (48 x 48 px @2 x)Text 20 x 20 pt (40 x 40 px @2 x)21 x 21 pt (42 x 42 px @2 x)22 x 22 pt (44 x 44 px @2 x)24 x 24 pt (48 x 48 px @2 x)Note The system applies a circular mask to each image. Use the following values to create no-content placeholder images for your corner-family complications.38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm–20 x 20 pt (40 x 40 px @2 x)21 x 21 pt (42 x 42 px @2 x)22 x 22 pt (44 x 44 px @2 x)24 x 24 pt (48 x 48 px @2 x)A Swift UI view that implements a corner layout uses the following default text values:Style: Rounded Weight: Semibold Text size: 10 pt (40 mm), 10.5 pt (41 mm), 11 pt (44 mm), 12 pt (45 mm/49 mm)Inline Inline layouts include utilitarian small and large layouts. Utilitarian small layouts are intended to occupy a rectangular area in the corner of a watch face, such as the Chronograph and Simple watch faces. The content can include an image, interface icon, or a circular graph. Flat Ring image Ring text Square As you design images for a utilitarian small layout, use the following values for guidance. Content 38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm Flat 9-21 x 9 pt (18-42 x 18 px @2 x)10-22 x 10 pt (20-44 x 20 px @2 x)10.5-23.5 x 21 pt (21-47 x 21 @2 x)N/A 12-26 x 12 pt (24-52 x 24 px @2 x)Ring 14 x 14 pt (28 x 28 px @2 x)14 x 14 pt (28 x 28 px @2 x)15 x 15 pt (30 x 30 px @2 x)16 x 16 pt (32 x 32 px @2 x)16.5 x 16.5 pt (33 x 33 px @2 x)Square 20 x 20 pt (40 x 40 px @2 x)22 x 22 pt (44 x 44 px @2 x)23.5 x 23.5 pt (47 x 47 px @2 x)25 x 25 pt (50 x 50 px @2 x)26 x 26 pt (52 x 52 px @2 x)The utilitarian large layout is primarily text-based, but also supports an interface icon placed on the leading side of the text. This layout spans the bottom of a watch face, like the Utility or Motion watch faces. Large flat As you design images for a utilitarian large layout, use the following values for guidance. Content 38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm Flat 9-21 x 9 pt (18-42 x 18 px @2 x)10-22 x 10 pt (20-44 x 20 px @2 x)10.5-23.5 x 10.5 pt (21-47 x 21 px @2 x)N/A 12-26 x 12 pt (24-52 x 24 px @2 x)Rectangular Rectangular layouts 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. The large rectangular region works 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. Starting with watch OS 10, if you have created a rectangular layout for your watch OS app, the system may display it in the Smart Stack. You can optimize this presentation in a few ways:By supplying background color or content that communicates information or aids in recognition By using intents to specify relevancy, and help ensure that your widget is displayed in the Smart Stack at times that are most appropriate and useful to people By creating a custom layout of your information that is optimized for the Smart Stack For developer guidance, see Widget Family.accessory Rectangular. See Widgets for additional guidance on designing widgets for the Smart Stack. Standard body Text gauge Large image Use the following values for guidance as you create images for a rectangular layout. Content 40 mm 41 mm 44 mm 45 mm/49 mm Large image with title \*150 x 47 pt (300 x 94 px @2 x)159 x 50 pt (318 x 100 px @2 x)171 x 54 pt (342 x 108 px @2 x)178.5 x 56 pt (357 x 112 px @2 x)Large image without title \*162 x 69 pt (324 x 138 px @2 x)171.5 x 73 pt (343 x 146 px @2 x)184 x 78 pt (368 x 156 px @2 x)193 x 82 pt (386 x 164 px @2 x)Standard body 12 x 12 pt (24 x 24 px @2 x)12.5 x 12.5 pt (25 x 25 px @2 x)13.5 x 13.5 pt (27 x 27 px @2 x)14.5 x 14.5 pt (29 x 29 px @2 x)Text gauge 12 x 12 pt (24 x 24 px @2 x)12.5 x 12.5 pt (25 x 25 px @2 x)13.5 x 13.5 pt (27 x 27 px @2 x)14.5 x 14.5 pt (29 x 29 px @2 x)Note Both large-image layouts automatically include a four-point corner radius. A Swift UI view that implements a rectangular layout uses the following default text values:Style: Rounded Weight: Medium Text size: 16.5 pt (40 mm), 17.5 pt (41 mm), 18 pt (44 mm), 19.5 pt (45 mm/49 mm)Legacy templates 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).Ring image Ring text Simple image Simple text Stack image Stack text As you design images for a circular small complication, use the following values for guidance. Image 38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm Ring 20 x 20 pt (40 x 40 px @2 x)22 x 22 pt (44 x 44 px @2 x)23.5 x 23.5 pt (47 x 47 px @2 x)24 x 24 pt (48 x 48 px @2 x)26 x 26 pt (52 x 52 px @2 x)Simple 16 x 16 pt (32 x 32 px @2 x)18 x 18 pt (36 x 36 px @2 x)19 x 19 pt (38 x 38 px @2 x)20 x 20 pt (40 x 40 px @2 x)21.5 x 21.5 pt (43 x 43 px @2 x)Stack 16 x 7 pt (32 x 14 px @2 x)17 x 8 pt (34 x 16 px @2 x)18 x 8.5 pt (36 x 17 px @2 x)19 x 9 pt (38 x 18 px @2 x)19 x 9.5 pt (38 x 19 px @2 x)Placeholder 16 x 16 pt (32 x 32 px @2 x)18 x 18 x pt (36 x 36 px @2 x)19 x 19 pt (38 x 38 px @2 x)20 x 20 pt (40 x 40 px @2 x)21.5 x 21.5 pt (43 x 43 px @2 x)Note In each stack measurement, the width value represents the maximum size. 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).Columns text Ring image Ring text Simple image Simple text Stack image Stack text As you design icons and images for a modular small complication, use the following values for guidance. Image 38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm Ring 18 x 18 pt (36 x 36 px @2 x)19 x 19 pt (38 x 38 px @2 x)20 x 20 pt (40 x 40 px @2 x)21 x 21 pt (42 x 42 px @2 x)22.5 x 22.5 pt (45 x 45 px @2 x)Simple 26 x 26 pt (52 x 52 px @2 x)29 x 29 pt (58 x 58 px @2 x)30.5 x 30.5 pt (61 x 61 px @2 x)32 x 32 pt (64 x 64 px @2 x)34.5 x 34.5 pt (69 x 69 px @2 x)Stack 26 x 14 pt (52 x 28 px @2 x)29 x 15 pt (58 x 30 px @2 x)30.5 x 16 pt (61 x 32 px @2 x)32 x 17 pt (64 x 34 px @2 x)34.5 x 18 pt (69 x 36 px @2 x)Placeholder 26 x 26 pt (52 x 52 px @2 x)29 x 29 pt (58 x 58 px @2 x)30.5 x 30.5 pt (61 x 61 px @2 x)32 x 32 pt (64 x 64 px @2 x)34.5 x 34.5 pt (69 x 69 px @2 x)Note In each stack measurement, the width value represents the maximum size. 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).Columns Standard body Table Tall body As you design icons and images for a modular large complication, use the following values for guidance. Content 38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm Columns 11-32 x 11 pt (22-64 x 22 px @2 x)12-37 x 12 pt (24-74 x 24 px @2 x)12.5-39 x 12.5 pt (25-78 x 25 px @2 x)14-42 x 14 pt (28-84 x 28 px @2 x)14.5-44 x 14.5 pt (29-88 x 29 px @2 x)Standard body 11-32 x 11 pt (22-64 x 22 px @2 x)12-37 x 12 pt (24-74 x 24 px @2 x)12.5-39 x 12.5 pt (25-78 x 25 px @2 x)14-42 x 14 pt (28-84 x 28 px @2 x)14.5-44 x 14.5 pt (29-88 x 29 px @2 x)Table 11-32 x 11 pt (22-64 x 22 px @2 x)12-37 x 12 pt (24-74 x 24 px @2 x)12.5-39 x 12.5 pt (25-78 x 25 px @2 x)14-42 x 14 pt (28-84 x 28 px @2 x)14.5-44 x 14.5 pt (29-88 x 29 px @2 x)Extra large Extra large templates display larger text and images (for example, on the X-Large watch faces).Ring image Ring text Simple image Simple text Stack image Stack text As you design icons and images for an extra large complication, use the following values for guidance. Image 38 mm 40 mm/42 mm 41 mm 44 mm 45 mm/49 mm Ring 63 x 63 pt (126 x 126 px @2 x)66.5 x 66.5 pt (133 x 133 px @2 x)70.5 x 70.5 pt (141 x 141 px @2 x)73 x 73 pt (146 x 146 px @2 x)79 x 79 pt (158 x 158 px @2 x)Simple 91 x 91 pt (182 x 182 px @2 x)101.5 x 101.5 pt (203 x 203 px @2 x)107.5 x 107.5 pt (215 x 215 px @2 x)112 x 112 pt (224 x 224 px @2 x)121 x 121 pt (242 x 242 px @2 x )Stack 78 x 42 pt (156 x 84 px @2 x)87 x 45 pt (174 x 90 px @2 x)92 x 47.5 pt (184 x 95 px @2 x)96 x 51 pt (192 x 102 px @2 x)103.5 x 53.5 pt (207 x 107 px @2 x)Placeholder 91 x 91 pt (182 x 182 px @2 x)101.5 x 101.5 pt (203 x 203 px @2 x)107.5 x 107.5 pt (215 x 215 px @2 x)112 x 112 pt (224 x 224 px @2 x)121 x 121 pt (242 x 242 px @2 x)Note In each stack measurement, the width value represents the maximum size. Platform considerations Not supported in i OS, i Pad OS, mac OS, tv OS, or vision OS.
