Design for AIEstilo Flat 2.0: prompt de diseño UI
Paleta, reglas tipográficas y un prompt pegable para flat 2.0. También llamado flat design 2.0, semi-flat, casi flat, flat con sombras, Material ligero. 2014-2018 (corrección del flat design puro después de 2013).
Rasgos
- colores planos y formas simples, pero con sombras ligeras para mostrar qué es clicable
- gradientes sutiles (dos tonos cercanos) en vez de rellenos planos puros
- radio de 4-8px, sombras suaves de 2-8px en tarjetas y botones
- paletas brillantes, saturadas pero armoniosas (azul, verde azulado, naranja, rojo)
- iconos simples de línea o rellenos, ilustraciones vectoriales planas
- affordances claras: botones en relieve, tarjetas elevadas, inputs con contorno
- movimiento suave: 200ms ease en hover, ripple o fundido al hacer clic
Paleta
#ffffff página, #f5f7fa superficie, #2d3748 texto, #718096 apagado, #3182ce primario, #38b2ac secundario, #ed8936 acento cálido
Tipografía
Roboto, Open Sans, Lato o Source Sans 3; títulos 600-700 a 28-48px, cuerpo 400 a 16px, botones 500 a 14-16px
Haz
- dale a los elementos interactivos una sombra de 2px en reposo y de 6px en hover para que la affordance sea evidente
- usa un primario saturado para las acciones y un secundario solo para los realces
- mantén los iconos en un solo set con un solo grosor de trazo
Evita
- no te vayas al flat total; la diferencia con el flat de 2013 es la sombra
- no uses sombras largas ni el truco de la "sombra plana" en diagonal a 45 grados
- no uses más de tres colores más los grises
Conocido por: Productos de Google de la era Material 1, Dropbox 2015, Slack 2016, Mailchimp 2016
Semilla CSS
:root {
--bg: #ffffff;
--surface: #f5f7fa;
--fg: #2d3748;
--muted: #718096;
--accent: #3182ce;
--accent2: #38b2ac;
--radius: 6px;
--shadow: 0 2px 4px rgba(45,55,72,0.12);
--font: 'Open Sans',sans-serif
}
Prompt
Construye el sitio en estilo Flat 2.0. Fondo #ffffff, superficies de sección #f5f7fa, texto #2d3748, apagado #718096, primario #3182ce, secundario #38b2ac, un acento cálido #ed8936. Fuente Open Sans: títulos 700 a 44/30/22px, cuerpo 400 a 16px con line-height 1.6, botones 600 a 15px. Tarjetas: blancas, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), hover 0 6px 16px rgba(45,55,72,0.16) con translateY(-2px), 200ms ease. Botón primario: fondo #3182ce con un gradiente hacia #2b6cb0 en la parte inferior, texto blanco, radio 6px, sombra 0 2px 4px rgba(49,130,206,0.35); el estado active elimina la sombra. Inputs: borde 1px #cbd5e0, radio 6px, anillo de foco 2px #3182ce. Iconos: iconos de línea de 24px con trazo de 2px en #3182ce. Ilustración vectorial plana y simple en el hero usando los tres colores. Espaciado en escala de 8px, padding de sección 64-96px. Sin cristal, sin gradientes pesados, sin modo oscuro.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo Flat 2.0. Fondo #ffffff, superficies de sección #f5f7fa, texto #2d3748, apagado #718096, primario #3182ce, secundario #38b2ac, un acento cálido #ed8936. Fuente Open Sans: títulos 700 a 44/30/22px, cuerpo 400 a 16px con line-height 1.6, botones 600 a 15px. Tarjetas: blancas, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), hover 0 6px 16px rgba(45,55,72,0.16) con translateY(-2px), 200ms ease. Botón primario: fondo #3182ce con un gradiente hacia #2b6cb0 en la parte inferior, texto blanco, radio 6px, sombra 0 2px 4px rgba(49,130,206,0.35); el estado active elimina la sombra. Inputs: borde 1px #cbd5e0, radio 6px, anillo de foco 2px #3182ce. Iconos: iconos de línea de 24px con trazo de 2px en #3182ce. Ilustración vectorial plana y simple en el hero usando los tres colores. Espaciado en escala de 8px, padding de sección 64-96px. Sin cristal, sin gradientes pesados, sin modo oscuro.
## Tokens
:root { --bg:#ffffff; --surface:#f5f7fa; --fg:#2d3748; --muted:#718096; --accent:#3182ce; --accent2:#38b2ac; --radius:6px; --shadow:0 2px 4px rgba(45,55,72,0.12); --font:'Open Sans',sans-serif }
Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.