Design

Immersive 2D apps

Updated: Sep 15, 2024

Meta Horizon OS offers powerful 2D multitasking capabilities that enable users to defy the limitations of physical 2D screens by providing more space, flexibility, and portability than traditional desktop computers. You can build and distribute 2D apps directly through the Meta Horizon Store.

Consider the following key factors when porting your app to MR.

Color

Color space

Device color space affects how colors appear. In general, the colors you see in your headset might appear slightly more saturated than the colors you see on your mobile or desktop. Make sure to test your app on the headset and, if necessary, iterate on the colors.

Color contrast

The contrast ratio between foreground and background should be 4.5:1 for regular sized text and 3:1 for headlines or non-text elements (e.g., button backgrounds).

Dark and light mode

Meta Horizon OS provides both light and dark mode. We recommend that you provide both modes to achieve visual consistency with the system. Developers can detect the user’s preferred color scheme using the CSS prefers-color-scheme media feature⁠.

Avoid using pure white (#FFFFFF) and black (#000000)

High-contrast colors don’t work well in MR. We recommend using shades of light gray and dark gray to replace the pure white and black. If you plan to use a light background, we recommend using a color that is no brighter than #DADADA to avoid eye strain.

Typography

Choose a legible font

Use a font that’s easy to read. To ensure legibility at small sizes, even when the view is zoomed in or out, we recommend choosing a sans-serif font with high x-height and big counters.

Choose the correct font size

It depends on the characteristics of each font, but in general, a font size no smaller than 14px would give you the minimal legibility for reading. A font size no smaller than 18px generally ensures a comfortable reading experience.

Choose an appropriate font weight

Use font sizes and weights to create different levels of hierarchy in your layout(s). Larger weights such as Black, Bold, Medium and Regular are more legible than lighter weights such as Light and Thin. If you are using lighter weights, increase your text size to ensure legibility.

Icons and images

Use simple, recognizable icons

Simplify icons for greater clarity and legibility even at small sizes. Avoid using complex icons with delicate, thin stroke weights.

Provide icons at appropriate sizes

We use a 24x24 dp grid, but build the icons on a 192x192 pixel grid. This is to ensure that we’re future-proofing these pixel-perfect icons so that they work well in higher-res headsets.

Inputs and hit targets

Comfortably-sized hit targets should be a minimum of 48dp x 48dp. This sizing allows enough space for a user’s finger and accounts for hand tracking movements. In general, we recommend maintaining a minimum hit target of 60x60 px for all primary controls to make them Hand Tracking accessible.

Use invisible hit slop

For assets that don’t meet the minimum required size for hit targets, hit slop should be implemented. The primary example of a component that requires hit slop is the standard button shown below. Icons that are actionable also require hit slop.

Leave enough space between components

It’s important to consider not just the size of components, but also the space between components, as some small components will have invisible hit slop around them to supplement the hit target size.

Layouts

Provide responsive layout

By default the viewport will be 1000x625px. The dimensions can be adjusted by the user, so we recommend designing and building your app responsively so it can be rendered well at a variety of viewport sizes.