Бренд-бук

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

Один акцент, точна типографіка, багато простору. Айдентика 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 на білому.