UI moderna mínima

Minimal modern UI: sitios mínimos que se sienten terminados

Para sitios personales, portafolios, páginas de aterrizaje y blogs: sitios pequeños y centrados en el contenido donde la moderación y el detalle hacen el trabajo. No para aplicaciones web, interfaces de producto, tableros o herramientas; sus problemas (estado de la aplicación, densidad de datos, formularios complejos) necesitan una guía diferente.

Todo aquí es HTML plano, CSS y un poco de JavaScript vainilla, por lo que se adapta a cualquier stack o a ninguno. Si el proyecto ya tiene una configuración de compilación o plantillas, úsala; los principios no cambian.

Es una brújula, no una plantilla: cada regla explica el porqué y un punto de partida para adaptarlo al tema y al gusto del usuario. Los elementos marcados como Firme son las pocas cosas que no se deben omitir.

Archivos de apoyo (léelos cuando sea necesario):

• references/snippets.md: bloques de construcción para copiar y pegar (tokens, base, prosa, lista de publicaciones, formularios, movimiento).
• references/interface-checklist.md: comprobaciones detalladas de interacción, formularios, contenido y rendimiento, adaptadas de las Pautas de interfaz web de Vercel.
• references/ship-checklist.md: SEO, vista previa social, RSS, análisis, hosting.
• references/lessons.md: errores y consejos de verificación en navegadores de proyectos reales.
• references/templates.md: mediciones de 10 plantillas de páginas de aterrizaje de Carrd (citadas por el número de plantilla de Carrd, ej. #304). Datos de referencia para calibrar tu ojo, no reglas.

1. Flujo de trabajo

1. Entiende el trabajo. De quién es el sitio, para quién, lo único que un visitante debe hacer o aprender, las páginas necesarias y qué significa "terminado". Pregunta cuándo la respuesta cambia la construcción: el dominio final, si rastrear visitantes, quién es dueño del texto y si hay contenido existente (publicaciones, proyectos) que incorporar.
2. Establece la dirección (§2) y escríbela: tokens de color, un emparejamiento tipográfico, una escala de espaciado y radio, y una personalidad de movimiento, en las notas del proyecto (CLAUDE.md, AGENTS.md o README) para que las sesiones posteriores sean consistentes.
3. Configura las piezas compartidas (§3) antes de la primera página: tokens, estilos base, primitivas de diseño, componentes y una fuente única para el encabezado, pie de página y <head>. Cada página, incluida la primera, se construye a partir de estos.
4. Texto real primero. El texto de marcador de posición oculta los problemas de diseño. Sigue la receta de la página (§4).
5. Construye estático, responsivo y accesible, luego añade movimiento, luego pule.
6. Despliega (§11), verifica en un navegador (§12), luego haz la pasada de moderación (§13).
7. Itera en pasos pequeños y visibles. Un cambio a la vez, míralo, pide decisiones de gusto en lugar de adivinar, di claramente qué se verificó y qué no, y solo confirma o publica cuando te lo pidan.

2. Elige una dirección

Lo mínimo es la opción predeterminada: contenido primero, un acento, espacio generoso, líneas finas en lugar de cajas, movimiento sutil. Cada elemento debe tener significado; la decoración que no lo tiene se elimina.

Familia	Aspecto	Tiende a encajar
Luz tranquila	Casi blanco, sans neutro, divisores de línea fina, un acento nítido	Sitios personales, blogs, escritura
Oscuro tranquilo	Casi negro, tipo grande de peso ligero, un acento, una monoespaciada para metadatos	Sitios de ingeniería y personales, lanzamientos
Editorial	Serif para pantalla o cuerpo, medida generosa, botones delineados	Escritura de formato largo, libros, cultura; puede parecer anticuado para audiencias técnicas, así que muéstralo en vivo primero
Resplandor suave	Base tranquila más un gradiente sutil o resplandor radial, opcionalmente superficie escarchada	Páginas de aterrizaje que necesitan algo de calidez
Un bloque audaz	Base tranquila más un bloque de color a sangre o una foto enmarcada	Portafolios, eventos, marcas personales

• El tono vence a la novedad. Un tema serio quiere calma y credibilidad; las fuentes divertidas y los efectos llamativos generalmente son rechazados allí.
• Iguala las convenciones de la audiencia. Las audiencias técnicas tienden a esperar un sans neutro sobre casi blanco o casi negro con un acento nítido; otras audiencias tienen las suyas propias. Al proponer varias direcciones, haz que difieran en el diseño y las superficies (página de lista, división pegajosa, cuadrícula de tarjetas, un bloque de color), no solo en la fuente y el color del papel, para que el usuario elija entre alternativas reales.
• Cuando se desconoce el gusto, pruébalo en vivo. Cambia la fuente, el acento o el espaciado en la página real y deja que el usuario reaccione. Espera algunas rondas.
• El gusto del usuario prevalece sobre esta guía. Una vez que acepte o rechace una dirección, escríbela en las notas del proyecto y síguela por encima de cualquier valor predeterminado aquí.

3. Estilos y componentes compartidos

Una segunda página debe verse como la primera porque está construida a partir de las mismas piezas, no porque los estilos se hayan copiado.

• Una fuente para tokens. Los colores, la escala tipográfica, el espaciado, los radios, las sombras y los tiempos de movimiento son propiedades personalizadas en un solo archivo. Las páginas y los componentes usan tokens, nunca valores sin procesar: un código hexadecimal o un tamaño de píxel único en los estilos de una página es un error que debe corregirse.
• Diseña componentes, no páginas. .btn, .card, .field, .prose, .post-list, .site-header, no .about .blue-box. Las variantes son modificadores (.btn--outline), nunca copias editadas. Los estilos de página solo organizan componentes y se mantienen breves.
• Capas CSS: tokens → base → primitivas de diseño → componentes → organización de página, declarados con @layer para que una regla de página no pueda superar silenciosamente a un componente (ver fragmentos).
• Escribe la interfaz compartida una vez. El encabezado, la navegación, el pie de página, <head> y el script del sitio provienen de una sola fuente: los includes, parciales o plantillas del proyecto, o un pequeño script de compilación. Los encabezados copiados a mano se desvían; si es inevitable copiar en un sitio de dos páginas, dilo y vuelve a verificar cada copia después de cada cambio. Marca la página actual en la navegación con aria-current="page".
• Comportamiento mediante marcado. Un script del sitio maneja las revelaciones y divulgaciones a través de atributos y clases de datos, por lo que una nueva página los obtiene sin JavaScript por página.
• Mantén un inventario. Enumera los componentes en las notas del proyecto (nombre, propósito, variantes). En una página nueva, reutiliza primero; cualquier cosa nueva va a los archivos compartidos y a la lista, no a la página. Un styleguide.html que muestre cada componente en cada estado y tema es una verificación rápida después de los cambios.
• ¿Solo una página hoy? Separa los tokens y los componentes de los estilos de página de todos modos; la siguiente página será ensamblaje.

4. Recetas de página

Página de aterrizaje

• Hero: un titular, una oración de introducción, la acción principal (o el propio formulario de registro) en el primer viewport.
• Luego secciones que responden las preguntas del visitante en orden: qué es, cómo funciona (pasos numerados más una imagen pequeña), prueba (citas cortas, logotipos, números que sean reales), preguntas frecuentes, pie de página.
• No repitas el argumento: si el hero contiene el formulario, un bloque final que lo repita no añade nada.

Sitio personal / portafolio

• Nombre y una línea sobre lo que hace la persona, luego secciones cortas: trabajo o proyectos, escritura, acerca de, contacto.
• Las listas con líneas finas superan a las cuadrículas de tarjetas para proyectos y publicaciones; una foto enmarcada es suficiente imágenes.
• El contacto es un enlace simple (correo electrónico, perfiles), no un formulario, a menos que el usuario pida uno.

Índice de blog

• Una lista, no tarjetas: título, fecha (<time datetime>), opcionalmente un resumen de una línea. Agrupa por año una vez que haya muchas publicaciones. La fila completa es el enlace, sin zonas muertas.
• Sin miniaturas genéricas. La paginación o una sola página larga funcionan; di cuál en las notas.

Entrada de blog

• Una columna de lectura de aproximadamente 60–72 caracteres, cuerpo de 17–19px con una altura de línea de 1.6–1.75 (§5).
• Título, fecha y tiempo de lectura opcional en la parte superior; encabezados con anclas y scroll-margin-top; una tabla de contenido solo para publicaciones largas.
• Las figuras con pies de foto pueden romper más anchas que el texto; los bloques de código se desplazan dentro de sí mismos, nunca la página.
• Termina con un siguiente paso: publicaciones anteriores/siguientes o una lista corta de más, más el enlace RSS.

Compartido entre tipos

• Encabezado: una navegación o nada. Un solo botón solitario frente a la marca se ve inacabado.
• Pie de página en la parte inferior, también en páginas cortas (columna flex de altura completa), sin margen sobrante debajo.
• Diseña cada estado: vacío (aún sin publicaciones), títulos muy largos, imágenes faltantes, una página 404 con el aspecto del sitio.

5. Tipografía

• Una o dos familias: una cara de cuerpo neutra (una pila del sistema está bien) más como máximo una cara de pantalla. Una monoespaciada para fechas, código y metadatos es una tercera cara solo si se lo gana.
• Los encabezados se ven modernos, grandes, ligeros y con seguimiento ajustado: aproximadamente 40–72px para el héroe, peso 300–500, interletraje −0.02 a −0.05em para neo-grotesk, altura de línea 1.1–1.25, tamaño con clamp().
• Encabezados de sección en una página corta (sitio personal, índice de blog): aproximadamente 1.25× el cuerpo (≈20px), seminegrita, en el color del texto. Las etiquetas tenues en mayúsculas son demasiado débiles; los tamaños de pantalla compiten con el héroe.
• Texto de lectura. 17–19px, altura de línea 1.6–1.75, medida de 60–72 caracteres, párrafos espaciados por aproximadamente 1em. El texto secundario usa un color apagado, no un tamaño más pequeño.
• Líneas ordenadas: text-wrap: balance en encabezados, text-wrap: pretty en párrafos para evitar palabras huérfanas.
• Detalles tipográficos: comillas curvadas (“ ”), el carácter de puntos suspensivos (…), un espacio de no separación entre un número y su unidad (10 MB), tabular-nums para fechas y cifras en listas. Marca los nombres de marcas y productos con translate="no" para que la traducción del navegador los deje intactos.
• Marca de palabra: lo suficientemente grande para mantenerse junto a los encabezados de sección (a menudo 1.2–1.6×); un contraste de peso dentro de una palabra (ligero + extranegrita) añade carácter de manera económica.
• Texto justificado solo con lang configurado y hyphens: auto, y nunca en columnas estrechas.

6. Color y superficies

• Tokens en :root: fondo, superficie, texto, apagado, color de línea fina, un acento (opcional segundo punto de gradiente) y un color sobre acento.
• Contraste (Firme). Texto del cuerpo al menos 4.5:1 (WCAG 2) en la superficie real, verificado en el punto más claro de superficies translúcidas o degradadas. El tipo de pantalla de peso ligero necesita más. APCA es una segunda opinión útil para tipos delgados, no un reemplazo. Siempre establece colores de enlace; el azul predeterminado del navegador se ve mal en casi todos los diseños.
• Acento para unas pocas marcas pequeñas: una palabra en un titular, enlaces, hover y foco, el elemento de navegación actual. No un gran bloque de color, y no para numeración de listas.
• Superficies: planas con líneas finas por defecto. Las sombras, cuando se usan, tienen dos capas (ambiente suave más una directa más ajustada); los bordes pueden ser semitransparentes para que los bordes se mantengan nítidos en cualquier fondo. Los radios internos nunca son más grandes que los de su contenedor. Sobre un fondo de color, tiñe los bordes y las sombras hacia su tono.
• Hover y foco aumentan el contraste con respecto al estado de reposo.
• Claro, oscuro o ambos. Decide temprano. Un esquema fijo está bien: establece color-scheme y theme-color para que coincidan. Para ambos, redefine los mismos tokens bajo prefers-color-scheme: dark (además de una anulación [data-theme] si hay un interruptor) y verifica el contraste, las sombras, las imágenes y los bloques de código en cada uno.
• Fondos: sólidos, o un gradiente o resplandor suave; un patrón solo con un contraste ≤10%. Nunca dos cosas ruidosas.

7. Movimiento

El movimiento debe ayudar a alguien a ver qué cambió o hacia dónde mirar. En estos sitios, menos suele ser mejor.

• Predeterminado: una breve aparición del contenido principal al cargar (unos pocos píxeles de elevación) y retroalimentación de hover/foco. Una página con solo esto es un resultado completo y tranquilo.
• Las revelaciones de desplazamiento son opcionales y se mantienen sutiles: opacidad más 6–20px de movimiento, ease, 0.3–1s, se reproducen una vez aproximadamente al 25% de visibilidad. Cascada por distancia (el encabezado se mueve menos, los botones más); escalonamiento de 100–150ms, máximo 6–8 elementos. Nunca en contenido de lectura de formato largo.
• CSS primero, luego la API de animaciones web, luego una biblioteca JavaScript solo si es realmente necesario.
• Anima solo opacity y transform, lista las propiedades de transición explícitamente (nunca transition: all), y establece transform-origin donde el movimiento comienza físicamente. Para SVG, anima un <g> con transform-box: fill-box.
• Interrumpible: transiciones, no líneas de tiempo fijas, para que un hover-out o un segundo clic se invierta suavemente.
• Hover/foco: los botones escalan aproximadamente 1.02–1.06 o se elevan; los enlaces de navegación y texto obtienen un subrayado de 2px que se desliza desde la izquierda, también en :focus-visible.
• Movimiento ambiental: como máximo un bucle lento, o ninguno. Los medios en bucle son un <video> silenciado, no un GIF, y el movimiento de más de 5 segundos necesita un control de pausa.
• Parpadeo de vidrio (Chrome): no desvanezcas los hijos de un elemento backdrop-filter ni animes su desenfoque (ver lecciones).

8. Patrones de interacción

• Los enlaces son enlaces. La navegación usa <a> para que funcionen nueva pestaña, copiar enlace y clic central. Sin zonas muertas: si una fila parece cliqueable, toda ella lo es.
• Formularios (registro, contacto): cada campo etiquetado; type, name, autocomplete e inputmode correctos; spellcheck desactivado para correos electrónicos; validación nativa primero. No bloquees pegar ni pulsaciones de teclas, y no desactives el envío antes de que el usuario lo intente. Los errores se sitúan junto al campo, dicen cómo solucionar el problema, y el foco se mueve al primer error al enviar. Más en la lista de verificación de la interfaz.
• Envío: el botón mantiene su etiqueta y gana un spinner, que se muestra solo después de ~200ms y luego durante al menos ~400ms para que las respuestas rápidas no parpadeen (ver fragmentos). El éxito reemplaza el formulario con un siguiente paso claro.
• Divulgaciones (FAQ, "mostrar más"): un <button aria-expanded aria-controls>, animado con el truco de grid-rows, estado cerrado solo cuando se ejecuta JavaScript.
• Ayuda en línea sobre tooltips. Explica en el texto primero. Si se necesita un tooltip, nunca confíes en title; usa uno personalizado en hover y foco, con un breve retraso antes del primero y ninguno al moverse entre vecinos.
• Copia: di lo que la página ofrece en las palabras del visitante; los botones dicen exactamente lo que hacen ("Obtén el boletín", no "Enviar"); los mensajes de error dicen cómo recuperarse.

9. Línea de base de calidad (Firme)

• Movimiento reducido: con prefers-reduced-motion: reduce, las revelaciones se muestran instantáneamente y los bucles y el desplazamiento suave están desactivados.
• Seguro sin JavaScript: los estados ocultos hasta la revelación viven detrás de una clase .js, para que nada permanezca invisible si JavaScript falla.
• Teclado y foco: un enlace "Saltar al contenido", niveles de encabezado lógicos,

…

[truncado para la traducción]