Torque.
Industrial e robusto: grafite-asfalto, laranja de sinalização e azul-aço, placas de metal parafusadas, chapa xadrez e faixa zebrada. Linguagem de oficina, com ordem de serviço e ficha técnica.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Big Shoulders
- Texto
- Barlow
ParaDonos de carro e moto, 25-60, que querem serviço honesto e orçamento claro
Seções da página01/10Topo e navegação
Industrial e robusto: grafite-asfalto, laranja de sinalização e azul-aço. Placa de metal, chapa xadrez, faixa zebrada e ficha técnica. Parece a parede de uma oficina organizada, não um cartaz de promoção.
ParaDonos de carro e moto, 25-60, que querem serviço honesto e orçamento claro
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Big Shoulders nos títulos, Barlow no texto.
TítulosBig Shoulders
Aag!
Torque em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoBarlow
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- marca com laranja, grafite, cinza ou azul
- negócio de bairro com atendimento no balcão
- foco em orçamento pelo WhatsApp
- serviço com prazo e garantia
- beleza e estética pessoal
- público infantil
- marca delicada ou em tons pastel
- concessionária que precisa seguir o manual de marca da montadora
Tom
O que faz ser Torque
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Placa de metal (
.torque-placa) com 4 parafusos nos cantos, feitos só comradial-gradient. Deixept-9para o conteúdo não encostar nos parafusos de cima. - 02
Chapa xadrez (
.torque-chapa): textura de gomos sutil, só no painel do hero, no checklist e na chamada final. - 03
Faixa zebrada laranja/grafite (
.torque-zebra, 10px) como divisória;.torque-zebra-finaao lado dos rótulos. - 04
Hero com carro de perfil em SVG (traço técnico, cota "entre-eixos"), elevador embaixo, linha de varredura laranja e uma ordem de serviço em papel sobreposta, com carimbo azul "aprovado pelo cliente".
- 05
Serviços em ficha técnica: código
SRV-0n, nome, texto e tabela com tempo médio e garantia. - 06
Checklist de revisão com checkboxes quadradas que o visitante pode marcar; o total de itens é contado da lista.
- 07
Orçamento rápido com campo de placa no formato Mercosul (faixa azul "BRASIL") e envio pelo WhatsApp.
- 08
Horário e mapa: tabela de horários numa placa + mapa ilustrado com pino laranja.
- 09
Botões primários com canto chanfrado (
.torque-btn), nunca pílula.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo grafite-asfalto
#16181b. Superfícies#1d2024e#25292e. Barras de topo e rodapé em#0f1113. - Texto branco-gelo
#eef1f4; secundário#9aa3ad. Nada de branco puro em bloco grande. - Primária laranja de sinalização
#ff6a13: botões, palavra de destaque, zebra, códigos (SRV-01). - Destaque azul-aço
#5b7fa6: rótulos da ficha técnica, vidros e cotas do desenho, carimbo, botão de rota. - Fontes: Big Shoulders 800/900 em caixa-alta para títulos (
.torque-titulo); Big Shoulders Stencil para rótulos e números (.torque-rotulo,font-mono); Barlow para texto. - Não confundir com o Choque (preto/amarelo/rosa, cartaz): aqui não tem rosa, não tem amarelo, não tem texto torto nem sticker. É metal, placa e ficha.
Regras
- Cantos quase retos (
--d-radius: 3px). Nada arredondado demais. - Laranja é sinal: no máximo um bloco laranja cheio por tela (o botão). O resto é detalhe.
- Títulos curtos e diretos, em caixa-alta. Texto corrido em Barlow, sem caixa-alta.
- Animação: entrada (
data-sobe),data-revelaao rolar, varredura do diagnóstico e o ponto piscando. Tudo para comprefers-reduced-motion. - Ícones lucide em laranja ou azul-aço,
size-4/size-5.
Adaptar à marca do cliente
- Marca com cor própria: troque
--d-primarye as cores da.torque-zebra/.torque-zebra-finae do::selectionnotokens.css. Mantenha o fundo grafite e o azul-aço. - Cores que funcionam no lugar do laranja: amarelo-ouro, vermelho de freio, verde-limão. Rosa e pastel não.
- Nichos: funilaria/pintura e estética automotiva podem trocar o checklist por "etapas do polimento"; moto peças troca o carro do hero por uma moto de perfil no mesmo traço; guincho troca o formulário por "onde você está" + botão de ligar.
- A placa Mercosul é só visual; na integração, montar a mensagem do WhatsApp com os campos do formulário.
Dois arquivos.
Um prompt.
O Torque vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Torque.