Trena.
Tablero de obra en papel milimetrado: líneas de cota con medidas, cinta métrica amarilla como divisor, sello de plano y presupuesto como orden de trabajo con casillas. Directo y confiable, de barrio.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Anybody
- Texto
- Hanken Grotesk
ParaVecinos y pequeños comercios de la zona que necesitan una reparación, instalación o reforma chica, y escriben por WhatsApp
Secciones de la 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).
Del DESIGN.md, que por ahora está en portugués.
ParaVecinos y pequeños comercios de la zona que necesitan una reparación, instalación o reforma chica, y escriben por WhatsApp
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Anybody en los títulos, Hanken Grotesk en el texto.
TítulosAnybody
Aag!
Trena en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoHanken Grotesk
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.
- profesional autónomo o equipo pequeño
- atención por barrio o zona
- presupuesto con visita
- marca con amarillo, azul o gris
- quien quiere transmitir orden y garantía
- constructora o arquitectura de alto nivel
- taller mecánico o automotor
- belleza y bienestar
- marca de lujo
- tech/SaaS
Tono
Lo que lo hace Trena
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Trena 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 Trena.
