Брендбук
Як виглядає Berth і чому.
Бренд виростає з самої панелі: креслення на папері в крапку, серверна стійка з індикаторами стану й один помаранчевий сигнал для головного. Спокійно, технічно, точно.
01 · Логотип
Два причали біля однієї набережної.
Знак — це літера B, намальована як вигляд гавані згори і водночас як два юніти в серверній стійці. Обидва прочитання задумані.
- A
Набережна
Масивна вертикаль ліворуч. Тверда основа, до якої пришвартований кожен сайт: сервер, панель, люди, які нею керують.
- B
Два причали
Водночас два юніти стійки. Нижній зайнятий, верхній вільний і готовий до наступного сайту. Нижній причал ширший: місце для зростання є завжди.
- C
Вогник
Світлодіод стану юніта стійки й корабель біля свого причалу: ваш сайт, що працює. Це єдиний колір у знаку, і він завжди Signal orange.
Побудова
Намальовано на сітці з 48 одиниць як одну замкнену фігуру з двома внутрішніми просвітами, тож знак лишається цілісним за будь-якого розміру. Завжди використовуйте майстер-файли; ніколи не збирайте знак із прямокутників.
- Сітка
- 48 × 48
- Набережна
- 6
- Зовнішні лінії
- 4
- Середня планка
- 8
- Радіус кутів
- 7 ззовні, 3 всередині
- Причали
- ширина: верхній 30, нижній 36
- LED
- 11 × 5, по центру нижнього причалу
- Словесний знак
- Bricolage Grotesque 700
Версії
Словесний знак завжди пишеться малими літерами, як команда, яку ви вводите. Використовуйте горизонтальну версію всюди, де вона поміщається.
berth для команди.Вільне поле й розмір
Залишайте навколо логотипа вільне поле, що дорівнює половині висоти знака. Мінімальні розміри: знак 16 px як favicon, 24 px в інтерфейсах, горизонтальний логотип — 96 px завширшки.
02 · Колір
Чорнило, папір і один сигнал.
Переважно чорнило й папір, як на кресленні. Помаранчевий — це сигнал, а не прикраса: він позначає те єдине, на що варто подивитися чи натиснути. Якщо помаранчеве все, то нічого.
#0E1F3AБічна панель, заголовки, темні поверхні.#1A2F52 · #2A3F63Стани наведення й лінії на чорнилі.#F3F4F1 · #CFD5DCТло сторінки з сіткою крапок.#FF6A13 · #1A0D02LED, головна дія, кільця фокуса.#1F4FD1Посилання, іконки, технічні акценти.#17202C · #566171Основний і допоміжний текст.Індикатори стану
Яскраві кольори LED використовуються лише на чорнилі. У продукті LED стану може бути зеленим, бурштиновим або червоним; у логотипі він завжди Signal.
Стан на папері
На світлих поверхнях використовуйте темніші кольори тексту на тонованій плашці. Кожна пара має контраст щонайменше 4,5:1, і стан ніколи не передається лише кольором: завжди є ще й слово.
03 · Типографіка
Три гарнітури, три завдання.
Усі три мають відкриту ліцензію (SIL Open Font License) і постачаються разом із панеллю, тож вона ніколи не завантажує шрифт із чужого сервера.
Bricolage Grotesque
Заголовки, числа й словесний знак. Накреслення 600 і 700, щільний інтервал. Трохи характеру, але ніколи не гучно.
Instrument Sans
Основний текст, підписи, кнопки й форми. Накреслення від 400 до 700. Чітко читається при 14 px у щільній таблиці.
IBM Plex Mono
Усе, що каже машина або що ви могли б ввести: команди, шляхи, імена хостів, значення, а також маленькі підписи великими літерами.
/var/www/vhosts/example.com/httpdocs04 · Елементи
Запозичено із серверної.
Невеликий набір повторюваних форм. Кожна походить зі справжнього обладнання або з креслярського столу, тож використовуйте їх за призначенням.
Сітка крапок
Креслярський папір: крапки 1 px кожні 22 px на Paper. Лише за вмістом, ніколи на картках чи на чорнилі.
Надзаголовок з LED
Маленький квадрат Signal перед моноширинним підписом великими літерами. Він показує, де ви є, над кожним заголовком сторінки.
Смуга стійки
Служби як юніти стійки з квадратним LED. Лише для живого стану: що бачите, те й працює.
Табличка сервера
Заводська табличка на машині: ім’я хоста, система й розмір, з одним LED. Вона завжди називає сервер, з яким ви працюєте.
Відкрита вкладка
Активний пункт меню — це вкладка, що переходить у сторінку, як папка, витягнута з шафи. Одна на меню.
Термінал
Справжні команди зі справжнім виводом на найтемнішому чорнилі. Запрошення приглушено-сіре, результати — як LED.
Іконки
Лінійні іконки на сітці 24, штрих 1,8, заокруглені кінці, без заливки. Blueprint на папері, світло-сірі на чорнилі.
Кути
4 для юнітів стійки й плашок, 6 для кнопок і полів, 10 для карток, 12 для великих панелей. Ніколи не «пігулки».
05 · Компоненти
Одна помаранчева кнопка на екран.
Ті самі деталі складають і панель, і вебсайт. Сенсорні цілі — щонайменше 44 px, фокус — кільце Signal завтовшки 3 px.
Кнопки на папері
Signal для головної дії, Ink для підтвердження, контур для всього іншого, червоний контур лише для руйнівних дій.
Кнопки на чорнилі
На чорнилі другорядні кнопки мають тонкий контур. Кнопки лише з іконкою завжди мають підпис для програм зчитування з екрана.
Картка показника
Моноширинний підпис зверху, число акцидентним шрифтом з табличними цифрами.
Поле
Підписи зверху, завжди видимі. Значення, які читає машина, — моноширинним шрифтом.
06 · Тон
Говоріть як добрий системний адміністратор.
Спокійно, точно й на вашому боці. Скажіть, що сталося, що це означає і що робити далі.
Конкретно, а не дотепно
Так · example.com відновлено до стану на 03:12 сьогодні вранці. Пошту не зачеплено.
Ні · Хоп — і ваш сайт знову в строю!
Помилки кажуть, що робити
Так · Сертифікат не видано: запис A для www вказує на інший сервер. Спрямуйте його на цей сервер і спробуйте знову.
Ні · Помилка 0x2F: операцію не виконано.
Докази замість обіцянок
Так · Резервні копії щотижня відновлюються в пісочницю, і ви отримуєте звіт.
Ні · Технологія резервного копіювання корпоративного класу військової міцності.