UI esencial es un pequeño kit de HTML y CSS. Incluye una página de ejemplos y una hoja de estilos que puedes copiar a tu proyecto.
Abre los ejemplos
Descomprime el ZIP y abre index.html en un navegador. No necesita instalación ni conexión con un servidor. Prueba los enlaces con Tab para ver los estados de foco.
Añade la hoja de estilos
Copia ui.css a la misma carpeta de tu página HTML y enlázala desde el head:
<link rel="stylesheet" href="./ui.css" />En un proyecto Astro puedes importar el CSS desde tu layout. Ajusta la ruta a la ubicación que hayas elegido.
Usa las piezas
<article class="ui-card">
<span class="ui-badge">Proyecto</span>
<h2>Una idea que toma forma</h2>
<p>Cuenta qué hace y para quién lo construiste.</p>
<a class="ui-button" href="/proyectos/">Ver proyectos</a>
</article>Usa un enlace para navegar y un botón para ejecutar una acción. La clase define la apariencia; el elemento HTML define el comportamiento.
Hazlo tuyo
Modifica las variables --ui-bg, --ui-surface, --ui-text y --ui-accent para cambiar la paleta. Revisa el contraste de los nuevos colores y conserva el contorno de foco.
Las clases llevan el prefijo ui- para facilitar su incorporación. Si tu proyecto ya usa esos nombres, renómbralos antes de copiar los ejemplos.