We're opening DS4 to the public
Today we're publishing the DS4 showcase — the design system powering every project at Axelo, Oxela, Toucher Terre and BEC. It's online, navigable, and every component is documented with its variants, states and code.
DS4 is our 4th iteration on what a design system should be for a team that ships fast and wants to keep shipping in five years. Four layers, two themes (Light + Dark), real versioning discipline.
Open the DS4 showcaseEvery component, token and layout of the design system, freely navigable.
Open showcase →The 4 layers
The DS4 name comes from the 4 layers that structure the system, from lowest to highest level:
Tokens — primitive values: colors, spaces, typography, shadows, radii. Light and Dark from the first layer, never as an afterthought.
Primitives — HTML/CSS bricks without logic: buttons, inputs, badges, rails. Framework-agnostic, reusable anywhere.
Components — bricks with light behavior: tabs, modals, OxAppShell, product cards. Svelte 5 on the Axelo side.
Layouts — page compositions: landing, dashboard, blog. Reused as-is across the 4 sites of the studio.
Light & Dark from day one
Many design systems add Dark mode later. Six months in you regret it: contrasts break, dozens of components need a refactor. Here, every token has a Light AND Dark value from the first commit. The theme switches via a single CSS variable, and every component follows.
The stack
DS4 is built on Svelte 5 + Tailwind 4. Tailwind 4 gives us compiled tokens and utility-first ergonomics; Svelte 5 gives us runes for fine-grained reactivity and a truly small bundle. The showcase itself is static (SSG via SvelteKit + adapter-static) — no dynamic server, no cold start, just optimized HTML/CSS/JS behind a CDN.
Style guides are dead, long live the design system
A PDF style guide is static. Once delivered, nobody opens it again. Six months later, the site and the brochure don't match anymore.
A design system is the opposite: it's code. Tokens, reusable components, documented variants. When you change the primary color, everything updates everywhere, automatically. That's the difference between a project that stays coherent at 2 years, 5 years, 10 years — and one that doesn't.
Need a design system for your project?30-min video call to scope what you need. Free brief, quote within 24h.
Get in touch →Open source coming
DS4 is still private code-side, but the goal is to extract it to a public GitHub repo (MIT license) and publish an npm package @axelolabs/ds4. You'll be able to install it in your own Svelte projects or reuse the tokens in other frameworks. Stay tuned.