Design for AIEstilo SaaS de medianoche: prompt de diseño UI
Paleta, reglas tipográficas y un prompt pegable para saas de medianoche. También llamado estilo Linear, SaaS oscuro, landing de desarrollador en modo oscuro, UI de producto oscura, look Raycast. 2019 en adelante (Linear 2019, Raycast 2020, Vercel oscuro 2021).
Rasgos
- página casi negra (#08090a a #0f1115), nunca #000 puro
- texto en tres grises: blanco para títulos, gris claro para cuerpo, gris apagado para meta
- un acento frío (índigo, violeta o cian) usado para resplandores, enlaces y un botón
- bordes de 1px al 6-10% de blanco en vez de sombras; las superficies son apenas más claras que la página
- capturas de producto en marcos sutilmente biselados con un leve resplandor en gradiente detrás
- tamaños de tipo pequeños, tracking apretado, mucho texto de UI a 13-14px
- movimiento: fade-up al hacer scroll, 400-600ms, escalonado a 60ms
Paleta
#08090a página, #131416 superficie, rgba(255,255,255,0.08) borde, #f7f8f8 título, #b4bcd0 cuerpo, #62666d apagado, #5e6ad2 acento
Tipografía
Geist o IBM Plex Sans para UI, JetBrains Mono para código; h1 600 a 56-64px con -0.03em, cuerpo 400 a 16px, texto de UI 13-14px
Haz
- construye una escala de grises de 3 pasos para el texto y úsala con rigor: título, cuerpo, meta
- usa bordes al 8% de blanco y superficies un 3-5% más claras que la página en lugar de sombras proyectadas
- coloca un único resplandor radial suave (acento al 20% de alfa, blur 120px) detrás de la captura del hero
Evita
- no uses negro puro ni blanco puro en ningún sitio
- no añadas varios colores de acento; un índigo es el estilo
- no te pases con el resplandor; uno por pantalla, nada de neón
Conocido por: Linear, Raycast, Vercel, Resend
Semilla CSS
:root {
--bg: #08090a;
--surface: #131416;
--line: rgba(255,255,255,0.08);
--fg: #f7f8f8;
--body: #b4bcd0;
--muted: #62666d;
--accent: #5e6ad2;
--radius: 8px;
--font: 'Geist',sans-serif
}
Prompt
Construye el sitio en estilo SaaS oscuro de medianoche (tipo Linear). Página #08090a, superficies #131416, bordes 1px rgba(255,255,255,0.08), títulos #f7f8f8, cuerpo #b4bcd0, meta #62666d, un solo acento #5e6ad2. Fuente Geist: h1 600 a 60px con -0.03em y line-height 1.05, h2 600 a 32px, cuerpo 400 a 16px, etiquetas de UI 13px 500. Border-radius 8px en tarjetas y botones, 12px en marcos de captura. Sin sombras proyectadas; la profundidad viene de los bordes y de un realce inset de 1px rgba(255,255,255,0.04) en la parte superior de las tarjetas. Hero: titular centrado, subtítulo de una línea, botón primario sólido #5e6ad2 con texto blanco, botón secundario transparente con borde. Debajo, una captura del producto en un marco con borde y un resplandor radial detrás (rgba(94,106,210,0.25), blur 120px). Lista de funciones en tres columnas con iconos de 16px en #b4bcd0. Movimiento: las secciones suben 16px con fundido durante 500ms al hacer scroll, escalonadas 60ms; el hover en botones aclara un 6%.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo SaaS oscuro de medianoche (tipo Linear). Página #08090a, superficies #131416, bordes 1px rgba(255,255,255,0.08), títulos #f7f8f8, cuerpo #b4bcd0, meta #62666d, un solo acento #5e6ad2. Fuente Geist: h1 600 a 60px con -0.03em y line-height 1.05, h2 600 a 32px, cuerpo 400 a 16px, etiquetas de UI 13px 500. Border-radius 8px en tarjetas y botones, 12px en marcos de captura. Sin sombras proyectadas; la profundidad viene de los bordes y de un realce inset de 1px rgba(255,255,255,0.04) en la parte superior de las tarjetas. Hero: titular centrado, subtítulo de una línea, botón primario sólido #5e6ad2 con texto blanco, botón secundario transparente con borde. Debajo, una captura del producto en un marco con borde y un resplandor radial detrás (rgba(94,106,210,0.25), blur 120px). Lista de funciones en tres columnas con iconos de 16px en #b4bcd0. Movimiento: las secciones suben 16px con fundido durante 500ms al hacer scroll, escalonadas 60ms; el hover en botones aclara un 6%.
## Tokens
:root { --bg:#08090a; --surface:#131416; --line:rgba(255,255,255,0.08); --fg:#f7f8f8; --body:#b4bcd0; --muted:#62666d; --accent:#5e6ad2; --radius:8px; --font:'Geist',sans-serif }
Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.