You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 17 Current »

Purpose

The guiding principles of this document is to define the SAP UI branding standards based on the Syensqo Branding guidelines in order to ensure consistency in the visual identity of Syensqo.


Assumptions

The Syensqo Branding has been understood.

The technical limitations to customize SAP user interface layouts has been understood.

Related Documents

SAP Development Approach

SAP Analytics and Reporting Approach

SAP Development Standards

SAP Analytics and Reporting Development Standards

Introduction

Syensqo's branding is well defined and offers not just the logo but also a detailed color scheme, style and font. The branding will be incorporated into the visual elements of SAP's modern UIs.

Visual elements comprise the following:

  • Typography: Specifies fonts, sizes, and hierarchy. 
  • Color Palette: Defines primary, secondary, and accent colors. 
  • Iconography: Outlines the style and usage of icons. 
  • Layout and Grids: Details the structural grid system for consistency. 
  • Accessibility: Details requirements to ensure the product is usable by people with disabilities, such as color contrast.

For Syensqo, the below high level rules are:

  • Typography: Syensqo's branding utilizes the font Poppins. SAP uses its own font 72 which will be used and not changed to Poppins to keep alignment with SAP's UX design.
  • Color Palette: Syensqo's branding defines a set of primary and secondary colors. The primary colors will drive the branding of the visual elements in SAP's UI. The secondary colors can be used in UI elements like graphs.
  • Iconography: Syensqo's branding does not define any iconography and the standard SAP UI elements will be used.
  • Layout and Grids: SAP's UI is baed on UI5 and the layout is defined and must be used to align with SAP's UX design.


Syensqo defines three primary colors. Details can be found in the official color palette document. The colors are Innovative Orange, Contrast Silver and Technical Silver. 


Syensqo's logo will need to be used in launchpad headers to complete the branding. The official logo documentation defines 3 main types: horizontal, vertical and horizontal with tagline. The horizontal without the tagline is considered the main logo and will be used in our branding. It is available in innovative orange or white.

or



The Syensqo's branding guideline requires that the logo should not be displayed smaller than 30mm in print of 72px in digital format.

When there is not enough space for the entire logo (i.e. the size of the logo is below the minimum size), the usage of Spark alone to represent the Syensqo brand is allowed. The Spark icon is shown below:

or 

SAP Build Work Zone and Fiori Apps Branding Standard


The SAP Build Work Zone and Fiori applications have been branded with Syensqo's corporate identity to ensure consistent and intuitive user experience.
Using the SAP Theme Designer, both Light Theme and Dark Theme variant were developed, based on SAP's standard Morning Horizon and Evening Horizon theme respectively.

To simplify implementation and maintenance, the customizations were kept minimal, focusing primarily on adapting the corporate color palette. This approach ensures visual consistency across applications while preserving standard SAP design principles and enabling easier upgrades and support.

The company logo used in the Fiori Launchpad / Build WorkZone theme follows the SAP's recommended dimensions, with a default/minimum size of 55px (w) x 27px (H) and a maximum size of 96px (W) x 38px (H).  (see SAP Note 2962465),
Due to the space constraints within the Fiori Launchpad theme, the full logo cannot be applied. As such, the spark icon will be used instead, ensuring consistency with the corporate brand while adhering to the technical limitations of the platform.

Theme: Syensqo Light Theme 

In the Light Theme, key visual elements were aligned with the corporate branding by applying the Innovative Orange color across primary UI accents. Specifically, the Brand Color, Focus Color, Link Color and Icon Color were all configured to use the corporate brand color. 

This is to ensure a consistent visual identify throughout the application, highlighting interactive elements such as links, icons and focus states while maintaining a clean and cohesive user experience. 




Theme: Syensqo Dark Theme 

For the Dark Theme, the Innovative Orange color was consistently applied to key interactive elements to maintain strong brand visibility and contrast against the darker interface.

This approach creates a clean and modern dark UI, ensuring good readability and clear visual hierarchy while staying aligned with Syensqo's corporate branding.




Mobile Applications


For mobile applications, such as Neptune-developed apps (e.g. Logistic Mobility Solutions), theming was also implemented using the SAP Theme Designer.
Both Mobile Light and Dark themes were created with minimal customization to ensure consistency and ease of maintenance.

The Innovative Orange is applied across key UI elements, while Contrast Silver is primarily used for header backgrounds.

This color combination translates effectively onto mobile devices, providing a cohesive and visually appealing user experience that remains consistent with the overall branding across SAP Build Work Zone and Fiori applications.

Mobility Light Theme:




Mobility Dark Theme:


SAP SAC Branding Standard

SAC allows limited branding options:

1) The SAP logo will be replaced with the Syensqo logo wherever possible. E.g. in the banner.

2) A colour palette will be created using the Syensqo primary and secondary palettes. (A story palette accommodates 9 colours).

3) A SyWay theme and template story will be created which uses this palette. As with Fiori, the default font is 'Font 72' so the look and feel will be consistent.  This theme / story will be the basis for all other stories.





  • No labels