7.9 KiB
Дизайн-система 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. Обновление библиотеки не заменяет их автоматически. Масштабируемые размеры, тени и адаптивные границы требуют сохранения единиц и визуальной проверки. Отдельные градиенты, тени и размеры экранов остаются локальными визуальными решениями; переход всех существующих значений в общую шкалу не завершён.
Точные значения определены в токенах приложения, согласованное поведение — в спецификации дизайн-системы. Эта страница объясняет их смысл, не вводя отдельную систему значений.
Переносимый JSON
Опубликованные токены представлены в собственном формате WealthLedger, версия 1. Это данные без исполняемого кода и зависимостей от runtime приложения. Совместимость с DTCG или импортом конкретного инструмента не заявлена.
| Данные | Представление |
|---|---|
| Цвета | Hex, палитры оттенков 0–9 и именованные базовые цвета |
| Семантические роли | Ссылка на цвет и оттенок, описание; отсутствие оттенка палитры означает основной оттенок светлой схемы |
| Типографика | Наборы шрифтов, размеры в px, числовые веса и безразмерная высота строки |
| Интервалы и радиусы | Именованные шкалы xs–xl в px и выбранный радиус по умолчанию |
| Тени | Упорядоченные слои: смещения, размытие и растяжение в px, базовый цвет и непрозрачность |
| Адаптивные границы | Именованные размеры xs–xl в em, независимые от масштаба интерфейса |
Перенос в другую систему требует сопоставления единиц, шрифтов, слоёв теней и семантических ссылок. Само чтение JSON не обеспечивает такой совместимости. Несовместимое изменение формата требует новой версии; внешняя интеграция, генератор артефактов и публикация пакета пока не реализованы.
Общие компоненты
| Представление | Поведение и ограничения |
|---|---|
| Пустой результат или ошибка | Заголовок, пояснение и необязательное действие; ошибка объявляется вспомогательным технологиям, кнопка имеет доступное название |
| Загрузка | Доступная область состояния занятости с пояснением и декоративными фигурами без фокуса; структура отражает ожидаемый экран |
| Действия | Основной, вторичный и вспомогательный варианты; состояния выполнения и недоступности |
Общие представления не получают финансовые данные и не управляют аутентификацией. Состояние выполнения действия отличается от загрузки всей страницы. При фоновом обновлении доступные данные сохраняются с локальным индикатором; правила восстановления описаны в UI resilience.
Каркас с продуктовой навигацией не входит в заявленный общий набор. Предметные карточки и композиции представлены в UI-каталоге.
Границы доказательств
Каталог использует вымышленные данные и локальные действия без входа, сохранённого пользовательского состояния и application API. Проверки отделяют его от исполнения продуктовых запросов. Вид, размеры, фокус и взаимодействия проверяются в браузере; каталог не доказывает восстановление реального API или прохождение инвестиционного сценария.