Elevation

Elevation refers to the virtual height or distance of an interface element from the background surface, expressed through visual cues such as shadows and blur effects. In SAP Fiori for iOS, this principle is implemented through a subtle combination of translucent materials and minimal shadows, creating layered depth that aligns with iOS’s minimalist design language to deliver an intuitive, cohesive app experience.

Shadows: Adding Depth and Focus

Shadows are an essential technique for making key interface elements stand out and appear more interactive, such as cards, modals, and other actionable components.

Soft, Subtle Shadows

Soft and diffused shadows mimic real-world lighting conditions. The goal is to enhance element elevation and usability while maintaining visual harmony, allowing elevated components to stand out without overwhelming the design.

Elevation Levels

SAP Fiori for iOS provides five distinct elevation levels (0-4) to establish visual hierarchy within the UI. Higher levels are typically used for prominent content, guiding users’ attention to the most critical interactive areas.

Name	Usage	Light Mode	Dark Mode
Level 0	Banners / headers / preview table views
Level 1	N/A
Level 2	Cards / modal views (singular)
Level 3	Toast messages / quick sort menus
Level 4	Popovers

Materials: Separating Content Layers

Apple’s materials effects use blur and transparency to create a layered, natural-looking depth in your interface. This approach helps integrate key interface elements, such as navigation bars, modals, contextual menus, and toolbars, delivering a visually immersive experience that balances functionality with harmony.

Depth and Focus through Material Thickness

The thickness of a material affects the degree of background blur. Thicker materials blur more heavily, signaling a higher focus on foreground content, while thinner materials preserve more background context.
Maintaining Focus with Foreground Clarity and Background Blur
Materials keep interactive elements (such as text, buttons, and other controls) sharp and clear while subtly blurring the background. This helps users focus on actionable UI components without losing overall context awareness.

Layering Materials for Content Hierarchy

Different material types (Chrome, Regular, Thin, UltraThin, Thick) establish varying levels of focus and separation. Thicker materials push background content further back, while thinner materials balance foreground prominence with background visibility.
Vibrancy: Enhancing Foreground Elements
Vibrancy works in tandem with materials to increase brightness and contrast on blurred backgrounds, ensuring that elements like text, icons, and buttons remain legible and visually prominent. This technique effectively highlights important actions and differentiates them from passive content.

Vibrancy: Enhancing Foreground Elements

Vibrancy works in tandem with materials to increase brightness and contrast on blurred backgrounds, ensuring that elements like text, icons, and buttons remain legible and visually prominent. This technique effectively highlights important actions and differentiates them from passive content.

Practical Usage Examples

Navigation bars, tab bars, and toolbars: Use materials to highlight controls and titles, while preserving underlying.

Navigation bar showcasing Materials Chrome (UIKit) and Material Regular (SwiftUI) when scrolling

Action sheets and alerts: Apply thicker materials for strong element separation, maintaining background visibility.

Action sheet and alert showcasing Materials Regular

Resources

SAP Fiori for Android: Elevation

Apple’s HIG (Materials)

Apple Development Documentation for Materials

Related Components/Patterns: Navigation Bar, Tab Bar, Toolbar, Accessibility

Design Adaptive Apps

Optimizing your app for all window size classes requires a clear understanding of its structure and the relationships between screens. In compact size classes, users navigate through screens hierarchically, whereas in regular size classes, multiple columns can be displayed side by side.

Starting with One Window Size Class

Begin by designing your app for a specific size class, such as compact, and make sure its layout is responsive and adaptive.

Creating an Information Architecture

Develop a hierarchical model that illustrates the structure of your app.

Identifying Related Screens

Look for screens that are closely related in the information architecture, such as a list screen and its detail view. These screens typically interact directly with each other.

Merging Related Screens into Columns

For larger screens, integrate related screens into a single display using multiple columns. For example, one column could show the list, while another shows the detail view.

Adjusting Designs for Different Window Sizes Classes

Tailor your design for various window sizes by considering the following questions:

What needs to be displayed? Ensure that all essential details available on regular class are available on compact class, even if it requires an additional tap to view certain elements. For example, a filter might be shown beside a list in regular class but open on a new screen after a tap in compact class.
How should the screen be divided? Determine the best way to split content across columns for different screens.
What size adjustments are necessary? Adjust element sizes to fit different window sizes appropriately to make your app’s layout responsive and adaptive while maintaining visual coherence across devices.
What needs to be relocated? Some components might need to be moved. For example, the bottom tab bar in compact size class moves to the side as a sidebar in regular size class.
Which components should be exchanged? Replace certain elements better suited for specific class sizes. For example, a tab bar in compact size should be swapped with a sidebar in regular class.

Information architecture of an app in compact class with list and detail screen

List and detail screen in compact class

Information architecture of an app in regular class with fewer levels as several screens from compact are combined into one

Two list detail screens from compact converted to one screen in regular class

Resources

WWDC Video Design for iPad

Multi-Column Layout

Columns are used to arrange UI elements. A layout may include one or two visible columns of different widths, adjusting dynamically to the size class. Large devices may show up to three columns.

When there are multiple columns, it’s important to consider the size of each one. For example, in a list-detail layout, the list should have a fixed width and the detail column should be flexible to respond to the available space. This ensures that the layout remains visually appealing and resizes for the different size classes.

In compact size class, only one column should be used. In regular size class, two to three columns are possible.

The SwiftUI class navigation split view allows to build multi-column layout apps that scale across all Apple platforms, including watchOS. On large devices with iPadOS or VisionOS, multiple columns are displayed side by side. On narrow size devices such as iPhone, iPad in slide over, or Apple Watch, all columns are collapsed into a stack.

Each column has its own navigation bar and an optional toolbar. Columns can be shown or hidden as needed. The primary column is often used for the sidebar as the central point of navigation. The supplementary column often contains a list, while the secondary column contains the content. Changes in one column trigger changes in the content of the other column. For more information, see WWDC Video “Build for iPad”.

Several components need to be exchanged in compact to a different component in regular size class as mentioned in Design Adaptive Apps.

Tab Bar and Sidebar

For distinct information hierarchies with a few primary destinations, it is best to use a tab bar in both regular and compact layouts.

For hierarchical and deep navigation, use a sidebar in regular and a tab bar in compact mode. The sidebar flattens the information hierarchy through primary and secondary navigation targets. Additionally, users can add shortcuts to their preferred content using the edit mode.

