Forma.
Pôster Bauhaus: formas geométricas grandes em vermelho, azul e amarelo sobre papel, bordas pretas grossas e números gigantes. Alegre e organizado.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Unbounded
- Texto
- Inter
ParaFamílias com crianças, público cultural e criativo
Seções da página01/10nav com logo de formas
Pôster Bauhaus que virou site. Formas geométricas grandes, cores primárias puras e bordas pretas grossas. Alegre sem ser infantilizado, organizado sem ser frio.
ParaFamílias com crianças, público cultural e criativo
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Unbounded nos títulos, Inter no texto.
TítulosUnbounded
Aag!
Forma 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.
- marca com cores primárias ou logo geométrico
- público infantil ou criativo
- matrícula, inscrição ou visita agendada
- instituição que quer parecer moderna sem ser fria
- luxo discreto
- saúde/clínica
- advocacia e finanças
- restaurante à noite
- marca com paleta pastel ou terrosa
Tom
O que faz ser Forma
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Pôster no hero montado com formas (círculo, quarto de círculo, meia-lua, triângulo, anel), algumas girando ou flutuando devagar.
- 02
Grade modular visível no fundo (
.forma-grade: 12 colunas no desktop, 4 no celular). - 03
Faixa de mosaico correndo: quadrados coloridos com uma forma dentro, alternados com palavras.
- 04
Mosaico de cartões em cores cheias, cada um com uma forma cortada no canto.
- 05
Blocos de cor com número gigante (idades, etapas).
- 06
Formas que giram e crescem no hover do cartão (
.forma-mexedentro de.group). - 07
Rótulo vertical ao lado do título do hero.
- 08
Bordas de 3px e sombra sólida deslocada que "afunda" no hover dos botões.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo papel
#f4efe4, superfícies#fffaf0. Texto e bordas pretos#111111. - Primárias puras: vermelho
#e63312, azul#1d4ed8, amarelo#f6c21a(em--forma-*). Nada de tom intermediário, degradê ou transparência nas formas. - Primária azul para blocos grandes (chamada final); destaque vermelho para o botão principal; amarelo para formulário, selos e hover.
- Fontes: Unbounded black em caixa-alta para títulos e números; Inter para texto.
- Cantos retos em tudo (
--d-radius: 0). O redondo aparece só nas formas.
Regras
- Máximo de três cores primárias + preto por tela. Nenhuma cor nova.
- Forma sempre em cor cheia, nunca contorno fino (exceto o anel, com traço grosso).
- Texto sobre vermelho e azul é branco; sobre amarelo é preto.
- Formas grandes podem sair da borda do bloco (cortadas), mas nunca por cima de texto.
- Animações lentas (40s de giro, 6s de flutuação) e todas param com
prefers-reduced-motion.
Adaptar à marca do cliente
- Marca com cores próprias: troque as três
--forma-*mantendo o contraste de primárias (uma quente, uma fria, uma clara).--d-primarye--d-accentacompanham. - Museu/centro cultural: troque "turmas" por exposições ou programação, mantendo os números gigantes (datas).
- Agência de design: o mosaico vira serviços e as turmas viram etapas do processo.
Dois arquivos.
Um prompt.
O Forma 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 Forma.