---
name: reference-dashboard-design-artifact
description: Визуальный дизайн проекта — палитра/токены Nocturne (2026-08-14, поверх старого макета room-card/dock-навбар) — сверяться при любой работе над UI
metadata:
  type: reference
---

**Актуальная версия (2026-08-14).** Пользователь принёс новый hi-fi дизайн-хендофф — сгенерирован
внешним дизайн-инструментом («clode design»), лежит в `App/design_handoff_personal_finance/`
(`Личные финансы.dc.html`, `nocturne.css`, `README.md`). Система называется **Nocturne** (тёмная,
mono-accent, `--color-accent:#9184d9`, шрифт Inter в оригинале). Хендофф покрывает 4 экрана:
Дашборд, План на год, Транзакции, Аналитика — из них в проекте на момент разговора реально
существовали только первые два (Транзакции — есть только `TransactionRepository`, без
контроллера/view; Аналитика — не существует вообще).

**Решено с пользователем, что делаем сейчас (см. также [[budget-current-plan]] по фиче):**
1. **Только визуальная система** — токены/палитра/радиусы/тени/шрифт поверх уже существующих
   экранов (Дашборд, Категории, План на год). Экраны Транзакции/Аналитика — не делаем сейчас,
   это отдельный заход (нужен новый бэкенд: контроллеры, агрегирующие запросы для графиков).
2. **Категории остаются отдельной страницей `/categories`** — в хендоффе CRUD статей открывается
   модалкой прямо со страницы «План на год» (кнопка «Статьи»), но пользователь явно попросил не
   переносить, оставить как есть.
3. **Шрифт — не Inter из хендоффа, а SF Pro**, который уже лежит в проекте
   (`App/media/fonts/`, `App/media/css/fonts.css`) — этот файл раньше нигде не подключался,
   подключён в `layout.html` этим же заходом.

**Как перенесено технически** — не копировали HTML хендоффа (там своя `sc-`-шаблонизация чужого
инструмента, не Bicycle), а перетащили только **значения** токенов Nocturne на уже существующие
CSS-переменные проекта в `App/media/css/dashboard.css`, чтобы не трогать разметку/JS:
- `--bg:#161826`, `--surface:#232532`, `--surface-2:#292b31`, `--surface-3:#3f424d`,
  `--ink:#e9e9ed`, `--ink-soft:#cfd3e5`, `--muted:#9397ab`, `--divider` (16% ink) — вместо старой
  чёрно-серой палитры (`--bg:#0b0b0f` и т.д.).
- Новый `--accent:#9184d9` (+ `--accent-tint:#d2cefd` для kicker-подписей типа «Доступно сейчас») —
  единый акцент интерфейса (активный пункт dock, фокус форм, `.btn-primary`). Раньше активный dock
  подсвечивался `--teal` — заменено на `--accent`.
- `--radius-sm/md/lg` (4/8/14px) и `--shadow-card`/`--shadow-pop` (hairline-обводка + мягкая тень —
  фирменная деталь Nocturne) — применены ко всем карточкам/панелям/дропдаунам.
- `--sans`/`--font-heading` — теперь `"SF Pro Text"`/`"SF Pro Display"` вместо системного sans;
  `--font-heading` навешан на заголовки/крупные суммы (`.balance`, `.room-title`,
  `.budget-group-name`, `.section-label` и т.п.).
- Bootstrap-компоненты форм/модалок (`.btn-primary`, `.form-control`, `.form-select`,
  `.form-check-input`, `.modal-content`) — довешаны CSS-переопределения под эту же палитру
  (раньше были дефолтные цвета Bootstrap, не тронутые прошлым заходом).
- **Акцентные цвета per-тип счёта/категории** (`--teal/--green/--purple/--blue/--orange/--pink/
  --red/--amber/--gray`) — **не трогали**, оставлены как были: это уже прямые тёмные цвета вне
  системы токенов (та же логика, что и в самом хендоффе — см. README.md проекта, «разноцветные
  акценты... заданы прямыми oklch(), не входят в токены Nocturne»).
- `App/view/Login/login.html` — **не тронут**, у него свой независимый `<style>` со старой
  палитрой (`--bg:#0b0b0f` и т.п.), не завязан на `dashboard.css`. Не входил в согласованный объём
  этого захода — если понадобится единый вид, надо явно попросить.

**Второй заход того же дня (2026-08-14, позже) — структурная переверстка дашборда.** Первый заход
(только токены) пользователь не увидел как изменение вообще — сравнивал с хендоффом напрямую и
сказал «ничего не поменялось». Урок: перекраска CSS-переменных на тёмном фоне почти незаметна на
глаз, пока сама структура карточек не похожа на макет — токены одни не считаются «применением
дизайна» для пользователя. После явного «хочу узнаваемую картинку из хендоффа» добавлено в
`App/view/Index/index.html` + `App/Controller/IndexController.php` (только с реальными данными, не
фейковыми числами):
- Плашка-дата над шапкой (`.dash-kicker`, день недели + число + месяц) + ряд тегов `.tag`/
  `.tag-outline` (месяц/год; «Бюджет N% потрачено» — реальный факт/план по expense-статьям месяца).
- «Всего по всем счетам» под «Доступно сейчас» (`$total_all` в контроллере — сумма всех не
  архивных RUB-счетов, без фильтра `include_in_total`).
- Подзаголовок типа счёта на карточке (`.room-sub`, «Наличные»/«Банковский счёт»/«Копилка»).
- «Копилки и цели» — кольцо прогресса (SVG `stroke-dasharray`) на основе `GoalRepository::getForUser()`
  (новый метод, JOIN с `accounts`) — рендерится только если у пользователя реально есть `goals`;
  создание/редактирование цели через UI **не реализовано** (нет полей цели в модалке счёта) — это
  просто витрина существующих данных, не полноценная фича.
- Списки «Доходы»/«Бюджет на …» — прогресс-бар план/факт на каждой статье
  (`TransactionRepository::getMonthActualByCategory()`, новый метод — сумма `transactions` за месяц
  по категории, `summa * COALESCE(rate_to_rub,1)`), перерасход по расходам красным.
Проверено вживую (не только `php -l`) — залогинился curl'ом под `mikrit`/`qwerty` (2FA-код-заглушка
`1234`, см. `LoginController::STUB_CODE`) и вытащил реальный HTML `/` — рендерится без ошибок,
новые блоки на месте. Один найденный и исправленный по ходу баг: `GoalRepository::getForUser()`
обращался к `$this->obj_class` (он `private` в `Repository`, не `protected` — недоступен из
наследника) → `ErrorException`; исправлено на прямой `Model::class`.

**Не сделано (следующий заход, если попросят):** экраны Транзакции/Аналитика (нужен новый бэкенд),
единый вид логина, CRUD целей (создание/редактирование — сейчас только чтение), донат/полилиния/
бары в Аналитике, курс валюты и «дельта за месяц» в тегах шапки (нет источника данных —
`Services\CurrencyRate` не реализован, история баланса не хранится).

**How to apply**: при следующей работе над UI — сверяться с актуальными значениями токенов прямо в
`App/media/css/dashboard.css` (это единственный источник истины, не хардкодить цвета в шаблонах),
и с `App/design_handoff_personal_finance/` — если понадобится продолжить перенос (Транзакции/
Аналитика или точная вёрстка карточек).