Say hello to the next generation of CarPlay design system

Hi there, I’m Ben Crick from the Apple Design Team, and today I get to introduce you to the Next Generation of CarPlay design system. Specifically, we’re going to dive into the extensive customization features that empower automakers, in partnership with our team here, to tailor the look and functionality of CarPlay to each vehicle. That means if you’re a designer in the auto industry, this talk’s for you! If that’s not you but you’re curious, stick around anyway, this’ll be an exciting look into the future of CarPlay.

It’s the best of iPhone and the best of your car together in a unified, consistent experience across all of the driver’s displays. One that’s familiar where it matters, yet new, beautiful, and unique to your vehicle.

In particular today, we’ll focus on one of the most exciting and expressive new areas: the instrument cluster.

In this session you’ll learn how gauge designs are customized for each automaker, how they support unique instrument cluster layouts and how to surface all kinds of iOS and vehicle content in the driver display, and beyond.

Most of all though, we hope that you’re inspired to imagine what your own experience might look like.

This session is focused on design, but for a more technical look under the hood, make sure to check out the companion talk “Meet the Next Generation of CarPlay Architecture” by my colleague Tanya Kancheva.

Before we get into the details, let’s talk about how we got here. It’s pretty simple really, cars have changed a lot since CarPlay first launched. Screens are becoming larger and we’re seeing more of them. For example, screens are quickly replacing the analogue instrument cluster and it’s not hard to understand why, with all the fantastic new features and functions todays vehicles have. There’s a ton of exciting and creative new configurations hitting the road every year. Well, at WWDC in 2022, we first teased this Next Generation of CarPlay.

It provides content for all those driver’s screens, for an experience that’s unified and consistent. Drivers will have the choice between CarPlay or this experience that is the very best of your car and your iPhone. And the truth is, the default design for Next Generation CarPlay in your vehicle will look very different to this or any other car out there. Introducing the powerful new design system at the heart of the Next Generation of CarPlay! It’s built from the ground up to be deeply customizable.

It’s designed to adapt to any vehicle drivetrain, feature set, and configuration. One screen or many, big screens or small, and any screen in between but most importantly for todays topic, to look beautifully on-brand, for your brand. It enables you to express your own visual design philosophy within CarPlay, to create an iconic, individual look tailored to you, your vehicles, and their unique functions. The result won’t just look like Apple. And it also won’t just look like a copy of the built-in system. It’s designed to be a unique celebration of the both brands a special co-branded experience only when your vehicle and iPhone come together, and it reflects a great deal of hard work we’ve done with automakers all over the world to innovate the in-car experience.

At the heart of this co-branded experience is the driver display. In this section we’ll take a closer look at what’s possible, and how automakers, in partnership with Apple, can make Next Generation CarPlay instruments your own. Let’s start with Typography. We use our SF family of typefaces for a number of reasons, but foremost among them, because they are a special type of font called a variable font.

Our variable fonts allow qualities like weight and width both extended and condensed as well as the softness of the corners to all exist on a continuous scale, as you’ve just seen. We’re not limited to the standard “light”, “regular”, or “bold” options of traditional fonts. Instead, any point between any of these qualities can be selected, providing a huge range of stylistic options. We’ve built the rest of the system with the same logic in mind. So when designing your unique instrument cluster, you don’t have to choose from a limited set of pre-determined configurations. For example, here we have something very light and elegant. But what if you’re looking for something a little bolder? Well as you might expect, along with typography, Next Generation CarPlay allows you to customize the width of elements in the gauge, as well as the softness of the corners. Or sharpness, if you prefer.

Hard to argue that this isn’t looking bold and graphic now.

Circular gauges let you decide the arc of the gauge too, as well as it’s start and end points. We’ve used this feature here to extend the gauge into a full circle and double down on its geometric silhouette, as well as adjusting the position of the fuel gauge to accommodate.

Of course, you can choose the color of the gauges too. This blue for example nicely softens the impact of that bold gauge, and helps with overall hierarchy.

Let’s add another color into the fuel gauge for a little more variety.

Of course, you’re not just limited to flat colors either. Gradients are a fantastic way to add nuance and dimension.

And if you wanted to really hero that gradient, we can simply expand the width of the stroke all the way to the center. Not too bad, we’re getting somewhere now.

But let’s move the type into our secondary position so that we can see the gradient even more.

We’ve arrived at something both contemporary and elegant, with a little bit of an homage to a classic gauge needle.

But what if you actually want an analog needle? Well, we have that option too.

And while we’re speaking of iconic gauge cluster elements, what design system would be complete without tick marks? The number of ticks, their length, style and their position are all customizable. You can even have multiple sets of ticks if you’re looking to create something really technical.

