Guía de estilo

Un tamaño, un peso.

La jerarquía sale de la posición en la retícula, las mayúsculas y el color, nunca de la escala.

El texto es la interfaz.

Cada control es una palabra: sin botones con relleno o borde, sin iconos. Los únicos signos son + (girado 45° para Cerrar), ×, ↗, ↑, ⌘K.

Claro, con el color de los proyectos.

Fondo blanco, texto negro, un gris, un azul y un gris de filete. El resto del color viene de las imágenes de los proyectos.

Todo empieza en el borde de una columna.

Los cinco bloques de la cabecera son las columnas maestras de toda la web.

El movimiento tiene dos curvas.

Reveal, para máscaras y diapositivas; settle, para entradas y zoom.

El hover es una mejora.

Los efectos de hover solo existen en dispositivos que pueden hacer hover; el foco del teclado los replica donde aportan significado.

Familia

Geist Mono, regular, alojada en la web y reducida (latín, Latin-1, Ŀŀ ıŒœ €™ y flechas)

--font-primary · /fonts/GeistMono-Regular.woff2, preload, font-display: swap

Tamaño / interlineado

12px / 16px, en todas partes

--text-base / --text-base--line-height

Peso / espaciado

400 / 0

Corte de línea

text-wrap: pretty en todo

body

Alternativa

ui-monospace, monospace (también cubre los signos fuera del subset, como el japonés)

--font-primary

MAYÚSCULAS

El logo, los nombres de proyecto (siempre: lista, tarjetas, pie, título del proyecto en móvil), los códigos de idioma y la página de error.

Tipo frase

Todo lo demás: textos de la cabecera, cuerpo, etiquetas, créditos y controles.

Saltos de línea

Se respetan donde el campo del CMS los permite: lema, dirección y stack.

whitespace-pre-line

Recorte

UNA SOLA LÍNEA Y PUNTOS SUSPENSIVOS EN LA LISTA

Nombres y créditos de las filas de la lista en escritorio, y nombres de las tarjetas. El crédito que aparece al pasar sobre una tarjeta se muestra entero.

Activo

Azul: la página actual en el menú principal, el idioma activo y la palabra activa del cambio de vista del Archivo. En la home el idioma activo se queda en blanco.

Inactivo

Mute: idiomas inactivos, la palabra de vista inactiva y el resto de páginas en el menú móvil. Nunca se usa opacidad para los estados inactivos.

Inactivo → hover

Pasa al color del texto que lo rodea: negro sobre blanco, blanco en la home. Los botones de texto pasan de Mute a negro.

Hover de enlace

Negro → azul, 150ms por defecto o 200ms donde se indica.

Atenuado

Opacidad 0,2, solo para mandar el contexto al fondo: las filas de la lista que no están en hover, y la página del proyecto y el bloque 2 de la cabecera detrás de Más proyectos.

Imagen ausente

Un bloque negro. Todo marco de imagen tiene fondo negro.

Selección

Fondo azul, texto blanco.

Fondos

Home: negro. El resto de páginas: blanco. El fondo cambia de color durante la transición de página, nunca de golpe.

Sobre imagen

Solo en la home. Degradado superior de 180px, rgba(0,0,0,.32) → transparente. Degradado inferior de 200px, transparente → rgba(0,0,0,.36). Las etiquetas sobre imagen del resto de la web usan un bloque blanco tras el texto negro, nunca un velo.

Enlace de texto

Negro → azul en hover. Página actual en azul. Los enlaces externos se abren en otra pestaña; en los menús del footer llevan ↗ a la derecha.

CommonLink · CommonHeaderNavLink

Enlace en el texto

Azul y siempre subrayado en el texto corrido. Los enlaces azules sueltos (la URL del proyecto, “Ver programa ↗”) solo se subrayan en hover.

CommonContentLink

Enlace suelto

Subrayado solo en hover.

Botón de texto

Mute → negro en hover, 200ms. La palabra de vista inactiva, “× Borrar” y “Borrar búsqueda”.

CommonTextButton

Cerrar

+ girado 45° y “Cerrar”. Negro, azul en hover. Proyecto, menú móvil, Más proyectos y ajustes de cookies.

