Colors
FUIColorStyle
Intro
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
- Chart Colors
- Material Colors
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.
See also Surface Colors on Android.
Background
When the page structure is flat and most information is on the same level, Background colors should be used (e.g. standard table views and designs that have a white primary background in a light mode).
Grouped Background
When the view has grouped content, including grouped table views and platter-based designs, Grouped Background colors should be used.
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.
8%
16%
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.
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.
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.
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.
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.
Chart Colors
Chart colors have been designed to meet the requirements for data visualization, such as communicating meaning, providing contrast between data points, and visualizing high-to-low values. They can be used as a qualitative palette or sequential palette depending on product needs.
For more guidance, see Chart Colors Palettes – Values and Names.
Qualitative Palette
The qualitative palette is intended to be used across all SAP technologies. “Chart 1” is the default starting color and subsequent ordered colors should be used in numbered sequence; however, ordering of the chart colors may vary between chart libraries depending on the context.
Semantic Palette
The semantic palette is intended to be used alongside the qualitative palette to denote any meaning regarding status, state, or level of priority. However, the contextual usage of chart colors can be determined as needed.
Material Colors
Apple Materials are a set of colors and effects that impart translucency by blurring and modifying the color values of the underlying visual content. They are used to convey a sense of depth and hierarchical structure without distracting from content. 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.
As of release 24.4 of the SAP BTP SDK for SAP Fiori for iOS, Materials Chrome is introduced. Materials Chrome is an adaptable blur effect that creates the appearance of the system chrome, available in two variants to provide flexibility on various view and modal based surfaces.
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