Color plays a significant role and sets the visual balance for iOS apps. It defines the visual hierarchy of UI elements and directs the user’s attention to the most important tasks.

Horizon Theme

Our color system builds on a core color palette that aligns with our brand and helps us create consistent experiences across products. The Horizon theme colors bring flexibility to our design system while remaining accessible in instances of complex UIs. The palette consists of a set of vibrant colors providing a flexible yet consistent color system and distinct look to all SAP products.

UI Colors

UI colors are added to create an intermediate layer of colors prepared for usage in UI components and page types. Each color has a semantic name that reflects its purpose. The colors are divided into 10 categories:

• Tint Colors
• Background Colors
• Label Colors
• Fill Colors
• UI Materials Colors
• Semantic Colors
• Separator Colors
• Shadow Colors
• Accent Colors
• Chart Colors

Tint Colors

Tint colors are used to indicate that certain elements are interactive, for example, interactive text and icons. For the light mode, there are three variants of tint colors: Tint, Tint 2, and Tint Tap State colors.

Background Colors

The iOS design system includes two variants of background colors: Background and Grouped Background. They are made up of neutral colors including shades of grey, all the way from white to black.

Background and Grouped Background contain primary, secondary, and tertiary variants that help to convey a hierarchy of information. 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, Elevated Background and Elevated Group Background colors are applied automatically to the UI in modal sheets and other overlay panels.

See also Surface Colors on Android *Link to Surface*.

Background Colors

When the page structure is flat and most information is on the same level, use background colors (e.g. onboarding screens).

Grouped Background Colors

Most pages with a card layout or grouped table view utilize grouped background colors.

Label Colors

Label colors may only be applied to non-interactive content elements such as non-interactive text and icons. They are made up of neutral colors including shades of grey.

Fill Colors

Fill colors can be used for several different purposes. The main use in our system is for defining a boundary in the UI or giving feedback to users during tapping.

UI Materials Colors

UI Materials colors are used with specific components and materials in the UI. Generally, they are applied to the backgrounds of a container. They are made up of neutral colors including shades of grey and white.

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 (e.g. negative, critical, positive, or informative status).

Separator Colors

Separator colors are applied to linear elements such as divider lines used for adding visual breaks to content areas and border lines used for defining interactive areas like the text input field. There are two main separators: one with transparency and one without.

Shadow Colors

Shadow colors are colors that are applied to shadows used to elevate container elements such as for cards in the page layout.

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 color pairs comply with the accessibility standard.

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.

Elevation

In iOS apps, elevation plays a key role in both light and dark modes. A drop shadow represents the elevation of a component, giving hierarchy to page content. There are six layers of container views, each with its own elevation level: base, level 0, level 1, level 2, level 3, and level 4. This layer-level treatment gives a hierarchy to page content.

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.

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.