Styles
Colors | Fonts
Colors
Required
- Page:
- Header:
- 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
Source: SAP
Style Guide for Blue-collar Worker PDAs
|