Design for AI

Estilo Y2K / Frutiger Aero: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para y2k / frutiger aero. También llamado web Y2K, Frutiger Aero, cristal aero, estilo Windows Vista, futurismo de los 2000, UI de burbujas. 1998-2004 (Y2K) y 2004-2013 (Frutiger Aero); revival nostálgico de 2022 en adelante.

Rasgos

  • gradientes brillantes: azul cielo, aguamarina, verde lima, realces blancos que parecen mojados
  • botones píldora con un brillo especular en la mitad superior
  • imaginería de naturaleza y tecnología: gotas de agua, burbujas, hierba, peces, nubes, cromo
  • paneles translúcidos con esquinas redondeadas y resplandor interior blanco de 1px
  • sans humanista (linaje Frutiger o Segoe), a menudo con un leve tinte azul
  • destellos de lente, orbes, reflejos bajo los objetos
  • optimismo alegre; todo es limpio, luminoso y un poco plástico

Paleta

#cbe8ff cielo, #1a8cff azul aero, #6fdc3c lima, #ffffff realce, #0a3d7a texto, #f0f8ff panel

Tipografía

Frutiger es comercial; sustitutos libres: Nunito Sans, Hind, Selawik (MIT, parecida a Segoe) o Ubuntu; títulos 600 a 32-44px, cuerpo 400 a 16px; texto azul grisáceo sobre paneles blancos

Haz

  • construye cada botón como un gradiente de dos paradas más una capa blanca al 40% en la mitad superior para el brillo
  • usa un fondo con gradiente vertical de cielo a blanco y haz flotar paneles translúcidos encima
  • incluye un elemento de naturaleza (burbujas o agua) como imagen decorativa o forma CSS

Evita

  • no uses modo oscuro; el look es solo de día
  • no aplanes los gradientes; el brillo es toda la gracia
  • no lo mezcles con tipografía brutalista; mantén la sans humanista

Conocido por: Windows Vista y 7, menú de la Wii, iPhone iOS 1-6, marketing de la era Nintendo DS

Semilla 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

Construye el sitio en estilo Y2K Frutiger Aero. Fondo con gradiente vertical de #cbe8ff a #ffffff con tres burbujas translúcidas flotando (círculos con radial-gradient, blanco al 60% a transparente, borde blanco de 1px). Paneles: 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). Los botones son píldoras (radio 999px) con un gradiente de #4fa8ff a #0f6fd6, una capa de brillo en la mitad superior (linear-gradient de rgba(255,255,255,0.55) a transparente cubriendo el 50%), borde 1px #0b5cb8, texto blanco con un text-shadow oscuro sutil. Acento secundario #6fdc3c con la misma receta brillante. Fuente Nunito Sans: títulos 600 a 40px en #0a3d7a, cuerpo 400 a 16px en #1f4d80. Añade un destello de lente en la esquina del hero y un reflejo suave bajo la imagen del hero (scaleY(-1) con una máscara de fundido). El hover aclara los botones un 8% en 150ms.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo Y2K Frutiger Aero. Fondo con gradiente vertical de #cbe8ff a #ffffff con tres burbujas translúcidas flotando (círculos con radial-gradient, blanco al 60% a transparente, borde blanco de 1px). Paneles: 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). Los botones son píldoras (radio 999px) con un gradiente de #4fa8ff a #0f6fd6, una capa de brillo en la mitad superior (linear-gradient de rgba(255,255,255,0.55) a transparente cubriendo el 50%), borde 1px #0b5cb8, texto blanco con un text-shadow oscuro sutil. Acento secundario #6fdc3c con la misma receta brillante. Fuente Nunito Sans: títulos 600 a 40px en #0a3d7a, cuerpo 400 a 16px en #1f4d80. Añade un destello de lente en la esquina del hero y un reflejo suave bajo la imagen del hero (scaleY(-1) con una máscara de fundido). El hover aclara los botones un 8% en 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 }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.