On large screens in landscape mode, the sidebar can be displayed alongside the content. In portrait mode or on smaller screens, the sidebar collapses to an icon. Tapping on the icon or swiping from the left edge opens the sidebar as an overlay on top of the content. Let the user decide to hide the sidebar to make room for content.

For iOS 17 or earlier, we recommend replacing the sidebar with a tab bar in compact size class. However, converting the sidebar to a tab bar requires manual effort from development. By default, the sidebar is retained in compact.

Mapping of Hierarchical Navigation Destinations

The sidebar allows you to show primary and secondary destinations, with secondary destinations placed under a collapsible section header.
The tab bar in compact size class only shows primary destinations. Secondary destinations are displayed in full-screen mode, allowing for further navigation.

For more information on how to convert a tab bar to a sidebar, see WWDC Video “Designed for iPad”.

Visualization of a hierarchical navigation pattern for compact size classes

Visualization of a hierarchical navigation pattern for regular size classes

For iOS18, iPadOS18 and vison OS2, the adaptable sidebar with tab view style has the following behavior:

iOS 18: A tab bar at the bottom of the screen
iPadOS 18: A tab bar that can be converted to a sidebar by the user
macOS 15 and tvOS 14: A sidebar
visionOS 2: An ornament, in addition to a sidebar for secondary tabs within a tab section.

Modal Sheet, Form Sheet, Fullscreen Modal, and Popover

Modality is a method to present content in a temporary mode to focus the user’s attention on a single task or set of controls. With adaptive design, modality on iPhone and iPad devices adapts to the screen sizes and uses the available space. A modal is often used for completing a task, updating content, or selecting filters. Depending on the task, the appropriate modal view should be chosen. There are modal and nonmodal sheets in compact size class, form sheets, full-screen modals, and popovers in regular size class.

Sheet in Compact and Form Sheet in Regular

For distinct tasks, such as creating or editing an object, it’s best to use a modal sheet in compact size class and a form sheet or full-screen modal in regular size class. In compact size class the modal sheets slide in on top of the parent page, and the parent page shrinks slightly. The form sheet in regular size class is placed in the center of the screen with a semi-transparent overlay underneath.

Sheet in Compact and Popover in Regular

For quick tasks that influences the parent view, such as filtering a list, it’s best to use a sheet in compact size class and a popover in regular size class. The sheet in compact slides in over the parent page. The popover in regular appears next to the area that activates it.

Nonmodal Sheet in Compact and Popover in Regular

Use a nonmodal sheet when you want to directly affect the main task in the parent view, such as when formatting a note. A nonmodal sheet covers only a part of the screen in compact size class, allowing users to interact with the content behind without dimming it. It is also possible to expand the sheet with an optional grabber or through scrolling. It adapts to a popover in regular size class. For more information, see Customize and Resize Sheets and Modals.

Sheet in compact and form sheet in regular size class

Sheet in compact and popover in regular size class

Size Classes

iOS defines two main size classes: regular and compact. These classes apply to both horizontal and vertical space.
The compact size class is typically associated with smaller iOS devices such as iPhone or split-screen views on iPad, where screen real estate is limited. The regular size class is associated with larger devices such as iPads and full-screen views, providing more spacious layouts to work with. An exception are large iPhones in landscape which use regular size class.

The size class is determined by the current device type, orientation of the device, and the use of slide over or split view.
Note that in 1/2 split view, most iPads use compact size class, but some large iPads, for example, 12.9 inch and 13 inch, use regular.

The Importance of Designing with Size Classes

Due to the dynamic nature of available window space, which can be resized by the user, changed by device orientation, or by multitasking, it is important to use size classes for design instead of focusing on specific devices.

Width and Height Window Size Classes

Available width and height are classified separately, so your app has two size classes – one for width and one for height. Typically, available width holds more significance than available height because vertical scrolling is more common. Therefore, the size class related to the available width is likely more relevant to your app’s UI.

Regular size class (left): iPad in portrait and landscape mode and iPhone in landscape mode compact size class (right): iPhone in portrait and landscape mode

Layout Basics

Horizontal Space

Compact Width

The spaces between the left/right window edge and the component are called margins. In compact width layouts, full-width components have 16dp layout margins by default. The spacing between UI elements inside the components can be fixed or flexible with auto layout depending on each use case.

Regular Width

In regular width layouts, full-width components have 20dp layout margins by default. The spacing between UI elements inside the components is generally larger than the compact width variant.
With the expansive horizontal space in regular width, we recommend using two sub-classes: readable width and full-width regular.

Compact width layout on iPhone and regular width layout on iPad

Vertical Space

The height of a UI component adapts to the availability of space of the current screen. There are three variants when applying the main size classes on vertical space:

Compact height
Regular height – iPhone
Regular height – iPad

Compact Height

The compact height layout variant is only available in landscape orientation on a few iPhone devices. Inner paddings and spacings between UI elements need to be decreased and therefore allow more content to be shown on the screen.

Regular Height – iPhone

The regular height layout variant specific to iPhone devices allows the regular height size class. It is a default height class for all components.

Regular Height – iPad

The regular height layout variant specific to iPad devices only applies to some of the components that require more space.

Search bar in compact and regular size class

Layout Parts

For a seamless transition between different size classes and to provide the user with better orientation, three regions play an important part:

Navigation bar
Body
Navigation

Schematics illustrating the three main UI regions: app bar (A), body (B), and navigation (C)

Resources

Human Interface Guidelines

Developer Documentation

Colors

Color plays a significant role by setting the visual balance for iOS apps. Color is used to define the visual hierarchy of UI elements and to direct the user’s attention to the most important tasks.

Horizon Theme Color Palette

Our color system builds on a unified color palette that aligns with our brand and helps to create cohesive experiences across SAP touchpoints. The Horizon theme color palette is designed to provide flexibility to our design system while remaining accessible in instances of complex UIs. Its vibrant hues enable a flexible yet consistent color system for all SAP products.

Horizon theme UI reference colors

UI Colors

UI colors serve as an intermediate layer within the user interface, categorized by their specific roles or purposes. SAP Fiori for iOS follows the iOS standard from the Human Interface Guidelines (HIG) to ensure a structured approach to maintain consistency and accessibility across different contexts and interfaces. These dynamic colors adapt seamlessly to system appearance changes, such as light and dark modes.

