Concreto.
Prancha técnica sobre concreto aparente: plantas, cortes e elevações em SVG no lugar das fotos, índice de obras como tabela e rodapé em carimbo. Cinza de concreto, nanquim e um só vermelho-óxido.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Archivo
- Texto
- Inter Tight
ParaPessoas e famílias que vão construir ou reformar, e incorporadores pequenos; leem planta, valorizam método
Seções da 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.
ParaPessoas e famílias que vão construir ou reformar, e incorporadores pequenos; leem planta, valorizam método
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Archivo nos títulos, Inter Tight no texto.
TítulosArchivo
Aag!
Concreto em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter Tight
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- portfólio de obras com desenhos técnicos
- escritório pequeno com sócios que assinam o projeto
- marca sóbria em cinza, preto e uma cor terrosa
- profissão com registro em conselho (CAU, CREA)
- varejo e promoção
- marca colorida ou lúdica
- público infantil
- negócio sem obra ou projeto para mostrar
Tom
O que faz ser Concreto
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Concreto vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Concreto.