Torque.
Industrial and rugged: asphalt graphite, safety orange and steel blue, bolted metal plates, diamond plate and a hazard-striped band. Workshop language, with a work order and spec sheet.
- Type
- Landing page
- Theme
- Dark
- Headings
- Big Shoulders
- Body
- Barlow
ForCar and motorcycle owners, 25-60, who want honest service and a clear quote
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForCar and motorcycle owners, 25-60, who want honest service and a clear quote
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Big Shoulders for headings, Barlow for body text.
HeadingsBig Shoulders
Aag!
Torque in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyBarlow
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- brand with orange, graphite, gray or blue
- neighborhood business with counter service
- focus on quotes via WhatsApp
- service with turnaround time and warranty
- beauty and personal care
- children's audience
- delicate or pastel brand
- dealership that must follow the manufacturer's brand manual
Tone
What makes it Torque
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Torque becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Torque.
