--- version: alpha name: Uber-design-analysis description: "A mobility brand in strict black and white: UberMove headlines at weight 700, UberMoveText for the interface, round black and white pill buttons, a few cool grays and no accent color." status: Draft appVersion: "measured in a browser, 2026-10-06" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#000000" on-primary: "#ffffff" canvas: "#ffffff" panel: "#f6f6f6" panel-soft: "#f3f3f3" inverse: "#292929" ink-body: "#333333" ink-muted: "#4a4a4a" ink-faint: "#afafaf" hairline: "#f0f0f0" typography: # Font note: "UberMove" is a private font and is not available in open fonts. Closest open alternative: "Albert Sans". # Font note: "UberMoveText" is a private font and is not available in open fonts. Closest open alternative: "Inter". display: fontFamily: "UberMove, 'Albert Sans', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 52px fontWeight: 700 lineHeight: 64px headline: fontFamily: "UberMove, 'Albert Sans', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 44px body: fontFamily: "UberMoveText, Inter, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px button: fontFamily: "UberMoveText, Inter, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 16px rounded: xs: 6px sm: 8px md: 16px pill: 999px spacing: sm: 10px md: 12px base: 16px components: button-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" height: 36px padding: 10px 12px button-light: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.pill}" height: 36px padding: 10px 12px text-link: backgroundColor: transparent textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.sm}" height: 24px panel: backgroundColor: "{colors.panel}" textColor: "{colors.ink-body}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 16px --- ## Overview Uber is a ride and delivery platform. Its public site is strictly black and white: big bold headlines, round pill buttons and photographs, with no accent color at all. [Observed] What defines the look: 1. **Black and white only.** Black `#000000`, white and a few grays (`#f6f6f6`, `#f3f3f3`, `#292929`, `#333333`). No brand color appears in the measured page. [Measured] 2. **Bold geometric headlines.** UberMove at 700, 52 on 64 for the hero and 36 on 44 for sections. [Measured] 3. **Round pill buttons.** Black with white text or white with black text, 36 to 38 high, 14 at 500. [Measured] 4. **Small interface type.** UberMoveText at 14 and 16, with 8px corners on small controls. [Measured] 5. **Photography does the color.** The site relies on images, not a palette. [Observed] Source for this file: the Uber US home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. Uber's Base design system site was not read. The ride flow is behind login and was not measured. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Black | `#000000` | Buttons, hero and header | | White | `#ffffff` | Pages and light buttons | | Cool grays | `#f6f6f6`, `#f3f3f3`, `#f0f0f0` | Panels and rules | | Dark panel | `#292929` | Dark sections | | Text | `#333333`, `#4a4a4a` | Body | | Faint text | `#afafaf` | Meta | ### Typography UberMove carries headlines at 700: 52 on 64 for the hero, 36 on 44 for sections. UberMoveText carries text and buttons: 16 on 24 at 400 for body and 14 on 16 at 500 for buttons and navigation. [Measured] ### Shape and spacing Buttons are 999px pills 36 to 38 high with 10 by 12 padding. Smaller controls use 8, panels 16 and thin elements 6. [Measured] ### Iconography and motion Not measured in this pass. [Inferred] ### Themes Light and dark sections on the page measured. [Observed] ## Platform: iOS The Uber iOS app was not captured. The notes below follow from the web design and platform conventions. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for the main areas of the app. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A large black button for requesting a ride. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The apps are expected to share the black and white, the type and the pills with the web. [Inferred] ## Platform: Android The Uber Android app was not captured. The notes below follow from the web design and platform conventions. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for the main areas of the app. [Inferred] ### Main action Expected on Android: Floating action button. A large black button for requesting a ride. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The apps are expected to share the black and white, the type and the pills with the web. [Inferred] ## Platform: Web The Uber US home page, measured at 1440 and 390 wide. The ride flow was not measured. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A black header with Business, About and language buttons and Log in and Sign up pills. [Observed] ### Main action Expected on Web: Page-level button. A black pill with white text, 36 high, or a white pill with black text on dark. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Pills 36 to 38 high and text links with an 8px focus corner. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values at each breakpoint. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons measure 36 to 38 high. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable to the public pages measured. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. The responsive page keeps type and color and changes layout. [Measured] ## Cross-platform consistency Consistent across platforms: black and white, the bold type and pill buttons. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Stay in black, white and a few cool grays. - Set headlines bold and large. - Use pill buttons in black or white. - Let photography supply color. ### Don't - Don't add an accent color. - Don't use sharp corners on buttons. - Don't use light headline weights. ## Known Gaps - The ride flow, the map and the signed-in app were not measured, since they sit behind login. - The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions. - Icons, motion and exact breakpoints were not measured. - Account deletion and store policy rules were not verified. - Uber's Base design system was not read, so role names are not given.