Torque.
Industrial y robusto: grafito asfalto, naranja de señalización y azul acero, placas de metal atornilladas, chapa damero y franja de peligro. Lenguaje de taller, con orden de trabajo y ficha técnica.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Big Shoulders
- Texto
- Barlow
ParaDueños de autos y motos, 25-60 años, que quieren un servicio honesto y un presupuesto claro
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaDueños de autos y motos, 25-60 años, que quieren un servicio honesto y un presupuesto claro
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Big Shoulders en los títulos, Barlow en el texto.
TítulosBig Shoulders
Aag!
Torque en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoBarlow
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- marca con naranja, grafito, gris o azul
- negocio de barrio con atención en mostrador
- foco en presupuestos por WhatsApp
- servicio con plazo y garantía
- belleza y estética personal
- público infantil
- marca delicada o en tonos pastel
- concesionaria que debe seguir el manual de marca de la automotriz
Tono
Lo que lo hace Torque
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Torque se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Torque.
