admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
21 KiB
21 KiB
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
| Função | Fonte | Tamanho | Peso | Altura de Linha | Notas |
|---|---|---|---|---|---|
| Display / Herói | UberMove | 52px (3.25rem) | 700 | 1.23 (compacto) | Impacto máximo, presença de outdoor |
| Título de Seção | UberMove | 36px (2.25rem) | 700 | 1.22 (compacto) | Âncoras de seções principais |
| Título de Cartão | UberMove | 32px (2rem) | 700 | 1.25 (compacto) | Títulos de cartão e recurso |
| Subtítulo | UberMove | 24px (1.5rem) | 700 | 1.33 | Cabeçalhos de seção secundária |
| Título Pequeno | UberMove | 20px (1.25rem) | 700 | 1.40 | Títulos compactos, títulos de lista |
| Nav / UI Grande | UberMoveText | 18px (1.13rem) | 500 | 1.33 | Links de navegação, texto de UI em destaque |
| Corpo / Botão | UberMoveText | 16px (1rem) | 400-500 | 1.25-1.50 | Texto de corpo padrão, rótulos de botão |
| Legenda | UberMoveText | 14px (0.88rem) | 400-500 | 1.14-1.43 | Metadados, descrições, links pequenos |
| Micro | UberMoveText | 12px (0.75rem) | 400 | 1.67 (relaxado) | Letras pequenas, texto legal |
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 0pxpara 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
| Nível | Tratamento | Uso |
|---|---|---|
| Plano (Nível 0) | Sem sombra, fundo sólido | Fundo da página, conteúdo inline, seções de texto |
| Sutil (Nível 1) | rgba(0,0,0,0.12) 0px 4px 16px |
Cartões de conteúdo padrão, blocos de recurso |
| Médio (Nível 2) | rgba(0,0,0,0.16) 0px 4px 16px |
Cartões elevados, elementos de sobreposição |
| Flutuante (Nível 3) | rgba(0,0,0,0.16) 0px 2px 8px + translateY(2px) |
Botões de ação flutuantes, controles de mapa |
| Pressionado (Nível 4) | rgba(0,0,0,0.08) inset (spread de 999px) |
Estados de botão ativos/pressionados |
| Anel de Foco | rgb(255,255,255) 0px 0px 0px 2px inset |
Indicadores de foco do teclado |
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
| Nome | Largura | Principais Mudanças |
|---|---|---|
| Mobile Pequeno | 320px | Layout mínimo, coluna única, inputs empilhados, tipografia compacta |
| Mobile | 600px | Mobile padrão, layout empilhado, nav hambúrguer |
| Tablet Pequeno | 768px | Grades de duas colunas começam, layouts de cartão expandidos |
| Tablet | 1119px | Layout de tablet completo, conteúdo de herói lado a lado |
| Desktop Pequeno | 1120px | Grade desktop ativada, pílulas de nav horizontais |
| Desktop | 1136px | Layout de desktop completo, largura máxima do contêiner, herói dividido |
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
- Concentre-se em UM componente por vez
- Referencie a paleta estrita de preto/branco — "use Uber Black (#000000)" e não "deixe escuro"
- Sempre especifique radius de 999px para botões e pílulas — isso é inegociável para a identidade Uber
- Descreva a família tipográfica explicitamente — "UberMove Bold para o título, UberMoveText Medium para o rótulo"
- Para sombras, use "sombra suave (rgba(0,0,0,0.12) 0px 4px 16px)" — nunca drop shadows pesadas
- Mantenha os layouts compactos e ricos em informação — a Uber é eficiente, não arejada
- As ilustrações devem ser quentes e humanas — descreva "pessoas estilizadas em tons quentes" e não formas abstratas
- Combine CTAs pretos com secundários brancos para layouts de ação dupla equilibrados