Colores y Tipografía
La paleta institucional de la Universidad del Valle y la escala tipográfica base para todos los productos digitales.
Colores institucionales
Colores propios de la identidad de la Universidad del Valle. Usar con cuidado verificando el contraste sobre el fondo elegido.
Colores semánticos
Basados en Bootstrap pero con ajuste de contraste para cumplir WCAG 2.2 nivel AA.
:root {{
/* Institucionales */
--marca: #95042d;
--marca-claro: #c4627a;
--marca-oscuro: #6b0020;
--marca-web: #b5003a;
/* Semánticos (ajustados para WCAG AA) */
--primary: #0d47a1;
--secondary: #455a64;
--success: #1b5e20;
--danger: #b71c1c;
--warning: #e65100;
--info: #01579b;
}}Tipografía
La guía usa System-UI — la fuente nativa del sistema operativo del usuario. Sin dependencias externas, carga instantánea.
:root {{
--font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}}
body {{
font-family: var(--font);
font-size: 1rem; /* 16px */
line-height: 1.75;
color: #333333;
}}
h1 {{ font-size: 2rem; font-weight: 700; }}
h2 {{ font-size: 1.5rem; font-weight: 700; }}
h3 {{ font-size: 1.25rem; font-weight: 700; }}
.lead {{ font-size: 1.1rem; color: #555566; }}Elementos de texto en línea
strong — Texto en negrita con color primario
em — Texto en cursiva para énfasis semántico
mark — Texto resaltado / marcado
del — Texto tachado (eliminado)
u — Subrayado (usar solo si no es enlace)
small — Texto pequeño
code — Código en línea
"La educación es el arma más poderosa que puedes usar para cambiar el mundo."
<strong>Negrita semántica</strong>
<em>Cursiva semántica</em>
<mark>Texto resaltado</mark>
<del>Texto eliminado</del>
<small>Texto pequeño</small>
<code>codigo-inline()</code>
<blockquote>
<p>Cita textual importante.</p>
<footer>— Autor de la cita</footer>
</blockquote>