Styles

Colors | Fonts

Colors

This section contains the complete list of colors allowed for SAP applications running on PDAs. These colors have been chosen based upon the mySAP CRM and Enterprise Portal palettes, with some minor adjustments for better display on mobile devices.

Certain colors are marked as semantic colors. These colors are used to articulate various meanings, for example: grouping within table entries, subtotals and totals within tables, and emphasis of particular dates within the Date Picker control.

Usage
Hex Value Color
Page
Background #FFFFFF  
Standard text #000000  
Navigation Bar
Bar background #FFFFFF  
Bottom border #FF9A00  
Bottom separator #FFFFFF  
Text #000000  
Tab Strip
Tab strip underline #225A8D  
Tab separator #FFFFFF  
Inactive tab background #CBD5E1  
Inactive tab text #000000  
Disabled tab background #CBD5E1  
Disabled tab text #79818D  
Selected tab background #225A8D  
Selected tab text #FFFFFF  
Panel border #DCE3EC  
Panel background #FFFFFF  
Group Box
Title bar border #003366  
Title bar background #DCE3EC  
Title bar text #000000  
Panel border #003366  
Panel background #FFFFFF  
Object Header
Object header background #003366  
Object header text #FFFFFF  
Table
Table border #003366  
Table header background #CBD5E1  
Table header text #000000  
Table header border #003366  
Column header background #DCE3EC  
Column header border #FFFFFF  
Column header text #000000  
Cell background #FFFFFF  
Alternating cell background #E9EEF4  
Cell border #DCE3EC  
Cell text #000000  
Table footer background #CBD5E1  
Table footer text #000000  
Table footer border #003366  
SEMANTIC: Negative background #F66767  
SEMANTIC: Positive background #AACDA1  
SEMANTIC: Total background #FFF605  
SEMANTIC: Subtotal background #FFFB8C  
SEMANTIC: Group level 1 background #90AEEE  
SEMANTIC: Group level 2 background #AEC4F2  
SEMANTIC: Group level 3 background #CCDAF6  
SEMANTIC: Marked border (only border changes, not background) #FF9A00  
Fields
Field label text #000000  
Required field indicator #D0001D  
Field text (content) #000000  
Date Picker
Container background #FFFFFF  
Container border #DCE3EC  
Month/year name text #000000  
Day names cell background #DCE3EC  
Day names cell border #FFFFFF  
Day names cell text #000000  
Week numbers cell background #DCE3EC  
Week numbers cell border #FFFFFF  
Week numbers cell text #000000  
Standard day cell background #FFFFFF  
Standard day cell border #DCE3EC  
Standard day cell text - days of current month #000000  
Day cell text - days of previous or next month #999999  
Emphasized current day border #225A8D  
SEMANTIC: Emphasized Background color 1 #BBDDDD  
SEMANTIC: Emphasized Background color 2 #FFFB8C  
SEMANTIC: Emphasized Background color 3 #AACDA1  
SEMANTIC: Emphasized Background color 4 #F66767  
SEMANTIC: Emphasized Background color 5 #FDBB71  

 

Fonts

This section contains a list of fonts and formatting allowed for texts within standard SAP mobile applications. While currently available browsers may not support every formatting option specified, it is expected that future versions of the browsers will do so. Therefore, for forward compatibility, application developers must follow the below specifications precisely.

Text Type Font Color Size Formatting
Standard text (default) Arial #000000 2 None
Navigation bar text (ME start page) Arial #000000 2 Bold, Italic
Navigation bar text (application start page) Arial #000000 2 Bold
Links text Arial #225A8D 2 Underline
Field label text Arial #000000 2 None
Field text (contents) Arial #000000 2 None
Required field indicator (*) Arial #D0001D 2 Bold
Object header text Arial #FFFFFF 2 Bold
Selected tab text Arial #FFFFFF 2 Bold
Inactive tab text Arial #000000 2 None
Table: Header text Arial #000000 2 Bold
Table: Column header text Arial #000000 2 Bold
Table: Cell text Arial #000000 2 None
Date picker: Month/year text Arial #000000 2 Bold
Date picker: Current day text Arial #000000 2 Bold
Date picker: Standard day text Arial #000000 2 None

 

top top

Source:  SAP Style Guide for White-Collar Worker PDAs