Sistema de Diseño Web
Universidad del Valle

Referencia visual completa de componentes, tipografía, colores y patrones de interfaz basada en la identidad institucional.

Sobre esta guía

Esta guía documenta todos los elementos de interfaz disponibles para el desarrollo de sitios web institucionales. Cada componente se muestra en vivo acompañado de su código HTML/CSS listo para copiar.

Todos los componentes cumplen WCAG 2.2 nivel AA.
Tipografía System-UI — nativa del sistema operativo, sin dependencias externas.
Íconos SVG monocromáticos con currentColor — accesibles en cualquier contexto de color.
Compatible con todos los navegadores modernos.

Inicio rápido

HTML — Estructura base

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Contenido -->
  <script src="script.js"></script>
</body>
</html>