Visual Styles

Overview

This chapter provides guidelines on what colors, fonts, and imagery you can use in the layout of your screens to visually communicate information to users. The next chapter UI Components covers how to design for the pre-built interactive and visual elements available in Fitbit OS.

Layout

Dimensions

Fitbit Ionic:

• Display pixel dimensions: 348x250px
• Display physical dimensions: 1.15" x 0.83", 1.42" diagonal
• PPI: 302
• Color depth: 16bit RGB 565

Fitbit Versa:

• Display pixel dimensions: 300x300px
• Display physical dimensions: 0.947” x 0.947”, 1.34” diagonal
• PPI: 317
• Color depth: 16bit RGB 565

Spacing

• Left/Right Margins: 6px
• Top/Bottom Padding: 12px

Grid & Touch Targets

To strike the right visual balance, consider the layout of your app in halves or thirds and keep in mind the following guidelines:

1. Never exceed more than 3 items across or 2 items vertically positioned on the screen.
2. Make touch targets as large as possible in your chosen grid.

Typography

Use our provided typefaces for familiar communication with users. While we don't support custom fonts on Fitbit OS, you may use images as type to create illustrative clock faces. To keep your app accessible to everyone, we don't recommend fonts smaller than 24 px for copy.

Development Details

Download Fonts

Text Styles

Our main type styles map to our System font. For Latin Text, use Seville Book, Seville Regular, and Seville Bold. For Japanese, Korean, and Simplified Chinese, use NotoSans Light in each language.

Recommendations:

• Use bold to emphasize smaller type size or increase legibility.
• Don't use italics.

Text Sizes

Standard text sizes are used in all of our available UI Components to maintain consistency and simplify development. Text should wrap to the next line if you use a vertically-flexible UI Component like Mixed Text.

If the size of a container restricts text wrapping or wrapped text has reached the bounds of the container, reduce the font size by its step size. Repeat this step as many times as needed until you reach the minimum size. If the text size can't be reduced further, truncate the text with an ellipses. In rare cases, you can use the Marquee component.

Clock Face Fonts

For clock faces, a few other fonts are available:

• Colfax
• Fabrikat
• Tungsten

Color

We created a system of named colors for you to use in your applications. Note that specific color values may change in future system updates. The display on our screens uses 16bit RGB 565 and may be different than your computer.

Make smart color decisions to keep your designs accessible to a wide audience:

1. Always check the color contrast of text on full color backgrounds and images.
2. Never use color exclusively to explain a point.
3. Vary shapes and icon to create meaning in multiple ways.

Recommendations

For performance reasons, we recommend against using gradients.

Primary Color

All apps should define a primary color which is likely your main brand color. This color carries your brand across our UI Components that accept color, such as Mixed Text, Buttons, Tumblers, Action Dialogues, and as your app's wipe color, which users see when launching and closing your app.

Named Colors

The system supports 65,536 colors, and they can be expressed in hex or named web colors. We recommend using the Fitbit named colors to keep applications in sync with the OS design.

Development Details

Icons

Icons in your app

Download our system icons, or create your own.

Recommendations

• Icons should be clear, differentiated, and representational of the right metaphor to make sure users understand the meaning.
• Icons that serve as interactive elements should use an 8-bit grayscale png to allow dynamic color to be applied. See Greyscale Magic for more development details.
• Align the icon center, not corner, to make sure differently-sized icons are positioned in the same way.

App Icons

App icons on device in the App Switcher are 80x80px. App icons in the App Gallery are 320x320px. All icons require at least 1px of padding.

Recommendations

• Icons look best on device at 70x70px, centered in an 80x80px .png.
• Use simple logos that work on both black and white backgrounds.

Imagery

We recommend limiting use of images because they will affect your app's performance. If you decide to use images, use only one full-width .jpg per screen. Be sure to consider contrast and legibility of text when using an image as a background.

Haptics

Haptics provide vibration feedback to users about events and interactions. Though you can't see haptics, we included them in the Visual Design section of this guide because they provide meaning to users, similar to color and form.

Note: Users can customize haptic strength in settings, selecting either Normal or Strong. Max haptics are the same strength as our Strong setting, so users with Strong selected will feel no difference in max or regular haptics. We recommend using max haptics sparsely, primarily for physical activity.

Haptics Library

"Nudge"

• Use: Asking for the user's attention, likely while using the device.
• Feels like: Two short vibrations on the wrist.

"Nudge-max"

• Use: Demanding the user's attention.
• Feels like: A stronger "nudge" for use while active.

"Bump"

• Use: Providing feedback as the user scrolls or reorders content.
• Feels like: A single short vibration as the user controls the screen.

"Ping"

• Use: Notifications and reminders when the user isn't using the device.
• Feels like: A short vibration followed by a longer vibration.

"Confirmation"

• Use: Button feedback and starting or stopping activities.
• Feels like: A single vibration.

"Confirmation-max"

• Use: Scenarios that call for attention grabbing feedback.
• Feels like: A stronger confirmation.

Animations

Animations can both delight users and add meaning to an interface. For more information, see Animation Development Guide.

Recommendations

• Use standard easing values.
• For transition, use 0.4s or higher.
• For complex animations or sprites, use PNG sequences.
• Limit or omit full-screen, rotation, or scaling animations, as they can severely impact the performance of your app.

Drawing the Blueprints

UI Components