Updated: July 27, 2017

Branding

Intro

SAP customers may require designs customized to their specific use cases—designs that extend beyond the patterns and controls provided by SAP Fiori for iOS and the SAP SDK. More specifically, customers may wish to preserve their brand identity while using SAP products. SAP Fiori for iOS acknowledges this need and provides the flexibility to have custom designs developed on top of the SDK.

Usage

Do’s

  • Content that is active on the navigation bar should use the light tint color.
  • Content that is inactive on the navigation bar should use white text.

Don’ts

  • Do not apply the dark tint color to information that is inactive in the content area.

SAP Fiori for iOS Colors

Semantic colors help to clearly display the value of data points in either a positive, negative, or critical manner. 

Apply Brand Colors

In order to preserve a customer’s brand identity, an app-specific color palette for the brand will need to be created, replacing the default colors of SAP Fiori for iOS.

This custom color palette should be composed of a primary color along with dark and light tints of that color. A color contrast ratio calculator should be used to ensure that all colors in the custom design will meet the minimum color contrast ratio of 4.5:1 (or preferred contrast ratio of 7.5:1) to fulfill accessibility standards.

Should a chosen primary color interfere with SAP Fiori for iOS semantic colors, or should it fail to meet the standards of accessible color contrast ratios, a color hue would then need to be developed using the tinter-shader tool and color contrast ratio calculator. By using these tools, the customer would be able to identify the best tonal value that offers users an adequate level of color contrast.

A customer’s brand is preserved by applying brand colors on components.

Examples

Scenario 1

The customer has a similar color palette to the SAP Fiori for iOS primary colors.

Select A primary Color

The color palette is made up of at least one primary color and light and dark tint colors based on it.

To develop the tint colors, use the Tinter-Shader tool to view all hue values of the primary color.

Then use the Color Contrast Ratio Calculator to identify color values with at least the minimum contrast ratio of 4.5:1 (and ideally the recommended contrast ratio of 7.5:1). This will ensure sufficient readability and meet accessibility standards.

Apply Brand Color

In the header, use the brand’s primary color for the background and the light tint color on text to indicate that the content is active.

In the content area, the dark tint color is only applied to active content.

Scenario 2

The customer’s primary colors are similar to the SAP Fiori for iOS semantic colors.

Create Tint Colors

Choose a primary color from the brand’s color palette that is distinct from the SAP Fiori for iOS semantic colors. This will help to avoid confusing users about the importance and meaning of the semantic colors.

Be sure to also refrain from using gray as a primary color, as it may carry the connotation of disabled or inactive content.

Select Primary Colors

The color palette is made up of at least one primary color and light and dark tint colors based on it.

To develop the tint colors, use the Tinter-Shader tool to view all hue values of the primary color.

Then use the Color Contrast Ratio Calculator to identify color values with at least the minimum contrast ratio of 4.5:1 (and ideally the recommended contrast ratio of 7.5:1). This will ensure sufficient readability and meet accessibility standards.

Apply Brand Colors

To develop the tint colors, use the Tinter-Shader tool to view all hue values of the primary color.

Then use the Color Contrast Ratio Calculator to identify color values with at least the minimum contrast ratio of 4.5:1 (and ideally the recommended contrast ratio of 7.5:1). This will ensure sufficient readability and meet accessibility standards.

 

Scenario 3

The contrast ratio of the customer’s primary color is insufficient.

Create Tint Colors

Choose a primary color from the brand’s color palette that is distinct from the SAP Fiori for iOS semantic colors. This will help to avoid confusing users about the importance and meaning of the semantic colors.

Black or dark gray can only be used for the navigation bar’s background color, as these colors may carry the connotation of disabled or inactive content.

Select Primary Colors

The color palette is made up of at least one primary color and light and dark tint colors based on it.

Use the second primary color (beige) to develop the tint colors with Tinter-Shader tool to view all hue values of the primary color.

Then use the Color Contrast Ratio Calculator to identify color values with at least the minimum contrast ratio of 4.5:1 (and ideally the recommended contrast ratio of 7.5:1). This will ensure sufficient readability and meet accessibility standards.

 

Apply Brand Colors

In the header, the brand’s primary color ‘Smog’ is used for the background, and the light tint color is used on text to indicate that the content is active.

In the content area, the dark tint color is only applied to active content.

All colors meet the minimum color contrast ratio.