RaceOS — Design Language do Reparou

The Operating System for High Performance Workshops. A maioria dos sistemas para oficina parou em 2008: telas cinzas, grids infinitos, formulários burocráticos. A oportunidade não é fazer "um ERP bonito" — é fazer o dono sentir que opera uma equipe profissional de automobilismo. RaceOS é o nome da linguagem de design/design system; o produto segue sendo Reparou.

O sentimento-alvo

O usuário precisa sentir:

"Estou operando uma oficina de alta performance."

e não:

"Estou usando um ERP."

Essa sensação não nasce das telas — nasce de toda a linguagem do produto: nomenclatura, indicadores, animações, cores, fluxos, IA e experiência operacional. É isso que transforma um ERP comum em uma marca memorável (e é difícil de copiar).

Inspiração (e dosagem)

É: cockpit de Fórmula 1, centro de controle de equipe de corrida, telemetria automotiva, garage da Porsche Motorsport / Mercedes AMG Petronas / Aston Martin F1, Tesla nos detalhes minimalistas, Need for Speed apenas nos detalhes emocionais.

Não é: videogame. Influência de jogos limitada a ~10%.

Referências visuais: Tesla UI, Porsche Digital Experience, Apple HIG, F1 TV Telemetry, Mercedes AMG Petronas Garage, Linear, Notion, Stripe Dashboard, Vercel Dashboard.

O conceito

Tema e cores

Dark first — não porque é bonito, mas porque remete a fibra de carbono, cockpit, painel digital, motorsport.

Decisão pendente: o accent. Recomendação: laranja McLaren — vermelho conflita com o estado "crítico" e verde conflita com "concluído"; laranja fica livre de ambiguidade semântica.

Elementos visuais

• Cards = módulos de telemetria: bordas suaves, leve glow, micro profundidade.
• Barras de progresso inspiradas em pit stop: OS 74% concluída ▰▰▰▰▰▰▱▱▱
• Indicadores falam performance, não contagem: não "5 serviços em andamento", mas "🏎️ Oficina operando a 82% da capacidade".
• Tipografia: sans moderna (Inter/Geist) para UI + mono tabular para números de telemetria (tempos, valores, percentuais) — números alinhados são o que faz parecer painel de corrida.

Dashboard principal — "Central de Operações"

Ao abrir o sistema: não mostrar menu, mostrar a missão do dia.

CENTRAL DE OPERAÇÕES                      hoje

32 carros na oficina
26 em execução · 4 aguardando peças · 2 prontos p/ entrega

Receita do dia        Eficiência da equipe    Capacidade
R$ 18.420  ▲ 12%      91%                     84%

Tudo parece um painel de corrida. (No blueprint, este é o módulo 50 — Central de Comando; o design language coloca a telemetria diária completa já na F1/F2, e o IA Copilot chega na F3.)

Boxes como pit stops

Nunca tabela — grid visual, semelhante ao gerenciamento de boxes num jogo de F1:

┌─ BOX 01 ──────────┐ ┌─ BOX 02 ──────────┐ ┌─ BOX 03 ─┐
│ BMW X1            │ │ Corolla           │ │          │
│ Mecânico: João    │ │ ⚠ Aguardando      │ │  LIVRE   │
│ ⏱ restam 01:42    │ │   peças           │ │          │
└───────────────────┘ └───────────────────┘ └──────────┘

Timeline da OS — progresso de corrida

Recepção ✔ → Diagnóstico ✔ → Orçamento ✔ → Aprovação ✔ → Execução 72% → Entrega ⏳

Gestão dos mecânicos — gamificação interna

Diferencial enorme. Nunca visível para clientes.

• Níveis: Júnior → Pleno → Sênior → Master → Especialista
• Indicadores: produtividade, retrabalho, tempo médio, avaliações
• Conquistas: "100 revisões concluídas", "500 serviços realizados", "30 dias sem retrabalho"

IA como Engenheiro de Pista

Não chamar de "IA". Chamar Chief Engineer (ou Race Engineer):

Chief Engineer Hoje existem 4 veículos com risco de atraso. O Box 03 está operando acima da capacidade. Sugiro realocar João para a OS #4821.

Exatamente como um engenheiro de corrida: contexto → diagnóstico → recomendação acionável. (É a cara do IA Copilot do módulo 50.)

Portal do Cliente

Aqui muda tudo. O cliente não vê uma OS — vê o carro dele, como rastrear uma encomenda premium:

Meu Audi Q3
Status: Em preparação
Tempo estimado: 2h 14min
[Fotos recentes] [Vídeos] [Checklist] [Orçamento]

Sons e microinterações

Com extremo cuidado:

• OS concluída → som extremamente discreto
• Veículo muda de etapa → micro animação
• Meta atingida → pequena celebração visual

Nada infantil. Nada parecido com cassino.

O que evitar

❌ Neon exagerado · ❌ Cyberpunk · ❌ RGB gamer · ❌ Interface adolescente · ❌ Efeitos excessivos · ❌ Need for Speed Underground 2004

Princípios de aplicação (tensões resolvidas conscientemente)

1. Clareza antes de motorsport. A metáfora nunca pode custar compreensão. O ICP da fase 1 é o dono de oficina pequena, não um designer: cada tela precisa funcionar mesmo se o usuário ignorar toda a linguagem de corrida.
2. Vocabulário do setor permanece. "OS", "orçamento", "NF" são termos que o mecânico e o contador usam — a camada motorsport é tom e apresentação, não renomeação do domínio. (Chief Engineer é a exceção deliberada.)
3. Legibilidade no pátio. Dark-first vale para o cockpit (dono/consultor em ambiente interno). O app da oficina no papel de mecânico (módulo 47) roda no pátio sob sol — exige modo de alto contraste/claro. Tokens de tema devem suportar ambos desde o início.
4. Estados acessíveis. Verde/amarelo/vermelho nunca como único canal — sempre acompanhados de ícone/texto (daltonismo, ~8% dos homens).
5. Gamificação é ferramenta de gestão, não circo. Conquistas e níveis dos mecânicos servem ao dono (retenção de talento, meritocracia visível) e jamais vazam para o portal do cliente.

Implementação (dia 1)

• Design tokens (cores, espaçamento, raios, sombras/glow, tipografia) como fonte única — tema dark e light derivados dos mesmos tokens.
• Stack sugerida: Tailwind + Radix/shadcn como base estrutural, com a camada visual RaceOS por cima (glow sutil, mono tabular, cards de telemetria como componentes próprios: TelemetryCard, PitProgressBar, BoxGrid, RaceTimeline).
• Microinterações via Framer Motion; sons como opt-in (oficina é ambiente barulhento — som é detalhe, não canal de informação).
• Glossário de nomenclatura RaceOS mantido neste documento conforme o produto evoluir (Central de Operações, Chief Engineer, Boxes, …).