Superpower
Біолюмінесцентний центр управління охороною здоров'я
Superpower одягає серйозну клінічну обіцянку в кінематографічний, атмосферний інтерфейс користувача: темні фотографії, що займають всю ширину екрану, плавно переходять у чіткі білі поверхні контенту, а один яскравий акцент помаранчевого кольору сходу сонця пульсує по всій системі. Друкарня представляє бренд - фірмовий геометричний шрифт без засічок з мінімальною негативною міжлітерною відстанню, що масштабується від 11px метаданих до 66px відображення з міжрядковою відстанню, яка стискається в міру збільшення розміру (1,00 на дисплеї, 1,40-1,50 в основному текст). Плаваюча темна панель навігації у формі капсули ширяє над зображеннями, а заклики до дії у формі капсул створюють напругу між клінічною точністю та теплою життєвою енергією. Поверхні в основному плоскі - система покладається на велику кількість білого простору, тонкі цинкові роздільники і один ледь помітний візерунок тіней, а не сильне піднесення. Кольори дозовані: майже всі чорні, білі або цинково-сірі, а помаранчевий з'являється тільки як функціональні розділові знаки в діях і фірмових знаках.
На головному зображенні домінує кінематографічна фотографія на всю ширину сторінки - силует людини на тлі глибокого блакитно-синього неба; зображення навмисно темне та похмуре, щоб створити емоційну вагу та контрастувати з обіцянкою про користь для здоров'я. Другорядні зображення являють собою вузькі, лаконічні кадри в стилі продуктів (мармурова помаранчева членська карта, скріншоти програми), а не лайфстайл-фотографії. Жодних ілюстрацій, жодних 3D-рендерів, жодної абстрактної графіки — фотографічний контраст і є візуальна ідентичність. Членська карта прикрашена органічним мармуровим візерунком/лавовою лампою в тонах "Схід сонця" - це єдиний декоративний візуальний елемент. Іконки виконані у вигляді ліній з радіусом 7.5px (м'який округлений квадрат), з використанням тонких штрихів чорного кольору Carbon.
Палітра
Бренд
- Sunrise Coral
#fc5f2b— Помаранчевий колір використовується як допоміжний акцент для декоративних деталей та акцентування уваги на нечастих сигналах. Не слід виділяти його як основний колір заклику до дії. - Coral Glow
#ff8b64— Градієнтна кінцева точка у поєднанні із кольором Sunrise Coral для декоративного оформлення членських карток.
Нейтральні
- Carbon Black
#18181b— Основний текст, заливка плаваюча панель навігації, заголовки, обведення ікон. - Pure Black
#000000— Логотип, текстовий знак, кадр з глибоким контрастом - Zinc Gray
#71717a— Основний текст, додаткові описи, приховані метадані, допоміжний текст. - Ash Gray
#a1a1aa— Третинний текст, неактивні межі, непрацюючі стани - Mist Gray
#e4e4e7— Тонкі лінії окантування, контури карток, розділові лінії, рамки для ґудзиків. - Fog Gray
#f4f4f5— Ледве помітні нерівності поверхні, приглушене тло, накладення зображення на основу із сітчастого матеріалу.
Друкарня
від 11 до 66px · 8 ступенів
- NB International Pro — заміна: Inter Tight · зображення 400, 700 · Все - оформлення, заголовки, основний текст, інтерфейс користувача, навігація. Фірмове рішення — агресивно вузька негативна міжбуквенна відстань, масштабована в залежності від розміру (від -0.025em до 66px при невеликому розмірі основного тексту) у поєднанні з міжрядковою відстанню, яка стискається в міру збільшення розміру, надаючи заголовкам монолітну, плакатну технологій.
- NB International Mono Pro — заміна: JetBrains Mono · зображення 400 · Табличні метадані, мікротекстові інструкції, технічні мітки - використовуються економно в моментах, що потребують клінічного/інструментального підходу.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 11px |
| Радіус кнопок | 9999px |
| Радіус карток | 15px |
| Тіні | ні — межі замість тіней |
| Між секціями | 75px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Superpower і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Visitors — білий інженерний креслення
- Dock — Залитий сонцем кремовий папір, кобальтовий імпульс
- Flying Papers — Сповідь у суботньому ранковому мультфільмі
- Quizlet — Класна кімната оформлена в різних тонах кольору на білому тлі — тихий письмовий стіл, за яким чотири пастельні картки є єдиним яскравим акцентом на тлі холодних сірих стін і єдиної позначки індіговим маркером.
- ON.energy — Жовтий колір, що попереджає про високу напругу, на опівнічній сталі
- Navigate — Великий набір стікерів, прикріплений до дошки: великий шрифт гротескний, все у вигляді таблеток і п'ять різнокольорових іконок, що повторюються як логотип
- Linear — інструмент опівнічної точності
- Pop Site — Сувора друкарська галерея - монументальні чорні заголовки, що ширяють на білих стінах, з однією синьою точкою, що виражає намір
- Hyperstudio — Креслення подряпано на обсидіані. Текст і тонкі лінії обрамляють білий простір із суто чорного, зрідка зустрічаються золоті мітки компаса, що вказують шлях
- Pa'lais — Ботанічний альбом для замальовок, неначе просякнутий медом. Кремовий папір, сині лінійні ілюстрації у стилі туаль де жуї та теплі кольорові плями нагадують блокнот для рецептів ручної роботи, а сміливий, стиснутий шрифт та велику кількість вільного простору надають йому сучасний, редакторський стиль.
- Raus — Затишний щоденник, написаний на кремовому папері — кожна сторінка, як листівка з лісу
- Privy — Редакційна стаття, виготовлена тушшю на мармурі. Біле мармурове полотно, заголовки з чорними засічками, щільно стислі, єдиний фіолетовий банер, що перетинає верхню частину — стриманість як авторитет