What is the Base Design System?
Base is the name of Uber’s very own design system. It includes the core UI components that define the foundations of Uber's user interface. Base Web is an open-source toolkit of React components and utilities aligned with the Base Design System.
Base uses a clear design style and offers a flexible foundation. It works on all devices, making it easy and fast to create web applications. As Uber emphasizes, Base Web is designed to be reliable, accessible, and customizable.
The Evolution and Versions
In 2018, Uber created a React library for the web and released it to the public as the Base Web open-source project. They named it "Base" because it focuses on the basics. This includes typography, color, grid, and iconography. It also covers essential elements like buttons, lists, and controls.
Today, it has become the UI framework for all of their products. According to the Versioning Policy, Uber releases only one major version each year, usually in September. They also provide several minor or patch updates each week, as needed.
Initial Launch: V1 (2018)
Base Web introduced a broad range of standard UI components, design tokens, theming capabilities, and a flexible styling system.
This initial version laid the groundwork for scalable design practices within Uber.
Early Enhancements: V2, V3, V4 (2018 - 2019)
The updates included enhancements to existing components, increased performance, improved accessibility, additional components, and refined theming capabilities.
Major Enhancements and Modularization: V5, V6, V7, V8 (2019)
Optimizations in performance and accessibility were prioritized.
Made Type checking improvements which reduced boilerplate and increased confidence
Fine-tuning and Feature Expansion: V9, V10, V11 (2020 - 2022)
It updated the Nested Overrides Playground and complex components are easier to customize.
Introduced the Map Marker Component, bringing geospatial components to Base Web.
Removed tech debt and many deprecated features have had warnings present at development-time and others will auto-fix warnings when users have the eslint plugin installed.
Continuous Improvement: V12, V13, V14 (2023)
The focus shifted toward increased community involvement, enhanced documentation, and continuous improvement of components.
Greater emphasis was placed on accessibility (a11y) and performance optimization.
Current Version: V15 (2024)
Introduced the File Uploader Component, adding state to a reusable file uploader component.
What Products Built with Base
Uber's Base Web design system is important for making designs that are consistent, efficient, and scalable. It helps across Uber's apps and websites.
Its open-source nature has also allowed other companies to use it for their own projects. Base Web is a popular choice for many developers and organizations. It helps create polished and uniform designs.
Uber Products:
Uber Rides: Ride-hailing service connecting riders with drivers.
Uber Eats: Food delivery service connecting users with local restaurants.
Uber for Business: Corporate ride management and employee transportation solution.
Uber Rent: Car, bike, and scooter rentals through the Uber app.
And some other Uber Products like Internal applications used by Uber employees, Developer platform for third-party developers and Uber partner portal.
External Adoption Examples:
Broadcom: A global tech company that makes hardware and software for things like networking, broadband, enterprise storage, and industrial markets.
Metromile: An innovative insurance company that offers pay-per-mile car insurance, giving customers personalized insurance based on how much they drive.
Extensis: A company that creates software to help teams manage digital assets and fonts, making creative workflows smoother and more efficient.
Sprinklr: A platform that helps businesses manage social media, marketing, and customer care across digital channels.
Applicable industries for reference
The Base Design System provides a flexible and modular design language that can be adapted to different products and use cases. Below are some key industries utilizing this design system, highlighting specific features that cater to their unique needs:
Technology: Scalable UI components and customizable themes help build efficient, branded user interfaces.
Healthcare: Consistent design and flexible styling ensure a smooth and reliable user experience for insurance policyholders.
Finance: Secure UI components and strong performance handle complex financial data while staying user-friendly.
Digital service: Extensive component library for social media interactions and customer care, and consistent design elements for managing digital assets efficiently
Platform Support and Use Cases of Base
Supported Platforms
Base Web is a complete design system. It works on many platforms. This ensures a consistent and high-quality user experience everywhere.
Web Platform: Works seamlessly with React, offering customizable UI components and supporting HTML and CSS for cohesive web applications.
Mobile Web: Provides responsive design elements that adapt efficiently to various screen sizes mobile browsers, including iOS Safari (>= 10.3) and Android (>= 4.4).
Static Site Generators: Compatible with static site generators like Gatsby and Next.js, supporting fast, static websites with dynamic interactions.
Use Case Scenarios
A Guide and Template to Base
Style Template File for Motiff
Open and Edit Base Design System V9 Template in Motiff →
Effective Use of the Color System
The system is easy to use and can be customized. It helps designers focus on patterns and real-world effects. Base design system has three main colors: white, black, and an accent color. Since the Base Web v9 update, the component library now has a more accessible color palette. Black is the new primary color. The internal app, Style Guide allows users to preview components and colors. It can also be used to enable dark mode. The latest color system is currently in Beta testing.
Typography Hierarchy and Readability
Base Web's typography is designed for flexibility and clarity, focusing on three main principles:
Go Big: Larger font sizes enhance legibility and accessibility, making text clear and readable.
Less is More: Fewer style options help avoid decision paralysis. This gives a simple set of text styles that balance control and creativity.
Simple Semantics: Semantic groupings provide helpful guidance on style usage without being overly prescriptive.
A clear typographic hierarchy improves readability and helps users find important content quickly. Typography draws attention to key elements by visually emphasizing them. Base has four font categories and five core sizes based on a four-pixel grid. Using different sizes for headings, labels, and paragraphs creates a clear hierarchy. This helps make the text easy to read and understand.
Icon Design Principles
Base's icon system takes inspiration from transportation symbols. It is designed to be bold and clear. The icons work well with the overall font and brand guidelines.
Simple: Icons should be bold, geometric, and composed of basic shapes. Minimize complexity but keep them recognizable.
Clear: Designed for in-app use, icons must be easily readable at smaller sizes.
Focused: Icons will be paired with text, so avoid being overly literal. Highlight key details instead.
Flexible: Ensure icons allow for multiple interpretations for broader reuse by other designers.
Base Components Templates
Open and Edit Base Web V9 Template in Motiff →
Base Web design system components enhance UI flexibility and performance with features like visual property systematization (padding, corner radii, rotation, opacity), multiple style combinations, and more.
Buttons
Input and selection
Indicator and status
Content display
Messaging
Containers and layout
Navigation
Data and tables
Accessibility in Base
Base prioritizes accessibility to ensure inclusive and user-friendly experiences. Users can navigate Base using just a keyboard, and it works well with screen readers, which read out the text on the screen for those who can't see well.
Base uses a tool called Styletron to make loading faster, even if your internet is slow or you're on a mobile device. Accessibility attributes are defined for each group. For visually impaired people, it provides audio descriptions of what's on the screen. This helps them understand and use the website better.
By using shared components in both design and code, Base keeps the look and behavior consistent, which makes it easier to learn and use. This way, all users, no matter their ability, can access and interact with the content smoothly and effectively.
Other Resources
Getting Started With Uber’s Base Web UI: A detailed guide on effectively setting up and using Base design system.
github-uber/baseweb: The page includes code, documentation, and resources for using Base in projects.
Base-designsystems.surf: A listing page for Base.
Welcome to Base: An Official Youtube Video introducing Base.