Superlist
Нічний робочий куточок з кораловими вуглинками – тиха баклажанова поверхня програми, де одна тепла помаранчева іскра сигналізує про кожну дію.
Superlist використовує мову продуктивності в північно-фіолетових тонах: глибокий баклажановий колір, теплий кораловий як єдиний основний колір і великі заголовки без засічок, які передають всю атмосферу. Інтерфейс створює відчуття зосередженої роботи пізно ввечері — тихий, багатошаровий і впевнений, де колір використовується тільки як функціональні розділові знаки на закликах до дії, активних станах і ключових моментах. Поверхні накладаються одна на одну в ледь помітних темних тонах з фіолетовим відтінком (#181824 → #26253b), уникаючи чисто чорного кольору, щоб глибина відчувалася теплою, а не стерильною. Компоненти мають щедрі закруглені форми (20px картки, кнопки-таблетки), м'які тіні та «дихають» через зручні проміжки 10-16px, а не через щільні сітки. Голос заголовка - це все: товщина 600 при 70-88px з щільною міжлітерною відстанню -0.02em розглядає текст як типографічний, а не інтерфейсний - він ближче до редакційного тексту, ніж до SaaS.
Темні розділи, що займають всю ширину сторінки, із центрованими контейнерами контенту максимальної ширини. Головний розділ розташований вертикально по центру і містить заголовок, підтекст і заклик до дії (CTA), за яким слідує великий скріншот продукту, що перекриває наступний розділ. Наступні розділи чергуються між центрованими текстовими блоками та сітками з карток. У розділі відгуків використовується сітка з 3 колонок з картками відгуків та 16 проміжками. Навігація є єдиною верхньою панеллю з логотипом зліва, посиланнями по центру і діями авторизації праворуч — без фіксованої бічної панелі та мега-меню. Проміжки між розділами досить великі (16), створюючи просторий редакційний ритм, а не щільну сітку продуктів.
Візуальний простір займають скріншоти продукту - велика рамка із закругленими кутами, що демонструє реальний інтерфейс програми, заповнює головний та другорядний розділи. Фотографії мінімальні та використовуються лише як аватари користувачів або попередніх переглядів медіафайлів у додатку (наприклад, зображення концерту на правій панелі макету продукту). Логотипи на смузі довіри є плоскими текстовими знаками приглушеного білого кольору. Жодних декоративних ілюстрацій, ніякої абстрактної графіки, жодних 3D-рендерів. Візуальна стратегія така: показати продукт у великому масштабі, дозволити друкарні виконувати емоційну роботу, використовувати кораловий колір як єдиний колірний акцент.
Палітра
Бренд
- Coral Ember
#ff4a36— Помаранчевий колір використовується як допоміжний акцент для декоративних деталей та акцентування уваги на нечастих сигналах. Не слід виділяти його як основний колір заклику до дії.
Нейтральні
- Aubergine Canvas
#181824— Фон сторінки, основне полотно — теплий темний відтінок замінює чистий чорний, завдяки чому інтерфейс користувача виглядає багатошаровим, а не плоским. - Elevated Plum
#26253b— Поверхні карток, поля введення, навігаційні контейнери – на один крок легше, ніж полотно, для створення глибини без видимого кордону. - Pure White
#ffffff— Основні заголовки, текст кнопок, обведення іконок – максимальний контраст на темному полотні. - Fog Text
#696f81— Основний текст, другорядні заголовки, приглушені рамки контрастність 7:1 для комфортного читання на тлі баклажанового кольору. - Ash Text
#8e8da0— Підтримується нейтральний колір для другорядних елементів інтерфейсу користувача, розділювачів і приглушених підписів. Не слід призначати його основним кольором для закликів до дії. - Mist Highlight
#a3a3a7— Ледве помітні межі, роздільники, неактивні елементи навігації — ледь вловимий нейтральний відтінок, який все ще добре читається на тлі полотна.
Друкарня
від 12 до 88px · 9 ступенів
- sans-serif — заміна: Inter · зображення 400 · sans-serif - виявлений у вилучених даних, але не описаний ІІ.
- Haffer XH SemiBold — заміна: Inter Tight · зображення 400, 600 · Основний шрифт для відображення та заголовків. Використовується в розмірі 70-88px для заголовків-«героїв» з міжлітерною відстанню -0.02em і товщиною 600. Вузька міжлітерна відстань і велика висота малих літер надають заголовкам редакційна вага, завдяки чому темний інтерфейс більше нагадує обкладинку журналу, ніж панель. Замініть на Inter Tight або General Sans із напівжирним зображенням.
- Jersey 10 — заміна: Anybody · зображення 400 · Великий декоративний шрифт для акцентних цифр та виділень. Використовується економно за дуже великих розмірів для створення друкарських акцентів. Можна замінити шрифтом Anybody або Cabinet Grotesk.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 10-16px |
| Радіус кнопок | 100px |
| Радіус карток | 20px |
| Тіні | м'які тіні |
| Між секціями | 80px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Superlist і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- DNA — Північна обсерваторія, вид через лінзу частинок
- Abetterlou — Іскри на сідельній шкірі — теплий кремовий шрифт, що сяє на тлі глибокого кавово-чорного кольору, з янтарно-золотими гудзиками, які відчуваються як розпечені металеві деталі, що вдавлені до сторінки.
- Galileo-ft — Командна палуба у далекому космосі з сигналами електричного синього кольору.
- Decide AI — Опівночі обсерваторія — сигнал монетного двору
- Redis Agency — Редакційна майстерня, що працює в неробочий час, - це непроглядна темрява, де всю роботу над брендом виконують шрифти з засічками і одна-єдина червона редиска
- Spellbook — Північний зал суду, освітлений кораловим чорнилом — темна редакційна поверхня, де єдиним звуком є теплий помаранчевий почерк пера
- Linear — інструмент опівнічної точності
- Origin Financial — Північна галерея тихого багатства. Тиха, майже темна кімната, де великі шрифти з засічками і кілька кольорових панелей, що світяться, створюють відчуття, що фінансова сфера – це ретельно відібраний витвір мистецтва
- Hyperstudio — Креслення подряпано на обсидіані. Текст і тонкі лінії обрамляють білий простір із суто чорного, зрідка зустрічаються золоті мітки компаса, що вказують шлях
- Air — скульптура «Опівнічне небо крізь скло»
- Raycast — Північний командний центр, кораловий неон
- dope.security — Опівнічний термінал з фіолетовими маяками