For now, let’s go with something more classic for the ticks and add some numbers as well, to complete the look.

Hopefully, this has given you a sense of the simple mechanics behind the gauge styling system, and a taste of the flexibility and creativity they enable.

And that’s really just scratching the surface, when you start layering these techniques, almost anything’s possible.

Of course, this is all in service of creating that beautiful co-branded experience, and while we’ve had a blast in the Apple Design Studio here developing and testing the system, the best part is when we get to work together with you you to create something that’s new and exciting for both of us.

The Next Generation of CarPlay is not just limited to circular gauges either: we have a host of other components too, with even more styles on their way. As you’ve seen, this system is deeply customizable and adaptable. It enables a wide range of gauge styles from traditional to modern, a highly flexible typography system, geometries for different line treatments and tick choices, a palette of colors to reflect your brand and much more.

Next, let’s take a look at some of the functions that you’re unique gauge style is capable of.

We’ve worked hard to ensure that no matter the style of the gauge, it will support all the functionality and features you need, in a way that's logical and consistent. To demonstrate how our gauges adapt their functions to different styles, we’re going to show a side by side here as we talk about a few common functions. On the left we have a minimalist, linear style gauge in light mode, and on the right we have a more technical circular style, shown here in dark mode.

In our system, the Speedometer is always paired with a fuel gauge, or state of charge gauge like we have here, depending on the type of powertrain.

Ok, let’s start our drive.

If the driver activates cruise control, the target speed is marked on the gauge with a dot, and the set speed shows as text adjacent to that dot.

For vehicles with adaptive cruise control, when the vehicle is not traveling at the target speed. For example, if the car ahead slows down, a line is drawn between the current speed and the target speed to provide a glanceable representation that the adaptive cruise control system will return to the target speed when it can.

The color of the cruise control UI changes based on state, and is customizable to suit the color scheme of the gauge style.

There is also support for speed limiter which shows as a simple line, in contrast to the cruise control dot. It also takes on a different color.

Near the current speed readout, we like to reserve a space for road signage as well as alternate units for speed, should they be required.

Of course we also support all the states you would expect, like low remaining charge or fuel, in orange and critical in red.

The point at which these states show up is defined by you.

Beyond the speedometer, the Next Generation of CarPlay has support for secondary gauges for any type of powertrain you might like to display like these tachometers for a combustion engine, paired here with a secondary gauge for engine coolant temperature and complete with options for the various markings and states you’d expect like current gear for manual drive modes, redline, and arrows for recommended gear changes.

If your vehicle is electric, the same is true for power meters. We retain common elements like drive mode and transmission state. But we have affordances for EV unique things like boost as well as regenerative breaking.

We even have hybrid gauges for automakers that wish to show both a power meter and a tachometer at the same time. In these examples, the electric component is emphasized by the thicker part of the gauge with the combustion shown in parallel in a more compact format.

In circular gauges you can even swap out the transmission state for an image, should you prefer to showcase your brand, or a particular trim level.

So there you have it, once you've customized your gauge style, you can be sure that it will work in all the ways you expect. Whether it’s cruise control, speed limiter, or road signage in the speedometer drive mode, transmission state, or redline in the tachometer boost and regenerative breaking in a power meter, hybrids of both combustion and electric, and secondary gauges like engine coolant temperature. In fact there’s even more than we have time to share today. We’re excited to continue expanding the functionality in Next Generation CarPlay to ensure that it supports anything you need. Now that we have a gauge style picked out, it’s time to build a layout by combining a few different types of gauges.

Of course, there are a few requirements when it comes to building a layout; current speed and fuel level for example, are mandatory. But as we touched on a moment ago, other gauges like a power meter or a tachometer are completely voluntary. If they feel appropriate, we have all the options we’ve just discussed and more. But if something less instrumentation focused is more fitting in your vehicle or configuration, that works too. It’s all thanks to our modular layout system. Let’s take a look.

Each gauge is constructed as a self contained, modular component. These components form the basis of the layout system. They are resizable so you can fine tune them to your preference, or to best fit your particular hardware size and shape.

The real fun though is in assembling different types of gauges into different configurations. This brings a whole other layer of customization to the instrument cluster.

For example, by combining this circular center gauge with some minimal linear gauges, we can create something simple and sleek like this.

Or, we can create an entirely different impression by swapping those components for these information rich, multi-gauge options. Here we’ve also added tick marks to our gauge style to add to the technical feel.

This modularity also means you can layout information in whatever position makes sense for your brand, hardware configuration, feature set, or ergonomic preference.

