Authkit

Собор из матового стекла в полночь

AuthKit создает эстетику ночной презентации продукта: почти черный холст с матовыми стеклянными поверхностями, сетка из едва заметных линий чертежа и светящийся текст, который кажется подсвеченным из-за стеклянного слоя. Шрифт почти полностью белый на темном фоне, с одним ярким фиолетовым акцентом в качестве единственного функционального элемента — каждая интерактивная поверхность имеет мягкую тонкую линию холодного сине-белого цвета, а не жесткую рамку. Компоненты расположены на полупрозрачных слоях, наложенных друг на друга поверх окружающего свечения, а карточки выглядят как стеклянные пластины, подсвеченные снизу, а не бумажные панели. Интервалы большие и ритмичные; главный элемент — это единый подсвеченный логотип во всю ширину страницы, окруженный парящими стеклянными карточками, а не традиционная разделенная компоновка.

Темный холст, занимающий всю ширину, контейнер контента, центрированный по центру, максимальной шириной 1200px. Главный элемент — это один центрированный подсвеченный логотип («AuthKit» градиентным шрифтом) под небольшой надписью в виде брови, за которым/под которым веером перекрываются три плавающие стеклянные карточки с формой авторизации (левая карточка наклонена влево, центральная карточка увеличена до максимального размера, правая карточка наклонена вправо). Под главным элементом по центру расположен переключатель светлой/темной темы. Строка с функциями представляет собой горизонтальную временную шкалу из 6 иконок с тонкими соединительными линиями между круглыми иконками. Ритм разделов: каждый раздел начинается с центрированной надписи в виде брови, обрамленной затухающими горизонтальными линиями, затем следует большой центрированный заголовок (44-48px), затем одна строка приглушенного основного текста (16-18px), максимальная ширина ~640px. В разделе «Настройка» отображается макет окна браузера с расположенной по центру карточкой авторизации, окруженной плавающими панелями инспектора пользовательского интерфейса (цветовые палитры, ползунки радиуса, выбор значка логотипа, текстовое поле кнопки, поле фона страницы), расположенными по углам холста, как рабочая область инструментов дизайна.

Визуальное оформление доминируют макеты форм авторизации, выполненные в стиле «стеклянной морфологии» (поля ввода электронной почты/пароля, кнопки входа через социальные сети, ввод кода без пароля), представленные в виде плавающих полупрозрачных карточек на фоне полуночного холста. Иконки функций представляют собой монохромные линейные глифы в #d1e4fa внутри круглых матовых плиток. Едва заметная сетка чертежа (1px линий в rgba(186,215,247,0.06)) покрывает всю страницу, создавая атмосферу, а в верхней части главного элемента светится ореол прожектора с коническим градиентом. Никаких фотографий, никаких изображений, демонстрирующих образ жизни, никаких скриншотов продукта — продукт САМ является визуальным элементом: поля авторизации, расположенные как стеклянные прототипы в темной студии.

Тёмный Чистый SaaS Мягкие градиенты

https://authkit.com

Палитра

Бренд

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-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Authkit

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Authkit и наполнит его

Похожие стили