Files
agents/brandbook/README.md
T
2026-10-31 03:00:25 +07:00

17 KiB
Raw Blame History

Вечерний детектив — брендбук

Единый рабочий брендбук из трёх блоков: «Логотип», «Шрифты», «Цвета». Блок логотипа занимает две страницы, шрифты и цвета — по одной. Страницы белые; в основном документе оставлены только примеры и краткие правила. Технические сведения и источники сохранены в этом описании. В страницах оставлены логотипы, шрифты и палитра. Образцы диплома, бланков и фактур временно убраны из документа; исходные материалы сохранены в комплекте. Используется обновлённый логотип — детектив в шляпе с золотой круглой рамкой и прозрачным внешним фоном. Основная палитра: чёрный #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:

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 — чёрно-белая эмблема для тёмного фона: белая рамка вместо золотой, без инверсии лица и шляпы. При компоновке применяется круглая обрезка внешнего края, чтобы удалить артефакты вокруг рамки. Это двухцветное изображение с непрозрачной внутренней частью, не одноцветная маска для нанесения.