# Визуальные принципы WealthLedger

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

## Семантические роли

| Роль | Цветовая основа | Применение |
| --- | --- | --- |
| 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 и отдельные
оформления карточек сохраняют предметный смысл соответствующего экрана;
они не образуют универсальную финансовую классификацию всей системы.

## Состояния и действия

Основное, вторичное и вспомогательное действия различаются по визуальному
приоритету. Выполнение действия и его недоступность — разные состояния.
Пустой результат и ошибка содержат заголовок, пояснение и действие, когда
оно предусмотрено сценарием. Ошибка объявляется вспомогательным технологиям,
а кнопка имеет доступное название.

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

Финансовые значения сохраняют валюту, знак и различие между нулём и
неизвестной суммой. Предметные представления раскрыты в
[портфеле](../domains/portfolio/overview.md), [операциях](../domains/operations/overview.md)
и [банковских картах](../domains/cards/overview.md).

Согласованная общая основа описана в
[спецификации дизайн-системы](../../specs/openspec/specs/frontend-design-system/spec.md).