[null,null,["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eAndroid Auto's UI is designed for clarity on car screens, using purposeful color, typography, and visual elements.\u003c/p\u003e\n"],["\u003cp\u003eThe design system incorporates color palettes, layout guidelines, motion patterns, sizing specifications, and typography rules for optimal usability and safety while driving.\u003c/p\u003e\n"],["\u003cp\u003eConsiderations for different screen sizes, day and night modes, and touch target interactions are integrated into the design.\u003c/p\u003e\n"],["\u003cp\u003eMotion is used strategically to enhance navigation, app transitions, and user actions within the Android Auto interface.\u003c/p\u003e\n"],["\u003cp\u003eTypography is optimized for legibility in a driving environment, employing a typographic scale, type sizes, and styles for clear communication.\u003c/p\u003e\n"]]],[],null,["# Design system\n\n\u003cbr /\u003e\n\nThe Android Auto UI uses color, typography, and other visual elements strategically to enhance visual clarity on car screens.\n[](/cars/design/android-auto/design-system/color) [Color\n-----](/cars/design/android-auto/design-system/color)\n\n\nColor palettes, gradients, contrast ratios, and colors for day and night\n[](/cars/design/android-auto/design-system/layout) [Layout\n------](/cars/design/android-auto/design-system/layout)\n\n\nLayout design, padding, and breakpoints for all car screen sizes\n[](/cars/design/android-auto/design-system/motion) [Motion\n------](/cars/design/android-auto/design-system/motion)\n\n\nMotion patterns for changing apps, navigating within apps, and performing actions\n[](/cars/design/android-auto/design-system/sizing) [Sizing\n------](/cars/design/android-auto/design-system/sizing)\n\n\nSizing and positioning of icons and touch targets \n[](/cars/design/android-auto/design-system/typography) [Typography\n----------](/cars/design/android-auto/design-system/typography)\n\n\nA typographic scale, type sizes, and styles for legibility while driving"]]
