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
Source: SAP
Style Guide for White-Collar Worker PDAs
|