HDESIGN CODE

Документ фиксирует канон интерфейса NODE.DC, чтобы не обсуждать одни и те же правила повторно.

Источник цветов

Основной runtime-конфиг цветов: design.config.json
Рабочая web-копия: plane-src/apps/web/design.config.json
В рантайме используются CSS variables:
- --nodedc-accent-rgb
- --nodedc-card-passive-rgb
- --nodedc-card-active-rgb

accent_rgb: акцентный цвет интерфейса.
passive_card_rgb: пассивные карточки.
active_card_rgb: активные карточки и primary CTA в зелёной теме.
Primary/active элементы используют акцентный или active_card_rgb.
Secondary элементы не должны иметь ярких outline и цветных рамок без явной причины.

Внешние outline у контролов запрещены.
Синий browser outline должен быть снят и заменён на нормальный hover/focus surface.
Если нужен контур, он должен быть частью дизайна:
- мягкий glass border
- акцентный border для drag/drop или active-state
Красные технические outline, debug-рамки и случайные browser-box shadow запрещены.

Popup, dropdown, modal, sidebar overlays и settings-карточки используют matte black glass.
База:
- тёмный полупрозрачный фон
- backdrop-filter: blur(...)
- мягкая стеклянная граница
Popup не должны выглядеть просто прозрачными. Если blur не читается, проблема в слое рендера, а не в одном rgba.

Все кнопки без жёсткого outline.
Primary button:
- фон: акцентный или active_card_rgb
- текст: чёрный или очень тёмный, если фон светлый
- hover: более светлая версия того же цвета
Save/update button:
- если это зафиксированный green CTA, текст должен быть контрастным и читаемым
- hover осветляет текущий тон, а не уходит в синий
Secondary button:
- тёмный glass фон
- без border-outline
- hover немного светлее базового surface
Danger button:
- без кислотно-красных рамок
- мягкий danger surface

Все поля ввода, textarea, select, chip-select:
- скруглённые
- без внешних outline
- glass background
- единая вертикальная высота для одного класса контролов
Placeholder и label должны быть читаемы и не прилипать к краям.

Элементы верхней панели центрируются по одной горизонтальной оси.
Активный layout/tool mode выделяется кругом акцентного цвета, не квадратной плашкой.
Кнопки Отображение, Аналитика, Добавить рабочий элемент:
- одинаковая высота
- каноничные радиусы
- нормальные горизонтальные paddings, чтобы текст не лип к краям

Внутренние карточки строятся по симметричным верхним и нижним padding.
Верхняя ось:
- аватар
- имя
- вторичная строка
- action-circle справа должны сидеть на согласованной геометрии
Нижняя ось:
- assignee bubbles
- дата должны быть симметричны верхней

Все dropdown/popup приводятся к единому matte glass канону.
Запрещены:
- квадратные active-box вокруг круглых кнопок
- жёсткие border-outline
- светлый фон, если основной экран тёмный
Search shell внутри popup должен использовать тот же стиль, что и сам popup.

Drag overlay использует акцентный контур.
Delete dropzone:
- без красного технического свечения
- текст локализован
- акцентный outline допустим

Пользовательский UI на русском, если экран русифицирован.
Не оставлять смешанные подписи вида Created at / Updated at / Label / State group, если экран уже на русском.

Новый экран или popup не стилизуется локально “на глаз”.
Сначала используется существующий shared-класс или shared-component.
Если shared-слоя нет, создаётся reusable-класс/компонент и уже через него приводятся все похожие места.
Цель: не точечная покраска одного окна, а единый системный канон.