Style foundations

AI-generated Key Takeaways

• Android Auto and Android Automotive OS (AAOS) share interaction and visual design principles but differ in style and layout details based on their unique contexts.

• Android Auto's UI is controlled by Google, projected from a phone, consistent across cars, and reflects the Google brand.

• AAOS's UI is built by car makers into the car's infotainment system, customized for each model, and reflects the car-maker's brand.

• Style and layout guidelines for Android Auto explain design choices and serve as a reference for app developers, while AAOS guidelines also provide detailed guidance for car makers creating custom UIs.

• Key style differences include Google colors, Google Sans font, and Google-determined layouts for Android Auto versus car-maker colors, standard fonts, and custom layouts for AAOS.

The styles for the two Android for Cars systems – Android Auto and Android Automotive OS (AAOS) – are based on the same interaction design and visual design principles. However, the style and layout details for these systems differ in some ways, based on the unique context for each system.

Here's an overview of the style-related differences between these systems. For details about styles and layouts for each, visit Android Auto design system and AAOS design system.

	Android Auto	AAOS
Style context	Google builds and controls the UI UI is projected from phone onto car screens UI has same look and feel in all cars Style details reflect Google brand, with app branding accents	Car makers build the UI based on AAOS UI is built into car infotainment systems UI is customized for each car model Style details reflect car-maker brand, with app branding accents
Purpose of style and layout guidelines	Explain the thinking behind the style choices in the UI Serve as a reference for any design choices app developers can make	Explain the thinking behind style recommendations for car makers Provide detailed guidance for car makers creating custom layouts and styles for their UIs Serve as a reference for any design choices app developers can make
Key differences	Google colors Google Sans font for larger type sizes Google-determined layout that adapts across car types	Car-maker colors Standard fonts for all type sizes (Roboto or Noto Sans) Custom layouts