The brand
SBB Brand portal
Logo
Digital clock
Rights of useColors
Base colors
Functional colors
Off brand colorsAssets
Icons
Timetable icons
Pictograms
Introduction
About accessibility
Über diesen Guide
Contact
Further informationAccessibility by roles
Product Owner
User Research
Interaction Design
Visual Design
Development
Content Design
Testing
First steps
What is a design system?
Designing
Coding
FAQ
HelpOrganisation
Process
Contribution
ContactMobile
Overview
Base
ComponentsLyne
Overview
Releases
Design Tokens
KomponentenMaps
Overview
Base
InformationenLean (Legacy)
Overview
Base
ComponentsCommunity Assets
Sense & Purpose
Community Assets
Instructions
Guides
Power-Apps
Digital banner ads
SAP Design GuidelinesRegulations
App Icons
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 . Link target opens in a new window.
SAP Fiori Design Concept. Further information about this can also be found in the . Link target opens in a new window.
SAP Community.
SBB Theme
Introduction
The basis to developing SBB SAP applications with consistent user experience forms the . Link target opens in a new window.
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 . Link target opens in a new window.
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).