Wise
Глибокий мох із вапняною напругою. Вапняні іскри на майже чорному лісовому грунті, а масивні, незграбні фігури сигналізують про кожен рух
Шрифт Wise говорить впевненим, злегка гучним голосом: глибокий лісовий зелений (#163300) займає більшу частину поверхні - текст, навігація, темні розділи, значки, - в той час як єдиний яскраво-салатовий (#9fe870) служить функціональним розділовим знаком на закликах до дій, активних. Шрифт майже агресивний: Wise Sans із товщиною лінії 900, щільно розташований, виділений великими літерами (100px+) на головному екрані. Решта системи залишається стриманою на майже білому полотні з м'якими сірими поверхнями (#e8ebe6). Компоненти за замовчуванням мають форму таблеток – кнопки, сегменти навігації, мініатюри прапорців, маски зображень – з невеликими радіусами (10px), зарезервованими для карток та полів уведення. Колірні градієнти трапляються рідко; натомість поєднання саламандри та лісового кольору плавно змінюється, коли розділи стають темними, створюючи ритм без зайвого декору.
Контейнер з максимальною шириною 1200px, центрований по центру, з верхньою та темною секціями, що займають всю ширину сторінки. Шаблон верхньої частини: масивний заголовок, центрований по центру, на білому тлі з великою ілюстрацією (глобус), що виступає за нижній край області перегляду. Ритм секцій: чергування білого → світло-зеленої смуги → темної секції кольору «лісове чорнило», що створює природний колірний ритм. Розташування контенту переважно центроване: у верхній частині – блоки тексту та зображення у 2 стовпці, або рядки з основними елементами у 3 стовпцях у допоміжних розділах. Для відображення списку країн використовується сітка із 5 стовпців із прапорами. Навігація є єдиною фіксованою верхньою панеллю з сегментованим перемикачем. QR-код залишається нерухомим у нижньому правому куті при всіх положеннях прокручування.
Ілюстрації в стилі 3D, що зображують земну кулю із золотими монетами, створюють візуальний світ бренду — тактильний, трохи сюрреалістичний, виконаний з використанням м'яких градієнтів та теплого світла. Фотографії мінімалістичні; якщо використовуються, то у високій тональності та в стилі casual. Прапори країн представлені у вигляді круглих мініатюр у п'ятиколонній сітці — єдина «іконна» система — це національна ідентичність. Жодних абстрактних графічних елементів, жодних стандартних шаблонів. Глобус і монети є мотивом талісмана, що повторюється, сигналізуючим про глобальне охоплення за допомогою одного теплого, оптимістичного об'єкта, а не монтажу.
Палітра
Бренд
- Forest Ink
#163300— Домінуючий темний стиль бренду — навігаційний текст, темний фон розділів, основний текст на світлих поверхнях, контури іконок, заповнені навігаційні елементи. Це і є сила бренду: скрізь, де потрібна вагомість чи авторитет, ви вибираєте Forest Ink. - Lime Voltage
#9fe870— Зелений колір використовується як допоміжний акцент для декоративних деталей та акцентування уваги на нечасті запити. Не слід виділяти його як основний колір заклику до дії. - Spruce
#054d28— Вторинний темно-зелений колір використовується для поверхонь карт, допоміжної іконографії та надання глибини тону темним ділянкам, де колір Forest Ink занадто насичений.
Нейтральні
- Linen Mist
#e2f6d5— Світло-зелений відтінок для м'яких відблисків на поверхнях, тонованих фонів карток, станів наведення курсору на навігаційну панель. Легкий відтінок фірмового зеленого для непомітних елементів оформлення контейнерів. - Signal Blue
#0b4c72— Синій колір є додатковим акцентом для декоративних деталей та підкреслення низьких частот. - Alarm Red
#cb272f— Червоний колір служить допоміжним акцентом для декоративних деталей та акцентування уваги на нечастих кольорах. Використовуйте його як допоміжний акцент, а не колір статусу. - Charcoal
#454745— Основний текст, основний текст, насичений інтерфейс користувача - злегка теплий чорний колір, який відчувається м'якше, ніж чистий #000 на білому тлі. - Obsidian
#0e0f0c— Заголовки, висококонтрастні заголовки, чисто чорні елементи у навігації та головному меню. Чорний колір із злегка зеленим відтінком, а не нейтрально-сірий. - Pebble
#868685— Приглушений другорядний текст, текст-заповнювач, обведення значків, межі поля введення. Середньо-сірий колір, що відступає в далечінь.
Друкарня
від 12 до 105px · 10 ступенів
- Inter — заміна: Inter (native Google Fonts) · зображення 400,500,600,700 · Основний текст, інтерфейс користувача, підписи та підзаголовки по всьому продукту. Шрифт товщиною 700 використовується для заголовків середнього рівня (36-45px), 500-600 - для підзаголовків та підписів, 400 - для основного тексту та підписів. Шрифт Inter виконує тиху роботу, а Wise Sans – помітну.
- Wise Sans — заміна: Inter Black (900) with -0.04em tracking · зображення 900 · Заголовки для відображення візитна картка бренду. Надщільний шрифт 900 з кроком 89-105px і щільною міжлітерною відстанню перетворює кожен заголовок на оголошення великими літерами. Використовується економно: як основний текст, для заголовків розділів, для ключових моментів кампанії.
- monospace — заміна: Inter · зображення 400 · моноширинний - виявлений у вилучених даних, але не описаний ІІ.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 8-12px |
| Радіус кнопок | 9999px |
| Радіус карток | 10px |
| Тіні | ні — межі замість тіней |
| Між секціями | 64-80px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Wise і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Integrated Biosciences — біолюмінесцентна лабораторія опівночі
- Huly — Північне сяйво в опівнічній обсерваторії — головний герой є вертикальним променем фіолетового кольору, що переходить у кораловий, і кожна тиха ділянка нижче за нього запозичує ту ж двоколірну історію, розказану в більш приглушеному тоні
- Dia Browser — Галерея у темній кімнаті поєднується з редакційною газетою. Сцена в непроглядній темряві відкриває вид на залитий сонцем розворот газети, де кожен розділ позначений одним заголовком із засічками
- Mintlify — Хмарний сад над скляний стіл. Намальоване від руки небо і документальний продукт знаходяться в одній рамці — єдине місце, де колір і концепція стикаються, перш ніж сторінка зануриться в чернечу білизну.
- Gleap — Робочий простір, оформлений у теплих кремових тонах з графітовими акцентами — студія, де матові чорні чорнильні крапки наче ширяють над лляною архітектурою.
- ClickUp — Ефективна панель управління на білий мармур. Сторінка являє собою брошуру продукту — інструмента підвищення продуктивності, тому візуальна мова запозичена із самого продукту: щільні списки, індикатори статусу, групи аватарів та сміливі типографічні заяви, які виглядають як технічна специфікація продукту у виставковому масштабі
- monday — Біла майстерня з пастельними наклейками
- Portal — Редакційна стаття Twilight Serif – преміальний розворот у незалежному журналі, оформлений у стилі iOS
- Slack — Сцена баклажанового кольору із білими прожекторами. Глибокий сливовий відтінок домінує в темних ділянках, а майже біле полотно дозволяє великим авангардним заголовкам вільно «дихати»
- Base44 — Блокнот, залитий сонячним світлом, із лаймовим маркером
- Letters — Ранковий прийом у клініці просто неба — стерильно-білий стіл під м'якою блакитною стелею, усіяний інструментами хірургічного синього кольору.
- Duolingo — Зелений дитячий майданчик з товстими лініями розмітки