CommonCloseLabel

Selector de idioma

En mayúsculas, separados por un espacio. Activo en azul (blanco en la home), inactivo en Mute, en hover pasa al color que lo rodea. Cada enlace lleva lang y hreflang.

I18nSwitcher

Créditos

En la página del proyecto, “en colaboración con Y” va en su propia línea. Los colaboradores con web enlazan a ella (Mute → azul, en otra pestaña). Las categorías se leen “Tipo, Sector”. Los campos vacíos se omiten, nunca se sustituyen por un guion.

ProjectCollaborators

Fila de tabla

Filete de 1px arriba y 8px de relleno vertical. Sobre mí (servicios, colaboradores, docencia) y los menús del footer. Cada fila de esta página es una.

Banner de cookies

A todo el ancho con los márgenes de 20px, blanco, filete arriba, 20px de relleno vertical y sin sombra. El interruptor de analíticas está en No por defecto; la palabra actual va en negro. “Configuración” pasa a “× Cerrar” y “Aceptar” pasa a “Guardar preferencias” cuando cambia el interruptor. Nunca es más alto que la pantalla: solo hace scroll la lista de ajustes, sin barra visible. Móvil: etiqueta, texto y las tres acciones a dos columnas cada una.

CommonCookieBanner

Footer

Cierra el Archivo, Sobre mí y las legales; nunca la home ni un proyecto. El footer de esta página es el ejemplo. Móvil: todo apilado en 1–6, los dos menús se leen como una sola tabla, 32px entre filas, “Última actualización” en 1–4 y “Arriba ↑” en 5–6.

CommonFooter · CommonLastUpdated

Home

Pantalla completa, sin scroll, fondo negro, un proyecto destacado por gesto. Imagen a todo el ancho de las columnas 3–10 en escritorio y 1–6 en móvil, en su proporción original (sin recortar). Detrás, una copia desenfocada a sangre (120%, desenfoque de 60px, brillo 0,8). Pie a 20px del borde inferior, en blanco.

HomeFeaturedProjects · HomeProjectCaption · CommonMediaBlur

Archivo

Los controles en el bloque 2 de la cabecera; la cuadrícula (por defecto) o la lista. Búsqueda sin resultados: “Ningún proyecto coincide con “búsqueda”.” en Mute y luego “Borrar búsqueda”.

Proyecto

En escritorio la página no se mueve. Texto en 3–5: descripción; créditos, categorías (enlaces, una por línea) y stack en Mute; grupos a 24px; URL, sin etiqueta, anclada abajo. Galería en 7–12, un bucle vertical infinito que se mueve con la rueda desde cualquier punto. Año en Mute bajo el NOMBRE. Móvil: una columna, el NOMBRE y el año arriba y la galería debajo, sin bucle. Cerrar vuelve al Archivo con su búsqueda y su vista.

ProjectGalleryFrame

Más proyectos

“+ Más proyectos” fijo a 20px de la esquina inferior izquierda (sobre un bloque blanco en móvil), “+ Cerrar” mientras está abierto. Carrusel a 52px del borde inferior: 3 tarjetas visibles en escritorio y 2 en móvil, en bucle infinito a partir del siguiente proyecto. La página y el bloque 2 se atenúan a 0,2. Se cierra con Cerrar, Esc o un clic en la página atenuada.

ProjectMoreProjects

Sobre mí

Etiqueta en Mute en 1–2 y el contenido al lado; secciones a 96px (48px en móvil). Intro en 3–6 y retrato 4:3 en 9–12. Las filas de servicios alternan 4 y 6 columnas de ancho. Colaboración: todos los colaboradores, por orden alfabético, en 4 columnas, con un recuento de dos cifras en Mute que enlaza al Archivo filtrado; los que no tienen proyectos van en Mute, sin enlace. Biografía en 3–6. Docencia: una tabla de definiciones y luego “Ver programa ↗”. Contacto en 3–6 y la dirección en Mute en 9–10.

Legales

Texto corrido en 3–6: solo párrafos, listas y enlaces en el texto. Escritorio: título y “Última actualización” en el bloque 2 de la cabecera. Móvil: abren el contenido y el texto va 48px por debajo.

