Дизайн-система · v0.1

Детективный квиз — стайлгайд

Тёмная тема — основная: игра идёт в баре, с телефонов. Нуар живёт в акцентах (бумага документов, штампы, красная нить), интерфейс — функциональный. Контент примеров — «Дело о последнем заезде».

Палитра

Поверхности

Фон приложения
--bg-app
Карточка
--bg-surface
Модал
--bg-elevated
Бумага
--paper
Бумага (старая)
--paper-aged

Акценты

Красная нить
--accent-red
Латунь / баллы
--accent-brass
Штамп
--stamp-red

Состояния

Правильно
--state-correct
Неправильно
--state-wrong
Заблокировано
--state-locked
Таймер: мало
--timer-warn
Таймер: критично
--timer-critical

Типографика

Название дела · display / 40
Дело о последнем заезде
Заголовок экрана · display / 28
Этап 2 — Карта следствия
Заголовок карточки · body bold / 22
Алиса Штерн — владелица жеребца
Основной текст · body / 16
Заполните бланк по каждому подозреваемому: мотив, алиби и где он был в окно 23:30–00:30.
Вторичный · body / 14
Ответ этапа финален — после сдачи бланк изменить нельзя.
Документы и логи · mono / 14
21:47 ГАСАНОВ Т. — вход, конюшня, южные ворота
23:12 ШТЕРН А. — вход, конюшня, южные ворота

Кнопки

Минимальная высота — --tap-target (44px). Основное действие экрана — всегда одно, красное.

Поля и контролы

Укажите время в формате ЧЧ:ММ–ЧЧ:ММ
72 / 300

Сегмент-контрол — алиби (бланк этапа 2)

Тумблер «УВЕРЕН» (ставка этапа 3)

УВЕРЕН: ставка 150 → 300при ошибке — штраф −75

Бейджи этапов и статусов

Этап 1 · Квиз Этап 2 · Карта следствия Этап 3 · Подозреваемый Этап 4 · Реконструкция
Зачтено Не зачтено На проверке Сдано · изменить нельзя Новое Секретно

Карточки улик и документов

Документ (бумага на тёмном столе)

Секретно
Экспертиза · KH-0614/2
Заключение токсикологической экспертизы
В крови обнаружен ксилазин, конц. значительно превышает терапевтическую. Путь введения — пероральный (следы во фляжке). Время смерти: 23:30–00:30.
Пакет: этап 1–2стр. 1 из 1
Журнал · ветаптека
Журнал выдачи препаратов, июнь
12.06 кетопрофен Соболь О. 13.06 ксилазин 50мл Соболь О. 14.06 ██████████ (подчистка)
Пакет: этап 1–2стр. 1 из 1

Улика в списке материалов (полка дела)

ЛОГ
Выгрузка электронных пропусков
таблица · 22:00–01:30
Новое
АУД
Допрос М. Кравец + стенограмма
аудио 1:40 · твист
Этап 4

Карточка подозреваемого (ставка)

АШ
Алиса Штерн
владелица жеребца
МК
Марина Кравец
жена жертвы
ТГ
Тимур Гасанов
жокей

Таймер

Этап 2 · Карта следствия
18:24
Осталось мало времени
04:12
Автосдача черновика
00:41

Пороги: жёлтый < 5 минут, красный с пульсацией < 60 секунд. На экране зала — те же цвета, размер --text-tv-timer.

Тосты

Бланк сданЭтап 2 · 21:38 · изменить нельзя
Осталось 5 минутНезаполненные поля уйдут пустыми
Капитан уже сдал бланкВаше изменение не сохранено
Поступил новый материалСтраховой полис на жеребца — подшит в дело

Артефакты дела · v2 «стол следователя»

Тактильный слой поверх структуры v1 (см. 04-ux-concept.md). Правила: артефакт кликабелен целиком (зона ≥44px), анимация — сахар, не дверь; все состояния читаются в статике. Новые токены: --manila, --manila-deep, --stamp-blue, --pencil, --photo-paper.

Манильская папка — контейнер дела

