РАЗДЕЛ // 01

Принципы инженерного брутализма

DESIGN.MD

crop_square Строго нулевой радиус

Все элементы (кнопки, плашки, инпуты, карточки, аватары, тултипы) имеют строго border-radius: 0px !important. Никаких мягких скруглений и эллипсов.

layers Жесткие архитектурные тени

Никаких размытых теней (box-shadow: 0 10px 30px rgba(...) строго запрещены). Допускаются исключительно жесткие плотные смещения: 4px 4px 0 var(--primary-light) или 6px 6px 0 var(--black).

palette Триада контраста

Интерфейс строится на трех базовых цветах: чистый Белый (#FFFFFF), глубокий Черный (#08090C) и настраиваемый Акцент (Мятный #00A884 или Синий #0026E6) с тональной шкалой.

grid_4x4 Реактивная среда (Canvas)

Фон страницы — физическое поле перекрестий (+), упруго откликающееся на движение курсора мыши и динамически окрашивающееся в акцентный цвет.

РАЗДЕЛ // 02

Цветовые токены и тональная шкала

TOKENS

Основной цвет легко переопределяется через CSS-переменную --primary, а также через дата-атрибут [data-theme-accent="..."] на элементе <html> или <body>.

--primary #00A884 Основной акцент

--primary-bright #2CE5C0 Маркеры и ховер

--primary-light #B8F2E6 Жесткие тени (4px/6px)

--primary-soft #E8FBF6 Подложки и фокус

--black #08090C Контуры 2px, заголовки

--white #FFFFFF Холст и карточки

--muted #5E6E6A Технические подписи

CSS TOKENS CONFIGURATION

:root {
  /* Переопределение основного цвета (например, в вашем проекте) */
  --primary: #00A884;         /* Главный акцент */
  --primary-bright: #2CE5C0;  /* Яркий акцент для точек и ховеров */
  --primary-light: #B8F2E6;   /* Смещение теней 4px / 6px */
  --primary-soft: #E8FBF6;    /* Подложки и поля ввода */

  /* Обратная совместимость с id.darkblue.tech */
  --mint: var(--primary);
  --mint-bright: var(--primary-bright);
  --mint-light: var(--primary-light);
  --mint-soft: var(--primary-soft);
}

РАЗДЕЛ // 03

Типографическая шкала

INTER + JETBRAINS MONO

Шрифтовая иерархия

.heading-eyebrow // JETBRAINS MONO 700 12PX

.heading-display // INTER 800 UPPERCASE

.heading-page // INTER 800 PAGE TITLE

.heading-section // JETBRAINS MONO 700 SUBTITLE

.heading-card // INTER 700 CARD TITLE

.mono-tag .mono-tag dark

Inter (400, 500, 600, 700, 800) — основной геометрический гротеск для текста, названий разделов и пространственных заголовков.

The quick brown fox jumps over the lazy dog. 0123456789.

JetBrains Mono (500, 700) — инженерный моноширинный шрифт для лейблов, индексов, бейджей и кода.

SESSION_ID=4f92-a1bc-78e9 // STATUS: 200_OK

HTML USAGE

<span class="heading-eyebrow">СИСТЕМНЫЙ СТАТУС</span>
<h1 class="heading-display">ИНЖЕНЕРНАЯ АРХИТЕКТУРА</h1>
<h2 class="heading-page">Параметры безопасности</h2>
<h5 class="heading-section">СЕССИЯ ПОЛЬЗОВАТЕЛЯ</h5>
<h6 class="heading-card">Персональные данные</h6>
<span class="mono-tag">ACTIVE // 01</span>

РАЗДЕЛ // 04

Кнопки и контролы

BUTTONS

Стили кнопок (Zero Radius, Hard Shadows)

OAuth Провайдеры (из login.html)

HTML BUTTONS

<!-- Основная кнопка -->
<button type="button" class="btn btn-primary">Сохранить изменения</button>

<!-- Вторичная кнопка -->
<button type="button" class="btn btn-outline-secondary">Отмена</button>

<!-- Опасное действие -->
<button type="button" class="btn btn-danger">Удалить аккаунт</button>

<!-- Компактная с иконкой -->
<button type="button" class="btn btn-primary btn-sm">
    <span class="material-symbols-sharp">add</span>
    <span>Создать узел</span>
</button>

РАЗДЕЛ // 05

Карточки и архитектурные блоки

.CARD

Архитектурный контейнер

Плотный контур и акцентный маркер

Шапка карточки окрашена в --black с белым моноширинным заголовком. В правом углу шапки расположен сигнальный квадратный пиксель 8×8px цвета --primary-bright.

Опасная зона

Необратимое действие

Удаление ресурса приведет к немедленной очистке всех связанных сессий и ключей.

HTML CARD STRUCTURE

<div class="card">
    <div class="card-header">
        <h5 class="mb-0 heading-display">Заголовок панели</h5>
    </div>
    <div class="card-body">
        <p class="text-muted small mb-3">Контентное тело карточки с нулевым радиусом и тенью 6px.</p>
        <button type="button" class="btn btn-primary btn-sm">Действие</button>
    </div>
</div>

РАЗДЕЛ // 06

Быстрые действия и компоненты профиля

PROFILE.HTML

Сетка быстрых действий (.profile-quick-actions)

shield

Безопасность

2FA Включена

key_vertical

Passkeys

3 устройства

computer

Сессии

2 активных

link

OAuth

3 связки

Авторизованное приложение (.authorized-app-item)

dns

tunnel.darkblue.tech

https://tunnel.darkblue.tech

Выдан: 2026-10-18 14:20

openid profile email

HTML QUICK ACTION CARD

<div class="profile-quick-actions">
    <div class="card text-center">
        <div class="card-body d-flex flex-column align-items-center">
            <span class="quick-action-icon">
                <span class="material-symbols-sharp">shield</span>
            </span>
            <h5 class="heading-card mt-3 mb-1">Безопасность</h5>
            <p class="card-text small text-muted mb-3">2FA Включена</p>
            <a href="/settings" class="btn btn-sm btn-outline-secondary w-100">Настроить</a>
        </div>
    </div>
</div>

РАЗДЕЛ // 07

Формы и поля ввода

INPUT CONTROLS

Инпуты с моноширинными лейблами и жестким фокусом

Email адрес

Используется для уведомлений и восстановления.

Имя пользователя

Язык интерфейса

Дата рождения

Включить двухфакторное подтверждение при авторизации с новых устройств

HTML FORM CONTROLS

<div class="mb-3">
    <label for="username" class="form-label">ИМЯ ПОЛЬЗОВАТЕЛЯ</label>
    <input type="text" class="form-control" id="username" placeholder="user" required>
    <div class="form-text">Латинские буквы, цифры и дефис.</div>
</div>

<div class="mb-3">
    <label for="lang" class="form-label">ЯЗЫК ИНТЕРФЕЙСА</label>
    <select class="form-select" id="lang">
        <option value="ru">Русский</option>
        <option value="en">English</option>
    </select>
</div>

РАЗДЕЛ // 08

2FA, OTP и сегментированные переключатели

2FA & AUTH

6-значный OTP код

Ввод одноразового кода подтверждения из аутентификатора:

Сегментированный свитчер

Плавное переключение режимов авторизации (TOTP / Backup):

РЕЖИМ: TOTP_APP // ШАГ 30s

HTML OTP & SWITCHER

<!-- 6-значный ввод OTP -->
<div class="otp-digits-row">
    <input type="text" maxlength="1" class="form-control otp-digit">
    <input type="text" maxlength="1" class="form-control otp-digit">
    <input type="text" maxlength="1" class="form-control otp-digit">
    <input type="text" maxlength="1" class="form-control otp-digit">
    <input type="text" maxlength="1" class="form-control otp-digit">
    <input type="text" maxlength="1" class="form-control otp-digit">
</div>

<!-- Двухпозиционный переключатель -->
<div class="twofa-mode-switch">
    <div class="twofa-mode-indicator"></div>
    <button type="button" class="twofa-mode-btn active">TOTP КОД</button>
    <button type="button" class="twofa-mode-btn">РЕЗЕРВНЫЙ КОД</button>
</div>

РАЗДЕЛ // 09

Бейджи, теги и статусы

BADGES

Моноширинные бейджи с контуром 1.5px

PRIMARY ACCENT DARK BADGE INFO SCOPE WARNING STATE CRITICAL ERROR

NODE_ONLINE SESSION_ACTIVE

HTML BADGES

<span class="badge text-bg-primary">АКТИВЕН</span>
<span class="badge text-bg-dark">ADMIN</span>
<span class="badge text-bg-info">SCOPE:PROFILE</span>

РАЗДЕЛ // 10

Алерты и выноски (Callouts)

ALERTS

check_circle УСПЕШНОЕ ДЕЙСТВИЕ: Данные учетной записи успешно обновлены на сервере.

error ОШИБКА АВТОРИЗАЦИИ: Неверный пароль или ключ аутентификации.

info ПОДСКАЗКА: Для активации сквозного шифрования создайте криптографический ключ в хранилище drive.darkblue.tech.

HTML ALERTS

<!-- Акцентный алерт успеха (с левой полосой 10px цвета --primary) -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <span class="material-symbols-sharp me-1">check_circle</span>
    Профиль успешно сохранен.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Алерт ошибки -->
<div class="alert alert-danger" role="alert">
    <span class="material-symbols-sharp me-1">warning</span>
    Требуется подтверждение действия.
</div>

РАЗДЕЛ // 11

Таблицы данных и сессий

DATA GRIDS

Техническая таблица с черной шапкой и зеброй

УСТРОЙСТВО / КЛИЕНТ	IP АДРЕС	ЛОКАЦИЯ	ПОСЛЕДНЯЯ АКТИВНОСТЬ	ДЕЙСТВИЕ
laptop_mac Chrome / macOS (Текущая сессия)	185.143.238.60	Frankfurt, DE	Только что	АКТИВНА
smartphone Safari / iOS	94.25.178.12	Helsinki, FI	2 часа назад
terminal AGY CLI Agent	127.0.0.1	Localhost	Вчера 18:40

HTML TABLE

<table class="table table-striped">
    <thead>
        <tr>
            <th>УСТРОЙСТВО</th>
            <th>IP АДРЕС</th>
            <th>СТАТУС</th>
        </tr>
    </thead>
    <tbody>
        <tr class="session-current">
            <td>MacBook Pro (Текущая)</td>
            <td class="font-monospace">185.143.238.60</td>
            <td><span class="badge text-bg-primary">ONLINE</span></td>
        </tr>
    </tbody>
</table>

РАЗДЕЛ // 12

Аватары, логотипы и медиа-элементы

MEDIA

Квадратные аватары с жесткой тенью и логотип

Размеры аватаров (.profile-avatar-box)

100×100px

70×70px

48×48px

Логотип экосистемы (DESIGN.md Секция 3)

darkblue.tech

6×6 модульная сетка, скос 45°

HTML AVATAR & LOGO

<!-- Квадратная аватарка -->
<img src="/avatar.png" alt="Avatar" class="profile-avatar-box" width="80" height="80">

<!-- Фирменный SVG логотип darkblue.tech -->
<div class="white-square">
  <svg viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
    <polygon points="1,2 2.6,2 3.6,3 1,3" fill="#FFFFFF"/>
    <rect x="0" y="3" width="1" height="2" fill="#FFFFFF"/>
    <rect x="1" y="5" width="2.6" height="1" fill="#FFFFFF"/>
    <rect x="3.6" y="0" width="1" height="5" fill="#FFFFFF"/>
    <rect x="4.6" y="5" width="1" height="1" fill="#FFFFFF"/>
  </svg>
</div>

РАЗДЕЛ // 13

Модальные окна

MODALS

Интерактивные диалоги (Zero Radius, Hard Shadow) 2 ТИПА

АРХИТЕКТУРНЫЙ МАКЕТ РАЗМЕТКИ INLINE PREVIEW

HTML MODAL CODE

<!-- Разметка модального окна -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Заголовок диалога</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Контент модального окна...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary btn-sm">Подтвердить</button>
            </div>
        </div>
    </div>
</div>

<!-- Кнопка вызова -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Открыть окно
</button>

РАЗДЕЛ // 14

Тосты и системные уведомления

4 TYPES + SLIM

Интерактивный запуск тостов

1. Стандартные тосты (4 различимых типа):

2. Slim версии тостов (компактные однострочные баннеры):

Стандартные тосты (Четкая цветовая дифференциация) STANDARD TOASTS

check_circle Профиль и криптографические ключи успешно обновлены на сервере.

gpp_bad Недействительный токен сессии. Повторите процедуру входа.

warning Срок действия ключа Passkey истекает через 3 дня.

info Вход выполнен с нового доверенного IP адреса (185.143.238.60).

Slim версии тостов (.toast-slim) COMPACT NOTIFICATIONS

OK check_circle Файл конфигурации tunnel.darkblue.tech сохранен.

ERR gpp_bad Превышен лимит запросов к Identity Provider API (429).

WARN warning Обнаружена неактивная сессия пользователя: idp-08.

INFO info Подключение к узлу drive.darkblue.tech завершено.

HTML TOAST CODE

<!-- Стандартный тост успеха -->
<div class="toast toast-success show" role="alert">
    <div class="toast-header">
        <span class="toast-header-badge">OK</span>
        <strong class="me-auto">ОПЕРАЦИЯ ВЫПОЛНЕНА</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Данные сохранены.</div>
</div>

<!-- Компактный Slim тост -->
<div class="toast toast-slim toast-error show" role="alert">
    <div class="toast-slim-content">
        <span class="toast-slim-badge">ERR</span>
        <span class="material-symbols-sharp toast-slim-icon">gpp_bad</span>
        <span class="toast-slim-msg">Ошибка подключения к базе.</span>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>

РАЗДЕЛ // 15

Шапка экосистемы и футер-инспектор

LAYOUT

Футер в стиле нижнего инспектора (Footer Bar)

HTML FOOTER

<footer class="footer mt-auto py-3">
    <div class="container text-center">
        <div class="d-flex flex-wrap justify-content-center align-items-center gap-3 mb-2">
            <a href="/terms" class="footer-legal-link">Условия использования</a>
            <span class="footer-legal-divider">•</span>
            <a href="/privacy" class="footer-legal-link">Политика конфиденциальности</a>
        </div>
        <span class="heading-section">darkblue.tech Identity © 2026</span>
    </div>
</footer>

РАЗДЕЛ // 16

Интерактивное поле перекрестий (+)

CANVAS

Физика упругой сетки (Mouse Interaction)

Фон страницы содержит полноэкранный холст <canvas id="field"> с шагом сетки 52px. Каждое перекрестие упруго реагирует на курсор мыши, расходится пружинным алгоритмом и динамически окрашивается в цвета текущей темы (--primary в фокусе, --primary-light в спокойном состоянии).

ШАГ СЕТКИ
52px × 52px

РАДИУС ОТКЛИКА
190px (пружина 0.08)

СГЛАЖИВАНИЕ
Lerp 0.12 (инерция)

Design System & Blueprint