Как выглядит логотип и какие у него версии?

Основной знак — монограмма в скруглённом квадрате плюс словесный блок с названием и подстрочником. Такой логотип читается на сайте, в документах и на аватарках соцсетей без потери узнаваемости.

Слева направо: на белом фоне, на брендовом синем, с золотым акцентом. Для печати и факса — монохромная версия.

Какие версии логотипа передаются заказчику?

• Горизонтальная (знак + текст) — для шапки сайта.
• Вертикальная (знак над текстом) — для презентаций и соцсетей.
• Только знак — для favicon и аватарок.
• Монохром: белый на тёмном и чёрный на светлом.
• Однокрасочная — для печати.
• SVG — для Tilda, чтобы масштабировать без потерь.

Минимальный размер — 24 px по высоте на экране и 10 мм в печати. Охранное поле равно высоте знака по периметру.

Нельзя растягивать логотип, наклонять, менять цвета, добавлять обводки и тени. На пёстром фоне нужна однотонная подложка.

Резюме: логотип работает как знак доверия в официальной сфере, поэтому его форма и пропорции фиксированы, а варианты применения заранее определены.

Какая палитра используется на сайте?

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

Как проверить контраст текста и фона?

Резюме: палитра держится на контрасте синего и белого, а золотой остаётся точечным акцентом — так страница выглядит строго и не утомляет.

Какие шрифты и размеры задаёт документ?

Заголовки набираются Manrope, основной текст — Inter. Оба шрифта бесплатны, подключаются через Google Fonts и работают на всех устройствах. На одной странице не больше двух семейств.

Какие правила набора соблюдаются?

• Длина строки — 60–75 символов.
• Межстрочный интервал для текста — 1,6.
• Отступ между абзацами — 16 px.
• Заголовки короткие, без «воды».
• На мобильных шрифт не меньше 16 px, чтобы не включался зум.

Резюме: типографика строится на двух семействах и фиксированной шкале — это держит ритм страницы и упрощает вёрстку новых блоков.

Какая сетка и какие отступы используются?

На десктопе — 12 колонок с максимальной шириной контента 1200 px. На планшете — 8 колонок, на мобильном — 4. Отступы кратны 8 px, это упрощает выравнивание блоков.

Какие отступы заданы?

Радиусы: кнопки и поля — 8 px, карточки — 12 px. Тени мягкие, без жёстких обводок.

Резюме: сетка и шаг отступов подчинены одной логике — новые блоки встают на страницу без ручной подгонки.

Какие иконки входят в набор?

Иконки линейные, толщина линии 2 px, скруглённые концы. Набор закрывает девять услуг и восемь причин работать с компанией. Цвет — брендовый синий, акцент — золотой.

Резюме: единый стиль линий и цвета держит визуальный ряд, а набор покрывает все услуги без доборов из разных библиотек.

Как выглядят кнопки, поля и карточки?

Основная кнопка золотая с тёмным текстом, вторичная — прозрачная с синей обводкой. Поля высотой 48 px с обводкой цвета границы, фокус — синий контур. Карточки белые с мягкой тенью и скруглением 12 px.

Как выглядят поля формы и сообщения?

Как выглядит карточка услуги?

Как выглядит блок «5 шагов»?

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

Какие анимации допустимы?

Допустимы появление блоков при скролле, смена цвета и границы при наведении, лёгкий подъём карточки. Всё это не влияет на скорость загрузки и отключается для тех, кто предпочитает минимальное движение.

• Скорость — 200–300 мс, плавное завершение.
• Анимируются только opacity, transform, color, border-color.
• Запрещены анимации размеров, отступов, теней и градиентов.
• При prefers-reduced-motion анимации отключаются полностью.
• На тач-устройствах ховеры не срабатывают.

Резюме: движение поддерживает интерфейс, а не отвлекает — поэтому анимации короткие, предсказуемые и с уважением к системным настройкам.

Что можно и чего нельзя делать с фирменным стилем?

Шпаргалка помогает быстро проверить макет или новую страницу перед публикацией. Если хотя бы один пункт в красной зоне — правка обязательна.

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