Alicerce.
Editorial e sóbrio: papel creme, azul-marinho e latão, serifa clássica e filetes duplos. Áreas de atuação como índice em romanos e contato formal.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Cormorant Garamond
- Texto
- Inter
ParaEmpresas e pessoas físicas buscando serviço profissional especializado
Seções da página01/08Topo e navegação
Escritório tradicional, sem ser antigo. Parece a primeira página de um jornal de qualidade: serifa clássica, filetes, muito respiro e nenhum excesso.
ParaEmpresas e pessoas físicas buscando serviço profissional especializado
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Cormorant Garamond nos títulos, Inter no texto.
TítulosCormorant Garamond
Aag!
Alicerce em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- escritório com sócios e registro profissional
- marca em azul-marinho, verde-escuro, vinho ou dourado
- serviço de alto valor e relação de longo prazo
- comunicação que precisa ser discreta por regra do conselho
- público jovem e informal
- varejo, promoção ou preço em destaque
- lazer, comida ou beleza
- startup de tecnologia
Tom
O que faz ser Alicerce
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Cabeçalho de jornal: marca centralizada com monograma em moldura dupla e menu dividido dos dois lados, fechado por um filete duplo (
.alicerce-filete-duplo). - 02
Coluna de "fatos" ao lado do hero, como um sumário lateral.
- 03
Áreas de atuação como índice em numeração romana (I, II, III...), com linha fina até a descrição (
.alicerce-guia). - 04
Citação grande em itálico, com aspa em latão.
- 05
Blocos marinho com lista de etapas separadas por filetes.
- 06
Fotos dos sócios em tons de cinza (
.alicerce-foto), com registro em mono. - 07
Formulário formal com campos só com linha inferior.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo papel
#f6f3ec, superfícies#fbf9f4e#ece6d9. Nunca branco puro. - Texto e blocos azul-marinho
#13243d. Os blocos cheios (escritório, contato) são marinho com texto papel. - Detalhe latão
#a8864b: numeração romana, rótulos, a palavra em destaque do título e o botão do formulário. Só em detalhe, nunca em fundo grande. - Fontes: Cormorant Garamond 500/600 nos títulos (itálico para ênfase), Inter no texto, JetBrains Mono só em registros (OAB, CRC) e numeração de etapas.
Regras
- Cantos retos em tudo (raio 0). Nada de pílula nem sombra.
- Botões em caixa-alta espaçada; no máximo um botão cheio por tela.
- Animação só na entrada e ao rolar (
data-sobe,data-revela). - Ícones lucide pequenos, só onde forem úteis (endereço, telefone, seta).
Adaptar à marca do cliente
- Marca em verde-escuro ou vinho: troque
--d-texte--d-primarypela cor (precisa ser escura o bastante para texto) e mantenha papel e latão. - Marca com dourado próprio: troque só
--d-accent. - Contabilidade/consultoria: troque "OAB" por "CRC" e reescreva as áreas; o layout serve igual.
Dois arquivos.
Um prompt.
O Alicerce 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 Alicerce.