Uber

Uber, monochromatic, monochrome

Preview image. Unlock full-res

Crisp monochrome canvas

Industryother, transport
Palette
#000000
#ffffff
#f6f6f6
#333333
#767676
#afafaf
#d6d6d6
#9dcdd6

Uber's design system feels like a precise, functional transport UI on an expansive, crisp canvas. It prioritizes direct interaction and clear information with high contrast black-on-white text. Distinctive elements include capsule-shaped interactive components and subtle, almost invisible, input fields, focusing user attention on action over aesthetics. The only chromatic color, a muted blue-green, appears sparingly, adding a touch of sophisticated calm to an otherwise stark, monochromatic palette. Prioritize Midnight Ink (#000000) for primary CTAs and critical text, ensuring high contrast against Canvas White (#ffffff) or Whisper Gray (#f6f6f6) backgrounds. Apply 999px border-radius to all small, compact interactive elements for a distinct capsule aesthetic, like navigation buttons. Use 8px border-radius for larger action buttons and cards to create a softer, yet still defined, rectangular shape. Employ UberMove (custom font) for all headlines and major calls to action, utilizing its 400 and 700 weights to establish hierarchy. Maintain a clear visual hierarchy with Midnight Ink for headings, Charcoal Text (#333333) for body text, and Subtle Silver (#afafaf) for secondary descriptive text. Use Lagoon Mist (#9dcdd6) as the sole chromatic accent, reserving it for decorative elements or subtle background effects to maintain monochromatic dominance. Place input fields on Canvas White backgrounds with minimal styling, relying on a subtle Input Border Gray (#767676) bottom border to indicate interactive areas. Do not introduce additional saturated colors; maintain the monochromatic base with Lagoon Mist (#9dcdd6) as the only accent. Avoid excessive use of box shadows; stick to the subtle Slate Shadow (#d6d6d6) only when slight elevation is necessary for buttons. Do not use generic system fonts for headlines or core UI elements; leverage the custom UberMove and UberMoveText families to preserve brand identity. Avoid complex gradients or patterns; surfaces should remain flat and clean, with a clear distinction between background colors. Do not add strong borders to primary input fields; preserve the minimal, almost borderless aesthetic with only a bottom bar. Refrain from drastically altering button padding; stick to the established 14px vertical 25px horizontal for standard buttons and 10px vertical 12px horizontal for capsule buttons. Do not use letter spacing adjustments; all text should maintain normal letter spacing for a clean and uncluttered appearance.

More like this