Firefox OS Guidelines


This guide serves as a resource to designers and developers to help define the visual style for their Firefox OS apps.

The guide has been divided into the following sections:

  1. Color Palette
  2. Typeface
  3. Headers
  4. Backgrounds
  5. Lists
  6. Buttons
  7. Tab Bars, Toolbars and Filters
  8. Input Areas
  9. Switches, Check Boxes and Sliders
  10. Action Icons
  11. App Icons

Many of the core visual design assets and layout elements are provided within the guide, however below are some of the core design characteristics that should always be followed.

  1. Shape forms are Bold, Geometric but with hints of organic softness. Shapes
  2. UI communicates a sense of handcrafted design through careful content layout and strong use of typography.
  3. Design is minimal, effective and intuitive but doesn’t feel soulless; has warmth.
FM radio
FM radio
Email (inbox)
Email (inbox)
Clock (analog)
Clock (analog)

Use the assets (vector source) and our principles to make your apps not only fit within the greater system but also have their own unique identity.