Дело KH-0614
Дело о последнем заезде
Секретно
Материалы следствия 5 документов · пакет 1

Шнурок с кнопками и «тиснение» — визитная карточка обложки (лобби, экран зала, лендинг). Внутри папки — обычный вертикальный список документов, как в v1.

Бумага-протокол с загнутым углом + «кто читает»

Протокол · KH-0614/1
Осмотр места происшествия — денник №7
Труп мужчины, установлен как КРАВЕЦ В.М. Обнаружен 06:40 в деннике №7. У правой руки — плоская фляжка (коньяк), крышка откручена. Дверь денника не заперта.
М Д К Прочитано

Загнутый угол — чистый CSS (.dogear). Пульсирующая аватарка = игрок держит документ открытым прямо сейчас (джигсо-чтение). Штамп ПРОЧИТАНО — личная отметка, тап-таргет 44px, ставится с анимацией .pressed.

Полароиды подозреваемых со скрепками

АШ
Алиса Штерн
МК
Марина Кравец

Красная скрепка (.clip-important) — командная отметка «важное», синхронизируется на всех телефонах; фильтр полки «⭑ Важное». Наклон — только в витринах (доска, ставка), в списках полки — 0°.

Конверт пакета: запечатан → вскрыт

KH
Пакет 2 · Запечатановскрытие — на этапе 3 · внутри 2 документа
!
Твист · Запечатанофинальный ответ игры · этап 4
Скриншоты переписки…
Пакет 2 · вскрыт 21:142 документа подшиты в дело

Момент интриги: запечатанный конверт с силуэтом виден в папке всю игру. На открытии этапа — свайп по клапану (или тап «Вскрыть»), сургуч трескается, зал рвёт конверты синхронно со звуком на экране зала. Не вскрыл за 10 с — вскрывается сам. Твист-конверт — чёрный.

Кассета — аудио допроса

Аудиозапись · KH-0614/9 · твист
Допрос М. Кравец — сторона А
0:42 / 1:40 стенограмма ниже ↓

Кассета — только «голова» плеера; стенограмма под ней — прежний бумажный блок .transcript из v1 с подсветкой активной реплики. Кнопка play — 44px.

Распечатка переписки — дырки дырокола

Приложение к делу · мессенджер · Т. Гасанов ↔ «Аркан» · 13 июня
Ну что, по Кубку решил? Осенний Марш не должен прийти первым.18:22
Я в деле. Придержу на финишной. Но это последний раз.18:40
Не лезь к Кравецу. Узнает — нам обоим конец.18:44

Формуляр бланка: черновик карандашом → сдано чернилами

Форма Ф-2 · Карта следствияКосвенные улитки
ПодозреваемыйГасанов Т.
Мотивдолги букмекеру, «придержать» лошадь
Алибисломано — пропуски конюшни
Где был
✎ черновик · сохранено 21:32 · вносил Даня
Форма Ф-2 · Карта следствияКосвенные улитки
ПодозреваемыйШтерн А.
Мотивстраховка жеребца ×4, Кравец узнал
Алибисломано — пропуски 23:12–23:41
Сдано · 21:38

Карандаш (--pencil, курсив) = можно изменить; чернила (жирные) + штамп СДАНО = финально. После сдачи read-only выглядит как подписанный документ, а не задизейбленная форма.

Штампы состояний

Прочитано Сдано · 21:38 Зачтено Не зачтено Частично · ½
Зачтено Не зачтено ⚙ зачёл ИИ · 92% ✍ подтвердил ведущий

Резолюция этапа = формуляр + штамп на каждом поле + обязательная пометка источника проверки (ИИ / ведущий). Штамп всегда дублируется текстом и цветом состояния.

Красная нить — мини-доска команды

АШ Штерн ЖУРНАЛ · ВЕТАПТЕКА подчистка 14.06
Доска: тап по документу → тап по подозреваемому = связь. Тап по узелку — разорвать. На этапе 2 связи подставляются в поле «чем подтверждается?» одним тапом.

Аватарки «кто читает» — на тёмном

М Д К пульс = читает прямо сейчас · статичная = отметила «прочитано»