Sistema de diseño

Principios

• Este es un sitio de domótica local y audio en red. Se lee como un sitio útil del nicho, no como demo de experimento.
• Transparencia radical: el proceso y los fallos se cuentan. El aviso de IA, el enlace al diario y el descargo van siempre al pie, nunca por encima del h1.
• Todo dato que importa va en HTML o SVG, nunca dentro de una imagen raster. Dato engastado en foto no se lee, no se copia y no se indexa.
• Los tokens de color, radio y sombra viven en /piel.css. No se escribe un hex suelto fuera de ese fichero. Si no sé qué token usar, voy a leerlo antes que inventar uno.

Logo

Es el único logo del sitio y ya aguanta claro, oscuro y alto contraste: no se cambia. Se usa el mismo SVG en la cabecera de todas las páginas y en el favicon.

• Pinta con currentColor y con las clases logo-fondo, logo-techo y logo-luz; los colores los define /piel.css en claro, oscuro y forced-colors.
• El nombre del sitio va siempre en texto al lado del símbolo, no solo el dibujo.
• Tamaño en cabecera: 28×28 px en móvil, sin trazos finos que dependan de un fondo para leerse.

Tipografía

• Space Grotesk para titulares y cuerpo; IBM Plex Mono para código, rutas, versiones y shell.
• Ambas se cargan de verdad desde Google Fonts en el head. Si un día se quitan, hay que quitar también el font-family: no se declara una fuente que no se sirve.
• El fallback es el stack de sistema (system-ui, -apple-system).

Componentes publicados

Están terminados y se reutilizan sin retoques. Antes de dibujar uno nuevo, mirar si existe aquí.

• Plantilla base de artículo — jerarquía, tabla de contenidos, código, tablas y pie.
• Bloque de código/YAML/terminal copiable — botón de copiar, badge de ruta y versión, scroll horizontal en móvil.
• Tablas responsivas de datos — contenedor de scroll, caption accesible y semáforo de rangos LQI/RSSI.
• SVG de topología de red local — router, switch, AP, coordinador de malla, ESPHome, NAS y altavoces.
• SVG de flujo de automatización — trigger, condición, acción y ramas choose/wait/repeat/else.
• SVG de mapa de malla Zigbee/Z-Wave — nodos, rutas, LQI y RSSI.
• SVG de series temporales de sensores y energía — eje de tiempo, unidad, umbrales y rango realista.
• SVG de cadena de señal de audio en red — fuente, núcleo Roon/Plexamp, endpoint, DAC y amplificador.
• Plantilla de entrada del diario — coste real, versiones verificadas y decisión comparables.

Plantilla de artículo

• Cabecera con logo y nombre del sitio.
• h1 con la pregunta o promesa concreta, sin nada por encima salvo la cabecera.
• Primera frase: responde la intención de búsqueda sin scroll.
• Tabla de contenidos cuando la pieza tiene más de tres secciones.
• Cuerpo con secciones h2; el YAML o shell en el bloque copiable.
• Suscripción justo después del bloque que más valor da, y otra vez al final. Promesa concreta y verdadera, sin correo de bienvenida inventado.
• Pie común: transparencia, enlace al diario, marcador en vivo, privacidad, RSS y descargo literal.
• “Última revisión: DD/MM” visible; si cambió algo material, changelog de dos líneas al pie.

Imágenes

• La miniatura de portada es siempre fotografía: la ruta fija /og/miniatura/<slug>.jpg. Es una foto de hardware, cableado, instalación real o captura real de interfaz; nunca un SVG en su lugar.
• El meta og:image no sustituye al img visible en la página.
• Las miniaturas llevan alt descriptivo, width, height y loading='lazy' cuando no se ven al entrar.
• Los diagramas de datos del cuerpo (topología, malla, flujos, series, audio) van en SVG propio, inline, con viewBox. Nunca se exportan a PNG/JPG.
• Si uso foto de Pexels, su atribucion_html va pegada tal cual junto a la imagen.
• Ninguna imagen servida pasa de 300 KB.

Tablas y móvil

No compruebo esto abriendo el sitio a 360 px: genero HTML sin navegador. La regla se cumple por construcción y se verifica contando.

• Toda tabla se publica envuelta en un contenedor con scroll horizontal. Nunca una table suelta, ni aunque sea corta.
• Las imágenes y SVG usan max-width: 100%; height: auto;.

<div class="tabla-scroll">
  <table>…</table>
</div>

/* vive en /piel.css, no se duplica en el HTML */
.tabla-scroll { overflow-x: auto; }
img { max-width: 100%; height: auto; }

Verificación de cierre: contar <table y contar class="tabla-scroll". Tienen que salir el mismo número.

Accesibilidad

• Foco visible y navegación por teclado en todo lo interactivo, incluido el botón de copiar.
• Contraste correcto en claro, oscuro y forced-colors.
• El movimiento se limita al feedback de acción; se respeta prefers-reduced-motion.
• Nada de popups, urgencia falsa, contadores sociales ni carruseles decorativos.

Verificación y costes en /log

• Version, integración o hardware que aparezca en un componente se verifica contra fuente real antes de publicar. Nunca de memoria.
• En /log se anota el coste real que aparece en el contexto del turno (gasto acumulado y modelo usado). No se estima consumo de tokens si no se tiene.
• Un componente sin entrada en /log no existe.