78 lines
17 KiB
Markdown
78 lines
17 KiB
Markdown
# Вечерний детектив — брендбук
|
||
|
||
Единый рабочий брендбук из трёх блоков: «Логотип», «Шрифты», «Цвета». Блок логотипа занимает две страницы, шрифты и цвета — по одной. Страницы белые; в основном документе оставлены только примеры и краткие правила. Технические сведения и источники сохранены в этом описании. В страницах оставлены логотипы, шрифты и палитра. Образцы диплома, бланков и фактур временно убраны из документа; исходные материалы сохранены в комплекте. Используется обновлённый логотип — детектив в шляпе с золотой круглой рамкой и прозрачным внешним фоном. Основная палитра: чёрный #111111, белый #FFFFFF и золотой #FCBF02. Бронза исключена, серый используется только как служебный цвет интерфейса; типографика закреплена за тремя гарнитурами с кириллицей и SIL OFL 1.1: Oswald 600 для логотипа и заголовков, Podkova 600 для других фирменных надписей, Noto Sans 400/700 для основного текста и выделений. Пробковая доска развивает оформление афиш и обложек. Сайт и приложения не изменены.
|
||
|
||
Все изменения вносятся в этот комплект. PDF и `brandbook.zip` перезаписываются; старые версии и отдельные концепции не сохраняются.
|
||
|
||
## Комплект
|
||
|
||
- `brandbook.pdf` — 4 страницы A4 для просмотра и передачи.
|
||
- `index.html`, `brandbook.css` — редактируемый исходник без сборки и сетевых ресурсов.
|
||
- `assets/logos/logo.png` — обновлённая на основе исходной эмблемы растровая версия, 1254 × 1254 px, RGBA. Внешний фон прозрачный, белые области внутри знака сохранены. Изображение обновлено с помощью imagegen.
|
||
- `assets/fonts/Podkova.ttf` — фирменный вариативный шрифт, насыщенности 400–800; `Podkova-OFL.txt` — его лицензия SIL OFL 1.1. Исходный файл Google Fonts скопирован без изменения байтов, с простым локальным именем.
|
||
- `assets/fonts/Oswald.ttf` — вариативный шрифт логотипа и заголовков (200–700), используем 600; `Oswald-OFL.txt` — лицензия. Источник: https://github.com/google/fonts/tree/main/ofl/oswald . Файл скопирован без изменения байтов, с простым локальным именем.
|
||
- `assets/fonts/NotoSans-Regular.ttf` и `NotoSans-Bold.ttf` — основной текст 400 и выделения 700; `LICENSE.txt` и `NOTICES.txt` содержат лицензию OFL 1.1 и сведения авторства. Все три семейства используются в самом брендбуке и вложены в архив.
|
||
- `assets/cork.jpg` — фотография пробковой доски Petr Kratochvil, 1920 × 1280 px, CC0. Источник: https://www.publicdomainpictures.net/en/view-image.php?image=25664&picture=cork-board . Лицензия на странице загрузки: https://www.publicdomainpictures.net/en/free-download.php?id=25664&image=cork-board . Скачано 31.10.2026; исходный JPEG сохранён без изменений. Масштабирование и свет поверх фото задаются CSS.
|
||
- `assets/materials/` — действующие фактуры фронтенда, оригинальный диплом, PDF черновика и правил, их изображения для страницы и снимки живой дизайн-системы.
|
||
- `export.cjs` — экспорт PDF и проверки в Chromium/Electron.
|
||
- `logo-kit.cjs` — воспроизводимая сборка 16 PNG-композиций с названием в локальном Oswald 600 и двух файлов знака с белой рамкой; остальные шесть файлов знака сохраняются. Запускается той же командой Electron, что и экспорт PDF.
|
||
- `assets/logos/catalog.html` — каталог всех PNG с прямыми ссылками. `mark` — знак, `horizontal` — название справа, `vertical` — снизу. `color-light` / `color-dark` — цветные для светлого / тёмного фона; `black` — одноцветный чёрный; `white` — чёрно-белый для тёмного фона, золото заменено белым без инверсии. `transparent` — с альфа-каналом, `background` — с подложкой #F4EDE0 / #111111.
|
||
- `assets/logos/mono-source.png` — исходник монохромного знака, подготовленный imagegen. Его альфа-канал используется для чёрного исполнения; внутренние просветы прозрачны. Это рабочий источник, не дополнительная редакция логотипа.
|
||
|
||
Надпись собирается из локального Oswald 600 в Canvas и включается в готовый PNG. PNG имеет прозрачный внешний фон и подходит для размещения на цветной подложке. Это растровая эмблема, не вектор; для крупной печати потребуется векторная отрисовка.
|
||
|
||
|
||
## Редактирование и экспорт
|
||
|
||
Откройте `index.html` в браузере. Тексты и примеры редактируются в HTML, стили — в CSS. Каждая `.page` — отдельная страница A4. Исходные диплом, бланки и снимки интерфейса доступны в assets/materials; на страницах они не показываются.
|
||
|
||
В Chromium: Печать → Сохранить в PDF; A4, масштаб 100%, поля отсутствуют, фон включён, колонтитулы браузера выключены.
|
||
|
||
Из папки `brandbook/`, используя установленный в соседнем проекте Electron:
|
||
|
||
```sh
|
||
env -u ELECTRON_RUN_AS_NODE ../evening_detective_screen/node_modules/electron/dist/electron --ozone-platform=x11 export.cjs
|
||
pdfinfo brandbook.pdf
|
||
pdftotext -layout brandbook.pdf -
|
||
```
|
||
|
||
При отсутствии соседнего проекта используйте ручную печать в браузере. Просмотр не требует Electron. Экспортёр проверяет загрузку шрифтов и изображений, отсутствие сетевых запросов, 4 HTML-страницы и отсутствие выхода содержимого за поля и границы примеров. После изменений нужен визуальный просмотр PDF.
|
||
|
||
## Проверки и ограничения
|
||
|
||
Проверены три блока и 4 страницы A4, локальные ресурсы и прозрачность PNG эмблемы. Новая основная палитра закреплена в брендбуке; её перенос в `src/assets/base.css` пока не выполнен; текст правил очной игры — с актуальным `GAME_RULES_OFFLINE.md`. Шрифты встроены в PDF.
|
||
|
||
Oswald, Podkova и Noto Sans разрешено использовать, встраивать и распространять по SIL OFL 1.1. При распространении шрифтов сохраняйте соответствующие лицензии и сведения авторства. При передаче файла шрифта сохраняйте `Podkova-OFL.txt` с copyright. Источник: https://github.com/google/fonts/tree/main/ofl/podkova ; файл: https://raw.githubusercontent.com/google/fonts/main/ofl/podkova/Podkova%5Bwght%5D.ttf . Файл `assets/fonts/LICENSE.txt` относится к Noto. Отдельные файлы a_OldTyper и его NOTICE удалены из комплекта.
|
||
|
||
Цветопроба не проводилась. Значения HEX/RGB — экранные; CMYK и Pantone определяются под конкретную типографию и бумагу. В чёрно-белой печати допустим перевод документа целиком в оттенки серого; самостоятельная монохромная версия эмблемы не создавалась.
|
||
|
||
## Источники существующего оформления
|
||
|
||
- `../evening_detective_frontend/docs/DESIGN_SYSTEM.md`, `src/assets/base.css` — палитра, разделение сайта и игры, типографика, правила знака.
|
||
- `src/components/DesignBrand.vue`, `HeaderText.vue`, `MessagePaper.vue`, `BeltBlock.vue`, `MetalPlate.vue`, `GameInputForm.vue` — действующие визуальные компоненты. Файлы `paper.jpg`, `paper_white.jpg`, `belt.png`, `metal.png`, `pin.png`, `input_center.png`, `button.png` скопированы из `src/assets/images/` без изменения.
|
||
- `assets/materials/frontend-site.png` и `frontend-game.png` — снимки локальной страницы `/design-system` с демонстрационными данными (31.10.2026). В живом превью сайта часть действий отображается зелёной; документ фиксирует это как состояние реализации, в текущем коде primary — #FFD43B, новый основной золотой брендбука — #FCBF02. Код фронтенда не исправлялся.
|
||
- `../evening_detective_server/internal/services/game_print_service/assets/diploma.png` — действующий оригинал диплома, копия в комплекте идентична. `diploma.go` вписывает изображение целиком на A4 с центрированием.
|
||
- `../evening_detective_server/internal/services/game_print_service/pdf.go` — параметры шапки, полей, шрифтов, черновика и правил. `service.go` — состав печатного комплекта.
|
||
- `assets/materials/draft.pdf` и `rules.pdf` — готовые файлы из `/home/vladimir/Загрузки/game-4-print-materials(1)/Для игрока/`. Их PNG получены рендерингом первой страницы через `pdftoppm`. Текст `rules.pdf` совпадает с актуальным `../evening_detective_server/docs/GAME_RULES_OFFLINE.md`; отдельный онлайн-формат задаёт `GAME_RULES_ONLINE.md`.
|
||
|
||
Сайт и генераторы пока используют прежний шрифт. Сохранённые исходные PDF черновика и правил, снимки интерфейса и растровый диплом показывают текущие материалы; их текст и встроенная типографика не изменялись. В брендбуке они обозначены как образцы компоновки, а не образцы новой гарнитуры. Замена шрифта в рабочих продуктах требует отдельного внедрения и проверки переносов.
|
||
|
||
Брендбук описывает визуальное оформление и не заменяет канонический текст правил игры. При его изменении обновляются PDF-образец и изображение в этом же комплекте.
|
||
|
||
|
||
## Композиции логотипа
|
||
|
||
Сборка использует знак размером 600 px без увеличения исходника, внешнее поле 150 px (¼ диаметра), расстояние до текста 60 px (10%). Название — Oswald 600 прописными: «ВЕЧЕРНИЙ» над «ДЕТЕКТИВ». Размер верхней строки — 45% нижней; видимая ширина нижней строки — 800 px (1⅓ диаметра знака), промежуток между видимыми границами строк — 48 px (8% диаметра). Размер шрифта подбирается по actualBoundingBox, без растяжения букв. Горизонтальный текст выровнен влево и центрирован по высоте знака; вертикальный — по центру. Цветные варианты сохраняют белую заливку внутри эмблемы; в чёрном одноцветном варианте просветы прозрачны, а в версии для тёмного фона сохранена внутренняя белая заливка. Чёрный — #000000, белый — #FFFFFF. Обычная печать и нанесение требуют проверки пробного отпечатка; PNG не заменяет вектор.
|
||
|
||
Проверка мелкого размера: диаметр отдельного знака 48 px, ширина файла композиции 240 px. Файлы с уже включённым полем не обрезать. Сайт и дипломы не изменялись.
|
||
|
||
Цвет названия в цветном логотипе: #FFFFFF на тёмной подложке, #111111 на светлой. Белый повторяет светлые детали эмблемы; цветной акцент композиции — золотая рамка и линия #FCBF02 в её оттенке. Бронза #BFA07D исключена из фирменной палитры. Оттенки старых фактур и диплома сохранены как часть изображений, а не как основные цвета бренда.
|
||
|
||
Черта в верхней строке: толщина 8 px в обоих вариантах при диаметре эмблемы 600 px, отступ от слова 36 px, выравнивание по середине видимой высоты «ВЕЧЕРНИЙ». В горизонтальном варианте прямая линия заканчивается на правом краю слова «ДЕТЕКТИВ», без изгибов и завитков; в вертикальном варианте симметрично повторяется слева. В монохроме черта совпадает с цветом текста.
|
||
|
||
Горизонтальная композиция читается как лупа: эмблема — стекло, надпись справа — ручка. Под золотой чертой, над словом «ДЕТЕКТИВ», расположен прямой блик ручки толщиной 8 px: короткий штрих 18 px по осевой линии, видимый разрыв 14 px и длинный штрих. Окончания округлые. На тёмной подложке он белый, на светлой — чёрный; замкнутой рамки вокруг текста нет. В вертикальной композиции блика нет.
|
||
|
||
Золотая черта не выступает за правый край текста; внешнее свободное поле — 150 px. Линия не пересекает буквы. Вертикальные варианты и знак отдельно сохранены без изменений.
|
||
|
||
`assets/logos/white-source.png` — чёрно-белая эмблема для тёмного фона: белая рамка вместо золотой, без инверсии лица и шляпы. При компоновке применяется круглая обрезка внешнего края, чтобы удалить артефакты вокруг рамки. Это двухцветное изображение с непрозрачной внутренней частью, не одноцветная маска для нанесения.
|