add brandbook

brandbook/index.html

@@ -2,13 +2,20 @@
 <html lang="ru">
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Вечерний детектив — Брендбук</title><link rel="stylesheet" href="brandbook.css"></head>
 <body><main>
+<section class="page cover" id="cover" aria-labelledby="cover-title">
+<div class="eyebrow"><span>Вечерний детектив</span><span>Фирменный стиль</span></div>
+<img class="cover-logo" src="assets/logos/vertical-color-light-transparent.png" alt="Вечерний детектив">
+<h1 id="cover-title">Брендбук</h1>
+<p class="cover-caption">Логотип · Шрифты · Цвета · Тон общения</p>
+<footer class="folio"><span>ВЕЧЕРНИЙ ДЕТЕКТИВ</span><span>01 / 06</span></footer>
+</section>
 <section class="page" id="logo" aria-labelledby="logo-title">
 <div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>01 / Логотип</span></div>
-<h1 id="logo-title">Логотип и название</h1>
+<h2 id="logo-title">Логотип и название</h2>
 <p class="lead">Три композиции: знак, название справа и название снизу.</p>
 <div class="logo-grid"><figure class="logo-card mark"><a href="assets/logos/mark-color-light-background.png"><img src="assets/logos/mark-color-light-transparent.png" alt="Знак отдельно, светлый фон"></a><figcaption>Знак отдельно · светлый фон</figcaption></figure><figure class="logo-card mark"><a href="assets/logos/mark-color-dark-background.png"><img src="assets/logos/mark-color-dark-transparent.png" alt="Знак отдельно, тёмный фон"></a><figcaption>Знак отдельно · тёмный фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-color-light-background.png"><img src="assets/logos/horizontal-color-light-transparent.png" alt="Название справа, светлый фон"></a><figcaption>Название справа · светлый фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-color-dark-background.png"><img src="assets/logos/horizontal-color-dark-transparent.png" alt="Название справа, тёмный фон"></a><figcaption>Название справа · тёмный фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-color-light-background.png"><img src="assets/logos/vertical-color-light-transparent.png" alt="Название снизу, светлый фон"></a><figcaption>Название снизу · светлый фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-color-dark-background.png"><img src="assets/logos/vertical-color-dark-transparent.png" alt="Название снизу, тёмный фон"></a><figcaption>Название снизу · тёмный фон</figcaption></figure></div><div class="grid2 rule"><div><h3>Светлый фон</h3><p class="small">Чёрное название, золотые акценты.</p></div><div><h3>Тёмный фон</h3><p class="small">Белое название, золотые акценты.</p></div></div>
 <p class="source-note">Используйте готовые композиции из комплекта.</p>
-<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>01 / 04</span></footer></section>
+<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА · ТОН ОБЩЕНИЯ</span><span>02 / 06</span></footer></section>
 <section class="page" id="logo-mono" aria-labelledby="logo-mono-title">
 <div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>01 / Логотип · продолжение</span></div>
 <h2 id="logo-mono-title">Монохром и размещение</h2>
@@ -16,7 +23,7 @@
 <div class="logo-grid"><figure class="logo-card mark"><a href="assets/logos/mark-black-background.png"><img src="assets/logos/mark-black-transparent.png" alt="Знак отдельно, светлый фон"></a><figcaption>Знак отдельно · светлый фон</figcaption></figure><figure class="logo-card mark"><a href="assets/logos/mark-white-background.png"><img src="assets/logos/mark-white-transparent.png" alt="Знак отдельно, тёмный фон"></a><figcaption>Знак отдельно · тёмный фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-black-background.png"><img src="assets/logos/horizontal-black-transparent.png" alt="Название справа, светлый фон"></a><figcaption>Название справа · светлый фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-white-background.png"><img src="assets/logos/horizontal-white-transparent.png" alt="Название справа, тёмный фон"></a><figcaption>Название справа · тёмный фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-black-background.png"><img src="assets/logos/vertical-black-transparent.png" alt="Название снизу, светлый фон"></a><figcaption>Название снизу · светлый фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-white-background.png"><img src="assets/logos/vertical-white-transparent.png" alt="Название снизу, тёмный фон"></a><figcaption>Название снизу · тёмный фон</figcaption></figure></div><div class="grid2 rule"><div><h3>Свободное поле</h3><p class="small">Не меньше ¼ диаметра знака. В готовых файлах поле уже включено.</p></div><div><h3>Размер и контраст</h3><p class="small">Знак — от 48 px. С названием — от 240 px по ширине. Фон спокойный, без пёстрого рисунка.</p></div></div>
 <p class="source-note">Не менять пропорции, цвета и расположение элементов. Не добавлять тени.</p>
 <p class="small"><a href="assets/logos/catalog.html">Все варианты логотипа →</a></p>