Background Colors
Tint Colors
Label Colors
Fill Colors
Separator Colors
Semantic Colors
Accent Colors
Materials

Background Colors

The iOS design system defines two sets of dynamic background colors — Background and Grouped Background — each of which contains primary, secondary, and tertiary variants that help to convey a hierarchy of information. They are made up of neutral colors including shades of grey, all the way from white to black, depending on the color mode. Use these variants to indicate hierarchy in the following ways:

Primary for the overall view
Secondary for grouping content or elements within the overall view
Tertiary for grouping content or elements within secondary elements

In Dark mode, the system adds an additional set of background colors — Elevated and Grouped Elevated — to enhance the perception of depth when one dark interface is layered above another. Elevated colors are brighter than Background and Grouped Background colors, making foreground interfaces appear to advance. These colors are applied automatically to the UI in modal sheets, form sheets, and other overlay panels.

Background Colors

When the page structure is flat and most information is on the same level, use Background colors (e.g. standard table views and designs that have a white primary background in a light mode).

Light Mode		Dark Mode		Name	Usage
	Base White #FFFFFF		Base / Black #000000	Primary Background	For the overall view such as table views, collection views, and general content areas
	Grey 1 #F5F6F7		Grey 6, 24% on Black #161C21	Secondary Background	For grouping elements within the overall view / to provide a subtle visual distinction from the primary background
	Base White #FFFFFF		Grey 6, 40% on Black #242E38	Tertiary Background	For grouping content within secondary elements or less prominent background areas, such as minor interface elements or subtle dividers
	N/A		Grey 6, 25% on Black #171D23	Primary Background (Elevated)	For the overall view in modal sheets, form sheets, or overlay panels to enhance the perception of depth when one dark interface is layered above another
	N/A		Grey 6, 39.5% on Black #242D37	Secondary Background (Elevated)	For grouping elements within the overall view of modal sheets, form sheets, and overlay panels / to provide a subtle visual distinction from the primary background
	N/A		Grey 6, 52% on Black #2F3C48	Tertiary Background (Elevated)	For grouping content within secondary elements or less prominent background areas in modal sheets, form sheets, or overlay panels

Grouped Background Colors

When the view has grouped content, including grouped table views and platter-based designs, use Grouped Background colors.

Light Mode		Dark Mode		Name	Usage
	Grey 1 #F5F6F7		Base Black #000000	Primary Grouped Background	For the main background of a grouped interface
	Base White #FFFFFF		Grey 6, 24% on Black #161C21	Secondary Grouped Background	For content layered on top of the main background of a grouped interface
	Grey 1 #F5F6F7		Grey 6, 40% on Black #242E38	Tertiary Grouped Background	For content layered on top of secondary backgrounds of a grouped interface / less prominent background elements, where appropriate
	N/A		Grey 6, 25% on Black #171D23	Primary Grouped Background (Elevated)	For the main background of a grouped interface in modal sheets, form sheets, or overlay panels
	N/A		Grey 6, 39.5% on Black #242D37	Secondary Grouped Background (Elevated)	For content layered on top of the main background of a grouped interface in modal sheets, form sheets, or overlay panels
	N/A		Grey 6, 52% on Black #2F3C48	Tertiary Grouped Background (Elevated)	For content layered on top of secondary backgrounds of a grouped interface / less prominent background elements, where appropriate, in in modal sheets, form sheets, or overlay panels

Tint Colors

Tint colors are used to indicate that certain elements are interactive, for example, interactive text, icons and primary buttons. Also used for branded areas of the UI. There are four variants: Tint, Tint 2, Tint 3 and Tint Tap State colors.

Light Mode		Dark Mode		Name	Usage
	Blue 7 #0070F2		Blue 5 #4DB1FF	Tint	Tappable elements (e.g. primary button, icon & text buttons, text links)
	Blue 8 #0057D2		Blue 5 #4DB1FF	Tint 2	Tappable elements on less contrast backgrounds (e.g. secondary tint button label)
	Blue 7 #0070F2, 8%		Blue 5 #4DB1FF, 16%	Tint 3	Tappable elements (e.g. secondary tint button background)
	Blue 9 #0040B0		Blue 6 #1B90FF	Tint Tap State	Tap state of tappable elements using Tint or Tint 2

Label Colors

Label colors are used for all text elements in a view, available in five variants to provide a hierarchy of information. They are made up of neutral colors including white, black and shades of grey.

Light Mode		Dark Mode		Name	Usage
	Grey 9 #223548		Grey 1 #F5F6F7	Primary Label	Text labels that contain primary content (e.g. titles / primary texts / tertiary button label)
	Grey 7 #475E75		Grey 3 #D5DADD	Secondary Label	Text labels that contain secondary content (e.g. subtitles / secondary texts / section header texts, secondary button label)
	Grey 6 #5B738B		Grey 4 #A9B4BE	Tertiary Label	Text labels that contain tertiary content (e.g. footnotes / statuses / tertiary texts / placeholder texts)
	Grey 5 #8396A8, 46%		Grey 4 #A9B4BE, 30%	Quaternary Label	Disabled state text elements
	Base White #FFFFFF		Base Black #000000	Quinary Label	Primary button labels & icons

Fill Colors

Fill colors incorporate transparency to allow the background color to show through. They are used for items situated on top of an existing background color. Available in four variants to provide a hierarchy of information.

Light Mode		Dark Mode		Name	Usage
	Grey 5 #8396A8, 24%		Grey 5 #8396A8, 30%	Primary Fill	Use as an overlay for fill thin or small shapes on top of an existing background color
	Grey 5 #8396A8, 20%		Grey 5 #8396A8, 28%	Secondary Fill	Use as an overlay fill for medium-size shapes on top of an existing background color, (e.g. button tap states)
	Grey 5 #8396A8, 15%		Grey 5 #8396A8, 20%	Tertiary Fill	Use as an overlay fill for large shapes on top of an existing background color (e.g. secondary button)
	Grey 5 #8396A8, 9%		Grey 5 #8396A8, 16%	Quaternary Fill	Use as an overlay fill for large shapes on top of an existing background color (e.g. disabled state fills / search bar)

Separator Colors

Separator colors are applied to thin borders or divider lines used for adding visual breaks to content areas and for defining interactive areas like the text input field. They are available in two variants: partially transparent and opaque.

