Firefox OS App Headers

Basics

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.

Default header for light applications
Default header for dark applications
Settings header
System (edit mode) header

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

  1. 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.
  2. 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.
  3. The right hand side is reserved for action buttons which are divided by a shorter vertical divider.

No back/drawer navigation
Header with action (drawer navigation)
Text action button
Edit subheader is light
Settings subheader is dark grey

Usage Examples

Light app header (for productivity)
Dark app header (for media)
Settings header

Do

Change the background color

Don't

Do not center the title
Do not place square buttons on it
Do not cover the left hand side button area

Download

You can download the Firefox OS Stencil PSD here.