Дизайн Securify

Сложная работа — внутри.
Понятный следующий шаг — перед человеком.

Securify начинается с одного поля и спокойного разговора. Человеку не нужно разбираться в безопасности, чтобы начать защищать свой сайт. Дизайн помогает описать задачу, понять происходящее и принять решение без лишней нагрузки.

Эта система фиксирует принятые стили главной страницы и документации. Это основа для будущего клиентского приложения, а не описание уже реализованного сервиса: сегодняшний чат на главной — локальная демонстрация.

Четыре принципа

Один следующий шаг. В каждом состоянии понятно, что сделать сейчас. Главная предлагает написать агенту. Настройки появляются по мере необходимости.

Спокойствие через ясность. Светлый фон, свободное пространство, простой язык. Мы не пугаем человека красными экранами и не обещаем абсолютную защиту. Объясняем, что известно, что проверяется и что ещё требует внимания.

Доступность по умолчанию. Сервис работает на небольшом экране, с клавиатуры и без анимации. Цвет, иконка и движение не заменяют текстовое объяснение.

Честное состояние. «Сообщение принято», «доступ проверен» и «уязвимость исправлена» — разные результаты. Интерфейс показывает только подтверждённый статус. Демонстрация всегда обозначена до начала взаимодействия.

Визуальный характер

Общий референс главной и документации — Steep: белый фон #FFFFFF, serif-заголовки с весом 400, sans-serif текст и интерфейс. Основное действие near-black #17191C, нейтральные карточки #F2F2F3, мягкие углы 24 px. Персиковый #FBE1D1 используется как редкий редакционный акцент. Контурный щит сопровождает имя Securify.

Для длинных статей сохраняем интерлиньяж 1.8 и ширину текста 720 px. Навигация компактная, с обычным регистром. Код остаётся моноширинным. Правила главной описывают её композицию и анимации.

Состав системы

• Основы: палитра, шрифт, интервалы, границы и движение.
• Компоненты: действия, ввод, сообщения и состояния.
• Тексты и доступность: диалог, ошибки и проверка интерфейса.

Источник правил в коде

Общие CSS-токены находятся в docs/public/design-tokens.css. Тема VitePress импортирует этот файл; сборка главной вставляет его в самостоятельный HTML. Главная задаёт локальные токены Steep в своём CSS; они следуют той же палитре, сохраняя особенности первого экрана.

Что меняем	Где
Палитра, шрифты, интервалы и радиусы	docs/public/design-tokens.css
Документация, навигация и примеры компонентов	docs/.vitepress/theme/style.css
Главная и демонстрация разговора	docs/landing/index.html
Описания правил	docs/design/

Редакция дизайн-системы — 1.0, независимо от версий продукта. Основная тема — светлая. Тёмную тему добавляем только как отдельную проверенную палитру, а не автоматическую инверсию цветов. Новый компонент сначала решает конкретную задачу, затем становится общим правилом, если повторяется в продукте.