Forma.
Bauhaus poster: large geometric shapes in red, blue and yellow on paper, thick black borders and giant numbers. Cheerful and organized.
- Type
- Landing page
- Theme
- Light
- Headings
- Unbounded
- Body
- Inter
ForFamilies with children, cultural and creative audiences
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForFamilies with children, cultural and creative audiences
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Unbounded for headings, Inter for body text.
HeadingsUnbounded
Aag!
Forma in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
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.
- brand with primary colors or a geometric logo
- children's or creative audience
- enrollment, registration or scheduled visits
- institution that wants to seem modern without being cold
- discreet luxury
- healthcare/clinic
- law and finance
- restaurant at night
- brand with a pastel or earthy palette
Tone
What makes it Forma
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Forma 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 Forma.
