Sistema de diseño
Design System
El esqueleto compartido por todas las páginas del sitio: rejilla, tokens de layout, ritmo vertical, jerarquía tipográfica y comportamiento en claro y oscuro. No define el contenido de ninguna sección — define cómo respira todo lo que va dentro. Es el criterio interno con el que se construye y se audita.
Rejilla de página
Contenedor amplio para maquetación; medida de lectura estrecha para el texto corrido.
Contenedor
Máximo 1360px, centrado. Por encima de xl los márgenes crecen; nunca se estira el contenido.
Márgenes (page-x)
clamp(1.25rem, 5vw, 2.5rem) — 20px en móvil, hasta 40px en escritorio.
Medida de lectura
El texto corrido nunca supera 42rem (~91 car.) aunque el contenedor sea ancho. La medida clásica cómoda va de 45 a 75 caracteres, así que 91 queda por encima — decisión consciente de contenedor amplio, no descuido.
Tokens de layout
La aportación propia de esta página. No existen en ningún otro sitio del sistema y pasan al repositorio al montar la web.
Fijos, no editables en producción
--section-y y --measure tienen valor fijo: clamp(4.5rem, 9vw, 9rem) y 42rem. Ya no hay panel de ajuste — el ritmo es el mismo en todo el sitio.
Definidos una sola vez
Viven en el :root del sitio junto a los tokens de color; cada página los consume. Cambiar un valor aquí lo cambia en todas partes.
Breakpoints
base0 – 639pxUna columna, todo apilado. aside encima del contenido. Tipografía en el mínimo del clamp.
sm≥ 640pxBotones y metadatos en fila; sigue una columna de contenido.
md≥ 768pxAparece la retícula aside + contenido a dos columnas. Márgenes crecen.
lg≥ 1024pxRejilla de 12 col completa; aside puede quedar sticky; grids de 3 tarjetas.
xl≥ 1280pxContenedor tope 1360px, centrado. Los márgenes absorben el ancho extra.
Coinciden con la escala de Tailwind del repo. Este documento aplica además tipografía y espaciado fluidos con clamp(): entre breakpoints el tamaño interpola de forma continua, sin saltos bruscos.
Ritmo vertical y espaciado
Escala de base 4px (Tailwind). El aire entre secciones es la herramienta principal de jerarquía.
Escala de espaciado
Ritmo entre secciones
- Entre secciones mayores: --section-y — 72px móvil → 144px escritorio.
- Título de sección → contenido: 40px (2.5rem).
- Entre bloques dentro de sección: 24–32px. Divisor hairline opcional.
- Cada sección abre con un divisor de 1px var(--border) a todo el ancho.
Jerarquía tipográfica
Bricolage Grotesque (600) para titulares · Inter para texto y UI. Tamaños fluidos: móvil = mínimo del clamp, escritorio = máximo.
Claro y oscuro
Mismo esqueleto, misma jerarquía de superficies: fondo → tarjeta → borde. Sin sombras pesadas — la profundidad la dan los hairlines y el contraste de superficie. El claro es papel cálido; el oscuro, azul profundo.
Regla de color
- primary es el único color de acción. secondary / muted / accent permanecen neutros.
- Enlaces, en dos reglas: primary para enlaces de contenido; foreground / muted-foreground para la navegación de chrome (nav, breadcrumb, footer).
- Los tonos de marca decoran o firman el logo — con una excepción: brand-purple-accent es un tono de marca usado como texto sobre fondos invertidos (AA-large, ≥3:1). Splits y pasteles, nunca como texto.
Usa el conmutador de la cabecera para ver esta misma página en ambos modos.
Movimiento
- Reveal = fundido + subida de 12px, escalonado ~60ms entre hijos.
- Movimiento sobrio: nunca compite con el contenido.
- prefers-reduced-motion: se desactivan transformaciones y auto-scroll. El contenido aparece siempre, aunque falle el JS.
Transición del nav — compartida por todo el sitio
- Símbolo 48 → 28px y barra 80 → 64px, de forma continua con el scroll.
- Las capas de color del split se extinguen antes de que el símbolo baje de 48px — nunca pasa por un estado de mala registración.
- El wordmark se desvanece en opacidad sin recortar glifos: el hueco solo se colapsa cuando ya es invisible.
- prefers-reduced-motion: salto entre estados, sin interpolar.
Es la transición que ves ahora mismo en la cabecera de esta página.
Accesibilidad
La lista con la que se cierra cada página del sitio. AA como suelo no negociable; AAA siempre que se alcance sin coste visual.
Contraste medido
Con este cambio, todos los pares de texto del sistema alcanzan AAA en claro y oscuro — ya no queda ninguno en AA. La única excepción intencionada es brand-purple-accent, que cumple solo como texto grande (≥3:1) sobre fondos invertidos, nunca como cuerpo.
Checklist de cierre
- 01
Contraste medido, con cifra, en ambos temas. AA es el suelo no negociable; AAA siempre que se alcance sin coste visual.
- 02
Foco visible: anillo de 2px con var(--ring) y offset de 2px en todo elemento interactivo. Nunca outline:none sin sustituto.
- 03
Objetivos táctiles de 44×44px como mínimo, también en controles pequeños como el breadcrumb o el toggle de tema.
- 04
Un solo h1 por página y jerarquía h2–h4 sin saltos. El orden de lectura es el orden del DOM.
- 05
Breadcrumb en toda página interna, con <nav aria-label>, lista ordenada y aria-current="page" en el nivel actual.
- 06
Nada codificado solo por color: todo estado o categoría que se distinga por color lleva además texto o forma.
- 07
prefers-reduced-motion respetado en toda animación.
- 08
Alternativas textuales: alt y etiquetas donde informan, aria-hidden en lo decorativo.
El criterio interno y las mediciones. Para quien construye o audita el sitio.
La declaración pública: el nivel que cumple el sitio y cómo reportar un problema. Para un visitante. No vive aquí.
Esqueleto navegable
Maqueta esquemática de la home con placeholders — sin contenido definido. Solo demuestra el ritmo vertical y la retícula que comparten Hero, Hitos, Cómo trabajo y el resto de secciones.
Se muestra la versión móvil. La comparativa entre Escritorio, Tablet y Móvil está disponible en pantallas anchas.