Slash
Опівнічне сховище з позолоченими лініями бухгалтерських книг
Slash працює в режимі опівнічної галереї: майже чорне полотно, білий шрифт і єдиний мідний теплий акцент, що виконує функцію пунктуації. Заголовки відображаються шрифтом Ivy Presto, висококонтрастним дидоновим шрифтом із засічками, що використовується в екстремальних розмірах (до 88px) - це зіткнення шрифтів із засічками і без засічок є візитною карткою системи, надаючи їй фінансову серйозність без брокерської солід. Решта користувача інтерфейсу навмисно стримана: тонкі межі, елементи управління у формі таблеток, компактний основний текст 16px і ледве помітне піднесення, що дозволяє шрифту «дихати». Єдиний золотий градієнт (лінія графіка, мікроакценти) додає тепла до монохромної системи, викликаючи тепле свічення терміналу Bloomberg, створеного для дизайнерської аудиторії.
Контент з максимальною шириною 1216px, центрований з вертикальними проміжками 160px. Головний екран являє собою темне полотно на всю ширину з розділеною композицією: заголовок із засічками, вирівняний по лівому краю (ширина 64-88px), з полем для введення адреси електронної пошти нижче, і велика картка інтерфейсу користувача продукту (скриншот панелі управління) справа шириною 5. У наступних розділах використовується заголовок в одну колонку, центрований (з засічками, ширина 44-64px), з підзаголовком шрифтом Inter, за яким слідують триколонні сітки карток для опису функцій/відгуків/блогів. Навігація являє собою фіксовану верхню панель: логотип зліва, центральне меню (Компанія, Продукти, Рішення, Клієнти, Ціни, Часті питання), вирівняний по правому краю вхід (непомітний) і початок роботи (білий заповнений елемент). Нижній колонтитул є щільною п'ятиколоночною сіткою посилань з інформацією про компанію та юридичними положеннями. На сторінці чергуються насичені контентом секції у вигляді сітки та повноекранні статистичні виноски – ритм задається великою кількістю вільного простору між смугами, а не чергуванням кольорів фону (вся сторінка є одним цілісним полотном).
Фотографії виконані в редакційному та натуралістичному стилі: теплі портретні знімки засновників та членів команди у їхніх реальних робочих умовах (офіси, вітальні, будівельні майданчики). Зображення заповнюють рамки карт від краю до краю без відступів. У нижній частині карток з відгуками для покращення читання тексту використовується темний градієнт. Естетика - "LinkedIn зустрічається з редакційним журналом" - невимушена, людяна, злегка приглушена, ніколи не відполірована стоковими фотографіями. Мініатюри статей поєднують фотографії з ілюстрованими концепціями (людина, що стоїть у лабіринті, камін із мішками з грошима). Користувальницький інтерфейс продукту відображається в темному режимі з повною непрозорістю, ширяючи над сторінкою на ледь помітних темних поверхнях - це центральний елемент. Монохромні іконки з 1px штрихами в #2e3038 або #777a88, ніколи не заповнюються фірмовим кольором.
Палітра
Нейтральні
- Bone
#e2e3e9— Основний текст виділений великим шрифтом, докладними мітками даних, стандартний тон тексту в більшості елементів інтерфейсу користувача. - Obsidian
#08080a— Полотно сторінки, фон нижнього колонтитулу, найтемніша поверхня — майже чорна з ледь помітним синім відтінком. - Onyx
#040406— Поверхня картки, додаткове тло — на один крок глибше за сторінку для візуального ефекту. - Carbon
#121317— Підняті панелі, ненав'язлива заливка інтерфейсу користувача - перший помітно більш легкий крок у розвитку Surface Stack - Graphite
#1c1d22— Кордони, роздільники, контейнери для значків, повзунки керування — найтонший відтінок кольору, що визначає структуру. - Slate
#2e3038— Додаткові межі, приглушені лінії ікон, ледь помітні роздільники між блоками контенту.
Друкарня
від 13 до 88px · 9 ступенів
- Ivy Presto — заміна: Playfair Display · зображення 400, 500 · Шрифт із засічками для заголовків та підзаголовків — використовується виключно для заголовків та назв розділів у 28px та вище. Висококонтрастні дидонові штрихи з тонкими засічками створюють відчуття редакційної розкоші; невелика позитивна міжлітерна відстань 0.01em незвичайна і надає шрифту друкованого, схожого на бухгалтерський, вигляд. Цей шрифт із засічками є основною візитною карткою бренду – він відрізняє Slash від усіх інших SaaS-фінтех-компаній, які за замовчуванням використовують геометричний шрифт без засічок.
- Inter — заміна: Inter (self-hosted via Google Fonts) · зображення 300, 400, 500, 600, 700 · UI sans - основний текст, навігація, кнопки, мітки, посилання, поля форм та підзаголовок. На основному тексті використовується шрифт 300 для ненав'язливого другорядного тексту; 500 переважає для тексту із середнім акцентом та міток кнопок; 600 зарезервовано для міток категорій, написаних малими великими літерами. Негативний міжлітерний інтервал зменшується з 2-го (-3-го) і зменшується в міру зменшення розміру, що характерно для масштабування оптичного шрифту Inter.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | простора |
| Базовий крок | 8px |
| Радіус кнопок | 9999px |
| Радіус карток | 10px |
| Тіні | ні — межі замість тіней |
| Між секціями | 160px |
| Ширина сторінки | 1216px |
ІІ збере ваш сайт у стилі Slash і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Modal — Фосфорний термінал у затемненій серверній кімнаті – єдиним джерелом світла є яскраво-зелений колір
- AgentQL — Північне сяйво над нічним терміналом
- GitHub — Космічна командна панель із біолюмінесцентними контрольними точками — темний, атмосферний робочий простір, де єдине зелене свічення вказує шлях уперед
- Doppler — Фіолетове освітлення сховища опівночі. Майже чорне полотно світиться єдиним лавандовим сигналом і зеленим світлом, що підтверджує, кожна поверхня достатньо закруглена, щоб її можна було взяти в руки.
- Basedash — Опівнічний термінал даних із матовим шрифтом. Темна обсерваторія, де метрики світяться фіолетовим та зеленим кольором, заголовки із засічками ширяють над шумом, а білі ґудзики-пігулки – єдині яскраві об'єкти в кімнаті з м'якими чорними поверхнями
- Superwhisper — Північне сяйво розчиняється над північним склом
- Better Stack — Північна консоль SRE
- Langbase — Північне північне сяйво консоль
- Astro — Центр управління польотами в далекому космосі з поодиноким фіолетовим світінням туманності
- Wayfinder — Чорний кіноекран із ледь чутною назвою, що ширяє над живою ілюстрацією. Інтерфейс є регулятор яскравості, а не панель управління
- HashiCorp — Диспетчерська опівночі з фіолетовим неоном — темна технічна поверхня, де шестикутний куб, що світиться, служить єдиним колірним орієнтиром.
- Umbrel — Затишний осередок у нічному серверному — темне приміщення, де єдиний персиковий відблиск вказує на те, що дійсно важливо