MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

This article explains how to create app icons for Firefox OS Smart TVs using the relevant subset of the Mozilla icon design guidelines.  Applying these guidelines gives you the freedom to create original icons that also work with the look and feel of Firefox OS Smart TVs.

App launcher icons

App launcher icons give users the first impression of your app on the Home screen. Create icons that represent the purpose of the app and differentiate it from other apps, as shown in the following illustration. 

Please follow the suggested sizing for common shapes as seen below. When designing an icon, refer to the standard set of icons and size yours proportionately. The best example is a simple white foreground logo with a solid and vivid background color. Also don’t forget that users may like to change the Home screen's wallpapers, so make sure that your launcher icon looks good with any background.

Icon production

Crop your icon in a round shape (Type A) or use a square shape as a backdrop (Type B). See below for examples.

Type A (Recommended)

Firefox Smart TV app icons are 336 x 336 px images provided in 24-bit PNG format. Each standard OS app icon is contained within or underlayed with a 336 px diameter round shape.

The text panel is automatically generated. Do not include any naming, overlay or drop shadow in the image you provide.

Type B

With a solid background color, developers can create logo images with a maximum size of 220 x 220 px. The remaining space around the icon will be automatically filled with the edge color of the logo image.

Design Principles

Avoid using white as the background color for launcher icons — this makes it hard to distinguish the highlight state. Please study the example below for more details.

Example: Highlight launcher

After you select an app, a white outline is added to the icon.

Notification Icons

If your app generates notifications, users can get notifications in various contexts, such as the lock screen. The design of a notification icon should ensure its readability and clarity even at small sizes.

Size

A notification icon must be 5.4 x 5.4 rem.

Option icons

Firefox Smart TVs have lots of predefined option icons. You should use these icons to represent standard tasks in your app. If you do not like the default style of the option icons, you can customize option icons for apps; however, please create these icons using the sizing guidelines detailed here. We also recommend colors, rounded angle degrees, and stroke weight, to ensure your icons look just like one of the members of the TV icon family.

Size

An option icon must be 10x10 rem.

Style

Note: Please use pure white when designing option icons.

When designing icons for different TV resolutions, please refer to the table below for the best experience.

Resolution

Launcher icon

Notification icon

Option icon

2K

33.6x33.6 rem

5.4x5.4 rem

10x10 rem

4K

67.2x67.2 rem

10.8x10.8 rem

20x20 rem

Color Palette

This section details the Firefox OS TV color palette.

Main Colors

There are four launcher icons on Firefox OS Home screen. The color palette for these four icons has been designed to fulfill the needs of legibility, hierarchy, highlight, and feedback.

  • Live TV: #fd0587
  • Application: #00e0c2
  • Dashboard: #ff9732
  • Device: #0583ee

You should avoid the four main colors, thereby helping users to recognize the four main icons quickly.

All Colors

The following list shows the major colors applied to common controls, buttons, and text on Firefox Smart TVs.

Colors for Buttons

Blue is the standard "pressed/clicked" color in the palette of a Firefox Smart TV.

Colors for text panels

There are three different text panel colors used in Firefox Smart TVs. For app icons, a black overlay with 40% opacity for text panels is automatically generated.    

  • TV icons: Color: #d90c83; Opacity: 100%
  • Device icons: Color: #4a82ea; Opacity: 100%
  • App icons: Color: #000000; Opacity: 40%

Typography

Firefox OS uses a typeface family named Fira Sans, which is created specifically for the requirements of UI and high-resolution screens.

Main fonts

Fira Sans Light

Fira Sans Light Italic

Fira Sans Regular

Fira Sans Italic

Common text styles

The following table lists the most common styles you may need, with sizes and weights. The combinations listed here are calculated for 2K screens. When working with a different resolution, you can use the conversion formula provided below.

Use cases

REM

Weight

Header

5.4

Light 300

Subheader

4.6

Light 300

Dialog content

3.8

Light 300

Banner

2.8

Light 300

Content / List item

3.2

Regular 400

Info of list item

3.2

Light 300

The status of list item

2.4

Light 300

Converting type sizes between points, pixels, and rems

The calculations are density dependent, and you may switch from one pixel density to another to obtain the right ratio of points and rems.
This is the formula to convert point to rem depending on the device's pixel density.

Conversion Formula

We use typographic points as the basis of all our measurements; this was done as point sizes are universally understood in design and locked to a physical measurement. Firefox OS currently reads type best in pixels, and we convert our specified point sizes to pixels per resolution. Here is the formula we used:

1 inch = 72 point (pt)

Type Unit

10 Pixels = 1 rem

Font Weight

PSDs CSS
Light 300
Regular 400
Medium 500

Download

We will soon provide a downloadable file containing all the fonts, including a monospaced variant with two weights (regular and bold.)

 

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, rolfedh, MashKao
 Last updated by: chrisdavidmills,