Styling and Best Practices

The guidelines below will help your app look and feel consistent with the rest of Jet’s user interface. While you’re free to exercise creative license, bear in mind that, from a user’s point of view, a consistent interface will make your app look more polished and behave more intuitively.

Display and layout

Jet’s display has a resolution of 428×240 and is always used in a landscape orientation.

Apps should have 30-pixel margins along all four sides of the screen—except when the status bar is visible, in which case the bottom margin should be only 10 pixels. (The status bar itself is 30 pixels tall.)

display_and_layout

Try to keep your app’s interface as uncluttered as possible, and try to use margins generously. Remember, Jet’s display is designed to be glanced at, not stared at. An uncluttered interface with plenty of padding will be easier to decipher and navigate at a glance.

Typography

All text in ReconOS is set in either Open Sans Regular or Open Sans Semibold.

You should use the semibold weight for smaller text and the regular weight for all other text.

Open Sans Regular

image23

Open Sans Semibold

image22
Text and background colors
Since Jet’s display is designed to be worn outside in full sunlight, ReconOS attempts to maximize contrast by using light text and objects on dark backgrounds. The following colors are used as standard:

  • White (#FFFFFF) for text. EXAMPLE
  • Orange (#FFB300) for highlighted menu items. EXAMPLE
  • Gray (#808080) for non-highlighted menu items. EXAMPLE
  • Black (#000000) for backgrounds. EXAMPLE

We recommend against overlaying dark objects on light backgrounds. Because Jet’s display is very bright, light backgrounds tend to bleed into darker objects, which can make those objects hard to see. This holds especially true for text.

Icon and container sizes and colors

ReconOS uses the following pixel sizes for icons and containers:

  • 110 x 110 for expanded app icons in My Apps.
  • 30 x 30 for icons in the Notification center.
  • 30 x 30 for icons in interactive notifications.
  • 60 x 90 for the background container of interactive notification icons.
  • 40 x 40 for passive notification icons.

For maximum visibility and contrast, we recommend that all notification icons (interactive and passive) be white on a dark background. Remember: the easier your icons are to distinguish, the more likely users are to recognize them when glancing at the screen.

 

Back to: Design Guidelines

Questions? You can e-mail us or visit our developer forum.