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.)