Brand Guidelines

Брендбук UvaIT

Единая система визуального языка digital-агентства полного цикла: логотип, цвета, типографика, элементы интерфейса и принципы движения. Все значения соответствуют дизайн-системе сайта.

01 — Суть бренда

Технологичность, которая растит бизнес

Позиционирование

Digital-агентство полного цикла: разработка, дизайн, продвижение и поддержка под одной крышей.

Характер

Премиальный, технологичный, уверенный. Тёмная «глубокая» эстетика с яркими индиго-акцентами и плавными анимациями.

Обещание

Превращаем идеи в продукты, а трафик — в прибыль. Каждое решение работает на рост бизнеса клиента.

02 — Логотип

Знак и логотип

Логотип состоит из иконки (скруглённый квадрат с символом «U-стрелка») и начертания «UvaIT», где «IT» выделяется акцентным индиго.

UvaIT

Основной горизонтальный логотип

Иконка / favicon

UvaIT

На светлом фоне

Можно

Сохранять охранное поле не меньше высоты иконки со всех сторон.
Использовать на тёмном фоне (основной вариант) или на светлом.
Масштабировать пропорционально; минимальная высота иконки — 24px.
Цвета знака: градиент #625DFF → #4E49F2, символ — белый.

Нельзя

Менять цвета, добавлять тени, обводки и эффекты.
Искажать пропорции, вращать или наклонять знак.
Размещать на пёстром фоне без контраста.
Перенабирать «UvaIT» другим шрифтом или менять регистр «IT».

03 — Цвета

Палитра

Бренд строится на индиго-акценте и глубокой navy-основе. Светлый текст и тонкие линии создают премиальный тёмный контраст.

Бренд

Indigo#5651F5--indigoБазовый бренд-цвет (из логотипа)

Indigo Bright#625DFF--indigo-brightАкцент, ссылки, иконки, верх градиента

Indigo Deep#4E49F2--indigo-deepНиз градиента, нажатые состояния

Navy#04112F--navyТёмный фирменный, основа палитры

Поверхности

BG#050B1C--bgОсновной фон страницы

BG 2#081230--bg-2Низ карточек, вторичный фон

Surface#0B1A3A--surfaceПоверхность карточек

Surface 2#102248--surface-2Приподнятые элементы

Текст

Text#EAF0FF--textОсновной текст

Text Muted#93A1C4--text-mutedПодзаголовки, лиды

Text Dim#5D6B8F--text-dimПодписи, второстепенное

Градиенты и свечение

Accent — --gradКнопки, активные элементы, иконка

Text gradient — .text-gradientВыделение слов в заголовках

Glow — --glowРадиальное свечение в hero и секциях

04 — Типографика

Шрифты и масштаб

MontserratDisplay — заголовки

Aa Бб Вв 0123

Веса 600 / 700 / 800 / 900. Заголовки: 800, межбуквенный интервал −0.03em.

InterBody — текст

Aa Бб Вв 0123

Веса 400 / 500 / 600. Основной текст: 400, межстрочный 1.65.

Типографический масштаб

--fs-heroHero / H1 · Montserrat 8002.75rem → 8rem

Создаём сайты

--fs-h2Заголовок секции · Montserrat 8002rem → 4.25rem

Полный цикл digital

--fs-h3Подзаголовок · Montserrat 8001.35rem → 2rem

Веб-разработка

--fs-leadЛид-абзац · Inter 4001.05rem → 1.4rem

Превращаем идеи в продукты

--fs-bodyОсновной текст · Inter 4001rem → 1.1rem

Разработка, дизайн и поддержка под одной крышей.

--fs-smallПодпись / eyebrow · Inter 6000.875rem

ЧТО МЫ ДЕЛАЕМ

05 — UI-элементы

Компоненты интерфейса

Кнопки

Обсудить проект Смотреть кейсы

Скругление pill (100px), шрифт Montserrat 700. Primary — на градиенте со свечением, Ghost — контурная.

Eyebrow и теги

Что мы делаем

UX/UI
Next.js
SEO

Eyebrow — uppercase, индиго, с лидирующей линией. Теги — pill с тонкой обводкой.

Карточка

01Веб-разработкаГрадиентный контур появляется при наведении.

Статусный бейдж

Доступны для новых проектов

Полупрозрачный фон, blur, «живая» зелёная точка с подсветкой.

06 — Сетка и отступы

Пространство и форма

Радиусы

Small--radius-sm · 12px

Base--radius · 22px

Large--radius-lg · 32px

Pill— · 100px

Размеры и отступы

`--gutter`	1.25rem → 4rem	Боковые отступы контейнера
`--section-y`	4.5rem → 10rem	Вертикальные отступы секций
`--container`	1280px	Макс. ширина контента
`--header-h`	84px	Высота шапки

07 — Движение

Принципы анимации

Анимации плавные и «дорогие»: мягкие easing-кривые, появление по скроллу, магнитные кнопки и инерционный скролл. Всегда уважаем prefers-reduced-motion.

Токены движения

`--ease`	cubic-bezier(0.22, 1, 0.36, 1)
`--ease-out`	cubic-bezier(0.16, 1, 0.3, 1)
`--dur`	0.6s

Паттерны

Reveal-появление блоков снизу вверх по мере скролла.
Split-text: заголовки «выезжают» по словам.
Магнитные кнопки и кастомный курсор на desktop.
Lenis smooth-scroll, View Transitions между страницами.

08 — Tone of voice

Как мы говорим

Делаем

Говорим о росте бизнеса и результате, а не о технологиях ради технологий.
Коротко, уверенно, по делу. Без воды и канцелярита.
На «вы», по-партнёрски и на равных.
Конкретика и цифры: «120+ проектов», «96% клиентов возвращаются».

Избегаем

Не используем агрессивные продажи и кликбейт.
Не перегружаем сложными терминами без объяснения.
Не обещаем того, что не можем подтвердить кейсами.
Не пишем длинными сложноподчинёнными конструкциями.