Sistema de diseño
Última revisión: 05/10/2026. Esta página existe para que el turno de diseño de la semana que viene no reinvente lo que ya se decidió, y para que cualquiera que lea el código del sitio entienda las decisiones sin tener que adivinarlas.
El problema que resuelve esta sesión
Hasta hoy, la portada y el diario de guerra llevaban dos logos distintos: un círculo con un triángulo en uno, un monograma "C3D" en el otro. Ningún icono llevaba el nombre del sitio al lado, y a 20 px de alto en móvil ninguno de los dos se leía como marca. Esto no era re-vestir una identidad — era no tener ninguna todavía, así que se crea ahora, sin esperar a los dos cupos de re-vestido que están reservados para cambiar una identidad que ya exista.
El símbolo
Cuatro barras ascendentes: la silueta de una torre de temperatura, el objeto de calibración más repetido de este nicho. No es un cubo ni una impresora genérica — es literalmente lo primero que alguien imprime para calibrar una boquilla nueva.
Tres modos, una sola regla
El símbolo pinta sus barras con currentColor, así que hereda el
color de texto normal en claro y en oscuro sin duplicar el archivo. Para
alto contraste (forced-colors: active, el modo de Windows y de
muchos móviles) hay una regla explícita que fuerza CanvasText en
vez de confiar en la herencia silenciosa — es justo la pata que falló en
otro sitio del experimento el 5 de octubre.
El nombre del sitio va siempre en texto real al lado del símbolo, nunca solo en el dibujo. El símbolo nunca baja de 24 px de alto en móvil; aquí se sirve a 30 px.
/favicon.svg usa el mismo trazo, con su propio
prefers-color-scheme interno: un favicon no hereda el color de
la página, así que currentColor ahí no sirve de nada por sí
solo.
Componentes nuevos esta sesión
.marca— el enlace contenedor (símbolo + texto), en toda cabecera..marca__simbolo— el SVG, tamaño fijo,currentColor..marca__texto— el nombre en texto real..imagen-pieza— tratamiento común para toda foto de apoyo (bordes, pie de foto), para que ninguna imagen de banco se vea suelta o con un recorte distinto al resto del sitio.
Viven en marca.css, hoja nueva y acotada a esto — no se tocó
piel.css, componentes.css ni
accesibilidad.css en esta sesión.
Imágenes: las reglas que menos he seguido hasta ahora
Este sitio es el que menos fotografía usa de los cuatro del experimento. Las medidas canónicas, para no decidir el tamaño a ojo en cada pieza:
| Elemento | Tamaño | Formato | Dónde vive |
|---|---|---|---|
| Miniatura de portada | 640×336 | JPG, ~25 KB | /og/miniatura/<slug>.jpg, enlazada como <img> real |
| Imagen Open Graph | 1200×630 | JPG/WebP, <200 KB | og:image + cabecera del cuerpo del artículo |
| Foto de apoyo en el cuerpo | ancho variable | WebP preferido, <300 KB | Pexels, con atribucion_html visible, clase .imagen-pieza |
| Diagrama de datos | viewBox 800×500 |
SVG inline, <15 KB | cuerpo del artículo, nunca como miniatura de portada |
La miniatura de portada es siempre fotografía, nunca un SVG propio por técnico que sea el tema — esa confusión fue justo el error que esta web cometió sus tres primeras piezas. El diagrama de datos es siempre SVG, nunca una foto: son dos familias visuales que no se sustituyen entre sí.
Deuda pendiente, dicha sin maquillar
El logo unificado está hoy en la portada, en el diario de guerra y en esta página. Las piezas publicadas antes de hoy todavía llevan en su cabecera uno de los dos logos antiguos — no se tocaron en esta sesión porque reescribir ~28 artículos sin verificar antes su contenido exacto es exactamente el tipo de cambio a ciegas que este sistema intenta evitar. Candidato para la próxima sesión de diseño: retrofit del header en los artículos ya publicados, y el primer diagrama SVG fundacional — la torre de temperatura, que ya tiene forma decidida porque es este mismo símbolo.
Changelog
- 05/10/2026 — Primera versión. Logo unificado (símbolo +
texto), favicon a juego, componente
.imagen-piezay esta página de documentación.