Firefox OS App Headers
A Firefox OS header is 5 rem in height and composed of a title and two button areas.
The header colour and styling depends on the type of screen it heads.
There are 2 main types of headers: light and dark. The light headers are used for productivity applications while the dark headers are found on media applications.
Additionally, settings and system (for example, edit mode) have their own header styling as shown below.
The edit mode header is a black 95% transparent header that overlays the main app header, subtly revealing the header behind it.
Elements of a Header
- The left hand side area of the header is reserved for very specific actions: the back navigation button, cancel button and drawer display button. This area is darker and separated from the rest of the header by a full length vertical divider.
- The title is always left aligned while leaving space on the left hand side for the button even in the cases where it is not present.
- The right hand side is reserved for action buttons which are divided by a shorter vertical divider.
You can download the Firefox OS Stencil PSD here.