Бренд-бук

Система за вектором.

Один акцент, точная типографика, много воздуха. Айдентика AffVector на одной странице.

Логотип

Знак — это вектор.

Два восходящих шеврона — динамика и рост, направление, в котором трафик превращается в доход. Используйте полный логотип там, где позволяет место; только знак — для аватаров и фавиконов. Оставляйте вокруг свободное пространство не меньше высоты знака и никогда не уменьшайте ниже 20 px.

AffVector
Основной логотип · светлый
Только знак
AffVector
На тёмно-синем
Цвет

Один электрический акцент, выверенные нейтральные.

Сине-голубой градиент — фирменный элемент: он в знаке, верхней акцентной линии, графиках и иконках. Ведёт электрический синий; более тёмный синий несёт текст и кнопки для доступного контраста; глубокий тёмно-синий держит тёмные полосы. Всё остальное — прохладный нейтральный с синим оттенком, чтобы акцент всегда был главным.

Vector Gradient
linear-gradient(115deg,#0A84FF,#00C6FF)
Фирменный — знак, акцентная линия, графики
Electric Blue
#0A84FF
Начало акцента бренда
Cyan
#00C6FF
Конец акцента бренда
Blue Ink
#0A63C4
Ссылки, основные кнопки, на белом
Navy
#0A1830
Тёмные полосы, дашборд, финал
Ink
#0B1220
Заголовки и основной текст
Slate
#525D75
Основной и второстепенный текст
Mist
#F3F6FB
Чередующиеся полосы секций
Типографика

SF Pro, применённый осмысленно.

Системный шрифт (SF Pro) делает сайт быстрым и родным на устройствах Apple. Начертания для заголовков плотные и уверенные; цифры всегда табличные, чтобы метрики выравнивались.

Display · 600 · -4%Результат, который двигает доход.
Section · 600 · -3%Создано для партнёров, которые масштабируются.
Body · 400Прозрачная отчётность в реальном времени и личные менеджеры.
Data · tabular€48,250 · 50% · 1,406
Label · 600 · capsМодели комиссии
Использование

Держите сдержанно, пусть ведёт акцент.

✓ Do

  • Одно основное синее действие на экран.
  • Оставляйте знаку свободное пространство и много белого.
  • Используйте табличные цифры для всех чисел.
  • Держите нейтральные прохладными и единообразными.

✕ Don’t

  • Перекрашивать знак или добавлять к нему эффекты.
  • Вводить второй конкурирующий акцент.
  • Растягивать, поворачивать или теснить логотип.
  • Делать основной текст светлее Slate на белом.