Light Mode		Dark Mode		Name	Usage
	Grey 6 #5B738B, 37%		Grey 5 #8396A8, 37%	Separator	Non-interactive elements allowing some underlying content to be visible (e.g. decorative elements / separators / hairlines)
	Grey 6 #5B738B, 83%		Grey 5 #8396A8, 83%	Separator (Opaque)	Non-interactive elements hiding any underlying content (e.g. higher contrast borders that are more opaque)

Semantic Colors

Semantic colors are applied to any UI element that conveys an important status, state, or level of priority. Semantic colors can be identified by the following naming: negative, critical, positive, informative, and neutral.

Light Mode		Dark Mode		Name	Usage
	Red 8 #AA0808		Red 5 #FF5C77	Negative Label	High priority elements / negative actions
	Mango 8 #A93E00		Mango 5 #FFB300	Critical Label	Medium priority elements / attention needed elements
	Green 8 #188918		Green 5 #5DC122	Positive Label	Positive elements
	Blue 8 #0057D2		Blue 5 #4DB1FF	Informative Label	Informative priority elements
	Grey 8 #354A5F		Grey 5 #8396A8	Neutral Label	Neutral priority elements
	Red 6 #EE3939, 8%		Red 6 #EE3939, 12%	Negative Background	Background of the area for presenting negative content
	Mango 6 #E76500, 8%		Mango 6 #E76500, 12%	Critical Background	Background of the area for presenting critical information
	Green 6 #BDDE54, 8%		Green 6 #36A41D, 12%	Positive Background	Background of the area for presenting positive information
	Blue 6 #85D4FF, 8%		Blue 6 #1B90FF, 12%	Informative Background	Background of the area for presenting general information
	Grey 6 #5B738B, 8%		Grey 6 #5B738B, 12%	Neutral Background	Background of the area for presenting neutral information

Accent Colors

Accent colors provide an additional level of color luminance and are used to enhance areas of the UI such as avatars, icons, and data visualizations. These colors are bright in hue and provide visual variety to the UI. Accent colors are identified by the word “Accent” followed by a number sequence (e.g., Accent 1, Accent 2, Accent 3). These color pairs comply with the accessibility standard.

Light Mode		Dark Mode		Name
	Mango 8 #A93E00		Mango 3 #FFDF72	Accent Label 1
	Red 8 #AA0808		Red 3 #FFB2D2	Accent Label 2
	Raspberry 8 #BA066C		Raspberry 3 #FECBDA	Accent Label 3
	Pink 8 #A100C2		Pink 3 #FFAFED	Accent Label 4
	Indigo 8 #470CED		Indigo 3 #D3B6FF	Accent Label 5
	Blue 8 #0057D2		Blue 3 #A6E0FF	Accent Label 6
	Teal 8 #046C7A		Teal 3 #64EDD2	Accent Label 7
	Green 8 #256F3A		Green 3 #BDE986	Accent Label 8
	Grey 8 #354A5F		Grey 3 #D5DADD	Accent Label 9
	Mango 2 #FFF3B8		Mango 9 #8D2A00	Accent Background 1
	Red 2 #FFD5EA		Red 9 #840606	Accent Background 2
	Raspberry 2 #FFDCE8		Raspberry 9 #9B015D	Accent Background 3
	Pink 2 #FFDCF3		Pink 9 #7800A4	Accent Background 4
	Indigo 2 #E2D8FF		Indigo 9 #2C13AD	Accent Background 5
	Blue 2 #D1EFFF		Blue 9 #0040B0	Accent Background 6
	Teal 2 #C2FCEE		Teal 9 #035663	Accent Background 7
	Green 2 #EBF5CB		Green 9 #1E592F	Accent Background 8
	Grey 2 #EAECEE		Grey 9 #223548	Accent Background 9

Materials Colors: Chrome

Apple Materials are a set effects that impart translucency by blurring the underlying visual content. They are used to convey a sense of depth and hierarchical structure without distracting from content. As of release 24.4 of the SAP BTP SDK for iOS, Materials Chrome is introduced for navigation bar, toolbar, and tab bar components. Because Materials Chrome creates the appearance of the system chrome, there are two color variants to provide flexibility on various view and modal based surfaces.

Light Mode		Dark Mode		Dark Elevated Mode		Name	Usage
	Base White #FFFFFF, 85%		Base Black #000000, 75%		Primary Elevated Background, 75% #171D23, 75%	Chrome	Chrome is paired with a Materials blur effect to provide translucency when scrolling content under navigation bar, toolbar, tab bar, or sibling navigation
	Base White #FFFFFF, 85%		Secondary Background #161C21, 75%		Secondary Elevated Background, 75% #171D23, 75%	Chrome Secondary	Chrome Secondary is paired with a Materials blur effect to provide translucency when scrolling content under navigation bar, toolbar, tab bar, or sibling navigation for page or modal views with secondary backgrounds

Chart Colors

Use chart colors for chart plot and legend-related components. There is currently only one color that can be used on the dark background, for example, for the object header. Text semantic colors may also be used for charts and analytical components.

Warning

Using chart colors for backgrounds can affect the contrast ratio of the foreground and background content. Please check the Accessibility guideline to understand how to decide for the most suitable colors to use.

Information

Chart colors are updated to reflect and align to SAP Fiori for Web chart colors refactoring.

Light Mode		Dark Mode		Name
	#3278BE		#3278BE	Chart 1
	#C87B00		#F2A634	Chart 2
	#75980B		#B4CE35	Chart 3
	#DF1278		#FA4F96	Chart 4
	#8B47D7		#8B47D7	Chart 5
	#049F9A		#049F9A	Chart 6
	#0070F2		#0070F2	Chart 7
	#CC00DC		#F31DED	Chart 8
	#798C77		#8EA18C	Chart 9
	#DA6C6C		#F28585	Chart 10

Accessibility

The Horizon theme color palette offers color mapping logic that is easy to understand. It introduces eleven tonal values across nine color hues of vibrant and bold color. To ensure that color combinations comply with WCAG accessibility standards, we have developed a “pairing” system that enables you to easily create WCAG-compliant UIs and products.

For more information, see Accessibility.

Color contrast ratio scale

Light & Dark Mode

The iOS design system includes systemwide appearance settings for light and dark modes which use color consistently and sparingly.

Light Mode

Light mode is the default theme for the iOS design system. Touches of color are used to call attention to important information or show the relationship between parts of the interface.

Light mode example

Dark Mode

