Design for AI

Estilo Y2K / Frutiger Aero: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de y2k / frutiger aero. Também chamado de web Y2K, Frutiger Aero, aero glass, estilo Windows Vista, futurismo dos anos 2000, UI de bolhas. 1998-2004 (Y2K) e 2004-2013 (Frutiger Aero); revival nostálgico de 2022 em diante.

Traços

  • gradientes brilhantes: azul-céu, aqua, verde-limão, reflexos brancos que parecem molhados
  • botões em pílula com reflexo especular na metade superior
  • imagens de natureza com tecnologia: gotas de água, bolhas, grama, peixes, nuvens, cromo
  • painéis translúcidos com cantos arredondados e brilho interno branco de 1px
  • sans humanista (linhagem Frutiger ou Segoe), muitas vezes com um leve tom azulado
  • lens flares, orbes, reflexos sob os objetos
  • otimismo alegre; tudo é limpo, brilhante e levemente plástico

Paleta

#cbe8ff céu, #1a8cff azul aero, #6fdc3c lima, #ffffff reflexo, #0a3d7a texto, #f0f8ff painel

Tipografia

Frutiger é comercial; substitutos gratuitos: Nunito Sans, Hind, Selawik (MIT, parecida com Segoe) ou Ubuntu; títulos 600 a 32-44px, corpo 400 a 16px; texto azul-acinzentado sobre painéis brancos

Faça

  • construa cada botão como um gradiente de duas paradas mais um overlay branco na metade superior a 40% para o brilho
  • use um fundo em gradiente vertical do céu para o branco e faça painéis translúcidos flutuarem sobre ele
  • inclua um elemento de natureza (bolhas ou água) como imagem decorativa ou forma em CSS

Evite

  • não use dark mode; o visual é só à luz do dia
  • não achate os gradientes; o brilho é o ponto inteiro
  • não misture com tipografia brutalista; mantenha a sans humanista

Conhecido por: Windows Vista e 7, menu do Wii, iPhone iOS 1-6, marketing da era Nintendo DS

Semente CSS
:root {
  --bg: linear-gradient(#cbe8ff,#ffffff);
   --fg: #0a3d7a;
   --accent: #1a8cff;
   --accent2: #6fdc3c;
   --panel: rgba(240,248,255,0.75);
   --radius: 18px;
   --shadow: 0 6px 18px rgba(26,140,255,0.25);
   --font: 'Nunito Sans',sans-serif
}
Prompt

Construa o site em estilo Y2K Frutiger Aero. Fundo em gradiente vertical de #cbe8ff para #ffffff com três bolhas translúcidas flutuantes (círculos radial-gradient, branco 60% para transparente, borda branca de 1px). Painéis: background rgba(240,248,255,0.75), 1px solid rgba(255,255,255,0.9), inset 0 1px 0 #ffffff, border-radius 18px, box-shadow 0 6px 18px rgba(26,140,255,0.25). Botões são pílulas (raio 999px) com gradiente de #4fa8ff para #0f6fd6, um overlay de brilho na metade superior (linear-gradient rgba(255,255,255,0.55) para transparente cobrindo 50%), borda 1px #0b5cb8, texto branco com um text-shadow escuro sutil. Acento secundário #6fdc3c na mesma receita brilhante. Fonte Nunito Sans: títulos 600 a 40px em #0a3d7a, corpo 400 a 16px em #1f4d80. Adicione um destaque de lens flare no canto do hero e um reflexo suave sob a imagem do hero (scaleY(-1) com máscara de fade). O hover clareia os botões 8% em 150ms.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo Y2K Frutiger Aero. Fundo em gradiente vertical de #cbe8ff para #ffffff com três bolhas translúcidas flutuantes (círculos radial-gradient, branco 60% para transparente, borda branca de 1px). Painéis: background rgba(240,248,255,0.75), 1px solid rgba(255,255,255,0.9), inset 0 1px 0 #ffffff, border-radius 18px, box-shadow 0 6px 18px rgba(26,140,255,0.25). Botões são pílulas (raio 999px) com gradiente de #4fa8ff para #0f6fd6, um overlay de brilho na metade superior (linear-gradient rgba(255,255,255,0.55) para transparente cobrindo 50%), borda 1px #0b5cb8, texto branco com um text-shadow escuro sutil. Acento secundário #6fdc3c na mesma receita brilhante. Fonte Nunito Sans: títulos 600 a 40px em #0a3d7a, corpo 400 a 16px em #1f4d80. Adicione um destaque de lens flare no canto do hero e um reflexo suave sob a imagem do hero (scaleY(-1) com máscara de fade). O hover clareia os botões 8% em 150ms.

## Tokens
:root { --bg:linear-gradient(#cbe8ff,#ffffff); --fg:#0a3d7a; --accent:#1a8cff; --accent2:#6fdc3c; --panel:rgba(240,248,255,0.75); --radius:18px; --shadow:0 6px 18px rgba(26,140,255,0.25); --font:'Nunito Sans',sans-serif }

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