Concreto.
Lámina técnica sobre hormigón visto: plantas, cortes y elevaciones en SVG en lugar de fotos, índice de obras como tabla y pie en sello. Gris hormigón, tinta china y un solo rojo óxido.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Archivo
- Texto
- Inter Tight
ParaPersonas y familias que van a construir o remodelar, y pequeños desarrolladores; leen planos y valoran el método
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaPersonas y familias que van a construir o remodelar, y pequeños desarrolladores; leen planos y valoran el método
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Archivo en los títulos, Inter Tight en el texto.
TítulosArchivo
Aag!
Concreto en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter Tight
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.
- portafolio de obras con dibujos técnicos
- estudio pequeño con socios que firman el proyecto
- marca sobria en gris, negro y un color tierra
- profesión con matrícula en consejo profesional (CAU, CREA)
- retail y promociones
- marca colorida o lúdica
- público infantil
- negocio sin obra ni proyecto que mostrar
Tono
Lo que lo hace Concreto
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Concreto 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 Concreto.