The dark color palette was created to provide a comfortable viewing experience tailored for low-light environments, which includes dimmer background colors and brighter foreground colors.

In dark mode, the system uses a dark color palette for all screens, views, menus, and controls, and may also use greater perceptual contrast to make foreground content stand out against the darker backgrounds.

iOS uses two sets of background colors — base and elevated — to enhance the perception of depth when one dark interface is layered above another. The base colors are dimmer, making background interfaces appear to recede, and the elevated colors are brighter, making foreground interfaces appear to advance. Dark mode also helps preserve battery life which is very useful for use cases where the user is mobile and needs to preserve battery life.

Dark mode example

Resources

Development: FUIColorStyle

SAP Fiori for Android: Colors

Related Foundation: Accessibility, Elevation

Design Tokens

Design tokens are our cross-platform solution to managing color across iOS and Android. Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system’s visual identity. Additionally, design tokens help us to maintain visual consistency, scale design decisions, and are simple to maintain and update.

Token Hierarchy

The token hierarchy adds structure and scalability to visual assets in a design system. Each level of the design token hierarchy adds a layer of abstraction that informs designers and developers on how a design token should be used.

Token hierarchy shows the different levels of design tokens

Reference Tokens

Reference tokens are the foundational elements of a company’s theme by storing the static values of a design decision such as hex code, line height, and typography values. Since the reference token naming does not indicate its usage, they should not be used directly in components and UI elements.

The reference token is used as a foundation for other tokens

Semantic Tokens

Semantic tokens define the specific role by which a referenced token should be used within the UI. This scales the design language throughout a specific theme or context allowing for themeability across the SAP BTP SDK for Android and iOS. Additionally, semantic tokens assign light and dark mode definitions for each semantic definition providing alignment between modes.

The semantic token is used directly within the UI

Token Naming

This token naming is platform-agnostic and follows a set structure logic that can be used across mobile platforms.

The naming structure of a design token shows the naming logic

1. Company Name

Company name indicates which company’s design system the token belongs to. In our instance we use “sap” to indicate SAP design token system.

2. Level

Level indicates which level in the token hierarchy the token belongs to. There are two levels in our token hierarchy, reference tokens and semantic tokens.

3. Category

Category indicates the type of token. There are five categories in our token system such as color, spacing, sizing, corner radius, and typography.

4. Group

Group refers only to color tokens and indicates which grouping the token belongs to. There are five groupings in the color token system such as brand, neutral, status, accents, and header.

5. Usage

Usage refers only to color tokens and indicates where in the UI the token should be used. There are three sub-groupings in the color token system that explicitly inform developers and designers on the tokens usage such as background, foreground, and stroke.

6. Scale

Scale indicates the token’s sequence within a category, group, or subgroup. A scale’s number sequence is dependent on the type of token, token group, or subgroup.

Theme

Theme refers to the Horizon reference color palette however this baseline theme can be swapped out to a company’s own. For example, Horizon is the baseline theme for our SDK which includes reference colors Blue, Grey, Mango, Indigo, etc. Swapping our baseline theme would cascade a company’s brand colors down to every aspect of the UI allowing for theming. Design tokens only facilitate this scalability of our design system.

Light and Dark Mode

Each semantic color token definition stores values for both Morning Horizon (light mode) and Evening Horizon (dark mode). Since multiple modes are built-into each color token definition, this helps designers and developers apply color tokens to each UI element consistently across modes.

Morning (Light)
Evening (Dark)

The semantic token stores the value for both light and dark mode

Accessibility Modes

In addition to Morning Horizon (light mode) and Evening Horizon (dark mode), iOS provides accessibility modes such as increased contrast light and dark modes. This gives users the option to toggle the increased contrast mode on their device’s settings.

Increased Contrast Light
Increased Contrast Dark

Example: On iOS, semantic tokens also store light and dark increased contrast theme modes

Native OS Mapping

Design tokens map to the native OS APIs. This allows us to implement design tokens across both iOS and Android while preserving the native OS components, behaviors, and interactions. Having a unified workflow would improve the management of all visual assets and better alignment between iOS and Android platforms. Stakeholders would also benefit by making it easier to consume the SDK and our UI Kits.

Semantic Token (Horizon)
System Token (Material 3)
Component Token (Material 3)

The semantic token stores the value for both light and dark mode

Resources

SAP Fiori for Android: Design Tokens

SAP Fiori for Web: Design Tokens

Related Components/Patterns: Colors, Theming

App Store Appearance

The appearance of SAP mobile apps in Apple’s App Store effectively conveys the purpose of SAP’s mobile experience and helps business users easily identify the app in both the App Store and on their screens. To ensure consistency, we adhere to the guidelines provided by the App Store when creating branded images.

Our design guidance aligns seamlessly with the Horizon visual design, resulting in a distinctive mobile brand presence within the App Store, complementing the app icon design guidance.

Examples for App Store Screenshots

Screenshots for the App Store

For Apple’s App Store, it’s essential to create a minimum of five screenshots of your app. These screenshots are designed as templates that feature a captivating two-line highlight text.

Our Figma template not only provides the necessary sizes for the required screenshots you need to upload, but also simplifies the exporting process for you.

Do

Choose high-quality screenshots that effectively showcase the app’s purpose and features, creating a strong connection with the user.
Arrange the screenshots in a compelling order that tells a captivating story and guides users through the app’s flow.

Don't

Don’t use staged screenshots that don’t accurately depict the implemented features of your app
Don’t crop or cut off any parts of the screenshots.
Don’t showcase Apple-specific features, such as the Search screen or Siri commands, in your screenshots.

Descriptive and Highlighted Text

To provide users with a captivating experience, it’s crucial to offer them a short and concise description of what is presented in your screenshots. The text should be based on the specific feature or screenshot being shown and limited to a maximum of three lines. For additional highlighting, we suggest using one or two carefully chosen adjectives or words that precisely describe the actions users can take. These highlighted texts, presented in bold blue characters, will effectively draw attention and engage users.

Additional Languages

Depending on where your app will be published, it is essential to provide translations for your highlighted texts. This ensures that your app can reach a broader audience and effectively engage users in their native language.

Additional Guidelines

Make sure to also follow the App store guidelines provided by the operating system as well as the SAP Fiori for iOS app icon guidelines.

Resources

Figma template
App Store guidelines

Theming

