К содержимому
Обсудить проект
ГлавнаяUI-kit

Дизайн-система DJIGIT

Живая документация языка «Light Technology»: всё на этой странице — те же классы и токены, что работают на сайте. Меняется CSS — меняется и документация.

01 — Логотип

Знак и варианты использования

Пламя в букве «i» — единственный декоративный знак бренда. Не перекрашиваем, не растягиваем, держим охранное поле.

02 — Цвет

Палитра

Тёмных плоскостей нет: тёмно-синий работает только как текст, тонкие линии и заливка кнопок. Оранжевый — единственный акцент.

Оранжевый
#FF5A2C
—orange · акцент, CTA, активное состояние
Тёмно-синий
#1F2544
—navy · текст, линии, заливка кнопок
Фон
#EEF1F6
—bg · основная среда страницы
Белый
#FFFFFF
—paper · плоскости и панели
Серый текст
#6B7383
—muted · подписи и вторичный текст
Светлая заливка
#F4F6FA
—soft · подложки, hover-состояния
Персиковый
#FFE7DE
—peach · тинт, редкие акцентные плоскости
Линия
#E3E7EF
—line · хайрлайны и рамки панелей
03 — Типографика

Montserrat + Open Sans

Два шрифта, самохостинг, кириллица. Иерархия строится размером, весом и трекингом — не цветом.

DisplayMontserrat 800 · clamp(2.75rem → 5.25rem) · ls −.05em · lh .94
Инженерная команда
Заголовок секцииMontserrat 800 · clamp(1.9rem → 3.8rem) · ls −.038em
Шесть направлений — одна культура
Заголовок карточкиMontserrat 800 · 1.05–1.32rem · ls −.028em
Фиксированная цена
ЛидOpen Sans 400 · 1–1.15rem · lh 1.65
Проектируем архитектуру, пишем код, выводим в прод и держим систему в эксплуатации.
Основной текстOpen Sans 400 · 1.0625rem · lh 1.75
Договор защищает вас на каждом этапе: вы заранее знаете, что получите и в какие сроки.
ЛейблMontserrat 700 · .72rem · ls .18em · uppercase · оранжевый
Почему мы
Моно-меткасистемный моно · .6–.7rem · ls .12em · uppercase
13 лет · 120+ проектов · 6 продуктов
ЦифраMontserrat 800 · tabular-nums · ls −.045em
120+
04 — Кнопки

Действия

Угловые засечки — фирменная деталь: при наведении они уходят, кнопка заливается целиком.

Основные
Оценить проект Смотреть работы
.dj-btn · .dj-btn—solid
Крупные и текстовая
Отправить заявку Обсудить
.dj-btn—lg · .dj-link
05 — Формы

Поля и состояния

Поля с рамкой и оранжевым фокус-кольцом, сегментированный выбор, согласие. Ошибка подписывается словами, а не только цветом.

Сегментированный выбор
06 — Плоскости

Панели, карточки и шкала

Три уровня: плоская панель с хайрлайном, приподнятая карточка и акцентная ячейка приборной шкалы.

Плоская панель

Белая плоскость с рамкой 1px и радиусом 6px. База системы: компетенции, форма, шкала.

.uk-panel · .dj-panel
02

Приподнятая карточка

Та же панель с мягкой тенью и контурной цифрой. Процесс, почему мы, отрасли, услуги.

.dj-scard
120+
запущенных проектов
акцентная ячейка шкалы
07 — Моушн

Как система движется

Движение поддерживает чтение и всегда отключается при prefers-reduced-motion.

Правила
  • Reveal — появление секции при входе в кадр, 0.6s, без «выезда»
  • Счётчики — цифры добегают до значения за 1.1s
  • Sticky — шапка и колонка проекта в работах
  • Hover — заливка кнопки, подъём карточки на 4px
  • Тикер — стек технологий, 38s линейно
Направляющие и декор

Колоночная сетка видна на 2,8% и растворяется книзу. Пламя из логотипа — единственный декоративный знак. Угловые засечки живут только на кнопках.

фирменное пламя