Trena.
A job-site clipboard on graph paper: dimension lines with measurements, a yellow tape-measure strip as divider, a drawing-sheet stamp and the quote as a work order with checkboxes. Straightforward and trustworthy, neighborhood style.
- Type
- Landing page
- Theme
- Light
- Headings
- Anybody
- Body
- Hanken Grotesk
ForResidents and small local businesses needing a repair, installation or small renovation, who call via WhatsApp
Page sections01/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).
From DESIGN.md, which is in Portuguese for now.
ForResidents and small local businesses needing a repair, installation or small renovation, who call via WhatsApp
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Anybody for headings, Hanken Grotesk for body text.
HeadingsAnybody
Aag!
Trena in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyHanken Grotesk
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.
- independent professional or small team
- service by neighborhood/region
- quote after a site visit
- brand with yellow, blue or gray
- anyone who wants to convey organization and warranty
- high-end construction or architecture
- auto repair/automotive
- beauty and wellness
- luxury brand
- tech/SaaS
Tone
What makes it Trena
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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).
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Trena 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 Trena.