
Dala
сузір'я, що ширяє на чорному оксамиті
Dala є темним простором, де чорні порожнечі зустрічаються з єдиним яскравим фіолетовим акцентом, що переривається бурштиновими іскрами. Друкарня монолітна і невагома — шрифт PPNeueMontreal з зображенням 400 домінує в кожному заголовку у збільшеному масштабі (78–113px) з агресивною негативною міжлітерною відстанню, тому заголовки здаються скоріше скульптурними, ніж інформативними. Візуальним центром є сузір'я крихітних різнокольорових трикутних частинок, що утворюють органічну форму мозку, яка є фірмовим жестом бренду: знання, що візуалізується як розподілений інтелект, а не ієрархічні дані. Макет слід просторому двоколоночному ритму - збільшені заголовки, вирівняні по лівому краю, у поєднанні з великим основним текстом, що ширяють на чистому чорному тлі без панелей, рамок або карток. Компоненти навмисно зведені до своєї найістотнішої форми: одна фіолетова кнопка-таблетка, приховані текстові посилання та текстові блоки великого формату.
Розділи, що займають всю ширину сторінки, розташовані на чисто чорному полотні, максимальна ширина контенту ~1280px по центру. Головний розділ є асиметричним двоколоночним поділом: великий заголовок, вирівняний по лівому краю (113px), з основним текстом і закликом до дії в лівій половині, а візуалізація «мозку з частинок» займає праву половину у величезному масштабі. Наступні розділи чергують двоколоночну композицію (візуальний ліворуч/текст праворуч, потім текст ліворуч/візуальний праворуч), створюючи зигзагоподібний ритм читання. Проміжки між розділами досить великі (60-120px по вертикалі). Жодних карткових сіток, таблиць цін, багатоколоночних блоків з описом функцій — контент розміщується у просторих двоколонкових текстово-візуальних блоках. Навігація є мінімалістичною прозорою верхньою панеллю, без бічної панелі і мега-меню. Щільність розміщення елементів надзвичайно висока - один або два елементи на область перегляду ніколи не перевантажені інформацією.
Візуальне оформлення повністю процедурне та абстрактне – жодних фотографій, окрім командних портретів. Фірмовий візуальний образ - щільна хмара з тисяч крихітних трикутних частинок з контурами, виконаних у повному яскравому спектрі (фіолетові, янтарні, бірюзові, пурпурові, сині), що утворюють органічну форму мозку/нейрону. Це поле частинок анімоване і є одночасно і основним зображенням, і елементом фірмового стилю. Частки, що оточують, з меншою щільністю переміщаються по фону сторінки. Трикутники мають контури, товщину лінії 1-2px, гострі краї, насичені хроматичні кольори - ніколи не у відтінках сірого. Командні портрети відображаються у вигляді закруглених прямокутників (радіус 124px) без рамок або накладень. Жодних скріншотів продуктів, жодних фотографій у стилі лайфстайл, жодних 3D-рендерів — система частинок Є візуальним брендом.
Палітра
Бренд
- Electric Iris
#8052ff— Основні кнопки дій, логотип, фірмові акценти – єдиний насичений фіолетовий колір, що сигналізує про інтерактивність та ідентичність бренду на чорному тлі.
Нейтральні
- Void
#000000— Полотно сторінки, фон розділів, негативний простір — домінуючою поверхнею є чистий чорний колір, а не темно-сірий, що створює порожнечу, що дозволяє хроматичним акцентам вільно розташовуватися. - Bone White
#ffffff— Заголовки, основний текст, заливка іконок, активний стан навігації – єдиний типографічний колір, який забезпечує максимальну ієрархію на чорному тлі. - Ash Gray
#9a9a9a— Приглушений навігаційний текст, напівпрозорий колір посилань, додаткові мітки — ховаються за основним текстом, не стаючи невидимими. - Silver Mist
#bdbdbd— Додатковий текст, інформація на рівні підписів - найбільш тихий і сірий колір, що читається, для підтримки контексту. - Saffron Spark
#ffb829— Виділення тексту, акцентування посилань, привернення уваги за допомогою розділових знаків — теплий жовтий колір на фіолетовому фоні створює хроматичну напругу бренду. - Deep Verdant
#15846e— Вторинна тонування поверхні, градієнтна зупинка логотипу - проявляється як темніший край градієнта бренду і у вигляді ледь помітних акцентних переходів.
Друкарня
від 12 до 113px · 10 ступенів
- PPNeueMontreal — заміна: Inter · зображення 200, 400, 600, 700 · Єдиний шрифт для всіх контекстів інтерфейсу користувача. Для заголовків у розмірах для відображення (78-113px) використовується товщина 400 з міжлітерною відстанню -0.04em - та ж товщина, що й у основного тексту, але великий масштаб створює ієрархію. Товщина 200 (надлегкий шрифт) зарезервована для основного тексту 18px, це фірмове рішення: більшість сайтів AI/SaaS використовують 400 для основного тексту, але Dala зменшує товщину, щоб абзаци виглядали повітряними та неагресивними. Товщина 600 з міжлітерною відстанню 14px, міжлітерною відстанню 0.025em та використанням великих літер використовується для навігації та невеликих заголовків. Використання числа 400 як заголовків 113px, так основного тексту 15px незвичайно — це означає, що бренд покладається на масштаб, а чи не на товщину, створення ієрархії.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 6-18px |
| Радіус кнопок | 24px |
| Радіус карток | 24px |
| Тіні | ні — межі замість тіней |
| Між секціями | 60-120px |
| Ширина сторінки | 1280px |
ІІ збере ваш сайт у стилі Dala і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Linear — інструмент опівнічної точності
- Resend — чорний оксамит з фіолетовим неоновим кольором
- Ciridae — Порожнє приміщення з пульсацією вугілля, що тліє, — майже чорний собор, де єдиним теплим звуком є тонка лінія іржі, а кожна поверхня визначається швидше тонкими лініями, ніж тінню
- Dovetail — Схема креслення під чорним місяцем – ледь помітні лінії графіка, білий шрифт, одна фіолетова іскра
- Neon — Серверна кімната після настання темряви. Глибока темрява, де єдиними джерелами світла є дані та взаємодія між користувачами
- Discord — Ігровий світ прихований за спливаючим вікном чату — кожен розділ є самодостатнім середовищем зі своїм власним освітленням і набором персонажів.
- Aaru — Обсерваторія поля частинок опівночі
- Atlas Card — Опівнічне сховище з єдиним сапфіровим променем - абсолютна чорна гладь, де єдине, що має значення, - це глибокий електричний синій колір
- Midjourney — Біолюмінесцентний термінал у глибоководних районах океану. Глибоководний світ, де інтелект наочно генерує себе в потоках ASCII, а елементи управління виглядають як зразки, що слабо світяться.
- Checkly — Центр управління польотами на дальній орбіті
- Krea — галерея нуар опівночі
- Wope — Wope – інтерфейс фіолетового горизонту. Уявіть собі темний стіл в обсерваторії, з-під скла якого піднімається світло-фіолетовий потік