And on top of all this or underneath it, to be more accurate you can also add your own custom wallpapers not just to the cluster, but across every display. Wallpapers are a great way to show off those big panoramic displays, and to add even more of your unique flavor to Next Generation CarPlay.

They’re also a great way to compliment your unique gauge and layout choices. For example, pairing this landscape with this technical, linear gauge style evokes adventure and off-roading.

Speaking of displays, as we’ve mentioned we know they come in all shapes and sizes.

Let’s look at this design in a wider format to show how our components flex to adapt.

These linear gauges in particular feel well suited to wide, slim driver displays.

What about a more irregular screen? Well one of our previous gauge layouts would lend it’s self well to this shape, especially with a little fine tuning of the component sizes, but perhaps you're looking for something less instrumentation focused.

If you want to maximize the impact of maps, ADAS, or just media, we have compact options for layout and instrumentation too.

And that’s the basics of laying out a co-branded instrument cluster.

Highly modular, for even more choice in design and in the functionality your want to surface. Incredibly flexible, so no matter the hardware size, shape, or configuration, it always feels at home. And last but not least, support for beautiful custom backgrounds across all displays At a high level, that covers the majority of the design system for automakers. It empowers you, in partnership with our team here to develop a beautiful co-branded experience that celebrates both brands. One that’s unique to you and your feature set, and totally at home in your configuration. But we also know how important it is for drivers to customize their experience. So to complete our look at the instrument cluster today, let’s talk about some of the choices drivers have to surface content in the cluster and beyond, along with some opportunities that this presents for you. No matter the layout or design you land on, the system will always have a reserved space for what we call dynamic content.

Some layouts can be configured to feature this content at all times as a permanent part of their design. Looking at the two designs on the left here, the layout on top features a regular sized content area for it’s middle component: a trip computer. The bottom by contrast uses a large content component to hero the map, paired with compact instrumentation.

Others though, might prefer to utilize the full display for instrumentation but even then, dynamic content can be stacked behind non-critical gauge elements so the user can have an immersive instrument focused experience without sacrificing access to useful content options.

Whatever position the dynamic content area ends up in, it’s always easy for the driver to interact with. They simply flip through the different options using your steering wheel controls This should be a pretty familiar pattern for most drivers today.

The dynamic content area also serves as the default location for notifications and pop-ups. We support a variety of notification formats, from the basic text and symbol, including interactive and dismissible variations to rich overlays that feature multiple states, including image assets of your vehicle.

If your particular system needs to show two notifications at the same time, Next Generation CarPlay can support that too.

And dynamic content is not just limited to the driver display. Drivers can choose from favorites like Maps and Now Playing, as well as all new vehicle information like trip computer, tire pressure, and your advanced driver assistance systems. For content that includes a visual of the vehicle, like on the top left, Next Generation CarPlay supports your imagery. Your vehicle rendered how you like it You can also reflect different attributes if you want, like color, or trim level. It’s up to you and the detail you want to show.

Cluster content will focus on the core driving experience, but center and passanger displays present an exciting space for more diverse content. You can imagine the ways these collections could expand in the future with even more apps and categories. We’re eager to work with you to explore what’s possible, including ways to surface your own unique content.

That’s dynamic content, a simple but powerful feature that surfaces so much of the things drivers love. It’s always available in the cluster, regardless of the chosen layout or gauge style. It combines the best features and content from the vehicle with favorites from iOS. And it ensures there’s always a clear space for notifications and pop-ups.

We can’t wait to see this exciting feature and how it'll evolve in your cars.

Taken all together, this system allows you to create a deeply customized, integrated experience for your vehicles, and an delightful co-branded experience for those people who love both our products. It goes far beyond what you can do with CarPlay today.

A deeply customizable design system.

A flexible layout system that can adapt to your hardware configuration and design preferences. Backgrounds and color theming across every driver display.

Dynamic content that combines vehicle info with fan favourite CarPlay features. And so much more than we can cover today, like the new native climate app that you can see on the center screen here as well as terrestrial radio with hard key integration for everything, of course. There’s also automaker settings for effortlessly folding all your features in, and automaker apps that ensure you can elegantly surface your unique experiences and interfaces and update them as easily as updating your app today.

And that’s a look at The Next Generation of CarPlay’s design system. And don’t forget, for more on the technical side, check out the companion talk by my colleague Tanya Kancheva, where you can get a proper look under the hood.

The next generation of CarPlay is the best of iPhone and the best of your brand together in a beautiful, unified, consistent experience. Unique to your brand, totally at home in your vehicle, with all the benefits of expanded features, deep integration, and familiar interaction patterns.

To learn more about supporting the Next Generation of CarPlay, enroll in the Apple MFi program.

We hope it’s been an informative and inspiring session, and look forward to talking with you soon.