89 lines
7.9 KiB
Markdown
89 lines
7.9 KiB
Markdown
# Дизайн-система 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
|
|
или прохождение инвестиционного сценария.
|