Design System Inspirado na Uber

Categoria: Mídia & Consumidor Plataforma de mobilidade. Preto e branco marcante, tipografia precisa, energia urbana.

1. Tema Visual & Atmosfera

A linguagem de design da Uber é uma aula magistral de minimalismo confiante — um universo em preto e branco onde cada pixel tem um propósito e nada decora sem justificar sua presença. Toda a experiência é construída sobre uma dualidade marcante: preto absoluto (#000000) e branco puro (#ffffff), com praticamente nenhum cinza intermediário diluindo a mensagem. Não é o minimalismo estéril de uma startup que ainda não terminou de se desenvolver — é a contenção deliberada de uma marca tão consolidada que pode se dar ao luxo de sussurrar.

A tipografia exclusiva UberMove é uma sans-serif geométrica proprietária com uma qualidade visivelmente quadrada e técnica. Títulos em UberMove Bold a 52px carregam o peso de um outdoor — autoritários, diretos, sem desculpas. A família complementar UberMoveText cuida do corpo de texto e botões com um caráter ligeiramente mais suave e legível no peso médio (500). Juntas, criam um sistema tipográfico que parece um mapa de transporte: claro, eficiente, construído para leitura rápida.

O que torna o design da Uber verdadeiramente distintivo é o uso de fotografias e ilustrações em tela cheia, combinadas com elementos interativos em forma de pílula (border-radius de 999px). Chips de navegação, botões de CTA e seletores de categoria compartilham essa forma em cápsula, criando uma linguagem de interface tátil e amigável ao polegar que é inconfundivelmente Uber. As ilustrações — cenas levemente estilizadas de motoristas, passageiros e paisagens urbanas — injetam humanidade no que poderia ser um sistema frio e monocromático. O site alterna entre seções de conteúdo brancas e um rodapé totalmente preto, com layouts baseados em cartões que usam sombras da mais suave possível (rgba(0,0,0,0.12-0.16)) para criar uma elevação sutil sem romper a estética flat.

Características Principais:

• Base em preto e branco puro, com praticamente nenhum cinza intermediário no cromo da interface
• UberMove (títulos) + UberMoveText (corpo/UI) — família proprietária de sans-serif geométrica
• Tudo em forma de pílula: botões, chips e itens de navegação usam border-radius de 999px
• Ilustrações quentes e humanas contrastando com a interface monocromática marcante
• Layout baseado em cartões com sombras ultra-suaves (opacidade 0.12-0.16)
• Grade de espaçamento de 8px com layouts compactos e ricos em informação
• Fotografia marcante integrada como fundo de herói em tela cheia
• Rodapé preto ancorando a página em um ambiente escuro e de alto contraste

2. Paleta de Cores & Funções

Primárias

• Uber Black (#000000): A cor de marca definidora — usada para botões primários, títulos, texto de navegação e o rodapé. Não é “quase preto” nem “preto suave”, mas o preto verdadeiro e intransigente.
• Pure White (#ffffff): A cor de superfície primária e texto inverso. Usada para fundos de página, superfícies de cartão e texto em elementos pretos.

Estados Interativos & de Botão

• Hover Gray (#e2e2e2): Estado de hover do botão branco — um cinza claro e limpo que fornece feedback claro sem calor visual.
• Hover Light (#f3f3f3): Hover sutil para botões brancos elevados — cinza quase imperceptível para feedback de interação delicado.
• Chip Gray (#efefef): Fundo para botões secundários/filtros e chips de navegação — cinza neutro e ultra-claro.

Texto & Conteúdo

• Body Gray (#4b4b4b): Texto secundário e links de rodapé — cinza intermediário neutro, sem viés quente ou frio.
• Muted Gray (#afafaf): Texto terciário, links de rodapé de menor ênfase e conteúdo de placeholder.

Bordas & Separação

• Border Black (#000000): Bordas finas de 1px para contenção estrutural — usadas com moderação em divisores e contêineres de formulário.

Sombras & Profundidade

• Shadow Light (rgba(0, 0, 0, 0.12)): Elevação padrão de cartão — elevação levíssima para cartões de conteúdo.
• Shadow Medium (rgba(0, 0, 0, 0.16)): Elevação ligeiramente mais forte para botões de ação flutuantes e sobreposições.
• Button Press (rgba(0, 0, 0, 0.08)): Sombra interna para estados ativos/pressionados em botões secundários.

Estados de Link

• Default Link Blue (#0000ee): Azul padrão do navegador para links de texto com sublinhado — usado em conteúdo do corpo.
• Link White (#ffffff): Links em superfícies escuras — usado no rodapé e seções escuras.
• Link Black (#000000): Links em superfícies claras com decoração de sublinhado.

Sistema de Gradiente

• O design da Uber é completamente livre de gradientes. A dualidade preto/branco e os blocos de cor sólida criam toda a hierarquia visual. Nenhum gradiente aparece em qualquer parte do sistema — toda superfície é uma cor sólida, toda transição é uma aresta dura ou uma sombra.

3. Regras Tipográficas

Família Tipográfica

• Título / Display: UberMove, com fallbacks: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
• Corpo / UI: UberMoveText, com fallbacks: system-ui, Helvetica Neue, Helvetica, Arial, sans-serif

Nota: UberMove e UberMoveText são tipografias proprietárias. Para implementações externas, use system-ui ou Inter como o substituto mais próximo disponível. O caráter geométrico e de proporções quadradas do UberMove pode ser aproximado com Inter ou DM Sans.

Hierarquia

Princípios

• Títulos em negrito, corpo médio: Os títulos em UberMove são exclusivamente peso 700 (bold) — cada título impacta com força de outdoor. O corpo e o texto de UI em UberMoveText usam 400-500, criando uma hierarquia visual clara por contraste de peso.
• Altura de linha compacta nos títulos: Todos os títulos usam alturas de linha entre 1.22-1.40 — compactos e incisivos, projetados para leitura rápida em vez de leitura corrida.
• Tipografia funcional: Não existe nenhum tratamento tipográfico decorativo. Sem espaçamento entre letras, sem text-transform, sem dimensionamento ornamental. Cada elemento de texto serve a um propósito de comunicação direto.
• Duas fontes, funções rígidas: UberMove é exclusivamente para títulos. UberMoveText é exclusivamente para corpo, botões, links e UI. A fronteira nunca é cruzada.

4. Estilos de Componentes

Botões

Primário Preto (CTA)

• Fundo: Uber Black (#000000)
• Texto: Pure White (#ffffff)
• Padding: 10px 12px
• Radius: 999px (pílula completa)
• Outline: nenhum
• Foco: anel interno rgb(255,255,255) 0px 0px 0px 2px
• O botão de ação primária — marcante, alto contraste, inconfundível

Secundário Branco

• Fundo: Pure White (#ffffff)
• Texto: Uber Black (#000000)
• Padding: 10px 12px
• Radius: 999px (pílula completa)
• Hover: fundo muda para Hover Gray (#e2e2e2)
• Foco: fundo muda para Hover Gray, anel interno aparece
• Usado em superfícies escuras ou como ação secundária ao lado do Primário Preto

Chip / Filtro

• Fundo: Chip Gray (#efefef)
• Texto: Uber Black (#000000)
• Padding: 14px 16px
• Radius: 999px (pílula completa)
• Ativo: sombra interna rgba(0,0,0,0.08)
• Chips de navegação, seletores de categoria, alternadores de filtro

Ação Flutuante

• Fundo: Pure White (#ffffff)
• Texto: Uber Black (#000000)
• Padding: 14px
• Radius: 999px (pílula completa)
• Sombra: rgba(0,0,0,0.16) 0px 2px 8px 0px
• Transform: translateY(2px) leve deslocamento
• Hover: fundo muda para #f3f3f3
• Controles de mapa, voltar ao topo, CTAs flutuantes

Cartões & Contêineres

• Fundo: Pure White (#ffffff) em páginas brancas; sem diferenciação distinta de fundo de cartão
• Borda: nenhuma por padrão — os cartões são definidos por sombra, não por contorno
• Radius: 8px para cartões de conteúdo padrão; 12px para cartões em destaque/promovidos
• Sombra: rgba(0,0,0,0.12) 0px 4px 16px 0px para elevação padrão
• Os cartões são ricos em conteúdo com padding interno mínimo
• Cartões com imagem em destaque usam imagens em tela cheia com sobreposição ou texto abaixo

Inputs & Formulários

• Texto: Uber Black (#000000)
• Fundo: Pure White (#ffffff)
• Borda: 1px solid Black (#000000) — o único lugar onde bordas visíveis aparecem com destaque
• Radius: 8px
• Padding: espaçamento confortável padrão
• Foco: sem estado de foco personalizado extraído — depende do anel de foco padrão do navegador

Navegação

• Navegação superior fixa com fundo branco
• Logo: wordmark/ícone Uber a 24x24px em preto
• Links: UberMoveText a 14-18px, peso 500, em Uber Black
• Chips de navegação em forma de pílula com fundo Chip Gray (#efefef) para navegação por categoria (“Ride”, “Drive”, “Business”, “Uber Eats”)
• Alternador de menu: botão circular com border-radius de 50%
• Mobile: padrão de menu hambúrguer

Tratamento de Imagens

• Cenas ilustradas à mão, quentes (não fotografias para seções de recurso)
• Estilo de ilustração: pessoas levemente estilizadas, paleta de cores quente nas ilustrações, vibe contemporânea
• Seções de herói usam fotografia ou ilustração marcante como fundos de largura total
• QR codes para CTAs de download do app
• Todas as imagens usam border-radius padrão de 8px ou 12px quando contidas em cartões

Componentes Distintivos

Navegação por Pílulas de Categoria

• Linha horizontal de botões em forma de pílula para navegação de nível superior (“Ride”, “Drive”, “Business”, “Uber Eats”, “About”)
• Cada pílula: fundo Chip Gray, texto preto, radius de 999px
• Estado ativo indicado por fundo preto com texto branco (inversão)

Herói com Ação Dupla

• Herói dividido: texto/CTA à esquerda, mapa/ilustração à direita
• Dois campos de input lado a lado para origem/destino
• Botão CTA “See prices” em pílula preta

Cartões de Planejamento Antecipado

• Cartões que promovem recursos como “Uber Reserve” e planejamento de viagem
• Rico em ilustrações com imagens quentes e centradas no humano
• Botões CTA pretos com texto branco na parte inferior

5. Princípios de Layout

Sistema de Espaçamento

• Unidade base: 8px
• Escala: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px
• Padding de botão: 10px 12px (compacto) ou 14px 16px (confortável)
• Padding interno de cartão: aproximadamente 24-32px
• Espaçamento vertical entre seções: generoso mas eficiente — aproximadamente 64-96px entre seções principais

Grade & Contêiner

• Largura máxima do contêiner: aproximadamente 1136px, centralizado
• Herói: layout dividido com texto à esquerda, visual à direita
• Seções de recurso: grades de cartão de 2 colunas ou coluna única em largura total
• Rodapé: grade de links em múltiplas colunas sobre fundo preto
• Seções de largura total se estendendo até as bordas da viewport

Filosofia de Espaço em Branco

• Eficiente, não arejado: O espaço em branco da Uber é funcional — o suficiente para separar, nunca o suficiente para parecer vazio. É o espaçamento de um sistema de transporte: compacto, claro, orientado por propósito.
• Cartões ricos em conteúdo: Os cartões empacotam informações de forma densa com espaçamento interno mínimo, dependendo de sombra e radius para definir limites.
• Respiro entre seções: As seções principais recebem espaçamento vertical generoso, mas dentro das seções os elementos são agrupados de perto.

Escala de Border Radius

• Reto (0px): Nenhum canto quadrado usado em elementos interativos
• Padrão (8px): Cartões de conteúdo, campos de input, caixas de listagem
• Confortável (12px): Cartões em destaque, contêineres maiores, cartões de link
• Pílula Completa (999px): Todos os botões, chips, itens de navegação, pílulas
• Círculo (50%): Imagens de avatar, contêineres de ícone, controles circulares

6. Profundidade & Elevação

Filosofia de Sombra: A Uber usa sombra puramente como ferramenta estrutural, nunca de forma decorativa. As sombras são sempre pretas em opacidade muito baixa (0.08-0.16), criando a elevação mínima necessária para separar camadas de conteúdo. Os raios de desfoque são moderados (8-16px) — suficientes para parecer natural, mas nunca dramáticos. Não há sombras coloridas, pilhas de sombras em camadas nem efeitos de brilho ambiente. A profundidade é comunicada mais pelo contraste de seções preto/branco do que pela elevação de sombra.

7. O Que Fazer e O Que Não Fazer

Fazer

• Usar preto verdadeiro (#000000) e branco puro (#ffffff) como paleta primária — o contraste marcante É a Uber
• Usar border-radius de 999px para todos os botões, chips e elementos de navegação em forma de pílula
• Manter todos os títulos em UberMove Bold (700) para impacto de nível outdoor
• Usar sombras ultra-suaves (opacidade 0.12-0.16) para elevação de cartão — quase imperceptíveis
• Manter o estilo de layout compacto e rico em informação — a Uber prioriza eficiência em vez de leveza
• Usar ilustrações quentes e centradas no humano para suavizar a interface monocromática
• Aplicar radius de 8px para cartões de conteúdo e 12px para contêineres em destaque
• Usar UberMoveText no peso 500 para navegação e texto de UI em destaque
• Combinar botões primários pretos com botões secundários brancos para layouts de ação dupla

Não Fazer

• Não introduzir cor no cromo da interface — a interface da Uber é estritamente preto, branco e cinza
• Não usar cantos arredondados com menos de 999px nos botões — a forma em pílula completa é um elemento central de identidade
• Não aplicar sombras pesadas ou drop shadows com alta opacidade — a profundidade é sussurrada de forma sutil
• Não usar fontes serifadas em nenhum lugar — a tipografia da Uber é exclusivamente sans-serif geométrica
• Não criar layouts arejados e espaçosos com espaço em branco excessivo — a densidade da Uber é intencional
• Não usar gradientes ou sobreposições de cor — toda superfície é uma cor sólida e plana
• Não misturar UberMove em texto de corpo nem UberMoveText em títulos — a hierarquia é rígida
• Não usar bordas decorativas — bordas são funcionais (inputs, divisores) ou ausentes
• Não suavizar o contraste preto/branco com brancos-sujos ou pretos-quase-pretos — a dualidade é deliberada

8. Comportamento Responsivo

Breakpoints

Alvos de Toque

• Todos os botões em pílula: altura mínima de 44px (padding vertical de 10-14px + altura de linha)
• Chips de navegação: padding generoso de 14px 16px para toque confortável com o polegar
• Controles circulares (menu, fechar): radius de 50% garante alvos grandes e fáceis de acertar
• As superfícies dos cartões servem como alvos de toque de área total no mobile

Estratégia de Colapso

• Navegação: Nav em pílulas horizontal colapsa para menu hambúrguer com alternador circular
• Herói: Layout dividido (texto + mapa/visual) empilha em coluna única — texto acima, visual abaixo
• Campos de input: Inputs de origem/destino lado a lado empilham verticalmente
• Cartões de recurso: Grade de 2 colunas colapsa para cartões empilhados em largura total
• Títulos: Display de 52px reduz através de 36px, 32px, 24px, 20px
• Rodapé: Grade de links em múltiplas colunas colapsa para acordeão ou coluna única empilhada
• Pílulas de categoria: Rolagem horizontal com overflow em telas menores

Comportamento de Imagens

• As ilustrações escalam proporcionalmente dentro de seus contêineres
• A imagem do herói mantém a proporção, podendo ser cortada em telas menores
• Seções de QR code ficam ocultas no mobile (download do app muda para links diretos da loja)
• As imagens dos cartões mantêm border-radius de 8-12px em todos os tamanhos

9. Guia de Prompt para Agentes

Referência Rápida de Cores

• Botão Primário: “Uber Black (#000000)”
• Fundo da Página: “Pure White (#ffffff)”
• Texto do Botão (sobre preto): “Pure White (#ffffff)”
• Texto do Botão (sobre branco): “Uber Black (#000000)”
• Texto Secundário: “Body Gray (#4b4b4b)”
• Texto Terciário: “Muted Gray (#afafaf)”
• Fundo do Chip: “Chip Gray (#efefef)”
• Estado de Hover: “Hover Gray (#e2e2e2)”
• Sombra do Cartão: “rgba(0,0,0,0.12) 0px 4px 16px”
• Fundo do Rodapé: “Uber Black (#000000)“

Exemplos de Prompts de Componente

• “Crie uma seção de herói sobre Pure White (#ffffff) com um título a 52px UberMove Bold (700), line-height 1.23. Use texto Uber Black (#000000). Adicione um subtítulo em Body Gray (#4b4b4b) a 16px UberMoveText peso 400 com line-height 1.50. Posicione um botão CTA em pílula Uber Black (#000000) com texto Pure White, radius de 999px, padding 10px 12px.”
• “Crie uma barra de navegação por categorias com botões horizontais em forma de pílula. Cada pílula: fundo Chip Gray (#efefef), texto Uber Black (#000000), padding 14px 16px, border-radius 999px. A pílula ativa inverte para fundo Uber Black com texto Pure White. Use UberMoveText a 14px peso 500.”
• “Construa um cartão de recurso sobre Pure White (#ffffff) com border-radius de 8px e sombra rgba(0,0,0,0.12) 0px 4px 16px. Título em UberMove a 24px peso 700, descrição em Body Gray (#4b4b4b) a 16px UberMoveText. Adicione um botão CTA em pílula preta na parte inferior.”
• “Crie um rodapé escuro sobre Uber Black (#000000) com texto de título Pure White (#ffffff) em UberMove a 20px peso 700. Links do rodapé em Muted Gray (#afafaf) a 14px UberMoveText. Links mudam para Pure White no hover. Layout em grade de múltiplas colunas.”
• “Crie um botão de ação flutuante com fundo Pure White (#ffffff), radius de 999px, padding de 14px e sombra rgba(0,0,0,0.16) 0px 2px 8px. Hover muda o fundo para #f3f3f3. Use para voltar ao topo ou controles de mapa.”

Guia de Iteração

1. Concentre-se em UM componente por vez
2. Referencie a paleta estrita de preto/branco — “use Uber Black (#000000)” e não “deixe escuro”
3. Sempre especifique radius de 999px para botões e pílulas — isso é inegociável para a identidade Uber
4. Descreva a família tipográfica explicitamente — “UberMove Bold para o título, UberMoveText Medium para o rótulo”
5. Para sombras, use “sombra suave (rgba(0,0,0,0.12) 0px 4px 16px)” — nunca drop shadows pesadas
6. Mantenha os layouts compactos e ricos em informação — a Uber é eficiente, não arejada
7. As ilustrações devem ser quentes e humanas — descreva “pessoas estilizadas em tons quentes” e não formas abstratas
8. Combine CTAs pretos com secundários brancos para layouts de ação dupla equilibrados