Theming refers to using a color palette and a logo to define a system-wide appearance for an application. It’s achieved by applying colors to major UI elements, such as text and background, with the intention to create visual harmony. It gives users a holistic visual experience throughout the application. This visual experience can be leveraged to enhance readability in certain lighting environments and to express your unique product branding across platforms. By applying brand-specific colors to the themeable elements, you provide users with a visual connection between the application and your brand.

Example of different themes

Themeable Elements

A customized theme is comprised of multiple visual elements. To create a brand theme, use the UI theme designer powered by SAP and customize the following themeable elements:

Logo

A logo is the visual symbol used to express a product’s distinct identity.

Themeable element: logo

Tint Colors

Tint colors are the ones applied to any interactive elements to indicate interactivity or a call to action. It can be used on a button, an icon, a tab, etc.

Semantic Colors

Semantic colors refer to the tint color applied to UI elements to communicate a state, priority, or destructive or confirmational action.

Accent Colors

Accent colors are decorative colors applied to selected areas of the UI in order to bring more colors to the UI.

Themeable elements: tint color, semantic color, accent color

Text Colors

Text colors apply to any content written in text, including numbers and symbols.

Surface

Surface colors comprises of the backgrounds of elevated components such as cards, app bars, bottom navigation, etc.

Background

Background refers to the main app background that appears behind scrollable content.

Themeable elements: text color, surface and background

Scenarios

The UI theme designer can achieve various levels of customization. Theming can be as minimal as only changing the logo or can be as comprehensive as changing all color parameters. The following examples detail possible theming scenarios from a basic theme all the way to a comprehensive theme.

Basic Scenario

The main branding elements are your logo and primary branding tint. Your app colors can use the existing default text, background, semantic colors, and accent colors from the preliminary baseline theme (Horizon theme for SAP Fiori). This approach is enough to communicate your brand without having to do any major visual overhaul to the baseline theme. The UI theme designer can accommodate simple theme changes such as applying your logo and applying your main brand tint.

Themeable Elements

The following elements are themed in this simple scenario:

Logo
Tint

Screen showing basic theme scenario

Detailed Scenario

Your main branding elements consist of a logo, tint, text, and backgrounds therefore require a full theme overhaul to achieve the look and feel of your brand. This means that more customization is needed from our preliminary baseline theme (Horizon theme for SAP Fiori). The UI theme designer allows for granular control over the overall theme resulting in a faithful representation of your brand.

Themeable Elements

The following elements are themed in this detailed scenario:

Logo
Tint
Text
Background
Semantic colors
Accent colors

Screen showing detailed theme scenario

Theming Strategy

Theming strategy is your product’s approach to a distinct theming plan to express your branding’s visual experience, support various lighting situations, or fit a user’s phone’s system configuration. A product could support a single theme or multiple themes depending on your company’s branding identity and/or the end user’s lighting environments.

Single-Theme Strategy

Your theming strategy should be based on your company’s branding or user needs. For example, if your company is using a light theme, it communicates a lighter approach to the visual design while also easing the lighting on the eyes within indoor or outdoor settings with bright lighting. The opposite is true for darker themes where the theme communicates a more serious tone while also being easier on the eyes in workplace settings with dimmed office lighting or outdoor night–time settings.

Single-theme strategy

Two-Theme Strategy

Your product could use a two–theme strategy to reflect the changing conditions of the end user’s lighting environment or to match an end user’s theme system settings. A two–theme strategy is the industry standard and is helpful if your product is supposed to provide themes for both bright and dim lighting environments. When applying the two–theme strategy, make sure that all foreground colors have been considered on either theme.

Two-themed strategy

Resources

Development: Theming and Styling, UI Theme Designer

SAP Fiori for Android: Theming

SAP Fiori for Web: Theming

App Icon

The app icon of SAP mobile apps communicate the purpose of SAP’s mobile experience and supports business users in recognizing the app in the App Store and on their home screens.

Our app icon design direction complements the Horizon visual design and creates a recognizable mobile brand. The balance between individual icon metaphors, characteristic shapes, and coherent visual design embraces the SAP mobile product family.

We have created a guide that describes what the style should look like and how to create a new icon.

Examples of app icons

Approach

As a base for the app icons, we use the same origin as the SAP Fiori icons. The best way to start creating app icons is to simply pick out an SAP Fiori icon which is the best metaphor for your app and then apply the style. It is not mandatory to use an icon as a base but it should follow the style.

App icon metamorphosis

Anatomy

The app icon is composed of three layers and represents the three tier architecture.

Database Layer
Logic Layer
UI Layer

The first level, which is the database layer, is the base shape of the app icon, then comes the second layer, this represents the logic layer and finally the UI layer which is the third layer of the app icon. For some icons there is also the possibility to use a highlight layer if needed.

Do

Use app icons that communicate the purpose of the app.
Use simple app icons because they are usually easier for people to understand and recognize.
Use the same style to complement the Horizon visual design.
Design your icon as a full-bleed square image.

Don't

Do not use app icons from other sources.
Do not include too many details, it will be difficult to determine and might make an icon seem noisy.
Do not use other colors for the app icon.
Do not use any color for the app icon background.
Do not use a picture for app icons.

Specifications

Background Layer

Second Layer

First Layer

Third Layer

App Icon Creation

To learn more about the guidelines and process of creating iOS app icons, see Apple Human Interface Guidelines: App Icon

Rich Text Document

Text-heavy documents, such as end-user licensing agreements (EULA), privacy policies, or terms and conditions are displayed in apps using HTML or other forms of view. To ensure that the content of these rich text documents looks consistent across SAP iOS applications and can be understood by everyone, follow the style and accessibility guidelines below.

Example of an end user license agreement between SAP and indirect end user in compact (left) and regular width (right)

Anatomy

Styling Elements

Use the following styling elements for end user license agreements (EULA), privacy policies, and terms and conditions.

A – Heading 1: Document title
B – Heading 2: Subtitle
C – Heading 3: Section headlines
D – Heading 4: Document introduction
E – Paragraph / List: Body text

Headings

The styling pattern uses multiple heading levels to convey the document structure. People often skim content by scanning the headings, and users of assistive technologies rely heavily on headings to navigate complex content.

Heading elements are used for the title, subtitle, and section headlines, but also for the document introduction and any supplementary information.

You can use the introduction to explain the purpose of the document and emphasize the importance of the user’s consent.
Supplementary information is key information you want to make easily accessible, such as the effective date of an agreement.