-<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>02 / 04</span></footer></section>
+<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА · ТОН ОБЩЕНИЯ</span><span>03 / 06</span></footer></section>
 <section class="page" id="fonts" aria-labelledby="fonts-title">
 <div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>02 / Шрифты</span></div>
 <h2 id="fonts-title">Шрифты</h2>
@@ -35,7 +42,7 @@
 </tbody></table>
 <p class="source-note">Шрифты включены в комплект. Лицензии SIL OFL 1.1: <a href="assets/fonts/Oswald-OFL.txt">Oswald</a>, <a href="assets/fonts/Podkova-OFL.txt">Podkova</a>, <a href="assets/fonts/LICENSE.txt">Noto Sans</a>. Передавайте шрифты вместе с лицензиями.</p>
 
-<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>03 / 04</span></footer>
+<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА · ТОН ОБЩЕНИЯ</span><span>04 / 06</span></footer>
 </section>
 <section class="page" id="colors" aria-labelledby="colors-title">
 <div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>03 / Цвета</span></div>
@@ -49,6 +56,27 @@
 </div>
 <div class="grid2 rule"><div><h3>Служебные цвета</h3><p class="small">Серый — для элементов интерфейса. Цвета статусов сопровождаются текстом.</p></div><div><h3>Контраст</h3><p class="small">Белый на чёрном; чёрный на белом и золотом. Не набирать мелкий текст золотым на белом.</p></div></div>
 <p class="small">Для печати — цветопроба. <a href="README.md">Источники и лицензии →</a></p>
-<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>04 / 04</span></footer>
+<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА · ТОН ОБЩЕНИЯ</span><span>05 / 06</span></footer>
+</section>
+<section class="page" id="voice" aria-labelledby="voice-title">
+<div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>04 / Тон общения</span></div>
+<h2 id="voice-title">Тон общения</h2>
+<p class="lead">Приглашаем в расследование: дружелюбно, с интригой и уважением к игроку.</p>
+<div class="grid2 rule">
+<div><h3>На равных</h3><p>Обращаемся на «вы», со строчной буквы. Поддерживаем команду, не оцениваем способности игроков.</p></div>
+<div><h3>Интрига без спойлеров</h3><p>Даём завязку и повод строить версии. Не раскрываем решения и ключевые улики.</p></div>
+<div><h3>Ясно и по делу</h3><p>Короткие фразы и конкретные действия. Время, место, цена и правила — без загадок.</p></div>
+<div><h3>Детективный характер</h3><p>«Дело», «улика», «версия», «расследование» — к месту. Без пафоса, давления и избытка восклицаний.</p></div>
+</div>
+<table><thead><tr><th>Ситуация</th><th>Как говорим</th></tr></thead><tbody>
+<tr><td>Анонс</td><td>У каждого свидетеля своя версия. Соберите команду и выясните, что произошло.</td></tr>
+<tr><td>Призыв</td><td>Выберите игру и зарегистрируйте команду.</td></tr>
+<tr><td>Подсказка</td><td>Сравните время в показаниях. Все ли детали сходятся?</td></tr>
+<tr><td>Ошибка</td><td>Не удалось отправить ответ. Попробуйте ещё раз.</td></tr>
+<tr><td>Финал</td><td>Дело закрыто. Спасибо за ваши версии и командную работу!</td></tr>
+</tbody></table>
+<div class="grid2 rule"><div><h3>Избегаем</h3><p>«Только гений раскроет это дело!»<br>«Вы опять ошиблись».<br>«Срочно! Последний шанс!!!»</p></div><div><h3>Вместо этого</h3><p>«Внимание к деталям поможет найти ответ».<br>«Попробуйте проверить другую версию».<br>Указываем реальный срок регистрации.</p></div></div>
+<p class="source-note">В анонсах создаём атмосферу. В правилах, оплате и поддержке прежде всего помогаем разобраться.</p>
+<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА · ТОН ОБЩЕНИЯ</span><span>06 / 06</span></footer>
 </section>
 </main></body></html>