-
Communicate your brand identity on iOS
Explore practical approaches to branding using typography, color, components, and interactions that balance the familiar with the unique.
Chapters
- 0:00 - Intro
- 2:24 - Components
- 6:41 - Content
- 11:49 - Color
- 11:50 - Typography
- 14:17 - Iconography
Resources
-
Search this video…
Branding is likely top of mind for you and it's a helpful way to communicate and differentiate your products. But, how do you achieve the expression of your brand identity while keeping the integrity of familiar paradigms on iOS? I'm Sarah, a Design Evangelist, and today I'm going to unpack that. I'll share how to approach design in ways that feel familiar where it matters, but bespoke where needed.
There's an aspect of branding that is aesthetic such as the use of refined and memorable typography, the expressive use of color, or the visual language of iconography. I'll share practical guidance as these relate to iOS apps.
But branding is also a feeling it's an extension of how you see a product that bleeds into how you experience a product. This is less tangible, but in many ways, more meaningful. It's possible your product has a website, digital marketing, a retail store, or even an app on another platform. And you might be tempted to make your brand identical across all of these experiences. But each of these placements should consider the context. They shouldn't default to being the same.
People who use iPhone's expect the apps on their phone to look and feel like iOS. This is comprised of components, patterns, and functionality that has been meticulously refined for the iPhone.
And people don't typically have experience with other versions of your app outside of Apple's ecosystem. The tips I'll share today are centered around how branding can be of service to your app experience. This doesn't mean your app needs to look identical to an Apple app. There are a lot of ways to refine your brand within the bounds of the operating system.
I'll share some great examples from developers who strike the balance of distinct branding without compromising the native feel.
First, you'll learn how the UI and components of your app can be customized, while still feeling like they belong on the operating system. I'll cover ways to make your content shine, the appropriate places to use color in your interface, considerations when using custom fonts, and examples of great iconography and resources you can use.
Let's set the foundation for how to think about where brand belongs.
With the introduction of Liquid Glass in iOS 26, we started thinking about interfaces in a slightly different way.
Think of your app as two distinct layers: the UI layer, which serves as the global navigation, and the content layer, which sits beneath these controls and contains all the features that make your app unique. Conceptually, the content layer is the best opportunity to express your brand identity. This allows the UI layer of your app to act as a foundation that helps people get around and find what they're looking for.
The UI Layer is an app's navigation and actions. Expressed through components like tab bars and top toolbars they stay floating above the content layer for easy access.
Try to lean into what's already familiar for people on iOS, rather then reinvent the wheel.
Gentler Streak is an app that keeps you motivated and helps you build a fitness routine. At a glance you can tell the app has a distinct identity: playful illustrations and detailed data visualizations.
But their navigation: the tab bar and top toolbar actions, are all native. They don't heavily customize the UI or deviate from the patterns.
Establishing a baseline of platform familiarity is important. Otherwise people will need to learn how to use your app.
Standard components such as grid views and grouped tables are highly flexible and functional. If you draw upon what people already understand, they'll instinctively know how to use your app.
Now, it's expected that components will occasionally need to be customized to fit your app needs.
The messaging app Slack has built a custom top toolbar where a middle action shows Channel information. But the overall look of the component: like button sizes, placement of floating actions, and the popover behavior - all feel very iOS.
Another example that I love is from the app Moonlitt. The app tracks the lunar cycle for photography and moon phases. The UI is simple, it's a flat hierarchy and doesn't need a tab bar.
The lunar cycle calendar is a custom component that shows moon phases throughout the month at a glance. But it leverages the design language of iOS. With a Liquid Glass backing, a primary action to dismiss, and the sheet has concentric edges to match the hardware. This app is totally unique. And yet, clearly belongs on iOS.
Custom components take refinement. So you should focus your time building them for areas of your app that have the biggest impact or make your content stand out.
Then, audit your app for opportunities to use standard components for aspects of your app that are functional.
For example, beyond navigation, one standard component that's often overlooked is context menus. They're often displayed from a button in the top toolbar and contain actions related to the whole screen, as opposed to in-line. They provide convenient access to frequently used items, just a tap away.
And they're super flexible. Your actions can have icons. They can be grouped into sections with optional headers. Or present a secondary menu or modal.
Moonlitt uses a Context Menu for their settings. Notice the animation that's built into the control deliberately morphing from the action that was tapped. With SwiftUI, you get these components and interactions out of the box.
This is just one example where creating a custom component will require work to build and maintain. These types of custom elements, the ones that serve a very utilitarian purpose, don't usually reinforce a brand.
In fact, they can make the product appear less native - or even dated - because they feel misplaced, replicating something tried and true.
When it comes to your UI, there are endless possibilities, but try to build on what people know. Use platform components for conventional tasks and customize components to cater to your specific needs.
With this perspective about your UI, think of the content layer as your canvas. This can include imagery, videos, even words it's the information your app provides to people.
For example, the Crumbl app uses full-bleed videos to highlight their weekly flavors. These video's aren't just generic assets, they help draw a deeper connection to the product because they change weekly. Incorporating content well is all about making sure it has a clear purpose. Moonlitt takes a different approach: their content is edge-to-edge color mimicking gradation in the night sky. The 3D elements dynamically portray your position in relation to the moon. It feels relevant for their content to feel immersive and take over the entire interface.
But, content can also be the words used throughout your messaging. And words are powerful because they can effect how we feel. I encourage you to explore how voice and tone can shape your brand.
Sometimes an app is targeting a specific emotion such as feeling playful and fun, or trustworthy and safe. Be very deliberate about how you want to make people feel.
There's a lot more to say here, so to learn about copy writing for your content, check out the video: "Add personality to your app through UX writing".
Keep in mind, people don't experience apps as static screens. They're dynamic experiences as people scroll, tap, and interact. So, transitions and animations are the ways in which your content is experienced.
One example is the NYT Cooking app. In a recipe detail view, comments are an important part of the content. The app uses SwiftUI's Zoom Transitions for the comments related to a recipe. These kind of transitions are delightful and feel fluid, but they also improve interaction by connecting the tap target to the transition state.
For Gentler Streak, motion makes the app feel active, engaging, and approachable. As you scroll through a monthly recap page, your activities feel almost magical spring animations make the content really pop. Motion helps emphasize hierarchy and brings attention to what matters.
But delayed load times or dropped frames translate poorly to peoples perception of your app, even if they couldn't pinpoint exactly why.
People remember how a product makes them feel design an experience that's satisfying, enriching and a joy to use.
Now that you're mindful of how the foundation of your app should honor platform patterns, let's talk about color.
Before iOS 26, apps would often use solid backgrounds on the top toolbars and tab bars of their apps.
But these UI elements were bulky and letterboxed the content area, restricting it to an even smaller portion of the screen.
With the new design language we introduced, our recommendation is to move color into the content area of your app, into the scroll view.
That way, Liquid Glass controls sit above the content layer and pick up your brand color dynamically. The other thing to consider here is that color can be distracting and make an interface feel overwhelming.
Aim to use color in ways that create meaning such as portraying hierarchy, groupings, or indicating interaction. Which is why color is often seen on controls and actions. This is referred to as your app's accent or tint color.
Slack uses color sparingly. They use tint for primary actions like: sections with new information, badges to show unread messages, new message creation, and the selected state in the tab bar. Intentional use of color communicates status, feedback, and selection states helping people focus on what's important.
And they moved their solid top toolbar color into the content area so it scrolls away, allowing content to spread edge to edge.
Don't be afraid to use color in your app! It can enhance communication, evoke your brand, and provide visual continuity.
Keep in mind, the iPhone is an incredibly personal device. Features like Dark Mode are preferences people set for their comfort and needs. Gentler Streak, Slack, and NYT Cooking have a refined color palette for low-light environments. If your app doesn't support Dark Mode, people may have a negative experience that translates to your product.
There are also various touch points where your brand identity can extend beyond your app. For example, if people find the data in your app valuable, they can choose to use your Widget.
Here's an example of Crumbl's Widget's branded with their pastel color palette and distinct imagery. They don't just look delicious, they're also immediately recognizable.
When working with color, exercise restraint — use it sparingly and with intention so it has the biggest impact.
Of all the tools at your disposal, typography is often a favorite. It can be expressive, bold, or elegant, but should always be functional.
Let's revisit the Crumbl app. They've built their own Typeface, Crumbl Sans, that they use throughout their marketing and in moments of their iOS app that are memorable. This is particularly obvious with large headers like their cookie flavors.
The primary thing to be aware of when using custom fonts on iOS is how they scale.
Dynamic Type is the setting within Accessibility to increase font sizes across the operating system. It's important to think about this for people with vision and cognitive disabilities but Dynamic Type is also a preference, that many people rely on.
This is built into Apple's System Fonts, but you'll need to build support, and test for this, when you use your own Custom Fonts.
Notice how when someone increases their system font size through Dynamic Type the Crumbl app is still legible. As the font size increases, rather than truncating the labels their layout accommodates them, dropping text to multiple lines as needed.
Dynamic type also applies to standard components. When the type is set to larger accessibility sizes, the tab labels and icons appear larger in the center of the screen.
Strive to have your app accommodate as many people as possible. It might sound simple, but when people can clearly see the UI and read the text in your app, they're going to have a more positive experience.
San Francisco is the system font for all Apple platforms. It's a typeface that provides a consistent, legible, and friendly typographic voice supporting over 150 languages.
SF Pro is the default, but there are other variants: SF Compact is optimized for small sizes, SF Mono is designed for row and column alignment which is great for coding, and New York is a Serif for traditional reading and a graphic display face.
Some apps, like Gentler Streak, use system fonts entirely. With a mix of font widths, and variants like SF Rounded, they've achieved variety and hierarchy, while still feeling distinct.
Typography is a strong way to express identity. Try to design the fonts in your interface to be flexible and adapt to people's needs.
And finally, iconography. For the most part, you can use your own iconography anywhere throughout your app, from the content view to controls.
An example of custom iconography that works really well is the NYT Cooking app. Their icons have sharper edges and typically use a line-weight variant. I like that they're unique to their app, but not overly detailed, so they scale well to small sizes.
Their icons are used on their tab bar, top toolbars, and in-line actions in the content layer. They're consistent, cohesive, and a simple nod to their brand.
Something I respect about their iconography is platform consideration. Here are three different versions of the Share icon across iOS, Android and Web. Even though they've created their own style of icons each of these actions stays true to the platform pattern of sharing.
Iconography doesn't need to be heavily stylized. It should aim to be identifiable and serve a clear purpose.
And… not every app needs custom iconography. SF Symbols is a Mac app with over 7,000 symbols that you can use for free.
SF Symbols are built like a font, so they scale dynamically like text. And they're designed to be neutral the style of SF Symbols is intended to work for all types of apps across Apple platforms. They have various line weights, accessibility and localization support.
Best of all? They're built right into Xcode, so no need for design teams to export icon libraries and manage file handoff.
On the topic of icons, let's touch briefly on logo's. In the context of iOS, people don't need to be reminded which app they're using. And logo's can take up precious real estate best reserved for more pertinent information.
In NYT Cooking their logo is only displayed on the Home tab, and it fades on scroll.
There's something really elegant about how understated this is. Aim to incorporate branding like this in refined and unobtrusive ways that don't distract people from your experience.
If you choose to use your own iconography, make sure they're recognizable, consistent and that they scale well to small sizes.
All of the apps I talked about today, have approached branding in a way that complements the experience, rather than distracts from it. They have predictable navigation patterns that help people quickly understand how to use their app. But they've integrated their own identity in ways that are subtle, but meaningful.
We encourage exploration of your brand throughout your iOS apps. Just remember that iOS is a platform with established interactions and forcing your brand can compromise the user experience. Be mindful of where it oversteps with system behavior or confuses familiar conventions. We're delighted by the creative ways people inject their brand identity, so continue to exercise your creativity.
-
-
- 0:00 - Intro
An overview of how you can strike a balance between highlighting your brand while using familiar iOS patterns. Examples will cover 5 great apps that adapt their brand across the areas of components, content, color, typography and iconography.
- 2:24 - Components
With Liquid Glass in iOS 26, your app is represented in two distinct layers: the UI layer and the content layer. The content layer is the best place to express your unique brand identity awhile the UI layer should use standard components that people are already familiar with.
- 6:41 - Content
Apps like Crumbl, Moonlitt, NYT Cooking, and Gentler Streak use full-bleed imagery, videos, words and animations to showcase their brand identity in their iOS apps.
- 11:49 - Color
With iOS 26, we recommend moving brand color moments into the content area of your app and using it for a clear purpose: to indicate actions, status and feedback. Be mindful of how people customize their iPhones by supporting features like Dark Mode.
- 11:50 - Typography
Typography is a great way to inject brand identity into an app. Support Dynamic Type settings when using custom fonts consider how apps like Gentler Streak are able to showcase their brand while using the default system fonts.
- 14:17 - Iconography
Custom iconography is encouraged and looks great in components like tab bars and toolbars. Keep in mind platform conventions for certain actions differ across web and mobile platforms. SF Symbols has over 7,000 symbols you can use for free if you don't want to use custom icons.