Information

Note that there are no titles on single consent screens. For more information, see Single User Onboarding.

Usage

Text Attributes

To style rich text documents consistently, apply the SAP Fiori for iOS typography and color system.

Font style – 72
Font color – Primary Label and Tertiary Label

Style headings and body text as follows:

Level	Use	Font Style & Size	Font Color	Font Weight
Heading 1	Title	Title 1 72 28pt	Primary Label	Black
Heading 2	Subtitle	Title 3 72 20pt	Primary Label	Bold
Heading 3	Section Headline	Body Bold 72 17pt	Primary Label	Bold
Heading 4	Introduction	Body Bold 72 17pt	Primary Label	Bold
Heading 5	Supplement	Body 72 17pt	Tertiary Label	Regular
Paragraph	Body text	Body 72 17pt	Primary Label	Regular
List	Body text	Body 72 17pt	Primary Label	Regular

Style attributes for headings and paragraphs

List Attributes

Style numbered and bulleted lists as follows:

Numbered list (ordered list): Mark the list items with numbers (1, 2, 3 or 1, 1.1, 1.2) or letters (A, a, Ⅰ, or i).
Bullet list (unordered list): Mark the list items with bullets. If you need a nested list, use the following bullet formats:
- Level 1: Disc
- Level 2: Circle
- Level 3 and any lower levels: Square

In nested lists, align numbers or bullets with the indented text of the level above.

Do

Don't

Accessibility

Use a unique and descriptive text link

Ensure that the text for each hyperlink is unique and clearly describes what is triggered by the link. Users of assistive technologies may not perceive the context of a link.

Add alternative text for images

If the document includes images, add a concise and informative alternative text (alt text). Alt text describes an image for users who are unable to see them, and is also beneficial to sighted users if an image fails to load.

Resources

W3Schools HTML Accessibility

Single-user Onboarding

Consent Forms

Overview

To ensure that an app runs on all Apple devices, it is important to have a consistent layout that adapts to various window or system contexts. SAP Fiori for iOS supports auto layout and adaptivity concepts that allow a great user experience for all devices on iOS and iPadOS platforms. The concepts provide a mechanism that helps dynamically rearrange and resize content in response to changes in the device’s orientation or when using the app on different screen sizes. Users might resize the window with stage manager or arrange multiple windows next to each other for multitasking. SAP Fiori for iOS apps adapt their layout based on the size class while staying recognizably consistent.

To achieve a consistent app across all size classes, content of static page types, such as object details and list reports, has to be converted into columns to create an optimal composition of columns for all size classes. This approach encourages thinking in columns rather than screens. Adaptive design facilitates the dynamic adaptation, rearrangement, and resizing of columns to ensure that the app’s content is displayed appropriately within the available space.

Benefits of Adaptive Layout

Adaptive design enables designers and developers to create versatile, user-friendly interfaces that seamlessly adapt to different screen sizes and devices. Optimizing large screen design for SAP’s business applications has a positive impact on the productivity of mobile users. By utilizing larger screen space, numerous daily tasks can be performed more efficiently.

Streamlining Navigation and Control

Making menus and controls easily accessible next to the workspace and incorporating intuitive gesture-based navigation.

Improving Data Visualization and Analysis

Enhancing readability and interactivity of complex data sets, such as charts and spreadsheets, for quicker and more effective analysis.

Enhancing Data Entering and Form Filling

Providing extra space for on-screen keyboards and data entry fields to minimize scrolling, reduce errors, and expedite the process.

Facilitating Document Editing and Review

Simplifying editing with full-page views of texts, images, or presentations, facilitating side-by-side comparisons, and allowing for stylus support for precise input.

Accessibility

The iOS design system is designed to be compliant with accessibility standards. Our components are flexible, readable, and adaptable for usage by a wide range of users, providing an optimal and user-friendly experience for everyone, including individuals with special needs due to visual, motor, auditory, speech, or cognitive impairments.

Color Contrast Ratio

To ensure that your users can easily read and make out the text and visual elements in your app, you need to employ sufficient color contrast. Color contrast is the ratio measuring the difference between the color of the foreground element against the color of the background. Achieving the minimum contrast ratio ensures that all text and visual elements in our design system are legible to all users including those who may be visually impaired and/or color-blind. If the color appears faint against the background, it may be a sign that the color has insufficient color contrast. First, determine its current contrast ratio, second, determine the target contrast ratio of the UI element (e.g., 3:1, 4.5:1, 7:1), and lastly, follow our color pairing system. To validate this, use a color contrast calculator.

Color contrast ratio examples

Color Pairings [Methodology]

The Horizon color palette has been designed to comply with WCAG accessibility standards with a color pairing system that allows you to easily pair color combinations and achieve your desired color contrast.

Example of color pairings for 3:1, 4.5:1 and 7:1 color contrast ratios

Color Pairing for 4.5:1 Contrast (Default)

To ensure the minimum color contrast ratio of 4.5:1 for small text (below 18 point regular or 14 point bold) is met, pairing any color that is five steps apart will achieve this. For example, pairing the fourth color with the ninth color ensures that the minimum color contrast for normal text is met. For a minimum color contrast ratio for text and content, we recommend a 4.5:1 color contrast ratio.

Achieving 4.5:1 color contrast

Color Pairing for 3:1 Contrast

To ensure a minimum of 3:1 color contrast ratio for large text (18 point and above regular or 14 point and above bold) and decorative elements are met, pairing any color that is four steps apart will achieve this. For example, pairing the fourth color with the eighth color in the spectrum ensures that the minimum color contrast ratio for large text, bold text, graphical objects, and user interface components is met. For graphical elements, we recommend a 3:1 color contrast ratio.

Achieving 3:1 color contrast

Color Pairing for 7:1 Contrast

To ensure the minimum color contrast ratio of 7:1 is met, pairing any color that is seven steps apart will achieve this. For example, pairing the fourth color with the eleventh color ensures that the minimum color contrast for a high-contrast theme is met.

Achieving 7:1 color contrast

Increase Contrast Mode

To support iOS accessibility features such as “Increase Contrast”, we have created a color palette that automatically enhances the color contrast of app foreground and background colors when users select “Increase Contrast” in the system accessibility settings.

Information

Increase Contrast is intended to enhance the visibility of text and other elements on the screen but does not necessarily guarantee a 7:1 color contrast.

