Брендбук
Один знак, один зелений, один голос.
Повна система бренду Protocore — логотип, вільне поле, колір, шрифт, голос і неймінг — на одній сторінці. Читайте тут або забирайте PDF.
Система логотипа
Чотири способи подати знак.
Фасетований знак ядра — єдиний намальований елемент. У локапах назва стоїть поруч із ним або під ним, набрана Roboto Medium — нічого з цього не перемальовуйте.
Окремо, у малих розмірах — фавікони, іконки застосунків і всюди, де назва була б нечитабельною.
Знак поруч із назвою. Типовий варіант — для шапок, документів і підписів.
Знак над назвою. Для квадратних форматів — соціальних карток, плиток і штампів.
Знак по центру суцільної плитки 1024 px. Для зображень профілю на будь-якій платформі.
Вільний простір і розмір
Простір навколо, межа знизу.
Два чіткі числа гарантують, що знак читається всюди, де з’являється.
Вільний простір — одна ширина знака з усіх чотирьох боків.
- Вільний простір
- Власна ширина знака з усіх чотирьох боків. Нічого не заходить у цю зону — ні текст, ні лінійки, ні краї сторінки.
- Мінімальна висота · цифрова
- 16 px. Менше — знак стає нерозбірливим, тому використовуйте лише знак, без локапу.
- Мінімальна висота · друк
- 6 мм.
Колір
П’ять кольорів, чіткі ролі.
За замовчуванням майже монохром. Зелений — акцент, а не тема: він ніколи не заливає великі площі.
Текст на світлому. Темні поверхні.
Світлі фони сторінок.
Картки на paper. Текст на ink.
Зелений — лише на темних поверхнях.
Акцентний текст на білому — посилання та мітки.
Типографіка
Говорить Roboto.
Усе покривають дві гарнітури. Жодної третьої, жодного курсиву для виділення.
Інтерфейс і заголовки — 400 для основного тексту, 500 для заголовків і локапів, 700 — помірковано.
Мітки, eyebrow-підписи та числа — верхній регістр, широкий трекінг.
Мітки розділів починаються з трьох скісних рисок і пробілу — набрані Roboto Mono, верхнім регістром, із широким трекінгом. Риски — це надруковані символи, а не намальована графіка.
Голос і тон
Менше слів, більше сенсу.
П’ять правил охоплюють кожен рядок текстів Protocore — від заголовків до написів на кнопках.
Назви
Продукти носять родинну назву.
Одна схема, без винятків.
- Перша згадка
- Повна назва — «Protocore Pay», «Protocore Gateway». Далі — лише назва продукту.
- PDS
- Скорочення від Protocore Design System. Під час першої згадки розгортайте, далі — PDS.
- Компанія
- Protocore — одне слово, велика P. Ніколи не ProtoCore, PROTOCORE чи Proto Core.
Використання
Роби так, а не так.
Правила з прес-кіта, поширені на всю систему.
- 01Залишайте вільне поле, що дорівнює ширині знака, з усіх боків.
- 02Чорний варіант — на світлих фонах, білий — на темних.
- 03Акцентний варіант — лише для поверхонь кольору ink (#0a0a0a).
- 04Масштабуйте з SVG-файлів — знак лишається чітким за будь-якого розміру.
- 05Використовуйте вертикальний локап для квадратних форматів.
- 06Якщо висота менша за 16 px, переходьте на один лише знак.
- 01Не змінюйте колір знака поза наданими варіантами.
- 02Не повертайте, не обводьте контуром, не додавайте тіней чи інших ефектів.
- 03Не перемальовуйте знак і не змінюйте його пропорції.
- 04Не набирайте назву Protocore іншим шрифтом — у локапах використовується Roboto Medium.
- 05Не ставте акцентний зелений на білий — для акцентного тексту там використовуйте #0e9e6e.
- 06Не розміщуйте знак на фотографіях чи градієнтах — лише на суцільному ink або paper.
Файли
Забирайте систему із собою.
Посібник у PDF, матеріали в одному zip-архіві. Кожен окремий файл — на сторінці для преси.