Torque.
Industriel et robuste : graphite bitume, orange de signalisation et bleu acier, plaques de métal vissées, tôle larmée et bande de chantier. Langage d'atelier, avec ordre de réparation et fiche technique.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Big Shoulders
- Texte
- Barlow
PourPropriétaires de voitures et de motos, 25-60 ans, qui veulent un service honnête et un devis clair
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourPropriétaires de voitures et de motos, 25-60 ans, qui veulent un service honnête et un devis clair
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Big Shoulders pour les titres, Barlow pour le texte.
TitresBig Shoulders
Aag!
Torque en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteBarlow
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- marque avec orange, graphite, gris ou bleu
- commerce de quartier avec accueil au comptoir
- accent sur les devis par WhatsApp
- service avec délai et garantie
- beauté et soins personnels
- public enfant
- marque délicate ou aux tons pastel
- concession qui doit suivre la charte graphique du constructeur
Ton
Ce qui fait Torque
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Torque devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Torque.