# Дизайн-система WealthLedger

Приложение и UI-каталог используют одну визуальную основу: цветовые роли,
типографику, интервалы, радиусы, тени и адаптивные размеры. Общая тема основана
на Mantine; её значения не дублируются отдельно в каталоге.
Поддерживается светлая схема, тёмная тема не заявлена.

## Тема и токены

Опубликованная система включает восемь палитр по десять оттенков: blue, gray,
dark, red, green, yellow, grape и orange; базовые white/black, оттенки
по умолчанию и семантические роли. Общая гарнитура применяется и к заголовкам,
стандартный радиус — средний. Настройки являются доверенной локальной частью
приложения; загрузка внешних или пользовательских токенов не предусмотрена.

| Роль | Цветовая основа | Применение |
| --- | --- | --- |
| canvas | gray.2 | Фон приложения |
| surface | white | Поверхности и формы |
| subtle | gray.0 | Приглушённая поверхность |
| text | dark.7 | Основной текст |
| muted | gray.6 | Вторичный текст |
| border | gray.3 | Граница поверхности |
| primary | blue filled | Основное действие и активная навигация |
| info | blue.6 | Информация |
| positive | green.6 | Положительный результат с текстом или знаком |
| negative | red.6 | Ошибка или отрицательный результат с текстом или знаком |
| warning | yellow.6 | Предупреждение; не мелкий текст на белом |

Цвет не заменяет подпись или знак. Палитра не гарантирует доступный контраст
произвольного сочетания текста и фона. Дополнительные grape/orange и отдельные
оформления карточек сохраняют предметный смысл соответствующего экрана;
они не образуют универсальную финансовую классификацию всей системы.

Общие шкалы основаны на принятых значениях приложения и Mantine 9.5.1.
Обновление библиотеки не заменяет их автоматически. Масштабируемые размеры,
тени и адаптивные границы требуют сохранения единиц и визуальной проверки.
Отдельные градиенты, тени и размеры экранов остаются локальными визуальными
решениями; переход всех существующих значений в общую шкалу не завершён.

Точные значения определены в [токенах приложения](../../frontend/src/shared/theme/tokens.json),
согласованное поведение — в [спецификации дизайн-системы](../../specs/openspec/specs/frontend-design-system/spec.md).
Эта страница объясняет их смысл, не вводя отдельную систему значений.

## Переносимый JSON

Опубликованные токены представлены в собственном формате WealthLedger,
версия 1. Это данные без исполняемого кода и зависимостей от runtime приложения.
Совместимость с DTCG или импортом конкретного инструмента не заявлена.

| Данные | Представление |
| --- | --- |
| Цвета | Hex, палитры оттенков 0–9 и именованные базовые цвета |
| Семантические роли | Ссылка на цвет и оттенок, описание; отсутствие оттенка палитры означает основной оттенок светлой схемы |
| Типографика | Наборы шрифтов, размеры в px, числовые веса и безразмерная высота строки |
| Интервалы и радиусы | Именованные шкалы xs–xl в px и выбранный радиус по умолчанию |
| Тени | Упорядоченные слои: смещения, размытие и растяжение в px, базовый цвет и непрозрачность |
| Адаптивные границы | Именованные размеры xs–xl в em, независимые от масштаба интерфейса |

Перенос в другую систему требует сопоставления единиц, шрифтов, слоёв теней
и семантических ссылок. Само чтение JSON не обеспечивает такой совместимости.
Несовместимое изменение формата требует новой версии; внешняя интеграция,
генератор артефактов и публикация пакета пока не реализованы.

## Общие компоненты

| Представление | Поведение и ограничения |
| --- | --- |
| Пустой результат или ошибка | Заголовок, пояснение и необязательное действие; ошибка объявляется вспомогательным технологиям, кнопка имеет доступное название |
| Загрузка | Доступная область состояния занятости с пояснением и декоративными фигурами без фокуса; структура отражает ожидаемый экран |
| Действия | Основной, вторичный и вспомогательный варианты; состояния выполнения и недоступности |

Общие представления не получают финансовые данные и не управляют
аутентификацией. Состояние выполнения действия отличается от загрузки всей
страницы. При фоновом обновлении доступные данные сохраняются с локальным
индикатором; правила восстановления описаны в
[UI resilience](../architecture/cross-cutting/ui-resilience.md).

Каркас с продуктовой навигацией не входит в заявленный общий набор.
Предметные карточки и композиции представлены в [UI-каталоге](ui-catalog.md).

## Границы доказательств

Каталог использует вымышленные данные и локальные действия без входа,
сохранённого пользовательского состояния и application API. Проверки отделяют
его от исполнения продуктовых запросов. Вид, размеры, фокус и взаимодействия
проверяются в браузере; каталог не доказывает восстановление реального API
или прохождение инвестиционного сценария.