Concreto.
Planche technique sur béton brut : plans, coupes et élévations en SVG à la place des photos, index des réalisations en tableau et pied de page en tampon. Gris béton, encre de Chine et un seul rouge oxyde.
- Type
- Landing page
- Thème
- Clair
- Titres
- Archivo
- Texte
- Inter Tight
PourParticuliers et familles sur le point de construire ou rénover, et petits promoteurs ; ils lisent les plans et valorisent la méthode
Sections de la page01/09nav em faixa de prancha
Portfólio de escritório de arquitetura montado como prancha técnica: moldura de nanquim, desenho de traço fino no lugar das fotos e concreto aparente só em dois blocos. Rigoroso, assimétrico e seco.
Extrait du DESIGN.md, en portugais pour l'instant.
PourParticuliers et familles sur le point de construire ou rénover, et petits promoteurs ; ils lisent les plans et valorisent la méthode
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Archivo pour les titres, Inter Tight pour le texte.
TitresArchivo
Aag!
Concreto en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInter Tight
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.
- portfolio de réalisations avec dessins techniques
- petit cabinet dont les associés signent le projet
- marque sobre en gris, noir et une couleur terre
- profession inscrite à un ordre (CAU, CREA)
- commerce de détail et promotions
- marque colorée ou ludique
- public enfant
- activité sans chantier ni projet à montrer
Ton
Ce qui fait Concreto
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Moldura de prancha: a página inteira fica entre dois fios verticais; cada seção fecha com fio horizontal. Títulos de seção levam a chamada de detalhe (círculo com número e folha,
A-02). - 02
Desenhos técnicos em SVG (
desenhos.tsx):Planta(variantesa/b),CorteeElevacao(parâmetropav). Paredes cortadas grossas, janelas em três linhas, portas com arco, escada com "SOBE", cotas com tique a 45° calculadas das coordenadas (25 un = 1 m), norte, escala gráfica, níveis (+3,00), figura humana e árvore para escala. No topo as paredes se riscam na entrada. - 03
Concreto aparente (
.concreto-concreto): fôrma de tábua de 29 cm, veio, bicheiras, grão e furos de tirante. Só na faixa depois do topo e no contato. Nunca no fundo da página inteira. - 04
Índice de obras como tabela técnica (nº, obra, cidade, ano, área, tipologia, status). No desktop, a linha em foco ganha a barra óxido e o desenho da obra aparece no painel à direita (só CSS,
:has). - 05
Ficha técnica da obra: corte grande no papel + duas fotos, e ao lado a
dlcom local, áreas, programa, estrutura, materiais, equipe e datas. - 06
Etapas de projeto (E1 a E4) sobre uma escala gráfica: segmentos alternados preto/vazio, cada etapa com a escala de desenho que ela usa e uma miniatura que ganha detalhe de fase em fase.
- 07
Rodapé como carimbo: quadro com escritório, responsáveis técnicos e CAU, projeto, folha, escala, data, registro PJ e revisão.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo cinza de concreto quente
#d9d5ce. Papel#e5e2dc(surface) só atrás dos desenhos. - Texto nanquim
#1b1b19; secundário#5c5953. Fios de 1px em nanquim fazem toda a estrutura. - Vermelho-óxido
#b4432a: uma cor, usada pouco. Linha de corte na planta, status "em obra", barra da linha em foco no índice, código da etapa, revisão do carimbo e o botão de contato. Nada mais. - Fontes: Archivo pesada (800/900), caixa-alta, eixo de largura em 118% (
.concreto-largo) para títulos; Inter Tight para texto corrido; Martian Mono em caixa-alta comtracking-[0.18em]para rótulos, cotas e fichas. - Raio zero. Sem sombra (a única é a barra óxido inset da linha do índice).
Regras
- Composição em grade de 12 colunas, assimétrica (5/7, 7/5, 4/8). Nada centralizado.
- Um botão escuro por tela (topo) e um óxido (contato). O resto é link sublinhado em mono.
- Texto seco, de memorial descritivo: medida, material, decisão. Sem adjetivo de efeito ("espaços que inspiram" não entra).
- Status só em três valores:
construída(quadrado cheio),em obra(óxido),projeto(contorno). - Animação:
data-sobeno topo,data-revelanos títulos e blocos abaixo, e o risco das paredes da planta. Tudo para em movimento reduzido. Não pôrdata-revelanas linhas do índice (otransformmudaria a referência do desenho absoluto).
Adaptar à marca do cliente
- Cor da marca terrosa (terracota, ocre, verde-musgo escuro)? Troque só
--d-primarye o#b4432adas três regras detokens.css(linha de corte, barra do índice, seleção). Mantenha cinza e nanquim. - Marca fria? Leve o fundo para
#d4d6d6e o concreto para#bfc2c1, sem ir ao branco. - Escritório de interiores: troque
Plantapor layout de mobiliário (use a variantea, que já tem mesa, sofá e bancada) e a elevação por vista de marcenaria. - Cor saturada, gradiente ou tom lúdico: esse design não é o certo.
Deux fichiers.
Un prompt.
Concreto 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 Concreto.