Pie

Pie oscuro con la marca y su lema, la navegación de la página, el contacto, el idioma y los enlaces legales.

Ejemplo

Textos del diccionario en español de producción. El selector de idioma se omite (pendiente de su propia ficha).

html · landing

<footer class="site-footer">
  <div class="wrap footer-inner">
    <div class="footer-brand">
      <a class="wordmark" href="#"><span>designloop</span></a>
      <p>Diseño por suscripción para fundadores y equipos.</p>
    </div>
    <nav class="footer-nav" aria-label="Pie">
      <a href="#">Plan</a>
      <a href="#">Cómo funciona</a>
      <a href="#">Qué incluye</a>
      <a href="#">Preguntas</a>
    </nav>
    <div class="footer-contact">
      <a href="#">hola@designloop.app</a>
      <a href="#">Reservar llamada</a>
    </div>
    <div class="footer-meta">
      <nav class="footer-legal" aria-label="Legal">
        <a href="#">Condiciones</a>
        <a href="#">Privacidad</a>
      </nav>
    </div>
  </div>
</footer>

Piezas

Clase	Qué hace
`.site-footer`	Fondo `--night`, texto claro, 64 px arriba y 40 px abajo.
`.footer-inner`	Cuatro columnas (2:1:1:1); dos en tableta y una en móvil.
`.footer-brand`	Logotipo a 32 px en `--paper` y lema en `--text-sm`.
`.footer-nav`, `.footer-contact`	Listas de enlaces en `--text-sm` que se aclaran a `--paper` al pasar el ratón.
`.footer-meta`	Idioma, enlaces legales y copyright, alineados a la derecha (a la izquierda en móvil).
`.footer-legal`	Enlaces legales en línea con 16 px de separación; al pasar el ratón se aclaran a `--paper`, como el resto del pie.

Reglas

Regla	Cómo se comprueba
La navegación del pie repite las anclas de la cabecera.	`navPricing`, `navHow`, `navIncluded`, `navFaq`.
El contacto ofrece las dos vías: correo y llamada.	`.footer-contact` con `mailto:` y el enlace de reserva.
Los enlaces legales llevan el idioma activo.	`?lang=` en `/condiciones` y `/privacidad`.
Cada grupo de enlaces es un `<nav>` con `aria-label`.	«Footer» y «Legal» en producción.

Diferencias observadas

Los grises del pie son literales (#d8d6cf, #9c9a92, #c9c7bf, #8a8880), no tokens. Candidatos a tokens de superficie oscura.

Tokens que usa

--night--paper--text-sm--dur-micro

Enlace con producción

Superficie	Fuente	Estado	Huella	Revisada en
Landing	public/site/styles.css .site-footer .footer-inner .footer-brand .footer-nav .footer-contact .footer-meta .footer-legal El archivo no existe en producción.	No está en producción	—	—

Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.

Aviso: Clases de los ejemplos que no existen: site-footer, wrap, footer-inner, footer-brand, wordmark, footer-nav, footer-contact, footer-meta, footer-legal

Aviso: Colores que no existen en producción: #d8d6cf, #9c9a92, #c9c7bf, #8a8880

Relacionados

patrones/pie · Actualizado el 2026-10-11