Разработка ПО
Наведите курсор: рамка подсвечивается там, где находится указатель.
- CRM и ERP
- Интеграции
Дизайн-система SDL
Строгий инженерный язык для сайта разработчика ПО. Основа: daisyUI 5 и Tailwind CSS 4, две темы (sdl-light, sdl-dark), один акцент, одна кривая движения.
Принципы
Один акцент
Сигнальный оранжевый только для главного: основная кнопка, активный узел, ключевая цифра. Остальное в графите.
Прямые углы
Поля и кнопки 2 px, блоки 4 px. Без теней: глубину дают фон base-200 и граница 1 px.
Движение объясняет
Каждая анимация отвечает на вопрос «что изменилось». Только transform и opacity.
Мгновенно
Статический HTML, CSS-анимации по прокрутке, около 3 КБ JS. Без фреймворка и без внешних запросов.
Цвет
Семантические токены daisyUI. Значения меняются вместе с темой; переключите тему вверху. Подписи показывают текущее значение OKLCH.
base-100
base-200
base-300
base-content
neutral
primary
info
success
warning
error
| Правило | Почему |
|---|---|
Текст на primary всегда тёмный (primary-content) | Белый текст на оранжевом не проходит WCAG AA |
| Оранжевый текст только крупный, от 24 px | На светлом фоне контраст около 3:1, этого хватает только для крупного кегля |
secondary и accent не используются | Один акцент на весь сайт; токены заданы, чтобы компоненты daisyUI не брали чужие цвета |
Типографика
Onest: гротеск, созданный для кириллицы. JetBrains Mono: цифры, коды, реквизиты. Шрифты лежат на сервере, подгружаются только нужные наборы символов.
Display / 60
Проектируем
H2 / 48
Как идёт проект
H3 / 24
Мобильные приложения
Lead / 18
Берём задачу целиком: от обследования процессов до сопровождения работающей системы.
Body / 16
Корпоративные информационные системы, CRM и ERP, отраслевое ПО. Строка не длиннее 65 знаков.
Mono / 22
ОГРН 1022301605776
Label / 12
Технологии
Форма и отступы
--radius-selector: 2px
--radius-field: 2px
--radius-box: 4px
| Токен | Значение | Где |
|---|---|---|
| shell | max 82rem, поля 16 / 32 px | Контейнер каждой секции |
| section | py-20, lg:py-28 | Вертикальный ритм секций |
| card-body | p-6, sm:p-8, gap-4 | Внутренние отступы карточек |
| --border | 1px | Все границы; разделители секций border-t base-300 |
| --depth / --noise | 0 / 0 | Без теней и зерна |
Движение
Одна кривая ease-out-expo и три длительности. При системной настройке «уменьшить движение» всё становится статичным.
| Токен | Значение | Применение |
|---|---|---|
| --ease-out-expo | cubic-bezier(0.16, 1, 0.3, 1) | Всё: наведение, появление, заливки |
| --duration-fast | 160ms | Цвет ссылок и иконок |
| --duration-base | 320ms | Заливка кнопки, линия ссылки, магнит |
| --duration-slow | 720ms | Заголовок первого экрана, появление блоков |
Выезд строки из маски
Заголовок первого экрана. Шаг задержки 90 мс между строками: читается как один жест.
Появление по прокрутке
.reveal: CSS animation-timeline: view(), сдвиг 32 px и прозрачность. Без JS.
Шкала процесса
Линия заполняется по прокрутке, узлы этапов загораются, когда этап в центре экрана.
Сигнальное поле
Canvas на первом экране: пакеты бегут по сетке узлов. Стоит на паузе вне экрана и в фоновой вкладке.
Расшифровка цифр
[data-scramble]: коды ОКВЭД и Минцифры собираются из символов за 700 мс.
Магнит
[data-magnetic]: кнопка смещается к курсору до 8 px. Только мышь.
Компоненты
Кнопки
- btn-primary: одно главное действие на экран. Подпись не длиннее трёх слов.
- btn-outline btn-sweep: второе действие; заливка въезжает слева, стрелка сдвигается.
- btn-ghost: служебные кнопки в шапке и таблицах.
- Нажатие: сдвиг на 1 px вниз и масштаб 0.985. Фокус: рамка 2 px цвета primary.
Карточка направления
1С
Вариант с сеткой
Фон bg-grid для карточек без фотографии, чтобы плитки сетки отличались.
Ссылки, метки, уведомления
Поля ввода
Паттерны страницы
| Секция | Раскладка | Движение |
|---|---|---|
| Первый экран | Асимметрия 7 / 5: текст и сигнальное поле | Выезд строк, смена слова (text-rotate), поле |
| Направления | Сетка-бенто 7+5 / 5+7, два фото, сетка, тёмная плитка | Появление по прокрутке, подсветка рамки |
| Технологии | Единственная бегущая строка логотипов | Бесконечная лента, пауза при наведении |
| Как идёт проект | Закреплённый заголовок слева, шкала этапов справа | Заполнение шкалы, включение узлов |
| Компания | Крупная цифра ОКВЭД, коды, реквизиты в сетке | Дрейф цифры, расшифровка кодов |
| Контакты | Крупный текст во всю ширину, телефон и почта | Магнит, стрелка уходит вверх-вправо |