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. Developers can build and distribute 2D apps directly through the Meta Horizon Store using Progressive Web Apps (PWAs), an industry standard for installable web applications.

Below we’ve provided a primer for top considerations to consider when porting your app to MR.

Colors will show up slightly different depending on the color space of the device. 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 PWA on the headset and iterate on the colors if necessary.

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

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

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 in your PWA. If you plan to use a light background for your PWA, we recommend using a color that is no brighter than #DADADA to avoid eye strain.

Use a font in your PWA 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.

It depends on the characteristics of each font, but for PWAs 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.

Use font sizes and weights to create different levels of hierarchy in your layouts. 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.

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

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.

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 in your PWA to make it Hand Tracking accessible.

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.

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.

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