Designing a foundational UI system goes beyond creating visual elements—it's about building the core structure that ensures a seamless, consistent, and scalable user experience.
In my recent project on openpilot, an advanced driver assistance system (ADAS) running on Comma 3x hardware, I focused on redesigning/transforming the user interface to create a strong, flexible foundation that enhances usability and mainly accessibility.
The foundation of a good UI system includes base components such as color, typography and the core layout (UI architecture). These elements are not just decorative; they serve specific purposes. The typography style was chosen to be easy to read, for various driving positions and conditions. The color system was designed to balance the software's branding while ensuring high contrast for readability and interaction.
Accessibility is one of the most crucial aspects of designing a foundational UI system because it ensures the design is usable and inclusive for all users, regardless of the conditions, rather than merely satisfying aesthetic or creative preferences.
For openpilot, accessibility was a top priority for me because the device is mounted 10-12 inches from the driver’s face below rear view mirror. I consciously designed with large typography style and interactive components, such as buttons and toggles, that are easy to click without requiring extra attention.
Result:
OLD
NEW
👉🏼 DETAILED DESIGN CASE STUDY
Taking cues from Dan Mall’s article, "The Folly of Design System ‘Foundations’" I understood that a foundation shouldn't be too rigid or restrictive. Instead, it should be flexible enough to allow growth and changes as the product evolves which are much essential at the early foundation stage. The design's core principles—accessibility, consistency, and simplicity—are woven into every element, ensuring that the UI system remains a strong base that supports future feature integrations.
This project taught me that establishing a foundational UI system is less about dictating design details and patterns and more about creating a cohesive structure using core basic components and continuously iterating around defined principles.
This is work in progress, will be updating this ...