Іконки

Іконки Spaceship перетворюють складні дії та ідеї на миттєво впізнавані символи, допомагаючи користувачам легко орієнтуватися та взаємодіяти.

Hero Image

Універсальні, але водночас виразні, наші іконки є найменшими будівельними блоками бренду, створеними для миттєвого впізнавання, водночас чітко зберігаючи ідентичність Spaceship.



Версії

Усі іконки Spaceship доступні у двох версіях: контурній (основній) і заповненій (додатковій).









Побудова

Іконки створюються за визначеними правилами — від базової сітки до параметрів штриха — що забезпечує послідовний і збалансований результат.









Розмір

Завдяки масштабованому дизайну іконки слід використовувати у п’яти розмірах, щоб зберігати чіткість і візуальну гармонію в усій системі.









Кольори

Колір — це важливий елемент, який допомагає користувачам легше ідентифікувати свої продукти в певному інтерфейсі. Щоб забезпечити узгодженість у цих UI-контекстах, іконки використовують  кольори Spaceship Design System.






Кольори бренду

Як основні кольори Spaceship, вони мають бути пріоритетним вибором для іконок — як у функціональних контекстах, таких як UI платформи, так і в більш ілюстративному використанні, наприклад для представлення функцій на сторінках продуктів. Перегляньте сторінку кольорів, щоб дізнатися більше.






Кольори продуктів

Основні кольори продукту слід застосовувати до відповідних іконок. Це важливо для впізнаваності продукту та обізнаності про нього в екосистемі Spaceship.






Кольори сповіщень

Використовуйте кольори сповіщень, щоб підсилити повідомлення-попередження. Їх слід застосовувати лише до іконок попереджень, за рідкісними винятками, коли інша іконка також позначає стани успіху, помилки або попередження.







Рекомендації

Ось кілька прикладів того, чого слід уникати під час використання іконок.




Не спотворюйте, не обертайте й не віддзеркалюйте іконки. Завжди масштабуйте пропорційно.


Не використовуйте іконки, більші за 40x40px. Прагніть балансу між елементами.


Не використовуйте відтінки чи тіні.