Concreto.
Technical drawing sheet on exposed concrete: plans, sections and elevations in SVG instead of photos, project index as a table and a stamp-style footer. Concrete gray, India ink and a single oxide red.
- Type
- Landing page
- Theme
- Light
- Headings
- Archivo
- Body
- Inter Tight
ForPeople and families about to build or renovate, and small developers; they read floor plans and value method
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForPeople and families about to build or renovate, and small developers; they read floor plans and value method
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Archivo for headings, Inter Tight for body text.
HeadingsArchivo
Aag!
Concreto in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter Tight
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.
- project portfolio with technical drawings
- small firm whose partners sign the work
- sober brand in gray, black and one earthy color
- profession registered with a professional council (CAU, CREA)
- retail and promotions
- colorful or playful brand
- children's audience
- business with no projects to show
Tone
What makes it Concreto
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Concreto 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 Concreto.
