# SaaS de medianoche

También llamado: estilo Linear, SaaS oscuro, landing de desarrollador en modo oscuro, UI de producto oscura, look Raycast  
Época: 2019 en adelante (Linear 2019, Raycast 2020, Vercel oscuro 2021)  
Página: https://designforai.dev/es/style/midnight-saas

## 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

```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%.