Фирменный стиль ддс.ai

ддс.ai — управленческий учёт, который ведётся сам: ассистент разносит выписку по статьям, собирает ДДС и ОПиУ и заранее видит кассовый разрыв. Здесь логотип, маскот, цвета, шрифты и живой маскот, который показывает, чем сейчас занят ассистент. Все файлы лежат рядом с этой страницей, ссылки под каждой версией.

Основная версия

Маскот и надпись — для светлых поверхностей

SVG PNG 1200 Только надпись

На тёмном фоне

Надпись белая, «.ai» и маскот те же

SVG без подписи SVG с подписью PNG 1200

Иконка приложения

Светлая и тёмная, вкладка браузера

ддс.ai — Операции

1024 светлая 1024 тёмная 180 iOS favicon.svg 32 PNG

Монохромная версия

Печать, гравировка, документы в один цвет. Маскот заменяет голова, экран — прорезь

SVG графит SVG белый Голова графит

На фирменном зелёном

Маскот в белой обводке, «.ai» тёмная — иначе тело сливается с фоном

SVG PNG 1200

Маскот

Ассистент с монетой — лицо сервиса: в онбординге, пустых экранах, рассылках и как аватар в чате ассистента. Голова отдельно работает там, где места мало: фавикон, уведомления, монохром.

Целиком

Основная поза, прозрачный фон

SVG PNG 1024

Стикер

С белой обводкой — для цветных и фото-фонов

SVG PNG 1024

Голова

Маска, экран и глаза — от 16 px

SVG SVG белый

Живой маскот

Ведут глаза, рука, монета и штрихи; тело подыгрывает целиком — наклон, подскок, дыхание. Рисунок не деформируется. По маскоту человек видит, чем занят ассистент, не читая подписей. В покое глаза следят за курсором, маскот моргает и иногда машет рукой. Наведи мышь на страницу и нажми любое состояние.

Покой

64 px

40 px

28 px

Для вставки без кода есть анимированный SVG: моргание, взмах рукой и дыхание, работает в теге img. Для состояний — anim/dds-live.js, вызов DdsLive.mount(el).state('thinking'). При системной настройке «уменьшить движение» маскот не анимируется, а принимает статичную позу состояния.

Цвет

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

Цвета маскота

Взяты из градиентов маскота без изменений

Маска#F0FFF3

Мята#74ED91

Изумруд#24D067

Лес#14AD57

Хвоя#0B754B

Экран#10423D

Глубина#041B1D

Цвета интерфейса

Основа экрана и сигналы. Контраст текста на белом — не ниже 7:1 для основного и 4.5:1 для второстепенного. Ярко-зелёный на белом — только для графиков и значков, не для текста

Графит#0B1411

Текст, заголовки, надпись логотипа

Второстепенный#5B6B63

Подписи, пояснения

Линия#E3E8E5

Рамки и разделители

Фон#F3F5F4

Подложка экрана

Ночь#07130C

Тёмная тема, тёмная иконка

Действие#15803D

Основная кнопка, ссылки, приход в таблице

Акцент#22C55E

«.ai», графики, значки, кнопка на тёмном

Внимание#D97706

Близко кассовый разрыв, платёж скоро

Ошибка#DC2626

Кассовый разрыв, просрочка, минус на счёте

Шрифт

Надпись «ддс.ai» в логотипе переведена в кривые, её не набирают заново. Два шрифта, оба бесплатные, кириллица в обоих родная. Nunito с круглыми окончаниями — заголовки, сайт, рассылки: он одной пластики с маскотом. Inter — интерфейс и таблицы: в нём табличные цифры, суммы встают ровно в столбец; в Nunito их нет.

Заголовок сайтаNunito 900 · 44/48

Учёт, который ведётся сам

Заголовок экранаInter 700 · 28/34

Движение денег

Заголовок блокаInter 600 · 18/26

Журнал операций

Основной текстInter 400 · 15/22

Операция сразу попадает в остаток на счетах и в расходы месяца — больше её никуда вводить не нужно.

ПодписьInter 500 · 13/18

Сверяется с выпиской · обновлено в 14:20

СуммыInter 600, табличные

685 908 ₽ · +40 000 ₽ · −18 900 ₽

Nunito, файл Inter, файл Лицензия OFL

Охранное поле и минимальный размер

Мера охранного поля — высота строчной буквы «д» в надписи. Ближе этой меры к логотипу не подходят другие элементы и край носителя.

Охранное поле

Со всех сторон не меньше высоты строчной буквы

Минимальный размер

Меньше этого логотип теряет читаемость, тогда ставят маскота или голову

Логотип от 120 px

Маскот от 32 px

Голова 16 px

Так нельзя

Логотип и маскот — одни файлы на все случаи, их не перерисовывают под макет.

Растягивать

Только пропорциональное масштабирование

Перекрашивать

Маскот зелёный или монохромная голова

Добавлять эффекты

Без теней, обводок и свечения — кроме стикера

Ставить на пёстрое

Только спокойный светлый, тёмный или фирменный зелёный

В интерфейсе

Логотип в меню слева, живой маскот — лицо ассистента в правой панели: слушает, думает, разносит операции и радуется, когда готово. Экран открывается и отдельно: interface.html.