Colors - Do

• Use Morning Horizon colors that are part of the semantic control parameters list.
• When adding custom colors make sure they harmonize with the Horizon theme. Use Horizon DNA colors.

Colors - Don't

• Do not replace semantic parameter usage when defining custom colors.
• Do not offer only Evening Horizon theme colors.
• Do not mix colors from multiple themes.
• Do not use colors that do not match their described intended use.

Theming - Do

• Use theming variables to apply the colors of the UI elements.
• Map Color-related theme variables to parameters in the theming base content.
• When adding theming variables use names that are different than the already existing ones.
• When adding theming variables they should be based on existing variables (ex. lighten an existing color).
• When adding theming variables they should be named semantically according to their usage.

Applying the Horizon Theme (BTP Guidelines)

• Set the Morning Horizon theme as the default theme.
• Provide all four Horizon themes (Morning, Evening, High Contrast Black, High Contrast White).
• Leave the option for users to switch to the previous default themes as a fallback option.
• Remove all older High Contrast Themes.
• Make the switch between Morning and Evening Horizon automatic (based on operating system settings).

Theming - Don't

• Do not hard code colors that are defined by the theme.
• Do not use the theming base colors directly in UI elements. Use semantic control parameters instead.
• Do not repeat variable names as those will cause theming issues and overrides.
• Do not repeat revalues in custom variables if they already exist and fit semantically.
• Do not name theming variables based on color as those vary per theme (ex. sap-yellow-background).

Typography - Do

• Use the 72 font to display UI texts on devices that support the font.
• Use the 72 font to display UI texts for all supported languages.
• Use the fallback fonts Arial, Helvetica, and sans-serif for not supported languages.
• Use regular, semibold duplex, bold, black, and light font weights for UI texts.
• Use 72 monospace font for appropriate content (ex. Programming Code).

Iconography - Do

• Use icons from the SAP Icons font library.
• Use icons from the TNT Icons Font or FAP Icons font libraries.
• Use custom icons that follow the Icon Style Guide
• Icons that are used as content elements (e.g., company logos, service icons) are not subject to UXC

Iconography - Don't

• Do not use third-party icons created for another design language or don’t follow the SAP icon style.
• Do not mix SAP Icons from a Horizon and non-Horizon Style (ex. Belize, Quartz).

Action Placement - Do

• Place actions that affect the entire page or dialog to the top or to the bottom of the page or dialog.
• Defined and displayed one primary action per page.

Terminology - Do

• Use the terms described in the Definition of Standard Terms table.
• Use the terms described in the Actions and Icons BTP guideline.

Terminology - Don't

• Don't use the standards terms to communicate other than the intended meaning.
• Don't use other terms to communicate the meaning of a standard term.

Shell - Do

• Show the SAP logo.
• Show the product name without the SAP in it. The product name does not show on phones.
• Place Search in the middle. On mobile search is triggered via a button in the actions area.
• Place global actions between the search and the notifications icons.
• Show product settings (if available) before the notifications icon.
• Place User Avatar at the end of the shell.

Shell - Don't

• Don't show breadcrumbs on the shell. Use the application area instead.
• Don't add navigation or tabs on the shell. Use a bar for navigation below the shell instead.

Settings - Do

• Place product configuration setting in the Tool Header / Shell Bar.
• Place user personalization settings in the User Menu.

Settings - Don't

• Do not separate product settings across the product.
• Do not place product settings in the product area.

Icon Semantics - Do

• Use standard icons for specific meanings as listed in the UXC Standard.
• Use domain-specific icons for specific meanings as listed in the BTP Experience Toolkit.

Icon Semantics - Don't

• Do not use the icons for any other than the defined meeting