Design for AI

Estilo Formas orgânicas / blobs: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de formas orgânicas / blobs. Também chamado de design de blobs, UI de formas orgânicas, formas fluidas, formas de ameba, blobs que se transformam, web biomórfica. 2018-2022 (Spotify, blobs do Google Material, marcas de bem-estar).

Traços

  • formas arredondadas irregulares (paths SVG ou border-radius com 8 valores) como fundos, máscaras e molduras de imagem
  • paletas suaves e naturais ou uma cor vívida sobre creme
  • as formas se sobrepõem, ficam atrás do texto e emolduram fotos em vez de retângulos
  • tipografia sans arredondada, pesos médios, tamanhos confortáveis
  • os blobs se transformam lentamente entre formas (animação de border-radius ou morph de path SVG)
  • nenhuma aresta dura em lugar nenhum: pílulas, círculos, blobs
  • tom amigável, humano, de bem-estar ou comida

Paleta

#fffaf3 creme, #2a2a2a texto, #ff8a65 coral, #ffd166 sol, #06d6a0 menta, #118ab2 oceano, #ef476f framboesa

Tipografia

Poppins, Outfit, Quicksand ou Nunito; títulos 600-700 a 40-64px, corpo 400 a 17px; DM Serif Display para um título de contraste se precisar

Faça

  • gere blobs com border-radius de 8 valores (ex.: 30% 70% 70% 30% / 30% 30% 70% 70%) e anime entre dois ou três valores ao longo de 8-12s
  • use blobs como clip-path ou mask nas fotos para as imagens também serem orgânicas
  • mantenha os blobs em 2-3 por viewport e coloque-os atrás do conteúdo com z-index baixo

Evite

  • não use retângulos para imagens ou cards; se tem canto, está fora do estilo
  • não anime os blobs mais rápido que 6s; parece que está fervendo
  • não use blobs e vidro juntos; escolha um material

Conhecido por: Campanhas do Spotify 2018-2020, blobs do Google Material, Oatly (parcial), Glossier (parcial), Headspace

Semente CSS
:root {
  --bg: #fffaf3;
   --fg: #2a2a2a;
   --accent: #ff8a65;
   --accent2: #06d6a0;
   --accent3: #ffd166;
   --radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
   --shadow: none;
   --font: 'Outfit',sans-serif
}
Prompt

Construa o site com formas orgânicas em blob. Fundo #fffaf3, texto #2a2a2a, acentos coral #ff8a65, menta #06d6a0, sol #ffd166, oceano #118ab2. Fonte Outfit: títulos 700 a 60/40/26px, corpo 400 a 17px line-height 1.6. Hero: manchete à esquerda, à direita uma foto recortada por um blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animado entre três valores de border-radius ao longo de 10s ease-in-out infinite; dois blobs chapados em #ffd166 e #06d6a0 atrás dela a 60% do tamanho, deslocados, z-index abaixo do conteúdo, derivando 15px ao longo de 12s. Os fundos de seção são blobs grandes nas cores de acento sangrando pela borda em vez de faixas retangulares. Cards: brancos, border-radius 40px / 48px, sem borda, sem sombra; os ícones ficam em pequenos selos em blob. Botões em pílula, preenchimento #ff8a65, texto branco, 52px de altura. Imagens sempre com máscara de blob ou circulares; nenhum canto retangular em lugar nenhum. Movimento: só morph e deriva; o hover escala os botões 1.04 ao longo de 200ms.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site com formas orgânicas em blob. Fundo #fffaf3, texto #2a2a2a, acentos coral #ff8a65, menta #06d6a0, sol #ffd166, oceano #118ab2. Fonte Outfit: títulos 700 a 60/40/26px, corpo 400 a 17px line-height 1.6. Hero: manchete à esquerda, à direita uma foto recortada por um blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animado entre três valores de border-radius ao longo de 10s ease-in-out infinite; dois blobs chapados em #ffd166 e #06d6a0 atrás dela a 60% do tamanho, deslocados, z-index abaixo do conteúdo, derivando 15px ao longo de 12s. Os fundos de seção são blobs grandes nas cores de acento sangrando pela borda em vez de faixas retangulares. Cards: brancos, border-radius 40px / 48px, sem borda, sem sombra; os ícones ficam em pequenos selos em blob. Botões em pílula, preenchimento #ff8a65, texto branco, 52px de altura. Imagens sempre com máscara de blob ou circulares; nenhum canto retangular em lugar nenhum. Movimento: só morph e deriva; o hover escala os botões 1.04 ao longo de 200ms.

## Tokens
:root { --bg:#fffaf3; --fg:#2a2a2a; --accent:#ff8a65; --accent2:#06d6a0; --accent3:#ffd166; --radius:30% 70% 70% 30% / 30% 30% 70% 70%; --shadow:none; --font:'Outfit',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.