Comparing Light mode with Increase Contrast Light mode

Dynamic Type

Built-In Text Styles

Applying iOS built-in text styles allows your app to take advantage of accessibility features, such as dynamic type, which provides users the flexibility of choosing their preferred text size. It also automatically adjusts tracking and leading for every font size.

SAP Fiori for iOS uses SAP 72 font, and supports dynamic type to enable accessibility features. Learn more in Typography.

Here are some examples of our components adapting to larger text sizes, and a few tips when designing a custom component.

Prioritizing Content

In this example, the description of the object cell is hidden in larger text size settings. Since object cells are typically used for previewing an object, it is reasonable to remove secondary information temporarily in order to help the user to focus on more important content.

Text size Large (default)
Text size xxxLarge
Text size AX5: The description of the object cell is hidden

Object cells showing type scaling and prioritizing content

Rearranging Layouts

Sometimes it is necessary for a component to rearrange its layout in larger text size settings. The image and status of the object header move to the top of the component, allowing text labels below them to have more space to grow.

Text size Large (default)
Text size xxxLarge
Text size AX5: Components are rearranged

Object headers showing type scaling and adjusting content

Stacking Text Labels

Form cells adapt to larger text sizes by vertically stacking the key label and value. In this case, it is crucial to allow text labels to display more content instead of truncating them.

Text size Large (default)
Text size xxxLarge
Text size AX5: Form cells adapt to larger text size

Sort & Filter Form showing inline text scaling and wrapping

iOS Accessibility Features

In addition to color contrast ratio, the “Increase Contrast” feature, and dynamic type, there are more ways to ensure that your app is accessible to everyone. iOS provides guidance on how to enable accessibility features such as voice-over, reading support, switch control, dictation, and much more. See Accessibility on iOS for more information.

iOS native accessibility settings

Resources

Related Foundations: Colors, Typography

Iconography

Iconography is essential to creating a cohesive and enjoyable app experience. Icons play a crucial role in communicating actions, information, feedback, and navigation.
By providing a comprehensive icon library, our goal is to enhance the accessibility and overall ease of use of our customers’ apps.

SAP icons have been redesigned for the Horizon visual theme with a fresh, friendly, and bold style. The new icons maintain consistency of size, stroke, and visual balance and are tailored for simple and direct user interaction, using metaphors that are easy to understand in an enterprise setting.

SAP Fiori for iOS icons in light and dark mode

Usage

Do

Use the SAP icon library.
Use icons to efficiently communicate important actions to users.
Use icons to indicate navigation actions to other screens.

Don't

Don’t use third party icons.
Don’t place icons too close together.
Don’t place icons with half pixel increments.
Don’t use light-colored icons against light backgrounds.

Design Language

The SAP icon library communicates the following SAP Design principles:

Simple
Fresh
Neutral
Modern

SAP Fiori Custom Symbols

By utilizing the SAP Fiori Icon Library, we have created an SAP Fiori custom symbol library, which is part of the SDK. This library offers a diverse selection of SAP Fiori custom symbols in various weights and scales, enabling you to design with flexibility and adaptability. Some of the weight options include thin, light, bold, heavy, etc. The image below shows the weights available.

SAP Fiori custom symbols

Resources

SAP Icons: SAPUI5 Icon Explorer

Learn about SF Symbols in the Apple Human Interface Guidelines

Animation

The SAP Fiori for iOS apps use four different types of transitions:

Push
Modal
Zoom In / Out
Dissolve

Push

The Push transition eases a new screen element onto the display from the side while sliding out the prior screen to the opposite side. Push transition is typically used for a drill down navigation.

Push transition

Modal

Modal transitions are used to present users with one or more tasks to be completed. In this transition, a new window slides up from the bottom of the screen, covering the content below. Modal windows typically ask users to complete or cancel a specific task before the user can resume taking other actions.

Modal transition

Zoom In / Out

The Zoom In / Out transition is mainly used to make images or documents larger to allow users to see them in more detail.

Zoom in and zoom out transition

Dissolve

The Dissolve transition involves gently fading between two screens. It is recommended when enabling and closing an edit mode.

Dissolve transition

Adaptive Design

Branding

SAP Fiori Design Principles

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.

Design Principles

The design philosophy of SAP Fiori is based on five core principles. SAP Fiori user experience is role-based, adaptive, simple, coherent, and delightful.

Role-Based

SAP Fiori is designed for your business, your needs, and how you work. It draws from our broad insights on the multifaceted roles of today’s workforce. SAP Fiori provides the right information at the right time and reflects the way you actually work.

Delightful

Apart from making you work smarter, SAP Fiori also enriches your work experience by allowing you to simply do your job.

Coherent

Whether you fulfill a sales order, review your latest KPIs, or manage leave requests – SAP Fiori adheres to a consistent interaction and visual design language. Across the enterprise, you enjoy the same intuitive and consistent experience.

Simple

With SAP Fiori, you can complete your job intuitively and quickly. SAP Fiori helps you focus on what is important – essential functions are easy to use and you can personalize the experience to focus on your relevant tasks and activities.

Adaptive

SAP Fiori enables you to work how and where you want, regardless of the device you use. And, it provides relevant information that allows for instant insight.

Typography

SAP 72 is the primary font for SAP Fiori for iOS. These font styles are mapped one to one with SF font styles, allowing a smooth transition to SAP 72, co-existence with SF fonts when using SF Symbols, and to preserve accessibilities.

Current available font styles for 72

Developer Hint

Due to limitations of the UI Kit, the leading property is not modifiable in the UI Font. SAP Fiori provides a workaround by adding additional line spacing in an attributed string. See reference documentation.

72 Typeface

SAP Fiori for iOS uses SAP’s proprietary 72 typeface to maintain consistency with other SAP products. In addition, the 72 typeface has been designed to meet the typographic requirements needed for the enterprise. 72 typeface adheres to the following principles:

Legibility enhancements: Optimized for screen use
Font styles: Supports a robust typographic hierarchy
Brand voice: Be credible and humane
Character set: Accommodate complex content
Language support: Supports the Windows Glyph List
Accessibility: Improved character recognition

Dynamic Type

SAP Fiori for iOS uses the iOS system text styles, and supports dynamic type to enable accessibility features. Learn more in Accessibility.

Download

Download the 72 Fonts

Download the San Francisco Fonts

Human Interface Guidelines: Typography