Error

Sin cabecera ni footer. Centrado y en mayúsculas. El enlace mantiene el idioma de la visita. Otros errores: “Lo sentimos, algo ha fallado. Vuelve a intentarlo más tarde.”

Home

Un proyecto por gesto: rueda o deslizamiento vertical de más de 30px (el gesto termina tras 160ms de pausa), o ↑ ↓ ← →.

Archivo

⌘K / Ctrl+K lleva el foco a la búsqueda (no si hay un diálogo abierto); Esc la borra y sale.

Proyecto

La rueda mueve la galería desde cualquier punto (escritorio). Esc cierra Más proyectos y luego el proyecto.

Más proyectos

La rueda vertical mueve el carrusel en horizontal. Al abrir, el foco va a la primera tarjeta real, y al cerrar vuelve al botón.

Táctil / sin hover

Sin atenuación ni vista previa en la lista, sin zoom ni crédito en las tarjetas.

URLs

/, /archive/, /about/, /archive/{slug}/, /legal/{slug}/, traducidas bajo /es/ y /ca/ (por ejemplo, /es/archivo/). La búsqueda y la vista no van en la URL; el botón Atrás funciona.

Enlaces cruzados

Una categoría en un proyecto, o un colaborador en Sobre mí, abre el Archivo con la búsqueda puesta.

Contraste

Todo el texto cumple WCAG AA (Mute 4,54:1 sobre blanco y 4,6:1 sobre negro). El azul nunca es texto sobre negro. El gris de filete nunca es texto.

Enlaces

Los enlaces en el texto van subrayados; dentro del texto corrido el color nunca es la única pista.

Semántica

nav para los menús, dialog para el menú móvil, time con datetime para años y fechas, dl para la docencia y role="switch" para los interruptores de cookies.

Encabezados

Un h1 por página: el nombre de la web en la home, oculto visualmente donde la cabecera ya muestra el título.

Oculto pero presente

La interfaz plegada o fuera de pantalla es inert (los ajustes de cookies y el carrusel cerrados). Las imágenes decorativas llevan alt="" o aria-hidden. Los pies ocultos de la home siguen siendo legibles.

Texto alternativo

Desde el CMS; si no hay, el título del proyecto en las galerías y la home, el nombre en el retrato de About y, en último caso, el nombre del archivo.

Foco

El menú móvil enfoca Cerrar; los ajustes de cookies, el primer interruptor (sin hacer scroll); Más proyectos, su primera tarjeta; Volver arriba, el primer enlace.

Regiones vivas

El recuento del Archivo se anuncia a medida que cambia la búsqueda.

Paridad con el teclado

Las vistas previas de la lista y las tarjetas reaccionan al foco igual que al hover.

Idioma

<html lang> sigue el idioma; los enlaces de idioma llevan lang y hreflang.

--font-primary

fuente

Geist Mono, ui-monospace, monospace

--text-base, --text-base--line-height

tipografía

12px / 16px

--color-black · white · gray · gray-light · blue

color

#000 · #FFF · #767676 · #E6E6E6 · #0000EE

--ease-reveal, --ease-settle

curva

cubic-bezier(0.76,0,0.24,1) · cubic-bezier(0.2,0.7,0.2,1)

--page-transition-duration

duración

300ms

--page-content-top

maquetación

172px / 32vh

--header-height

maquetación (en ejecución)

Altura medida de la cabecera

--spacing-content-top

espaciado

24vh, desplazamiento del contenido del menú móvil

container

utilidad

Ancho máximo 100%, 20px de relleno lateral

main-grid

utilidad

6 / 12 columnas, separación de 10px

main-gap

utilidad

Separación de 10px

pt-page-content

utilidad

Inicio del contenido menos la altura de la cabecera

clip-to-top, clip-to-bottom, clip-none

utilidad

Estados de la máscara

stagger-rise

utilidad

Los hijos suben por turnos (--stagger-*; --index o su posición entre hermanos; data-own-entrance los excluye)

scrollbar-none

utilidad

Scroll sin barra visible

scripted:

variante

Solo se aplica cuando se ejecuta JavaScript

can-hover:

variante

Solo se aplica en dispositivos con hover