Authkit
Собор з матового скла опівночі
AuthKit створює естетику нічної презентації продукту: майже чорне полотно з матовими скляними поверхнями, сітка з ледь помітних ліній креслення і текст, що світиться, який здається підсвіченим через скляний шар. Шрифт майже повністю білий на темному тлі, з одним яскравим фіолетовим акцентом як єдиний функціональний елемент — кожна інтерактивна поверхня має м'яку тонку лінію холодного синьо-білого кольору, а не жорстку рамку. Компоненти розташовані на напівпрозорих шарах, накладених один на одного поверх навколишнього свічення, а картки виглядають як скляні пластини, що підсвічуються знизу, а не паперові панелі. Інтервали великі та ритмічні; головний елемент — це єдиний логотип, що підсвічується, у всю ширину сторінки, оточений ширяючими скляними картками, а не традиційне розділене компонування.
Темне полотно, що займає всю ширину, контейнер контенту, центрований по центру, максимальною шириною 1200px. Головний елемент - це один центрований підсвічений логотип ("AuthKit" градієнтним шрифтом) під невеликим написом у вигляді брови, за яким/під яким віялом перекриваються три плаваючі скляні картки з формою авторизації (ліва картка нахилена вліво, центральна картка збільшена до максимального розміру, права картка). Під головним елементом по центру розташований перемикач світлої темної теми. Рядок з функціями є горизонтальною часовою шкалою з 6 іконок з тонкими сполучними лініями між круглими іконками. Ритм розділів: кожен розділ починається з центрованого напису у вигляді брови, обрамленої горизонтальними лініями, що загасають, потім слідує великий центрований заголовок (44-48px), потім один рядок приглушеного основного тексту (16-18px), максимальна ширина ~640px. У розділі «Налаштування» відображається макет вікна браузера з розташованою по центру карткою авторизації, оточеної плаваючими панелями інспектора інтерфейсу користувача (колірні палітри, повзунки радіуса, вибір значка логотипа, текстове поле кнопки, поле фону сторінки), розташованими по кутах хол.
Візуальне оформлення домінують макети форм авторизації, виконані в стилі «скляної морфології» (поля введення електронної пошти/паролю, кнопки входу через соціальні мережі, введення коду без пароля), представлені у вигляді напівпрозорих карток, що плавають на тлі опівнічного полотна. Іконки функцій є монохромними лінійними гліфами в #d1e4fa всередині круглих матових плиток. Ледве помітна сітка креслення (1px ліній в rgba(186,215,247,0.06)) покриває всю сторінку, створюючи атмосферу, а у верхній частині головного елемента світиться ореол прожектора з конічним градієнтом. Жодних фотографій, жодних зображень, що демонструють спосіб життя, жодних скріншотів продукту — продукт САМ є візуальним елементом: поля авторизації, розташовані як скляні прототипи у темній студії.
Палітра
Бренд
- Void Violet
#663af3— Основний колір для кнопки заклику до дії (CTA) – єдиний колірний акцент, який використовується виключно для кнопки «Продовжити/Надіслати» всередині форм авторизації; яскравий фіолетовий колір на тлі майже чорного створює відчуття терміновості, не порушуючи монохромну колірну гаму.
Нейтральні
- Midnight Canvas
#05060f— Фон сторінки, найглибша поверхня картки, заповнення бейджу - майже чорна основа, на якій все інше ширяє. - Steel Plate
#2f343e— Піднята поверхня, кнопки для фантомних/вторинних дій, непомітна панельна підкладка. - Fog Veil
#9da7ba— Основний текст, текст на картці - читаний, але відсунутий на другий план у порівнянні із заголовками. - Moon Mist
#c7d3ea— Основний текст, додаткові позначки, приглушений допоміжний текст - Frost Glow
#d1e4fa— Основний колір заливки для основного тексту та посилань, тексту значка, заливки іконок — передній план за промовчанням. - Ice Highlight
#d8ecf8— Світлий текст на темних поверхнях, інвертовані підписи та висококонтрастні заголовки. Не використовуйте його як основний колір заклику до дії; Градієнт заголовка - плавний перехід зверху вниз від світло-блакитного до ніжно-блакитного, використовується в логотипі AuthKit та ключових заголовках.
Друкарня
від 12 до 48px · 8 ступенів
- Untitled Sans — заміна: Inter · зображення 400, 500, 600, 700 · Основний текст, інтерфейс користувача, кнопки, поля введення, значки, невеликі заголовки - універсальний шрифт для всього функціонального.
- aeonikPro — заміна: Space Grotesk · зображення 400, 500 · Відображення лише заголовків - фірмовий знак "AuthKit", заголовки розділів, основний текст; товщина шрифту 500 при 44-48px надає фірмовому знаку широкий, спокійний вигляд, а не яскравий акцент.
- dotDigital — заміна: JetBrains Mono · зображення 400 · Написи, написані великими літерами («Уявляємо», «Конструкція, що розширюється», «Сяй яскраво») — моноширинні великі літери з розміткою 0.10em служать ненав'язливими роздільниками між основним текстом і заголовком.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | простора |
| Базовий крок | 16px |
| Радіус кнопок | 999px |
| Радіус карток | 16px |
| Тіні | ні — межі замість тіней |
| Між секціями | 120px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Authkit і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Resend — чорний оксамит з фіолетовим неоновим кольором
- Gsap — Анімовані дошки в дизайн-студії. Майже чорна стіна, тепла кремова крейда та п'ять кольорових маркерів — по одному для кожної дисципліни анімації.
- Slash — Опівнічне сховище з позолоченими лініями бухгалтерських книг
- Raycast — Північний командний центр, кораловий неон
- Dimension — робоче місце, освітлене сутінками, з панелями з матового скла
- Modal — Фосфорний термінал у затемненій серверній кімнаті – єдиним джерелом світла є яскраво-зелений колір
- Reflect Notes — Зірковий фіолетовий космос — темна обсерваторія, де ноти ширяють, немов сузір'я, на тлі майже чорної індигової порожнечі.
- LaunchDarkly — Неонова диспетчерська темна кабіна пілота, де фіолетові сигнали пульсують крізь вугільно-чорні панелі.
- Ameba — Диспетчерська опівночі - електричний синій пульс усередині матових скляних панелей.
- AgentQL — Північне сяйво над нічним терміналом
- Neon — Серверна кімната після настання темряви. Глибока темрява, де єдиними джерелами світла є дані та взаємодія між користувачами
- N8n — Двигун управління робочими процесами опівночі - відчуття працюючого в режимі реального часу полотна автоматизації в темній серверній кімнаті, освітленого індикаторами стану та потоками даних