# Minimalismo

También llamado: diseño web minimalista, menos es más, UI limpia, diseño de espacio en blanco  
Época: atemporal; oleadas web en 2008 (Apple), 2013 (flat), 2019 (Linear/Notion), y sigue  
Página: https://designforai.dev/es/style/minimalism

## Rasgos

- muy pocos elementos; cada uno tiene un trabajo
- una tipografía, dos tamaños, dos pesos, un color de acento
- el espacio en blanco lleva la jerarquía; sin cajas, sin separadores salvo que sean imprescindibles
- casi siempre negro sobre blanco o casi blanco, filetes finísimos
- radio pequeño y preciso (4-8px) o ninguno; sombras casi invisibles
- las imágenes son escasas y grandes cuando aparecen
- el movimiento es sutil: opacidad y translate de 4px, 150-250ms

Paleta: #ffffff página, #111111 texto, #6b7280 secundario, #e5e7eb filete, #2563eb único acento

Tipografía: Geist, Helvetica Neue o system-ui; títulos 600 a 32-56px con -0.02em, cuerpo 400 a 16-17px, line-height 1.6; no más de 4 tamaños en todo el sitio

## Haz

- elimina cualquier cosa que no cambie lo que el usuario hace a continuación
- alinea a una retícula de 8px y a un ancho de lectura de 640-720px
- deja que el tamaño de tipo y el espaciado marquen la jerarquía en vez del color y las cajas

## Evita

- no pongas iconos junto a cada título
- no uses tarjetas ni bordes para agrupar; usa espacio
- no uses más de un color de acento ni un gradiente

Conocido por: Apple.com, Notion, Linear (modo claro), Muji

## Semilla CSS

```css
:root{--bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --radius:6px; --shadow:none; --font:'Geist',system-ui,sans-serif}
```

## Prompt

Construye el sitio en minimalismo estricto. Fondo #ffffff, texto #111111, secundario #6b7280, filete #e5e7eb, un acento #2563eb usado solo para enlaces y el botón primario. Fuente Geist: exactamente cuatro tamaños: 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (cuerpo, line-height 1.6), 13px 400 (meta). Columna de contenido de 680px, padding de página 24px, secciones separadas por 96px de espacio y nada más (sin filetes, sin fondos). Sin tarjetas, sin iconos, sin sombras, sin gradientes. Botones: 40px de alto, radio 6px, #111111 sólido con texto blanco; los botones secundarios son enlaces de texto plano. Las imágenes, cuando se usen, ocupan todo el ancho de la columna con radio 8px y sin borde. La nav es el logo a la izquierda y tres enlaces de texto a la derecha. Movimiento: 150ms de opacidad en hover; nada se anima al hacer scroll.