SAP Design Guidelines

The SAP guidelines are a work in progress. At the moment it consists of first informations for consistent SBB SAP applications. The foundation for this is the SAP Fiori Design Concept. Further information about this can also be found in the SAP Community.

SBB Theme

Introduction

The basis to developing SBB SAP applications with consistent user experience forms the SAP Fiori Design Concept. To comply with the guidelines of the SBB brand elements the "SBB Theme" has been defined with the SAP theme designer.

The SBB Theme with integrated SBB logo and modified colour values is available for internal applications on the SAP Fiori Launchpad and SAP Business Technology Platform (BTP).
Contact: DSRV SAP TechOps

To build visual extensions with HTML and CSS for modified user interfaces or themes for specific customer or ERP portals, like the "Immobilien Kunden Cockpit" please contact the SBB Markenführung.

Examples

SBB Fiori Portal «Auftragsabwicklung Planung und Steuerung

Logo

Usage

• The logo is used in all SBB SAP web applications and is embedded in the SBB Theme.

Rules

• The logo appears exactly once per page and is always in the header.
• The position is always top left.
• Modifications of the logo are not allowed.
• The logo is linked to the basic page of the SAP environment.

Icons

Usage

Icons serve as visual support for topics and actions for the users. To use them in SBB SAP applications the SAP icon font is to be utilised.

Should the existing SAP icon set not suffice, you can ask the UX experts of the Digital Solution or the DSRV UX for new icons in the SAP style.

Independent creation of icons is allowed, but needs to be approved by the SBB Markenführung or the DSRV UX before the icons go in use. As for digital products and apps pay attention that you don't use icons in different line width.

Rules

• For the usage of SBB SAP applications the SAP icon font is generally to be used.
• The base vectors size for SAP icons is 16px for symbols that are used in the UI controls. Other listed sizes from 18px to 40px depend on individual requirements of the interface.
• One should abstain from using icons within a flowing text whenever possible.
• Icons without text need to be self-explanatory or easy to learn. The more icons are used in an application the harder it gets to correctly remember their meaning. The icons without text need to be supplemented with an alternative text, whereby not the icon itself but its action must be described (e.g. "Close Menu").
• Icons should always have the same meaning across applications and across Digital Solutions (consistency).

Links

SAP Icon Font Guideline
SAP Icon-Set
SAP Fiori UX approach (accessible with SBB Login)