DS4 — nuestro sistema de diseño pasa a acceso público

Lanzamos DS4 en acceso público

Hoy publicamos el escaparate de DS4 — el sistema de diseño que impulsa todos nuestros proyectos en Axelo, Oxela, Toucher Terre y BEC. Está en línea, navegable, y cada componente está documentado con sus variantes, estados y código.

DS4 es nuestra 4ª iteración sobre lo que debería ser un sistema de diseño para un equipo que entrega rápido y quiere seguir entregando en cinco años. Cuatro capas, dos temas (Light + Dark), una verdadera disciplina de versionado.

Las 4 capas

El nombre DS4 viene de las 4 capas que estructuran el sistema, del nivel más bajo al más alto:

• Tokens — valores primitivos: colores, espacios, tipografía, sombras, radios. Light y Dark desde la primera capa, nunca como añadido.

• Primitivas — bloques HTML/CSS sin lógica: botones, inputs, badges, raíles. Agnósticos al framework, reutilizables en cualquier lugar.

• Componentes — bloques con un poco de comportamiento: tabs, modales, OxAppShell, tarjetas de producto. Svelte 5 del lado Axelo.

• Layouts — composiciones de página: landing, dashboard, blog. Reutilizados tal cual en los 4 sitios del estudio.

Light & Dark desde el primer día

Muchos sistemas de diseño añaden el modo Dark después. Seis meses más tarde te arrepientes: los contrastes se rompen, hay que refactorizar decenas de componentes. Aquí, cada token tiene su valor Light Y Dark desde el primer commit. El tema cambia con una sola variable CSS, y todos los componentes siguen.

El stack

DS4 está construido sobre Svelte 5 + Tailwind 4. Tailwind 4 nos da tokens compilados y ergonomía utility-first; Svelte 5 nos da runes para reactividad fina y un bundle realmente ligero. El escaparate en sí es estático (SSG vía SvelteKit + adapter-static) — sin servidor dinámico, sin cold start, solo HTML/CSS/JS optimizado detrás de un CDN.

La guía de estilo ha muerto, viva el sistema de diseño

Una guía de estilo en PDF es estática. Una vez entregada, nadie la vuelve a abrir. Seis meses después, el sitio y el folleto ya no se parecen.

Un sistema de diseño es lo contrario: es código. Tokens, componentes reutilizables, variantes documentadas. Cuando cambias el color primario, todo se actualiza en todas partes, automáticamente. Esa es la diferencia entre un proyecto que se mantiene coherente a 2 años, 5 años, 10 años — y uno que no.

Próximamente en open source

DS4 sigue siendo código privado, pero el objetivo es extraerlo a un repositorio público en GitHub (licencia MIT) y publicar un paquete npm @axelolabs/ds4. Podrás instalarlo en tus propios proyectos Svelte o reutilizar los tokens en otros frameworks. Mantente atento.