Запускаем DS4 в открытый доступ

Сегодня мы открываем витрину DS4 — дизайн-систему, которая движет всеми нашими проектами Axelo, Oxela, Toucher Terre и BEC. Она в сети, по ней можно перемещаться, и каждый компонент задокументирован со своими вариантами, состояниями и кодом.

DS4 — это наша 4-я итерация представления о том, какой должна быть дизайн-система для команды, которая поставляет быстро и хочет держаться во времени. Четыре слоя, две темы (Light + Dark), настоящая дисциплина версионирования.

Voir la vitrine DS4

Tous les composants, tokens et layouts du design system, en navigation libre.

Ouvrir la vitrine →

4 слоя

Название DS4 происходит от 4 слоёв, которые структурируют систему, от самого низкого уровня к самому высокому:

  • Токены — примитивные значения: цвета, отступы, типографика, тени, радиусы. Light и Dark уже на первом слое, никогда не надстройкой.

  • Примитивы — кирпичики HTML/CSS без логики: кнопки, поля ввода, бейджи, рельсы. Не зависят от фреймворка, переиспользуемы где угодно.

  • Компоненты — кирпичики с небольшим поведением: вкладки, модальные окна, OxAppShell, карточки товара. Svelte 5 на стороне Axelo.

  • Макеты — композиции страниц: лендинг, дашборд, блог. Переиспользуются как есть на 4 сайтах студии.

Light и Dark с самого начала

Многие дизайн-системы добавляют тёмную тему потом. И жалеют об этом через полгода, когда контрасты ломаются и приходится рефакторить десятки компонентов. У нас каждый токен имеет значение Light И Dark уже с первого коммита. Тема переключается одной CSS-переменной, и все компоненты следуют за ней.

Стек

DS4 построен на Svelte 5 + Tailwind 4. Tailwind 4 даёт нам скомпилированные токены и utility-first подход; Svelte 5 даёт руны для тонкой реактивности и действительно лёгкий бандл. Сама витрина статична (SSG через SvelteKit + adapter-static) — никакого динамического сервера, никакого холодного старта, только оптимизированный HTML/CSS/JS и CDN впереди.

Фирменный стиль мёртв, да здравствует дизайн-система

Фирменный стиль в PDF статичен. Один раз сдан — и больше никто его не открывает. Через полгода сайт и буклет уже не похожи друг на друга.

Дизайн-система — это противоположность: это код. Токены, переиспользуемые компоненты, задокументированные варианты. Когда меняешь основной цвет, всё обновляется везде автоматически. Именно эта разница делает так, что проект остаётся целостным через 2 года, 5 лет, 10 лет.

Discuter d'un projet design system ?

30 minutes en visio pour évaluer ce qu'il vous faut. Brief gratuit, devis sous 24h.

Prendre contact →

Open source на подходе

DS4 пока приватна на уровне кода, но цель — вынести её в публичный репозиторий на GitHub (лицензия MIT) и опубликовать npm-пакет @axelolabs/ds4. Вы сможете установить его в свои проекты на Svelte или переиспользовать токены в других фреймворках. Оставайтесь с нами.

Tags Дизайн-система Blog