Trena.
Prancheta de obra em papel milimetrado: linhas de cota com medidas, fita de trena amarela como divisor, carimbo de prancha e orçamento como ordem de serviço com checkboxes. Direto e confiável, de bairro.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Anybody
- Texto
- Hanken Grotesk
ParaMoradores e pequenos comércios da região que precisam de conserto, instalação ou reforma pequena, chamando pelo WhatsApp
Seções da página01/09Topo e navegação
Prancheta de obra: papel milimetrado branco-azulado, tinta grafite, fita de trena amarela e caneta técnica azul. Parece a folha que o profissional preenche na sua casa, não site de construtora (isso é o Planta) nem oficina escura (isso é o Torque).
ParaMoradores e pequenos comércios da região que precisam de conserto, instalação ou reforma pequena, chamando pelo WhatsApp
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Anybody nos títulos, Hanken Grotesk no texto.
TítulosAnybody
Aag!
Trena em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoHanken Grotesk
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.
- profissional autônomo ou equipe pequena
- atendimento por bairro/região
- orçamento com visita
- marca com amarelo, azul ou cinza
- quem quer passar organização e garantia
- construtora ou arquitetura de alto padrão
- oficina/automotivo
- beleza e bem-estar
- marca de luxo
- tech/SaaS
Tom
O que faz ser Trena
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Linha de cota (
<Cota medida="1,20 m" />) com setas e linha de chamada, em azul, marcando títulos e blocos. Vertical comvertical. - 02
Fita de trena (
<Trena />) como divisor de seção: amarela, milímetros, centímetros, número a cada 80px e o 5º em vermelho; puxa de lado ao rolar. - 03
Carimbo de prancha (
<Carimbo folha="02" />): OBRA · FOLHA 02/05 · ESCALA 1:50 · RESP. Cabeçalho de seção mostra "Folha 0X/05". - 04
Ícones em traço técnico próprios (SVG 48px, com círculo-guia tracejado) que se redesenham no hover.
- 05
Ordem de serviço com checkboxes que ticam a caneta azul (
.trena-check) e linhas de assinatura. - 06
Pedido de orçamento como folha presa na prancheta: levemente torta, fita adesiva, cruzinhas de registro nos cantos.
- 07
Botões com sombra dura deslocada (grafite) e dúvidas como notas numeradas (balão + linha de chamada).
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo
#eef3f8com grade milimetrada azul (8px fraca, 40px um pouco mais forte), no própriotokens.css. Superfícies#fbfdff; faixa alternada emsurface-2#e2eaf3. - Tinta grafite
#23272eem texto, bordas de 1.5px e sombras duras. Nada de preto puro. - Primária amarelo-trena
#f5c518, sempre com texto escuro (primary-fg#1d2127). Nunca texto branco no amarelo. - Destaque azul-caneta
#1f4fd1: cotas, rótulos, checks, marcas de registro. Não usar como fundo grande. - Fontes: Anybody (display, eixo
wdth50–150) e Hanken Grotesk (texto). - Títulos:.trena-estreita(wdth 55), caixa alta,font-black. - Números e medidas:.trena-larga(wdth 150). Rótulos técnicos:.trena-rotulo(wdth 130, caixa alta, pequeno). - O contraste estreito × largo é a assinatura tipográfica (ver a chamada final).
Regras
- Bordas retas (
--d-radius3px). Nada de pílula, nada de sombra difusa colorida. - Toda seção abaixo da dobra: título com
data-revela, cartões comdata-revela. Hero comdata-sobe. - Medidas das cotas são decoração: valores redondos e plausíveis ("0,60 m", "1,20 m"). Nunca parecer dado do cliente.
- Máximo 2 fitas de trena no meio da página + a da chamada final. Mais que isso vira ruído.
- Um CTA principal (WhatsApp) repetido: nav, hero, pedido, chamada final.
Adaptar à marca do cliente
- Marca amarela/laranja: troque
--d-primary(mantenha texto escuro por cima e ajuste o gradiente de.trena-fita). - Marca azul: troque
--d-accente--trena-gradejuntos (a grade segue o azul). - Marca vermelha ou verde: use como
--d-accent; o amarelo da trena fica, é a assinatura. - Logo do cliente entra no lugar do SVG da trena no header e do nome no
Carimbo. - Cliente de alto padrão ou que não atende em casa: esse design provavelmente não é o certo.
Dois arquivos.
Um prompt.
O Trena 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 Trena.