Trena.
Planche de chantier sur papier millimétré : lignes de cote avec mesures, mètre ruban jaune en séparateur, tampon de planche et devis façon ordre de travail avec cases à cocher. Direct et fiable, de quartier.
- Type
- Landing page
- Thème
- Clair
- Titres
- Anybody
- Texte
- Hanken Grotesk
PourHabitants et petits commerces du secteur qui ont besoin d'une réparation, d'une installation ou de petits travaux, et qui contactent par WhatsApp
Sections de la page01/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).
Extrait du DESIGN.md, en portugais pour l'instant.
PourHabitants et petits commerces du secteur qui ont besoin d'une réparation, d'une installation ou de petits travaux, et qui contactent par WhatsApp
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Anybody pour les titres, Hanken Grotesk pour le texte.
TitresAnybody
Aag!
Trena en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteHanken Grotesk
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.
- professionnel indépendant ou petite équipe
- intervention par quartier/secteur
- devis après visite
- marque avec jaune, bleu ou gris
- qui veut transmettre organisation et garantie
- construction ou architecture haut de gamme
- garage/automobile
- beauté et bien-être
- marque de luxe
- tech/SaaS
Ton
Ce qui fait Trena
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Trena 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 Trena.