DS4 — o nosso design system passa a acesso público

Lançamos DS4 com acesso público

Hoje publicamos a vitrine do DS4 — o design system que move todos os nossos projetos na Axelo, Oxela, Toucher Terre e BEC. Está online, navegável, e cada componente é documentado com as suas variantes, estados e código.

DS4 é a nossa 4ª iteração sobre o que um design system deve ser para uma equipa que entrega depressa e quer continuar a entregar daqui a cinco anos. Quatro camadas, dois temas (Light + Dark), uma verdadeira disciplina de versionamento.

As 4 camadas

O nome DS4 vem das 4 camadas que estruturam o sistema, do nível mais baixo ao mais alto:

• Tokens — valores primitivos: cores, espaços, tipografia, sombras, raios. Light e Dark desde a primeira camada, nunca como adição posterior.

• Primitivos — blocos HTML/CSS sem lógica: botões, inputs, badges, rails. Agnósticos ao framework, reutilizáveis em qualquer lugar.

• Componentes — blocos com algum comportamento: tabs, modais, OxAppShell, cards de produto. Svelte 5 do lado da Axelo.

• Layouts — composições de página: landing, dashboard, blog. Reutilizados tal qual nos 4 sites do estúdio.

Light & Dark desde o primeiro dia

Muitos design systems acrescentam o modo Dark depois. Seis meses mais tarde arrepende-se: os contrastes partem, dezenas de componentes precisam de refactor. Aqui, cada token tem o seu valor Light E Dark desde o primeiro commit. O tema muda com uma única variável CSS, e todos os componentes seguem.

A stack

DS4 é construído em Svelte 5 + Tailwind 4. O Tailwind 4 dá-nos tokens compilados e ergonomia utility-first; o Svelte 5 dá-nos runes para reatividade fina e um bundle realmente leve. A própria vitrine é estática (SSG via SvelteKit + adapter-static) — sem servidor dinâmico, sem cold start, apenas HTML/CSS/JS otimizado atrás de um CDN.

Guia de estilo morto, viva o design system

Um guia de estilo em PDF é estático. Uma vez entregue, ninguém o volta a abrir. Seis meses depois, o site e o folheto já não combinam.

Um design system é o oposto: é código. Tokens, componentes reutilizáveis, variantes documentadas. Quando se muda a cor primária, tudo se atualiza em todo o lado, automaticamente. É essa a diferença entre um projeto que se mantém coerente a 2 anos, 5 anos, 10 anos — e um que não.

Em breve em open source

DS4 ainda é código privado, mas o objetivo é extraí-lo para um repositório público no GitHub (licença MIT) e publicar um pacote npm @axelolabs/ds4. Vai poder instalá-lo nos seus próprios projetos Svelte ou reutilizar os tokens noutros frameworks. Fique atento.