Айдентика
Логотип и дизайн-система
Знак, палитра, типографика и правила движения — в одном месте, чтобы сайт, документы и оборудование выглядели одинаково.
Концепция знака
Основа знака — монограмма DSC. Буква D построена одной плавной незамкнутой линией: контур намеренно разомкнут внизу — это система, открытая для подключения новых элементов.
Внутри буквы — три соединённые точки: программное обеспечение, искусственный интеллект и оборудование. Проводники между ними одновременно читаются как дорожка печатной платы, узел нейронной сети и поток данных.
Знак построен на прямых и дугах постоянного радиуса. Он остаётся читаемым от 16 px в favicon до шелкографии на корпусе оборудования и не требует отдельной упрощённой версии.
Версии логотипа
Версии логотипа
Горизонтальный логотип — основной. Монограмма используется там, где не хватает ширины.
- Digital Service Center
Основной горизонтальный
Сайт, презентации, документы
- Digital Service Center
На тёмном фоне
Обложки, видео, оборудование
Компактная монограмма
Аватар, штамп, маркировка
Одноцветная
Гравировка, факс, тиснение
Файлы
Чего не делаем
- Не растягиваем знак и не меняем толщину линий по отдельности
- Не размещаем логотип на пёстром фоне без плашки
- Не перекрашиваем букву D в градиент — градиент живёт только в узлах
- Не добавляем тени и обводки к знаку
- Охранное поле вокруг знака — не меньше высоты точки внутри буквы
Палитра
Палитра
Основа — светлые нейтральные тона. Фирменные цвета работают акцентом: на странице их доля не превышает нескольких процентов площади.
- Canvas
#F7F8FA - Surface
#FFFFFF - Ink
#101114 - Muted
#6B7078 - Brand
#176BFF - Sky
#64C7FF - Violet
#755CFF mesh gradient
Типографика
Типографика
Заголовки — Manrope, текст — Inter. Размеры заданы через clamp(): один набор правил обслуживает и телефон, и широкий монитор.
- Aa
--text-displayclamp(2.75rem, 1.4rem + 5.4vw, 6rem) - Технологии
--text-h1clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem) - Единая экосистема
--text-h2clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem) - Направления работы
--text-h3clamp(1.375rem, 1.05rem + 1.1vw, 2rem) - Подзаголовок раздела
--text-leadclamp(1.0625rem, 0.98rem + 0.55vw, 1.4375rem) - Основной текст страницы
--text-bodyclamp(1rem, 0.97rem + 0.16vw, 1.0625rem)
Движение
Движение
Анимация объясняет структуру, а не привлекает внимание к себе.
- Основная кривая — cubic-bezier(0.22, 1, 0.36, 1): быстрый старт, мягкая остановка
- Появление блока — 0,6–0,8 с со смещением не более 24 px
- Импульсы данных двигаются по линиям связи, а не по декоративным траекториям
- Все эффекты отключаются при prefers-reduced-motion: reduce
- На мобильных устройствах параллакс и наведение не подключаются