Styles

Colors | Fonts

Colors

Required

  • Page:
    • Background color: White
  • Header:
    • Background color: Black
  • Footer:
    • Background color: Gray, except for status messages
  • Avoid color-coding as a single means of providing information.
  • Use an asterisk along with red for mandatory input fields labels.
  • Use labels along with colors in status messages (for example, "Success:" along with Green).

Recommended

  • Limit the number of colors used on a screen

 

Fonts

Element Face Font Color Background Example
Header Dialog 13 bold* White Black Page Header
List headers Dialog 12 bold Black White List Headers
Normal text Dialog 12 regular Black White Normal text
Highlighted text Dialog 12 bold White Black or OS default Highlighted text
Button Dialog 12 regular Black Gray Button
Standard footer Dialog 12 regular Black Light Gray Footer
Success messages Dialog 12 bold Black Green #AACDA1 Success
Error messages Dialog 12 bold White Red #F66767 Error

* Use a font size of 12 if developing for the Palm OS, because it does not support 13.

Recommended

  • Bold can be used to highlight important information, but should be limited to 20% of the content.

 

top top

Source:  SAP Style Guide for Blue-collar Worker PDAs