Design System
[ CASE_LOG // FOUNDATION ] * Sistema de diseño en HTML/CSS con tokens reutilizables. * Componentes coherentes en todas las páginas. * El diseño validado como código, no como imagen estática.
~/bin/projects/el-colaboratorio
El Colaboratorio
Espacio Multidisciplinario de Saberes. El diseño se validó como sistema en código antes de tocar el CMS.
$ cat /bin/projects/el-colaboratorio.log [ENTITY] El Colaboratorio · Espacio Multidisciplinario de Saberes · elcolaboratorio.org [MODULE] Web Architecture · Design System · Implementation [OUTPUT] Sitio institucional en producción, editable por el propio equipo [STATUS] OPERATIONAL -- verificado 2026-07-03
Contexto
El problema clásico de un sitio institucional: que el resultado final se aleje del diseño aprobado y que, después, nadie del equipo pueda editarlo sin ayuda.
La respuesta fue un método en dos tiempos. Primero, el sitio se diseñó como un sistema en HTML/CSS con tokens de diseño — tipografía, color, espaciado — para validar cada decisión en código. Después, esa base se implementó fiel en el CMS, con un proceso documentado y editable.
DESIGN-IN-CODE · CMS
Proceso
La implementación en WordPress + Elementor siguió reglas de conversión claras, una estructura ordenada de header y footer y un reparto cuidado del CSS, cerrada con un checklist de lanzamiento.
// Proceso /////////////////////////////////////////////////////////////////// // [Tokens]: Tipografía, color y espaciado definidos como sistema. // [Validación]: El diseño se aprueba en código antes de tocar el CMS. // [Conversión]: Reglas claras de traducción a Elementor, con CSS ordenado. // [Entrega]: Checklist de lanzamiento; sitio editable por el cliente. // ///////////////////////////////////////////////////////////////////////////
Implementación
[ CASE_LOG // FAITHFUL ] * WordPress + Elementor con proceso documentado y sistemático. * Header y footer estructurados; reparto disciplinado del CSS. * Implementación fiel a la base aprobada en código.
Producción
[ CASE_LOG // LIVE ] * 8 páginas en producción: de Inicio a Contacto. * Sitio editable por el propio equipo, sin depender de nadie. * Verificado en vivo en elcolaboratorio.org.
¿Quieres que tu sitio sea el diseño, no una versión de él?
Diseño-en-código e implementación fiel en un CMS que tu equipo pueda operar. Abre el canal para conversarlo.