User Interface Guidelines

Use this guide when you're designing your user interface, and build your Works with Nest product to complement our design philosophy.

Download Nest visual and brand assets:

Thermostat API and the Nest Thermostat

The Nest Thermostat is much more than a simple target temperature. It has different states and features that affect how the UI is displayed and what the controls do. Nest takes great care to make sure the function and presentation of the Nest UI is clean and clear. When integrating with Nest Thermostats, you'll need to take into consideration these features and then design an interface that fits with the UI of your own app.

Don't replicate the Nest industrial design. For icons and imagery that represent a thermostat, be careful not to use the physical characteristics of the Nest Thermostat; this includes the sensor window located at the bottom face of the thermostat.

Industrial design

Don't replicate the Nest UI. When building an interface for the thermostat, do something that fits the look and feel of your app.

  • Don't copy the exact UI elements, font, gradients, or imagery that make up the Nest thermostat UI.
  • Only use tick marks to represent ambient temperature, target temperature, or heat-cool temperature range. (Don't add tick marks for every possible temperature value)
UI design

Consider background colors. The Nest app and Nest Thermostat use orange and blue background colors to indicate that the customer's heating or cooling is currently running. The colors represent the HVAC state, and are not an indicator of the current HVAC mode.

For more info, see What is Heat-Cool Mode?

Consider information hierarchy. When showing information, be mindful of how that information is represented by Nest products and where there could be potential for customer confusion.

For example, Nest shows a large number in the middle of a circle. That number shows the target temperature of the HVAC system. Creating an app that uses the Nest API and shows the current temperature as a large number in a circle could be easily misinterpreted.

Handle all of the thermostat states. An interface that represents and controls the thermostat must do more than show a single number for the target temperature.

Nest Leaf. The Nest Leaf indicates that the thermostat is set to an energy-saving temperature. The API shows when the Nest Leaf is visible for each individual thermostat.

Leaf

Download the Nest Leaf.

Smoke + CO alarm API and Nest Protect

Don't replicate the Nest industrial design. For icons and imagery that represent a smoke and carbon monoxide alarm, do not use the physical characteristics of Nest Protect.

Industrial design

Camera API and Nest Cam

Nest Cam is designed to watch out for your home and family – even when you can't. We take great care to make sure the function and presentation of the Nest UI is clean and clear, to help prevent user confusion.

Consider this when you design your interface, so that it fits well and flows with the UI of your app. Be sure to account for all the states and features that affect how the UI is displayed, how the audio and mic work, and what the controls do.

Don't replicate the Nest UI. When building an interface for the camera, do something that fits the look and feel of your app. Don't copy the exact UI elements, font, gradients, or imagery that make up the Nest thermostat UI.

Don't replicate the Nest industrial design. For icons and imagery that represent the camera, be careful not to use the physical characteristics of Nest Cam or Dropcam, except for assets we provide.

Do not replicate Nest Cam industrial design

Handle all of the camera states. When you build an interface that represents and controls the camera, it must reflect the relevant camera states. For example, a user can control whether the camera is on or off, if a schedule is set up, or whether audio is enabled, any of which will change the camera status in the API.

Consider information hierarchy. When showing information, be mindful of how that information is represented by Nest products and where there could be potential for customer confusion. Consider how your users will navigate to a device in a structure, or to an image/gif file based on a sound or motion event (and how that behavior changes when a Nest Aware subscription is enabled).