Forma.
Póster Bauhaus: formas geométricas grandes en rojo, azul y amarillo sobre papel, bordes negros gruesos y números gigantes. Alegre y organizado.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Unbounded
- Texto
- Inter
ParaFamilias con niños, público cultural y creativo
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaFamilias con niños, público cultural y creativo
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Unbounded en los títulos, Inter en el texto.
TítulosUnbounded
Aag!
Forma en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- marca con colores primarios o logo geométrico
- público infantil o creativo
- matrícula, inscripción o visita agendada
- institución que quiere parecer moderna sin ser fría
- lujo discreto
- salud/clínica
- abogacía y finanzas
- restaurante nocturno
- marca con paleta pastel o tierra
Tono
Lo que lo hace Forma
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Forma 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 Forma.
